diff --git a/docs/components/View.md b/docs/components/View.md
index 51162846..a395dab5 100644
--- a/docs/components/View.md
+++ b/docs/components/View.md
@@ -132,15 +132,15 @@ Controls whether the View can be the target of touch events. The enhanced
 `box-none` is the equivalent of:
 
 ```css
-.box-none { pointer-events: none }
-.box-none * { pointer-events: auto }
+.box-none { pointer-events: none !important; }
+.box-none > * { pointer-events: auto; }
 ```
 
 `box-only` is the equivalent of:
 
 ```css
-.box-only { pointer-events: auto }
-.box-only * { pointer-events: none }
+.box-only { pointer-events: auto !important; }
+.box-only > * { pointer-events: none; }
 ```
 
 **style**: ?style
diff --git a/docs/storybook/components/View/ViewExample.js b/docs/storybook/components/View/ViewExample.js
index 00281419..b70f5dea 100644
--- a/docs/storybook/components/View/ViewExample.js
+++ b/docs/storybook/components/View/ViewExample.js
@@ -1,5 +1,3 @@
-/* eslint-disable react/prefer-es6-class */
-
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
  * All rights reserved.
@@ -23,12 +21,15 @@
  * @flow
  */
 
-import createReactClass from 'create-react-class';
 import React from 'react';
 import { storiesOf } from '@kadira/storybook';
 import UIExplorer from '../../UIExplorer';
 import ViewTransformsExample from './ViewTransformsExample';
-import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
+import { StyleSheet, Text, TouchableHighlight, TouchableWithoutFeedback, View } from 'react-native';
+
+const logger = e => {
+  console.log(e.nativeEvent);
+};
 
 const styles = StyleSheet.create({
   box: {
@@ -55,12 +56,10 @@ const styles = StyleSheet.create({
   }
 });
 
-const ViewBorderStyleExample = createReactClass({
-  getInitialState() {
-    return {
-      showBorder: true
-    };
-  },
+class ViewBorderStyleExample extends React.Component {
+  state = {
+    showBorder: true
+  };
 
   render() {
     return (
@@ -93,19 +92,17 @@ const ViewBorderStyleExample = createReactClass({
         </View>
       </TouchableWithoutFeedback>
     );
-  },
+  }
 
   _handlePress() {
     this.setState({ showBorder: !this.state.showBorder });
   }
-});
+}
 
-const ZIndexExample = createReactClass({
-  getInitialState() {
-    return {
-      flipped: false
-    };
-  },
+class ZIndexExample extends React.Component {
+  state = {
+    flipped: false
+  };
 
   render() {
     const indices = this.state.flipped ? [-1, 0, 1, 2] : [2, 1, 0, -1];
@@ -148,17 +145,17 @@ const ZIndexExample = createReactClass({
         </View>
       </TouchableWithoutFeedback>
     );
-  },
+  }
 
   _handlePress() {
     this.setState({ flipped: !this.state.flipped });
   }
-});
+}
 
 const examples = [
   {
     title: 'Background Color',
-    render: function() {
+    render() {
       return (
         <View style={{ backgroundColor: '#527FE4', padding: 5 }}>
           <Text style={{ fontSize: 11 }}>
@@ -170,7 +167,7 @@ const examples = [
   },
   {
     title: 'Border',
-    render: function() {
+    render() {
       return (
         <View style={{ borderColor: '#527FE4', borderWidth: 5, padding: 10 }}>
           <Text style={{ fontSize: 11 }}>5px blue border</Text>
@@ -180,7 +177,7 @@ const examples = [
   },
   {
     title: 'Padding/Margin',
-    render: function() {
+    render() {
       return (
         <View style={{ borderColor: '#bb0000', borderWidth: 0.5 }}>
           <View style={[styles.box, { padding: 5 }]}>
@@ -203,7 +200,7 @@ const examples = [
   },
   {
     title: 'Border Radius',
-    render: function() {
+    render() {
       return (
         <View style={{ borderWidth: 0.5, borderRadius: 5, padding: 5 }}>
           <Text style={{ fontSize: 11 }}>
@@ -217,19 +214,19 @@ const examples = [
   },
   {
     title: 'Border Style',
-    render: function() {
+    render() {
       return <ViewBorderStyleExample />;
     }
   },
   {
     title: 'Circle with Border Radius',
-    render: function() {
+    render() {
       return <View style={{ borderRadius: 10, borderWidth: 1, width: 20, height: 20 }} />;
     }
   },
   {
     title: 'Overflow',
-    render: function() {
+    render() {
       return (
         <View style={{ flexDirection: 'row' }}>
           <View
@@ -257,7 +254,7 @@ const examples = [
   },
   {
     title: 'Opacity',
-    render: function() {
+    render() {
       return (
         <View>
           <View style={{ opacity: 0 }}><Text>Opacity 0</Text></View>
@@ -273,10 +270,31 @@ const examples = [
   },
   {
     title: 'ZIndex',
-    render: function() {
+    render() {
       return <ZIndexExample />;
     }
   },
+  {
+    title: 'Pointer Events',
+    render() {
+      return (
+        <View pointerEvents="box-none">
+          <View pointerEvents="box-none">
+            <View pointerEvents="none"><Text onPress={logger}>none</Text></View>
+            <TouchableHighlight onPress={logger} pointerEvents="auto">
+              <Text>auto</Text>
+            </TouchableHighlight>
+            <TouchableHighlight onPress={logger} pointerEvents="box-only">
+              <Text>box-only</Text>
+            </TouchableHighlight>
+            <TouchableHighlight onPress={logger} pointerEvents="box-none">
+              <Text>box-none</Text>
+            </TouchableHighlight>
+          </View>
+        </View>
+      );
+    }
+  },
   {
     title: 'Basic shadow',
     render() {
diff --git a/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap b/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap
index f1e9a9a0..b6080033 100644
--- a/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap
+++ b/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap
@@ -16,12 +16,12 @@ button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
 input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
 @keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
 @keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);}100%{-webkit-transform:translateX(400%);transform:translateX(400%);}}
-.rn-pointerEvents-105ug2t{pointer-events:auto;}
-.rn-pointerEvents-12vffkv{pointer-events:none;}
-.rn-pointerEvents-12vffkv *{pointer-events:auto;}
-.rn-pointerEvents-ah5dr5{pointer-events:auto;}
-.rn-pointerEvents-ah5dr5 *{pointer-events:none;}
-.rn-pointerEvents-633pao{pointer-events:none;}
+.rn-pointerEvents-105ug2t{pointer-events:auto !important;}
+.rn-pointerEvents-ah5dr5{pointer-events:auto !important;}
+.rn-pointerEvents-633pao{pointer-events:none !important;}
+.rn-pointerEvents-12vffkv{pointer-events:none !important;}
+.rn-pointerEvents-12vffkv > *{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5 > *{pointer-events:none;}
 </style>
 <style id=\\"react-native-stylesheet\\">
 .rn-bottom-1p0dtai{bottom:0px}
diff --git a/src/apis/StyleSheet/StyleManager.js b/src/apis/StyleSheet/StyleManager.js
index 5fba0020..1c059e11 100644
--- a/src/apis/StyleSheet/StyleManager.js
+++ b/src/apis/StyleSheet/StyleManager.js
@@ -25,13 +25,14 @@ const pointerEvents = {
   none: createClassName('pointerEvents', 'none')
 };
 
+// See #513
 const pointerEventsCss =
-  `.${pointerEvents.auto}{pointer-events:auto;}\n` +
-  `.${pointerEvents.boxNone}{pointer-events:none;}\n` +
-  `.${pointerEvents.boxNone} *{pointer-events:auto;}\n` +
-  `.${pointerEvents.boxOnly}{pointer-events:auto;}\n` +
-  `.${pointerEvents.boxOnly} *{pointer-events:none;}\n` +
-  `.${pointerEvents.none}{pointer-events:none;}`;
+  `.${pointerEvents.auto}{pointer-events:auto !important;}\n` +
+  `.${pointerEvents.boxOnly}{pointer-events:auto !important;}\n` +
+  `.${pointerEvents.none}{pointer-events:none !important;}\n` +
+  `.${pointerEvents.boxNone}{pointer-events:none !important;}\n` +
+  `.${pointerEvents.boxNone} > *{pointer-events:auto;}\n` +
+  `.${pointerEvents.boxOnly} > *{pointer-events:none;}`;
 
 export default class StyleManager {
   constructor() {
diff --git a/src/apis/StyleSheet/__tests__/__snapshots__/StyleManager-test.js.snap b/src/apis/StyleSheet/__tests__/__snapshots__/StyleManager-test.js.snap
index 2017c3e3..29db5612 100644
--- a/src/apis/StyleSheet/__tests__/__snapshots__/StyleManager-test.js.snap
+++ b/src/apis/StyleSheet/__tests__/__snapshots__/StyleManager-test.js.snap
@@ -10,12 +10,12 @@ button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
 input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
 @keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
 @keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);}100%{-webkit-transform:translateX(400%);transform:translateX(400%);}}
-.rn-pointerEvents-105ug2t{pointer-events:auto;}
-.rn-pointerEvents-12vffkv{pointer-events:none;}
-.rn-pointerEvents-12vffkv *{pointer-events:auto;}
-.rn-pointerEvents-ah5dr5{pointer-events:auto;}
-.rn-pointerEvents-ah5dr5 *{pointer-events:none;}
-.rn-pointerEvents-633pao{pointer-events:none;}
+.rn-pointerEvents-105ug2t{pointer-events:auto !important;}
+.rn-pointerEvents-ah5dr5{pointer-events:auto !important;}
+.rn-pointerEvents-633pao{pointer-events:none !important;}
+.rn-pointerEvents-12vffkv{pointer-events:none !important;}
+.rn-pointerEvents-12vffkv > *{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5 > *{pointer-events:none;}
 </style>
 <style id=\\"react-native-stylesheet\\">
 
@@ -30,12 +30,12 @@ button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
 input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
 @keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
 @keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);}100%{-webkit-transform:translateX(400%);transform:translateX(400%);}}
-.rn-pointerEvents-105ug2t{pointer-events:auto;}
-.rn-pointerEvents-12vffkv{pointer-events:none;}
-.rn-pointerEvents-12vffkv *{pointer-events:auto;}
-.rn-pointerEvents-ah5dr5{pointer-events:auto;}
-.rn-pointerEvents-ah5dr5 *{pointer-events:none;}
-.rn-pointerEvents-633pao{pointer-events:none;}
+.rn-pointerEvents-105ug2t{pointer-events:auto !important;}
+.rn-pointerEvents-ah5dr5{pointer-events:auto !important;}
+.rn-pointerEvents-633pao{pointer-events:none !important;}
+.rn-pointerEvents-12vffkv{pointer-events:none !important;}
+.rn-pointerEvents-12vffkv > *{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5 > *{pointer-events:none;}
 </style>
 <style id=\\"react-native-stylesheet\\">
 .rn-width-b8lwoo{width:100px}
diff --git a/src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap b/src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap
index c83d34aa..1d4d83b3 100644
--- a/src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap
+++ b/src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap
@@ -8,12 +8,12 @@ button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
 input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
 @keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
 @keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);}100%{-webkit-transform:translateX(400%);transform:translateX(400%);}}
-.rn-pointerEvents-105ug2t{pointer-events:auto;}
-.rn-pointerEvents-12vffkv{pointer-events:none;}
-.rn-pointerEvents-12vffkv *{pointer-events:auto;}
-.rn-pointerEvents-ah5dr5{pointer-events:auto;}
-.rn-pointerEvents-ah5dr5 *{pointer-events:none;}
-.rn-pointerEvents-633pao{pointer-events:none;}
+.rn-pointerEvents-105ug2t{pointer-events:auto !important;}
+.rn-pointerEvents-ah5dr5{pointer-events:auto !important;}
+.rn-pointerEvents-633pao{pointer-events:none !important;}
+.rn-pointerEvents-12vffkv{pointer-events:none !important;}
+.rn-pointerEvents-12vffkv > *{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5 > *{pointer-events:none;}
 </style>
 <style id=\\"react-native-stylesheet\\">
 .rn-bottom-1p0dtai{bottom:0px}