fix: disabling Touchables if onPress was not set to allow event handl…

…ing in parent components
callstack · Feb 16, 2018 · 7c426f9 · 7c426f9
1 parent c6ae995
commit 7c426f9
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/example/src/ButtonExample.js b/example/src/ButtonExample.js
@@ -30,21 +30,29 @@ class ButtonExample extends React.Component<Props, State> {
     return (
       <View style={[styles.container, { backgroundColor: background }]}>
         <View style={styles.row}>
-          <Button>Simple</Button>
-          <Button primary>Primary</Button>
-          <Button color={Colors.pink500}>Custom</Button>
+          <Button onPress={() => {}}>Simple</Button>
+          <Button primary onPress={() => {}}>
+            Primary
+          </Button>
+          <Button color={Colors.pink500} onPress={() => {}}>
+            Custom
+          </Button>
         </View>
         <View style={styles.row}>
-          <Button raised>Raised</Button>
-          <Button raised primary>
+          <Button raised onPress={() => {}}>
+            Raised
+          </Button>
+          <Button raised primary onPress={() => {}}>
             Primary
           </Button>
-          <Button raised color={Colors.pink500}>
+          <Button raised color={Colors.pink500} onPress={() => {}}>
             Custom
           </Button>
         </View>
         <View style={styles.row}>
-          <Button icon="add-a-photo">Icon</Button>
+          <Button icon="add-a-photo" onPress={() => {}}>
+            Icon
+          </Button>
           <Button
             raised
             primary
@@ -58,18 +66,18 @@ class ButtonExample extends React.Component<Props, State> {
           </Button>
         </View>
         <View style={styles.row}>
-          <Button disabled icon="my-location">
+          <Button disabled icon="my-location" onPress={() => {}}>
             Disabled
           </Button>
-          <Button disabled loading raised>
+          <Button disabled loading raised onPress={() => {}}>
             Loading
           </Button>
         </View>
         <View style={styles.row}>
-          <Button raised icon={uri}>
+          <Button raised icon={uri} onPress={() => {}}>
             Remote image
           </Button>
-          <Button raised icon={source}>
+          <Button raised icon={source} onPress={() => {}}>
             Required asset
           </Button>
           <Button
@@ -80,6 +88,7 @@ class ButtonExample extends React.Component<Props, State> {
               />
             }
             raised
+            onPress={() => {}}
           >
             Custom component
           </Button>

diff --git a/src/components/DrawerItem.js b/src/components/DrawerItem.js
@@ -55,7 +55,6 @@ const DrawerItem = ({
   icon,
   label,
   active,
-  onPress,
   theme,
   ...props
 }: Props) => {
@@ -76,7 +75,7 @@ const DrawerItem = ({
   const fontFamily = theme.fonts.medium;
   const labelMargin = icon ? 32 : 0;
   return (
-    <TouchableRipple {...props} onPress={onPress}>
+    <TouchableRipple {...props}>
       <View style={[styles.wrapper, { backgroundColor }]}>
         {icon && <Icon name={icon} size={24} color={iconColor} />}
         <Text

diff --git a/src/components/TouchableRipple.js b/src/components/TouchableRipple.js
@@ -22,7 +22,11 @@ type Props = {
    */
   background?: Object,
   /**
-   * Function to execute on press.
+   * Whether to prevent interaction with the touchable.
+   */
+  disabled?: boolean,
+  /**
+   * Function to execute on press. If not set, will cause the touchable to be disabled.
    */
   onPress?: ?Function,
   /**
@@ -69,19 +73,23 @@ export default class TouchableRipple extends React.Component<Props, void> {
       style,
       background,
       borderless,
+      disabled: disabledProp,
       rippleColor,
       underlayColor,
       children,
       ...rest
     } = this.props;
 
+    const disabled = disabledProp || !this.props.onPress;
+
     if (
       Platform.OS === 'android' &&
       Platform.Version >= ANDROID_VERSION_LOLLIPOP
     ) {
       return (
         <TouchableNativeFeedback
           {...rest}
+          disabled={disabled}
           background={
             background != null
               ? background
@@ -97,6 +105,7 @@ export default class TouchableRipple extends React.Component<Props, void> {
       /* $FlowFixMe */
       <TouchableHighlight
         {...rest}
+        disabled={disabled}
         style={style}
         underlayColor={
           underlayColor != null