More work on SideMenu inside BottomTabs screen before adding e2e

lib/android/app/src/main/java/com/reactnativenavigation/parse/TopBarBackgroundOptions.java

@@ -1,5 +1,7 @@
 package com.reactnativenavigation.parse;
 
+import android.graphics.Color;
+
 import com.reactnativenavigation.parse.params.Colour;
 import com.reactnativenavigation.parse.params.NullColor;
 import com.reactnativenavigation.parse.parsers.ColorParser;
@@ -15,7 +17,7 @@ public class TopBarBackgroundOptions {
         options.component = Component.parse(json.optJSONObject("component"));
 
         if (options.component.hasValue()) {
-            options.color = new Colour(android.graphics.Color.TRANSPARENT);
+            options.color = new Colour(Color.TRANSPARENT);
         }
 
         return options;

lib/android/app/src/main/java/com/reactnativenavigation/views/topbar/TopBar.java

@@ -2,6 +2,7 @@ package com.reactnativenavigation.views.topbar;
 
 import android.annotation.SuppressLint;
 import android.content.Context;
+import android.graphics.Color;
 import android.graphics.Typeface;
 import android.os.Build;
 import android.support.annotation.ColorInt;
@@ -97,7 +98,7 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
 
     private View createBorder() {
         View border = new View(getContext());
-        border.setBackgroundColor(android.graphics.Color.TRANSPARENT);
+        border.setBackgroundColor(Color.TRANSPARENT);
         FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(MATCH_PARENT, 0);
         lp.gravity = Gravity.BOTTOM;
         border.setLayoutParams(lp);

playground/src/screens/ComplexLayout.js

@@ -7,22 +7,18 @@ const { Navigation } = require('react-native-navigation');
 const testIDs = require('../testIDs');
 
 class ComplexLayout extends Component {
-  constructor(props) {
-    super(props);
-  }
-
   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={'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>
     );
   }
 
-  onExternalComponentInStackPressed() {
+  onExternalComponentInStackPressed = () => {
     Navigation.showModal({
       stack: {
         children: [{
@@ -37,7 +33,7 @@ class ComplexLayout extends Component {
     });
   }
 
-  onExternalComponentInDeepStackPressed() {
+  onExternalComponentInDeepStackPressed = () => {
     Navigation.showModal({
       stack: {
         children: [{
@@ -57,7 +53,7 @@ class ComplexLayout extends Component {
     });
   }
 
-  onSideMenuLayoutInsideBottomTabPressed() {
+  onSideMenuLayoutInsideBottomTabPressed = () => {
     Navigation.dismissAllModals();
     Navigation.setRoot({
       root: {
@@ -68,44 +64,47 @@ class ComplexLayout extends Component {
                 children: [
                   {
                     component: {
-                      name: 'navigation.playground.TextScreen',
-                    },
-                  },
+                      name: 'navigation.playground.TextScreen'
+                    }
+                  }
                 ],
                 options: {
                   bottomTab: {
                     text: 'Stack',
-                    icon: require('../images/one.png'),
-                  },
-                },
-              },
+                    icon: require('../images/one.png')
+                  }
+                }
+              }
             },
             {
               sideMenu: {
                 left: {
                   component: {
                     name: 'navigation.playground.SideMenuScreen',
-                  },
+                    passProps: {
+                      side: 'left'
+                    }
+                  }
                 },
                 center: {
                   stack: {
                     children: [
                       {
                         component: {
-                          name: 'navigation.playground.TextScreen',
-                        },
-                      },
-                    ],
-                  },
+                          name: 'complexLayout.bottomTabThatOpensSideMenu'
+                        }
+                      }
+                    ]
+                  }
                 },
                 options: {
                   bottomTab: {
                     text: 'SideMenu',
-                    icon: require('../images/two.png'),
-                  },
-                },
-              },
-            },
+                    icon: require('../images/two.png')
+                  }
+                }
+              }
+            }
            ]
         }
       }

playground/src/screens/complexlayouts/BottomTabSideMenuScreen.js

@@ -0,0 +1,37 @@
+const React = require('react');
+const { Component } = require('react');
+const { View, Button } = require('react-native');
+const { Navigation } = require('react-native-navigation');
+
+class BottomTabSideMenuScreen extends Component {
+   onOpenSideMenuPress = () => {
+   Navigation.mergeOptions(this.props.componentId, {
+      sideMenu: {
+        left: {
+          visible: true
+        }
+      }
+    });
+  }
+   render() {
+    return (
+      <View style={styles.root}>
+        <Button
+          title="Open SideMenu"
+          color="blue"
+          onPress={this.onOpenSideMenuPress}
+          //TODO: testID for detox 
+        />
+      </View>
+    );
+  }
+}
+ module.exports = BottomTabSideMenuScreen;
+ const styles = {
+  root: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5fcff'
+  }
+};

playground/src/screens/index.js

@@ -25,6 +25,7 @@ const TopBarBackground = require('./TopBarBackground');
 const ComplexLayout = require('./ComplexLayout');
 const SearchScreen = require('./SearchScreen');
 const KeyboardScreen = require('./KeyboardScreen');
+const BottomTabSideMenuScreen = require('./complexlayouts/BottomTabSideMenuScreen');
 
 function registerScreens() {
   Navigation.registerComponent(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
@@ -53,6 +54,7 @@ function registerScreens() {
   Navigation.registerComponent('TopBarBackground', () => TopBarBackground);
   Navigation.registerComponent('navigation.playground.SearchControllerScreen', () => SearchScreen);
   Navigation.registerComponent('navigation.playground.KeyboardScreen', () => KeyboardScreen);
+  Navigation.registerComponent('complexLayout.bottomTabThatOpensSideMenu', () => BottomTabSideMenuScreen);
 }
 
 module.exports = {