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

This reverts commit db24ecd25d.

playground/src/screens/CustomTopBar.js

@@ -1,91 +1,62 @@
 const React = require('react');
-const { PureComponent } = require('react');
-
-const { Text, Button, ScrollView, View, Alert, Platform } = require('react-native');
+const { Component } = require('react');
+const {
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  Text,
+  Alert,
+  Platform
+} = require('react-native');
 const { Navigation } = require('react-native-navigation');
 
-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
-            }
-        });
-    }
+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 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;
+module.exports = CustomTopBar;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignSelf: 'center'
+  },
+  text: {
+    alignSelf: 'center',
+    color: 'black',
+  }
+});