From 7c426f9efc3561e5b1f36b137621228664f179dc Mon Sep 17 00:00:00 2001
From: "K. P. Sroka" <kpsroka@users.noreply.github.com>
Date: Fri, 16 Feb 2018 12:36:01 +0100
Subject: [PATCH] fix: disabling Touchables if onPress was not set to allow
 event handling in parent components

---
 example/src/ButtonExample.js      | 31 ++++++++++++++++++++-----------
 src/components/DrawerItem.js      |  3 +--
 src/components/TouchableRipple.js | 11 ++++++++++-
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/example/src/ButtonExample.js b/example/src/ButtonExample.js
index 2e7e3aa019..efc8ede4f3 100644
--- 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
index 8db591ab11..ab28181cd1 100644
--- 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
index a22a42ded2..b69865d3be 100644
--- 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,12 +73,15 @@ 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
@@ -82,6 +89,7 @@ export default class TouchableRipple extends React.Component<Props, void> {
       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