[fix] disabled Touchable

src/components/Touchable/TouchableHighlight.js

@@ -31,6 +31,7 @@ var merge = require('../../modules/merge');
 type Event = Object;
 
 var DEFAULT_PROPS = {
+  accessibilityRole: 'button',
   activeOpacity: 0.8,
   underlayColor: 'black'
 };
@@ -234,7 +235,8 @@ var TouchableHighlight = React.createClass({
       <View
         accessible={true}
         accessibilityLabel={this.props.accessibilityLabel}
-        accessibilityRole={this.props.accessibilityRole || this.props.accessibilityTraits || 'button'}
+        accessibilityRole={this.props.accessibilityRole}
+        disabled={this.props.disabled}
         hitSlop={this.props.hitSlop}
         onKeyDown={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressIn) }}
         onKeyPress={(e) => { this._onKeyEnter(e, this.touchableHandlePress) }}
@@ -247,8 +249,12 @@ var TouchableHighlight = React.createClass({
         onResponderRelease={this.touchableHandleResponderRelease}
         onResponderTerminate={this.touchableHandleResponderTerminate}
         ref={UNDERLAY_REF}
-        style={[ styles.root, this.state.underlayStyle ]}
-        tabIndex='0'
+        style={[
+          styles.root,
+          this.props.disabled && styles.disabled,
+          this.state.underlayStyle
+        ]}
+        tabIndex={this.props.disabled ? null : '0'}
         testID={this.props.testID}>
         {React.cloneElement(
           React.Children.only(this.props.children),
@@ -274,6 +280,9 @@ var styles = StyleSheet.create({
   root: {
     cursor: 'pointer',
     userSelect: 'none'
+  },
+  disabled: {
+    cursor: 'default'
   }
 });
 

src/components/Touchable/TouchableOpacity.js

@@ -64,6 +64,7 @@ var TouchableOpacity = React.createClass({
 
   getDefaultProps: function() {
     return {
+      accessibilityRole: 'button',
       activeOpacity: 0.2,
     };
   },
@@ -168,8 +169,14 @@ var TouchableOpacity = React.createClass({
       <Animated.View
         accessible={this.props.accessible !== false}
         accessibilityLabel={this.props.accessibilityLabel}
-        accessibilityRole={this.props.accessibilityRole || 'button'}
-        style={[styles.root, this.props.style, {opacity: this.state.anim}]}
+        accessibilityRole={this.props.accessibilityRole}
+        disabled={this.props.disabled}
+        style={[
+          styles.root,
+          this.props.disabled && styles.disabled,
+          this.props.style,
+          {opacity: this.state.anim}
+        ]}
         testID={this.props.testID}
         onLayout={this.props.onLayout}
         hitSlop={this.props.hitSlop}
@@ -182,7 +189,7 @@ var TouchableOpacity = React.createClass({
         onResponderMove={this.touchableHandleResponderMove}
         onResponderRelease={this.touchableHandleResponderRelease}
         onResponderTerminate={this.touchableHandleResponderTerminate}
-        tabIndex='0'
+        tabIndex={this.props.disabled ? null : '0'}
       >
         {this.props.children}
       </Animated.View>
@@ -194,6 +201,9 @@ var styles = StyleSheet.create({
   root: {
     cursor: 'pointer',
     userSelect: 'none'
+  },
+  disabled: {
+    cursor: 'default'
   }
 });
 

src/components/Touchable/TouchableWithoutFeedback.js

@@ -161,12 +161,22 @@ const TouchableWithoutFeedback = React.createClass({
       children.push(Touchable.renderDebugView({color: 'red', hitSlop: this.props.hitSlop}));
     }
     const style = (Touchable.TOUCH_TARGET_DEBUG && child.type && child.type.displayName === 'Text') ?
-      [styles.root, child.props.style, {color: 'red'}] :
-      [styles.root, child.props.style];
+      [
+        styles.root,
+        this.props.disabled && styles.disabled,
+        child.props.style,
+        {color: 'red'}
+      ] :
+      [
+        styles.root,
+        this.props.disabled && styles.disabled,
+        child.props.style
+      ];
     return (React: any).cloneElement(child, {
       accessible: this.props.accessible !== false,
       accessibilityLabel: this.props.accessibilityLabel,
       accessibilityRole: this.props.accessibilityRole,
+      disabled: this.props.disabled,
       testID: this.props.testID,
       onLayout: this.props.onLayout,
       hitSlop: this.props.hitSlop,
@@ -178,7 +188,7 @@ const TouchableWithoutFeedback = React.createClass({
       onResponderTerminate: this.touchableHandleResponderTerminate,
       style,
       children,
-      tabIndex: '0'
+      tabIndex: this.props.disabled ? null : '0'
     });
   }
 });
@@ -186,6 +196,9 @@ const TouchableWithoutFeedback = React.createClass({
 var styles = StyleSheet.create({
   root: {
     cursor: 'pointer'
+  },
+  disabled: {
+    cursor: 'default'
   }
 });