Browse Source

Add SideMenu inside BottomTabs layout for e2e purposes

Guy Carmeli 6 years ago
parent
commit
eb2975e240

+ 14
- 0
playground/src/components/Bounds.js View File

@@ -0,0 +1,14 @@
1
+const React = require('react');
2
+const { View } = require('react-native');
3
+
4
+module.exports = (props) => {
5
+  return (
6
+    <View style={{
7
+      borderWidth: 0.5,
8
+      borderColor: 'red',
9
+      flex: 1
10
+    }}>
11
+      {props.children}
12
+    </View>
13
+  );
14
+};

+ 56
- 0
playground/src/screens/ComplexLayout.js View File

@@ -17,6 +17,7 @@ class ComplexLayout extends Component {
17 17
         <Text style={styles.h1} testID={testIDs.CENTERED_TEXT_HEADER}>{this.props.text || 'Complex layout screen'}</Text>
18 18
         <Button title={'External component in stack'} testID={testIDs.EXTERNAL_COMPONENT_IN_STACK} onPress={() => this.onExternalComponentInStackPressed()} />
19 19
         <Button title={'External component in deep stack'} testID={testIDs.EXTERNAL_COMPONENT_IN_DEEP_STACK} onPress={() => this.onExternalComponentInDeepStackPressed()} />
20
+        <Button title={'Sidemenu layout inside a bottomTab'} testID={testIDs.SIDE_MENU_LAYOUT_INSIDE_BOTTOM_TAB} onPress={() => this.onSideMenuLayoutInsideBottomTabPressed()} />
20 21
       </View>
21 22
     );
22 23
   }
@@ -55,6 +56,61 @@ class ComplexLayout extends Component {
55 56
       }
56 57
     });
57 58
   }
59
+
60
+  onSideMenuLayoutInsideBottomTabPressed() {
61
+    Navigation.dismissAllModals();
62
+    Navigation.setRoot({
63
+      root: {
64
+        bottomTabs: {
65
+          children: [
66
+            {
67
+              stack: {
68
+                children: [
69
+                  {
70
+                    component: {
71
+                      name: 'navigation.playground.TextScreen',
72
+                    },
73
+                  },
74
+                ],
75
+                options: {
76
+                  bottomTab: {
77
+                    text: 'Stack',
78
+                    icon: require('../images/one.png'),
79
+                  },
80
+                },
81
+              },
82
+            },
83
+            {
84
+              sideMenu: {
85
+                left: {
86
+                  component: {
87
+                    name: 'navigation.playground.SideMenuScreen',
88
+                  },
89
+                },
90
+                center: {
91
+                  stack: {
92
+                    children: [
93
+                      {
94
+                        component: {
95
+                          name: 'navigation.playground.TextScreen',
96
+                        },
97
+                      },
98
+                    ],
99
+                  },
100
+                },
101
+                options: {
102
+                  bottomTab: {
103
+                    text: 'SideMenu',
104
+                    icon: require('../images/two.png'),
105
+                  },
106
+                },
107
+              },
108
+            },
109
+           ]
110
+        }
111
+      }
112
+    })
113
+  }
58 114
 }
59 115
 
60 116
 module.exports = ComplexLayout;

+ 19
- 17
playground/src/screens/TextScreen.js View File

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