Fix ScrollView not scrollable in Overlay (#4561)

Fixes an issue with ScrollView inside an Overlay. While down events were propagated to the view, move events were consumed by the overlay preventing scroll components from functioning correctly.
wix · Jan 10, 2019 · d3ab1ac · d3ab1ac
1 parent 7a26ea9
commit d3ab1ac
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 74 deletions.
diff --git a/...android/app/src/main/java/com/reactnativenavigation/views/touch/OverlayTouchDelegate.java b/...android/app/src/main/java/com/reactnativenavigation/views/touch/OverlayTouchDelegate.java
@@ -42,11 +42,9 @@ public boolean handleDown(MotionEvent event) {
         TouchLocation location = getTouchLocation(event);
         if (location == TouchLocation.Inside) {
             reactView.dispatchTouchEventToJs(event);
+            return false;
         }
-        if (interceptTouchOutside.isTrue()) {
-            return location == TouchLocation.Inside;
-        }
-        return location == TouchLocation.Outside;
+        return interceptTouchOutside.isFalseOrUndefined();
     }
 
     private TouchLocation getTouchLocation(MotionEvent ev) {

diff --git a/playground/src/app.js b/playground/src/app.js
@@ -11,6 +11,9 @@ if (Platform.OS === 'android') {
           title
         },
         options: {
+          layout: {
+            componentBackgroundColor: 'transparent'
+          },
           overlay: {
             interceptTouchOutside: true
           }

diff --git a/playground/src/screens/ComplexLayout.js b/playground/src/screens/ComplexLayout.js
@@ -14,6 +14,7 @@ class ComplexLayout extends Component {
         <Button title={'External component in stack'} testID={testIDs.EXTERNAL_COMPONENT_IN_STACK} onPress={this.onExternalComponentInStackPressed} />
         <Button title={'External component in deep stack'} testID={testIDs.EXTERNAL_COMPONENT_IN_DEEP_STACK} onPress={this.onExternalComponentInDeepStackPressed} />
         <Button title={'SideMenu layout inside a bottomTab'} testID={testIDs.SIDE_MENU_LAYOUT_INSIDE_BOTTOM_TAB} onPress={this.onSideMenuLayoutInsideBottomTabPressed} />
+        <Button title='Show touch through overlay with scroll' testID={testIDs.SHOW_TOUCH_THROUGH_OVERLAY_SCROLLER} onPress={() => this.onClickShowOverlayWithScroll(true)} />
       </View>
     );
   }
@@ -151,6 +152,22 @@ class ComplexLayout extends Component {
       }
     });
   }
+
+  onClickShowOverlayWithScroll = async (interceptTouchOutside) => {
+    await Navigation.showOverlay({
+      component: {
+        name: 'navigation.playground.CustomDialogWithScroll',
+        options: {
+          layout: {
+            componentBackgroundColor: 'transparent'
+          },
+          overlay: {
+            interceptTouchOutside
+          }
+        }
+      }
+    });
+  }
 }
 
 module.exports = ComplexLayout;

diff --git a/playground/src/screens/OptionsScreen.js b/playground/src/screens/OptionsScreen.js
@@ -133,7 +133,6 @@ class OptionsScreen extends Component {
         <Button title='Custom Transition' testID={testIDs.CUSTOM_TRANSITION_BUTTON} onPress={this.onClickCustomTransition} />
         {Platform.OS === 'android' && <Button title='Hide fab' testID={testIDs.HIDE_FAB} onPress={this.onClickFab} />}
         <Button title='Show overlay' testID={testIDs.SHOW_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(true)} />
-        <Button title='Show touch through overlay with scroll' testID={testIDs.SHOW_TOUCH_THROUGH_OVERLAY_SCROLLER} onPress={() => this.onClickShowOverlayWithScroll(true)} />
         <Button title='Show touch through overlay' testID={testIDs.SHOW_TOUCH_THROUGH_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(false)} />
         <Button title='Push Default Options Screen' testID={testIDs.PUSH_DEFAULT_OPTIONS_BUTTON} onPress={this.onClickPushDefaultOptionsScreen} />
         <Button title='Show TopBar react view' testID={testIDs.SHOW_TOPBAR_REACT_VIEW} onPress={this.onShowTopBarReactView} />
@@ -270,28 +269,17 @@ class OptionsScreen extends Component {
       component: {
         name: 'navigation.playground.CustomDialog',
         options: {
+          layout: {
+            componentBackgroundColor: 'transparent'
+          },
           overlay: {
-            interceptTouchOutside
-          }
-        }
-      }
-    });
-  }
-
-  onClickShowOverlayWithScroll = async (interceptTouchOutside) => {
-    await Navigation.showOverlay({
-      component: {
-        name: 'navigation.playground.CustomDialogWithScroll',
-        options: {
-          overlay: {
-            interceptTouchOutside
+            interceptTouchOutside: false
           }
         }
       }
     });
   }
 
-
   onClickPushDefaultOptionsScreen = () => {
     Navigation.setDefaultOptions({
       topBar: {

diff --git a/playground/src/screens/complexlayouts/CustomDialogWithScroll.js b/playground/src/screens/complexlayouts/CustomDialogWithScroll.js
@@ -1,69 +1,69 @@
 const React = require('react');
 const { PureComponent } = require('react');
 
-const { Text, Button, View, Alert, Platform ,ScrollView} = require('react-native');
+const { Text, Button, View, Alert, Platform, ScrollView, StyleSheet } = require('react-native');
 const { Navigation } = require('react-native-navigation');
 
 const testIDs = require('../../testIDs');
 
 class CustomDialogWithScroll extends PureComponent {
-    static options() {
-        return {
-            statusBarBackgroundColor: 'green'
-        };
-    }
+  static options() {
+    return {
+      statusBarBackgroundColor: 'green'
+    };
+  }
 
-    render() {
-        return (
-            <View style={styles.container}>
-                <ScrollView style={styles.root}>
-                    <View style={{height: 60, backgroundColor: 'red'}}/>
-                    <View style={{height: 60, backgroundColor: 'green'}}/>
-                    <View style={{height: 60, backgroundColor: 'red'}}/>
-                    <View style={{height: 60, backgroundColor: 'green'}}/>
-                    <View style={{height: 60, backgroundColor: 'red'}}/>
-                    <View style={{height: 60, backgroundColor: 'green'}}/>
-                </ScrollView>
-            </View>
-        );
-    }
+  render() {
+    return (
+      <View style={styles.root}>
+        <View style={{ height: 200, width: '80%', alignSelf: 'center', flexDirection: 'row' }}>
+          <ScrollView style={styles.scrollView} contentContainerStyle={styles.content}>
+            <View style={{ height: 60, backgroundColor: 'red' }} />
+            <View style={{ height: 60, backgroundColor: 'green' }} />
+            <View style={{ height: 60, backgroundColor: 'red' }} />
+            <View style={{ height: 60, backgroundColor: 'green' }} />
+            <View style={{ height: 60, backgroundColor: 'red' }} />
+            <View style={{ height: 60, backgroundColor: 'green' }} />
+          </ScrollView>
+        </View>
+      </View>
+    );
+  }
 
-    didDisappear() {
-        if (Platform.OS === 'android') {
-            Alert.alert('Overlay disappeared');
-        }
+  didDisappear() {
+    if (Platform.OS === 'android') {
+      Alert.alert('Overlay disappeared');
     }
+  }
 }
 
-const styles = {
-    root: {
-        width: 400,
-        height: 200,
-    },
-    container: {
-
-        width: 400,
-        height: 200,
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        alignSelf: 'center'
-    },
-    h1: {
-        fontSize: 24,
-        textAlign: 'center',
-        margin: 10
-    },
-    h2: {
-        fontSize: 12,
-        textAlign: 'center',
-        margin: 10
-    },
-    footer: {
-        fontSize: 10,
-        color: '#888',
-        marginTop: 10
-    }
-};
+const styles = StyleSheet.create({
+  scrollView: {
+    backgroundColor: 'blue'
+  },
+  root: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'flex-end'
+  },
+  content: {
+    backgroundColor: 'blue'
+  },
+  h1: {
+    fontSize: 24,
+    textAlign: 'center',
+    margin: 10
+  },
+  h2: {
+    fontSize: 12,
+    textAlign: 'center',
+    margin: 10
+  },
+  footer: {
+    fontSize: 10,
+    color: '#888',
+    marginTop: 10
+  }
+});
 
 module.exports = CustomDialogWithScroll;