Introduce disabling for Touchable* elements

Summary:Introduce a `disabled` property for Touchable* components.

Fix https://github.com/facebook/react-native/issues/2103
Closes https://github.com/facebook/react-native/pull/5931

Differential Revision: D2969790

Pulled By: mkonicek

fb-gh-sync-id: 570a4ff882219f52f2d2ebef3eb73b1df50a0877
shipit-source-id: 570a4ff882219f52f2d2ebef3eb73b1df50a0877

Examples/UIExplorer/TouchableExample.js

@@ -100,6 +100,13 @@ exports.examples = [
    render: function(): ReactElement {
      return <TouchableHitSlop />;
    },
+ }, {
+   title: 'Disabled Touchable*',
+   description: '<Touchable*> components accept disabled prop which prevents ' +
+     'any interaction with component',
+   render: function(): ReactElement {
+     return <TouchableDisabled />;
+   },
  }];
 
 var TextOnPressBox = React.createClass({
@@ -292,6 +299,45 @@ var TouchableHitSlop = React.createClass({
   }
 });
 
+var TouchableDisabled = React.createClass({
+  render: function() {
+    return (
+      <View>
+        <TouchableOpacity disabled={true} style={[styles.row, styles.block]}>
+          <Text style={styles.disabledButton}>Disabled TouchableOpacity</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity disabled={false} style={[styles.row, styles.block]}>
+          <Text style={styles.button}>Enabled TouchableOpacity</Text>
+        </TouchableOpacity>
+
+        <TouchableHighlight
+          activeOpacity={1}
+          disabled={true}
+          animationVelocity={0}
+          underlayColor="rgb(210, 230, 255)"
+          style={[styles.row, styles.block]}
+          onPress={() => console.log('custom THW text - hightlight')}>
+          <Text style={styles.disabledButton}>
+            Disabled TouchableHighlight
+          </Text>
+        </TouchableHighlight>
+
+        <TouchableHighlight
+          activeOpacity={1}
+          animationVelocity={0}
+          underlayColor="rgb(210, 230, 255)"
+          style={[styles.row, styles.block]}
+          onPress={() => console.log('custom THW text - hightlight')}>
+          <Text style={styles.button}>
+            Disabled TouchableHighlight
+          </Text>
+        </TouchableHighlight>
+      </View>
+    );
+  }
+});
+
 var heartImage = {uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small'};
 
 var styles = StyleSheet.create({
@@ -310,9 +356,16 @@ var styles = StyleSheet.create({
   text: {
     fontSize: 16,
   },
+  block: {
+    padding: 10,
+  },
   button: {
     color: '#007AFF',
   },
+  disabledButton: {
+    color: '#007AFF',
+    opacity: 0.5,
+  },
   hitSlopButton: {
     color: 'white',
   },

Libraries/Components/Touchable/Touchable.js

@@ -337,7 +337,7 @@ var TouchableMixin = {
    * Must return true to start the process of `Touchable`.
    */
   touchableHandleStartShouldSetResponder: function() {
-    return true;
+    return !this.props.disabled;
   },
 
   /**

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -44,6 +44,10 @@ var TouchableWithoutFeedback = React.createClass({
       React.PropTypes.oneOf(View.AccessibilityTraits),
       React.PropTypes.arrayOf(React.PropTypes.oneOf(View.AccessibilityTraits)),
     ]),
+    /**
+     * If true, disable all interactions for this component.
+     */
+    disabled: React.PropTypes.bool,
     /**
      * Called when the touch is released, but not if cancelled (e.g. by a scroll
      * that steals the responder lock).