Hit testing now treats views with 0.0 opacity as interactable

Reviewed By: nicklockwood

Differential Revision: D2574937

fb-gh-sync-id: 63629cd61cbd7cab93346b4dd91a32703d4f56e0

Examples/UIExplorer/TransparentHitTestExample.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @flow
+ */
+
+'use strict';
+
+var React = require('react-native');
+var {
+  Text,
+  View,
+  TouchableOpacity,
+} = React;
+
+var TransparentHitTestExample = React.createClass({
+  render: function() {
+    return (
+      <View style={{flex: 1}}>
+        <TouchableOpacity onPress={() => alert('Hi!')}>
+          <Text>HELLO!</Text>
+        </TouchableOpacity>
+
+        <View style={{
+          position: 'absolute',
+          backgroundColor: 'green',
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          opacity: 0.0}} />
+      </View>
+    );
+  },
+});
+
+exports.title = '<TransparentHitTestExample>';
+exports.displayName = 'TransparentHitTestExample';
+exports.description = 'Transparent view receiving touch events';
+exports.examples = [
+  {
+    title: 'TransparentHitTestExample',
+    render(): ReactElement { return <TransparentHitTestExample />; }
+  }
+];

Examples/UIExplorer/UIExplorerList.ios.js

@@ -50,6 +50,7 @@ var COMPONENTS = [
   require('./TextExample.ios'),
   require('./TextInputExample.ios'),
   require('./TouchableExample'),
+  require('./TransparentHitTestExample'),
   require('./ViewExample'),
   require('./WebViewExample'),
 ];