scrollview is not scrollable when using overlay in android (#4554)

scrollview is not scrollable when using overlay in android

playground/src/screens/CustomTopBar.js

@@ -1,62 +1,91 @@
 const React = require('react');
-const { Component } = require('react');
-const {
-  StyleSheet,
-  View,
-  TouchableOpacity,
-  Text,
-  Alert,
-  Platform
-} = require('react-native');
+const { PureComponent } = require('react');
+
+const { Text, Button, ScrollView, View, Alert, Platform } = require('react-native');
 const { Navigation } = require('react-native-navigation');
 
-class CustomTopBar extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {};
-    this.subscription = Navigation.events().bindComponent(this);
-  }
-
-  componentDidAppear() {
-    console.log('RNN', 'CTB.componentDidAppear');
-  }
-
-  componentDidDisappear() {
-    console.log('RNN', `CTB.componentDidDisappear`);
-  }
-
-  componentDidMount() {
-    console.log('RNN', `CTB.componentDidMount`);
-  }
-
-  componentWillUnmount() {
-    console.log('RNN', `CTB.componentWillUnmount`);
-    this.subscription.remove();
-  }
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <TouchableOpacity onPress={() => Alert.alert(this.props.title, 'Thanks for that :)')}>
-          <Text style={styles.text}>Press Me</Text>
-        </TouchableOpacity>
-      </View>
-    );
-  }
+const testIDs = require('../testIDs');
+
+class CustomDialog extends PureComponent {
+    static get 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');
+        }
+    }
+
+    onCLickOk() {
+        Navigation.dismissOverlay(this.props.componentId);
+    }
+
+    onCLickSetRoot() {
+        Navigation.setRoot({
+            root: {
+                component: {
+                    name: 'navigation.playground.TextScreen'
+                }
+            }
+        });
+    }
+
+    onCLickSetInterceptTouch() {
+        Navigation.mergeOptions(this.props.componentId, {
+            overlay: {
+                interceptTouchOutside: false
+            }
+        });
+    }
 }
 
-module.exports = CustomTopBar;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignSelf: 'center'
-  },
-  text: {
-    alignSelf: 'center',
-    color: 'black',
-  }
-});
+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 = CustomDialog;