Add ScrollView inside Overlay example

Complex layouts were added to relevant parts in the playground app.

Author: guyca

playground/src/screens/ComplexLayout.js

@@ -28,6 +28,7 @@ class OverlayScreen extends React.Component {
         <Button label='Alert' testID={ALERT_BUTTON} onPress={() => alert('Alert displayed')} />
         <Button label='Show overlay' testID={SHOW_OVERLAY_BTN} onPress={() => this.showOverlay(true)} />
         <Button label='Show touch through overlay' testID={SHOW_TOUCH_THROUGH_OVERLAY_BTN} onPress={() => this.showOverlay(false)} />
+        <Button label='Show overlay with ScrollView' onPress={this.showOverlayWithScrollView} />
         <Button label='Set Root' testID={SET_ROOT_BTN} onPress={this.setRoot} />
       </Root>
     );
@@ -40,20 +41,9 @@ class OverlayScreen extends React.Component {
 
   setRoot = () => Navigation.setRoot({ root: component(Screens.Pushed) })
 
-  // await Navigation.showOverlay({
-  //   component: {
-  //     name: 'navigation.playground.CustomDialog',
-  //     options: {
-  //       layout: {
-  //         componentBackgroundColor: 'transparent'
-  //       },
-  //       overlay: {
-  //         interceptTouchOutside: false
-  //       }
-  //     }
-  //   }
-  // });
-  // });
+  showOverlayWithScrollView = () => Navigation.showOverlay(Screens.ScrollViewOverlay, {
+    layout: { componentBackgroundColor: 'transparent' }
+  });
 }
 
 module.exports = OverlayScreen;

playground/src/screens/OverlayScreen.js

@@ -7,6 +7,7 @@ module.exports = {
   Modal: 'Modal',
   Overlay: 'Overlay',
   OverlayAlert: 'OverlayAlert',
+  ScrollViewOverlay: 'ScrollViewOverlay',
   Lifecycle: 'Lifecycle',
   BackHandler: 'BackHandler',
   BottomTabs: 'BottomTabs',

playground/src/screens/Screens.js

@@ -0,0 +1,68 @@
+const React = require('react');
+const { PureComponent } = require('react');
+const { View, Text, ScrollView, StyleSheet } = require('react-native');
+
+const colors = [
+  '#3182C8',
+  '#00AAAF',
+  '#00A65F',
+  '#E2902B',
+  '#D9644A',
+  '#CF262F',
+  '#8B1079',
+  '#48217B'
+];
+
+class ScrollViewOverlay extends PureComponent {
+
+  render() {
+    return (
+      <View style={styles.root}>
+        <View style={{ height: 200, width: '80%', alignSelf: 'center', flexDirection: 'row' }}>
+          <ScrollView style={styles.scrollView} contentContainerStyle={styles.content}>
+            {colors.map(this.renderRow)}
+          </ScrollView>
+        </View>
+      </View>
+    );
+  }
+
+  renderRow = (color) => <Text key={color} style={[styles.row, { backgroundColor: color }]}>{color}</Text>
+}
+
+const styles = StyleSheet.create({
+  scrollView: {
+    backgroundColor: 'blue'
+  },
+  root: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'flex-end'
+  },
+  row: {
+    height: 40,
+    textAlign: 'center',
+    textAlignVertical: 'center',
+    color: 'white',
+  },
+  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 = ScrollViewOverlay;

playground/src/screens/ScrollViewOverlay.js

@@ -25,6 +25,7 @@ function registerScreens() {
   Navigation.registerComponent(Screens.Lifecycle, () => require('./LifecycleScreen'));
   Navigation.registerComponent(Screens.Overlay, () => require('./OverlayScreen'));
   Navigation.registerComponent(Screens.OverlayAlert, () => require('./OverlayAlert'));
+  Navigation.registerComponent(Screens.ScrollViewOverlay, () => require('./ScrollViewOverlay'));
   Navigation.registerComponent(Screens.RoundButton, () => require('./RoundedButton'));
   Navigation.registerComponent(Screens.ReactTitleView, () => require('./CustomTopBar'));
   Navigation.registerComponent(Screens.EventsScreen, () => require('./StaticEventsScreen'));