scroll in overlay not working for android (#4557)

Added overlay with a ScrollView for testing purposes

playground/src/screens/OptionsScreen.js

@@ -133,6 +133,7 @@ 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} />
@@ -277,6 +278,20 @@ class OptionsScreen extends Component {
     });
   }
 
+  onClickShowOverlayWithScroll = async (interceptTouchOutside) => {
+    await Navigation.showOverlay({
+      component: {
+        name: 'navigation.playground.CustomDialogWithScroll',
+        options: {
+          overlay: {
+            interceptTouchOutside
+          }
+        }
+      }
+    });
+  }
+
+
   onClickPushDefaultOptionsScreen = () => {
     Navigation.setDefaultOptions({
       topBar: {

playground/src/screens/complexlayouts/CustomDialogWithScroll.js

@@ -0,0 +1,69 @@
+const React = require('react');
+const { PureComponent } = require('react');
+
+const { Text, Button, View, Alert, Platform ,ScrollView} = require('react-native');
+const { Navigation } = require('react-native-navigation');
+
+const testIDs = require('../../testIDs');
+
+class CustomDialogWithScroll extends PureComponent {
+    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>
+        );
+    }
+
+    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
+    }
+};
+
+module.exports = CustomDialogWithScroll;

playground/src/screens/index.js

@@ -13,6 +13,7 @@ const ScrollViewScreen = require('./ScrollViewScreen');
 const CustomTransitionOrigin = require('./CustomTransitionOrigin');
 const CustomTransitionDestination = require('./CustomTransitionDestination');
 const CustomDialog = require('./CustomDialog');
+const CustomDialogWithScroll = require('./complexlayouts/CustomDialogWithScroll');
 const BandHandlerScreen = require('./BackHandlerScreen');
 const SideMenuScreen = require('./SideMenuScreen');
 const TopTabScreen = require('./TopTabScreen');
@@ -50,6 +51,7 @@ function registerScreens() {
   Navigation.registerComponent(`navigation.playground.OrientationSelectScreen`, () => OrientationSelectScreen);
   Navigation.registerComponent(`navigation.playground.OrientationDetectScreen`, () => OrientationDetectScreen);
   Navigation.registerComponent('navigation.playground.CustomDialog', () => CustomDialog);
+  Navigation.registerComponent('navigation.playground.CustomDialogWithScroll', () => CustomDialogWithScroll);
   Navigation.registerComponent('navigation.playground.BackHandlerScreen', () => BandHandlerScreen);
   Navigation.registerComponent('navigation.playground.SideMenuScreen', () => SideMenuScreen);
   Navigation.registerComponent('navigation.playground.TopTabScreen', () => TopTabScreen);

playground/src/testIDs.js

@@ -59,6 +59,7 @@ module.exports = {
   SECOND_TAB_BAR_BUTTON: `SECOND_TAB_BAR_BUTTON`,
   THIRD_TAB_BAR_BUTTON: `THIRD_TAB_BAR_BUTTON`,
   SHOW_OVERLAY_BUTTON: `SHOW_OVERLAY_BUTTON`,
+  SHOW_TOUCH_THROUGH_OVERLAY_SCROLLER: `SHOW_TOUCH_THROUGH_OVERLAY_SCROLLER`,
   SHOW_TOUCH_THROUGH_OVERLAY_BUTTON: `SHOW_TOUCH_THROUGH_OVERLAY_BUTTON`,
   OK_BUTTON: `OK_BUTTON`,
   MODAL_WITH_STACK_BUTTON: `MODAL_WITH_STACK_BUTTON`,