[fix] Touchable to avoid touch delay

According to MDN, "touch-action:manipulation" enables "…panning and
pinch zoom gestures, but disables additional non-standard gestures such
as double-tap to zoom. Disabling double-tap to zoom removes the need for
browsers to delay the generation of click events when the user taps the
screen."

src/components/Touchable/TouchableHighlight.js

@@ -263,7 +263,7 @@ const TouchableHighlight = createReactClass({
         onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest}
         onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
         ref={this._setUnderlayRef}
-        style={[styles.root, this.props.disabled && styles.disabled, this.state.underlayStyle]}
+        style={[styles.root, !this.props.disabled && styles.actionable, this.state.underlayStyle]}
       >
         {React.cloneElement(React.Children.only(this.props.children), {
           ref: this._setChildRef
@@ -283,11 +283,11 @@ const INACTIVE_UNDERLAY_PROPS = {
 
 const styles = StyleSheet.create({
   root: {
-    cursor: 'pointer',
     userSelect: 'none'
   },
-  disabled: {
+  actionable: {
-    cursor: 'default'
+    cursor: 'pointer',
+    touchAction: 'manipulate'
   }
 });
 

src/components/Touchable/TouchableOpacity.js

@@ -187,7 +187,7 @@ const TouchableOpacity = createReactClass({
         onResponderTerminate={this.touchableHandleResponderTerminate}
         onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest}
         onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
-        style={[styles.root, this.props.disabled && styles.disabled, this.props.style]}
+        style={[styles.root, !this.props.disabled && styles.actionable, this.props.style]}
       >
         {this.props.children}
         {Touchable.renderDebugView({ color: 'blue', hitSlop: this.props.hitSlop })}
@@ -198,13 +198,13 @@ const TouchableOpacity = createReactClass({
 
 const styles = StyleSheet.create({
   root: {
-    cursor: 'pointer',
     transitionProperty: 'opacity',
     transitionDuration: '0.15s',
     userSelect: 'none'
   },
-  disabled: {
+  actionable: {
-    cursor: 'default'
+    cursor: 'pointer',
+    touchAction: 'manipulate'
   }
 });
 

src/components/Touchable/TouchableWithoutFeedback.js

@@ -179,8 +179,8 @@ const TouchableWithoutFeedback = createReactClass({
     }
     const style =
       Touchable.TOUCH_TARGET_DEBUG && child.type && child.type.displayName === 'Text'
-        ? [styles.root, this.props.disabled && styles.disabled, child.props.style, { color: 'red' }]
+        ? [!this.props.disabled && styles.actionable, child.props.style, { color: 'red' }]
-        : [styles.root, this.props.disabled && styles.disabled, child.props.style];
+        : [!this.props.disabled && styles.actionable, child.props.style];
     return (React: any).cloneElement(child, {
       ...other,
       accessible: this.props.accessible !== false,
@@ -199,11 +199,9 @@ const TouchableWithoutFeedback = createReactClass({
 });
 
 const styles = StyleSheet.create({
-  root: {
+  actionable: {
-    cursor: 'pointer'
+    cursor: 'pointer',
-  },
+    touchAction: 'manipulate'
-  disabled: {
-    cursor: 'default'
   }
 });