Add SideMenu inside BottomTabs layout for e2e purposes

playground/src/components/Bounds.js

@@ -0,0 +1,14 @@
+const React = require('react');
+const { View } = require('react-native');
+
+module.exports = (props) => {
+  return (
+    <View style={{
+      borderWidth: 0.5,
+      borderColor: 'red',
+      flex: 1
+    }}>
+      {props.children}
+    </View>
+  );
+};

playground/src/screens/ComplexLayout.js

@@ -17,6 +17,7 @@ class ComplexLayout extends Component {
         <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()} />
       </View>
     );
   }
@@ -55,6 +56,61 @@ class ComplexLayout extends Component {
       }
     });
   }
+
+  onSideMenuLayoutInsideBottomTabPressed() {
+    Navigation.dismissAllModals();
+    Navigation.setRoot({
+      root: {
+        bottomTabs: {
+          children: [
+            {
+              stack: {
+                children: [
+                  {
+                    component: {
+                      name: 'navigation.playground.TextScreen',
+                    },
+                  },
+                ],
+                options: {
+                  bottomTab: {
+                    text: 'Stack',
+                    icon: require('../images/one.png'),
+                  },
+                },
+              },
+            },
+            {
+              sideMenu: {
+                left: {
+                  component: {
+                    name: 'navigation.playground.SideMenuScreen',
+                  },
+                },
+                center: {
+                  stack: {
+                    children: [
+                      {
+                        component: {
+                          name: 'navigation.playground.TextScreen',
+                        },
+                      },
+                    ],
+                  },
+                },
+                options: {
+                  bottomTab: {
+                    text: 'SideMenu',
+                    icon: require('../images/two.png'),
+                  },
+                },
+              },
+            },
+           ]
+        }
+      }
+    })
+  }
 }
 
 module.exports = ComplexLayout;

playground/src/screens/TextScreen.js

@@ -5,7 +5,7 @@ const { View, Text, Button, Platform } = require('react-native');
 
 const { Navigation } = require('react-native-navigation');
 const testIDs = require('../testIDs');
-
+const Bounds = require('../components/Bounds');
 class TextScreen extends Component {
   static get options() {
     return {
@@ -21,22 +21,24 @@ class TextScreen extends Component {
 
   render() {
     return (
-      <View style={styles.root}>
-        <Text style={styles.h1} testID={testIDs.CENTERED_TEXT_HEADER}>{this.props.text || 'Text Screen'}</Text>
-        {this.renderTextFromFunctionInProps()}
-        <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
-        <Button title={'Set Tab Badge'} testID={testIDs.SET_TAB_BADGE_BUTTON} onPress={() => this.onClickSetBadge()} />
-        <Button title={'Switch To Tab 2'} testID={testIDs.SWITCH_SECOND_TAB_BUTTON} onPress={() => this.onClickSwitchToTab()} />
-        <Button title={'Switch To Tab 1 by componentID'} testID={testIDs.SWITCH_FIRST_TAB_BUTTON} onPress={() => this.onClickSwitchToTabByComponentID()} />
-        {/* tslint:disable-next-line:max-line-length */}
-        { Platform.OS === 'android' && <Button title='Hide Tab Bar' testID={testIDs.HIDE_BOTTOM_TABS_BUTTON} onPress={() => this.toggleTabBarVisibility(this.props.componentId, false)} /> }
-        { Platform.OS === 'android' && <Button title='Show Tab Bar' testID={testIDs.SHOW_BOTTOM_TABS_BUTTON} onPress={() => this.toggleTabBarVisibility('BottomTabs', true)} /> }
-        <Button title='Hide Tab Bar on Push' testID={testIDs.HIDE_BOTTOM_TABS_ON_PUSH_BUTTON} onPress={() => this.hideTabBarOnPush()} />
-        <Button title='Show Left Side Menu' testID={testIDs.SHOW_LEFT_SIDE_MENU_BUTTON} onPress={() => this.showSideMenu('left')} />
-        <Button title='Show Right Side Menu' testID={testIDs.SHOW_RIGHT_SIDE_MENU_BUTTON} onPress={() => this.showSideMenu('right')} />
-        <Button title='Push' testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
-        <Button title='Pop' testID={testIDs.POP_BUTTON} onPress={this.onClickPop} />
-      </View>
+      <Bounds>
+        <View style={styles.root}>
+          <Text style={styles.h1} testID={testIDs.CENTERED_TEXT_HEADER}>{this.props.text || 'Text Screen'}</Text>
+          {this.renderTextFromFunctionInProps()}
+          <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
+          <Button title={'Set Tab Badge'} testID={testIDs.SET_TAB_BADGE_BUTTON} onPress={() => this.onClickSetBadge()} />
+          <Button title={'Switch To Tab 2'} testID={testIDs.SWITCH_SECOND_TAB_BUTTON} onPress={() => this.onClickSwitchToTab()} />
+          <Button title={'Switch To Tab 1 by componentID'} testID={testIDs.SWITCH_FIRST_TAB_BUTTON} onPress={() => this.onClickSwitchToTabByComponentID()} />
+          {/* tslint:disable-next-line:max-line-length */}
+          { Platform.OS === 'android' && <Button title='Hide Tab Bar' testID={testIDs.HIDE_BOTTOM_TABS_BUTTON} onPress={() => this.toggleTabBarVisibility(this.props.componentId, false)} /> }
+          { Platform.OS === 'android' && <Button title='Show Tab Bar' testID={testIDs.SHOW_BOTTOM_TABS_BUTTON} onPress={() => this.toggleTabBarVisibility('BottomTabs', true)} /> }
+          <Button title='Hide Tab Bar on Push' testID={testIDs.HIDE_BOTTOM_TABS_ON_PUSH_BUTTON} onPress={() => this.hideTabBarOnPush()} />
+          <Button title='Show Left Side Menu' testID={testIDs.SHOW_LEFT_SIDE_MENU_BUTTON} onPress={() => this.showSideMenu('left')} />
+          <Button title='Show Right Side Menu' testID={testIDs.SHOW_RIGHT_SIDE_MENU_BUTTON} onPress={() => this.showSideMenu('right')} />
+          <Button title='Push' testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
+          <Button title='Pop' testID={testIDs.POP_BUTTON} onPress={this.onClickPop} />
+        </View>
+      </Bounds>
     );
   }