Add ScrollView inside Overlay example

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

playground/src/screens/ComplexLayout.js

@@ -1,197 +0,0 @@
-const React = require('react');
-const { Component } = require('react');
-
-const { View, Text, Button } = require('react-native');
-
-const { Navigation } = require('react-native-navigation');
-const testIDs = require('../testIDs');
-
-class ComplexLayout extends Component {
-  render() {
-    return (
-      <View style={styles.root}>
-        <Text style={styles.h1} testID={testIDs.CENTERED_TEXT_HEADER}>{this.props.text || 'Complex layout screen'}</Text>
-        <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>
-    );
-  }
-
-  onExternalComponentInStackPressed = () => {
-    Navigation.showModal({
-      stack: {
-        children: [{
-          externalComponent: {
-            name: 'RNNCustomComponent',
-            passProps: {
-              text: 'External component in stack'
-            }
-          }
-        }]
-      }
-    });
-  }
-
-  onExternalComponentInDeepStackPressed = () => {
-    Navigation.showModal({
-      stack: {
-        children: [{
-          component: {
-            name: 'navigation.playground.TextScreen'
-          }
-        },
-        {
-          externalComponent: {
-            name: 'RNNCustomComponent',
-            passProps: {
-              text: 'External component in deep stack'
-            }
-          }
-        }]
-      }
-    });
-  }
-
-  onSideMenuLayoutInsideBottomTabPressed = () => {
-    Navigation.dismissAllModals();
-    Navigation.setRoot({
-      root: {
-        bottomTabs: {
-          children: [
-            {
-              stack: {
-                children: [
-                  {
-                    component: {
-                      name: 'navigation.playground.TextScreen',
-                      options: {
-                        topBar: {
-                          animate: false
-                        }
-                      }
-                    }
-                  }
-                ],
-                options: {
-                  bottomTab: {
-                    text: 'Stack',
-                    icon: require('../images/one.png')
-                  }
-                }
-              }
-            },
-            {
-              sideMenu: {
-                left: {
-                  component: {
-                    name: 'navigation.playground.SideMenuScreen',
-                    options: {
-                      topBar: {
-                        animate: false
-                      }
-                    },
-                    passProps: {
-                      side: 'left'
-                    }
-                  }
-                },
-                center: {
-                  stack: {
-                    children: [
-                      {
-                        component: {
-                          name: 'complexLayout.bottomTabThatOpensSideMenu'
-                        }
-                      }
-                    ]
-                  }
-                },
-                options: {
-                  bottomTab: {
-                    text: 'SideMenu',
-                    icon: require('../images/two.png'),
-                    testID: testIDs.SECOND_TAB_BAR_BUTTON
-                  }
-                }
-              }
-            },
-            {
-              sideMenu: {
-                left: {
-                  component: {
-                    name: 'navigation.playground.SideMenuScreen',
-                    passProps: {
-                      side: 'left'
-                    }
-                  }
-                },
-                center: {
-                  stack: {
-                    children: [
-                      {
-                        component: {
-                          name: 'navigation.playground.FlatListScreen',
-                        }
-                      }
-                    ]
-                  }
-                },
-                options: {
-                  bottomTab: {
-                    text: 'FlatList',
-                    icon: require('../images/three.png'),
-                    testID: testIDs.THIRD_TAB_BAR_BUTTON,
-                  }
-                }
-              }
-            }
-           ]
-        }
-      }
-    });
-  }
-
-  onClickShowOverlayWithScroll = async (interceptTouchOutside) => {
-    await Navigation.showOverlay({
-      component: {
-        name: 'navigation.playground.CustomDialogWithScroll',
-        options: {
-          layout: {
-            componentBackgroundColor: 'transparent'
-          },
-          overlay: {
-            interceptTouchOutside
-          }
-        }
-      }
-    });
-  }
-}
-
-module.exports = ComplexLayout;
-
-const styles = {
-  root: {
-    flexGrow: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#f5fcff'
-  },
-  h1: {
-    fontSize: 24,
-    textAlign: 'center',
-    margin: 10
-  },
-  h2: {
-    fontSize: 12,
-    textAlign: 'center',
-    margin: 10
-  },
-  footer: {
-    fontSize: 10,
-    color: '#888',
-    marginTop: 10
-  }
-};

playground/src/screens/OverlayScreen.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/Screens.js

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

playground/src/screens/ScrollViewOverlay.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/index.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'));