V2 side menu visibility ios (toggleDrawer) (#2324)

* side menu visibility options

* e2e fix

* Rename ContainerView related classes (#2328)

* Rename ContainerView related classes

* fix test

* rename ContainerViewCreator

* splitted showSideMenu into two methods

README.md

@@ -197,7 +197,7 @@ Note:  v1 properties with names beginning with 'navBar' are replaced in v2 with
 | rootBackgroundImageName            |  ✅   |    [Contribute](/docs/docs/CONTRIBUTING.md)     |    [Contribute](/docs/docs/CONTRIBUTING.md)       |
 | setButtons          |   ✅     |    ✅    | [Contribute](/docs/docs/CONTRIBUTING.md) | @Johan-dutoit|
 | title            |   ✅     |        	✅    | 	✅| Wix|
-| toggleDrawer        |   ✅     |        [Contribute](/docs/docs/CONTRIBUTING.md)   | [Contribute](/docs/docs/CONTRIBUTING.md) |
+| toggleDrawer        |   ✅     |       ✅    | [Contribute](/docs/docs/CONTRIBUTING.md) |
 | setTabBadge         |    ✅    |       ✅    | [Contribute](/docs/docs/CONTRIBUTING.md)| Wix|
 | switchToTab         |    ✅    |       ✅   |[Contribute](/docs/docs/CONTRIBUTING.md) |
 | topBarCustomView        |   ✅     |     WIP @gran33     | [Contribute](/docs/docs/CONTRIBUTING.md)|

e2e/ScreenStyle.test.js

@@ -75,6 +75,22 @@ describe('screen style', () => {
     await expect(element(by.type('UITabBar'))).toBeVisible();
   });
 
+  it('side menu visibility - left', async () => {
+    await elementById(testIDs.TAB_BASED_APP_SIDE_BUTTON).tap();
+    await elementById(testIDs.SHOW_LEFT_SIDE_MENU_BUTTON).tap();
+    await expect(elementById(testIDs.HIDE_LEFT_SIDE_MENU_BUTTON)).toBeVisible();
+    await elementById(testIDs.HIDE_LEFT_SIDE_MENU_BUTTON).tap();
+    await expect(elementById(testIDs.CENTERED_TEXT_HEADER)).toBeVisible();
+  });
+
+  it('side menu visibility - right', async () => {
+    await elementById(testIDs.TAB_BASED_APP_SIDE_BUTTON).tap();
+    await elementById(testIDs.SHOW_RIGHT_SIDE_MENU_BUTTON).tap();
+    await expect(elementById(testIDs.HIDE_RIGHT_SIDE_MENU_BUTTON)).toBeVisible();
+    await elementById(testIDs.HIDE_RIGHT_SIDE_MENU_BUTTON).tap();
+    await expect(elementById(testIDs.CENTERED_TEXT_HEADER)).toBeVisible();
+  });
+
   it('set right buttons', async () => {
     await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
     await expect(elementById('buttonOne')).toBeVisible();

e2e/TopLevelApi.test.js

@@ -20,8 +20,8 @@ describe('top level api', () => {
 
   it('switch to tabs with side menus', async () => {
     await elementById(testIDs.TAB_BASED_APP_SIDE_BUTTON).tap();
-    await elementByLabel('This is a side menu center screen tab 1').swipe('right');
-    await expect(elementByLabel('This is a left side menu screen')).toBeVisible();
+    await elementById(testIDs.CENTERED_TEXT_HEADER).swipe('right');
+    await expect(elementById(testIDs.HIDE_LEFT_SIDE_MENU_BUTTON)).toBeVisible();
   });
 
   it('screen lifecycle', async () => {

lib/ios/RNNNavigationOptions.h

@@ -2,6 +2,7 @@
 #import <UIKit/UIKit.h>
 #import "RNNTopBarOptions.h"
 #import "RNNTabBarOptions.h"
+#import "RNNSideMenuOptions.h"
 
 extern const NSInteger BLUR_STATUS_TAG;
 extern const NSInteger BLUR_TOPBAR_TAG;
@@ -21,6 +22,7 @@ extern const NSInteger TOP_BAR_TRANSPARENT_TAG;
 @property (nonatomic, strong) NSNumber* popGesture;
 @property (nonatomic, strong) RNNTopBarOptions* topBar;
 @property (nonatomic, strong) RNNTabBarOptions* bottomTabs;
+@property (nonatomic, strong) RNNSideMenuOptions* sideMenu;
 
 
 - (UIInterfaceOrientationMask)supportedOrientations;

lib/ios/RNNNavigationOptions.m

@@ -3,6 +3,7 @@
 #import "RNNNavigationController.h"
 #import "RNNTabBarController.h"
 #import "RNNTopBarOptions.h"
+#import "RNNSideMenuController.h"
 
 const NSInteger BLUR_STATUS_TAG = 78264801;
 const NSInteger BLUR_TOPBAR_TAG = 78264802;
@@ -26,6 +27,7 @@ const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
 	self.rightButtons = [navigationOptions objectForKey:@"rightButtons"];
 	self.topBar = [[RNNTopBarOptions alloc] initWithDict:[navigationOptions objectForKey:@"topBar"]];
 	self.bottomTabs = [[RNNTabBarOptions alloc] initWithDict:[navigationOptions objectForKey:@"bottomTabs"]];
+	self.sideMenu = [[RNNSideMenuOptions alloc] initWithDict:[navigationOptions objectForKey:@"sideMenu"]];
 	
 	return self;
 }
@@ -36,6 +38,8 @@ const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
 			[self.topBar mergeWith:[otherOptions objectForKey:key]];
 		} else if ([key isEqualToString:@"bottomTabs"]) {
 			[self.bottomTabs mergeWith:[otherOptions objectForKey:key]];
+		} else if ([key isEqualToString:@"sideMenu"]) {
+			[self.sideMenu mergeWith:[otherOptions objectForKey:@"sideMenu"]];
 		} else {
 			[self setValue:[otherOptions objectForKey:key] forKey:key];
 		}
@@ -208,6 +212,27 @@ const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
 			}
 		}
 	}
+	
+	RNNSideMenuController* sideMenuController = (RNNSideMenuController*)UIApplication.sharedApplication.delegate.window.rootViewController;
+	if ([sideMenuController isKindOfClass:[RNNSideMenuController class]]) {
+		if (self.sideMenu.leftSideVisible) {
+			if (self.sideMenu.leftSideVisible.boolValue) {
+				[sideMenuController showSideMenu:MMDrawerSideLeft animated:YES];
+			} else {
+				[sideMenuController hideSideMenu:MMDrawerSideLeft animated:YES];
+			}
+		}
+		
+		if (self.sideMenu.rightSideVisible) {
+			if (self.sideMenu.rightSideVisible.boolValue) {
+				[sideMenuController showSideMenu:MMDrawerSideRight animated:YES];
+			} else {
+				[sideMenuController hideSideMenu:MMDrawerSideRight animated:YES];
+			}
+		}
+		
+		[self.sideMenu resetOptions];
+	}
 }
 
 - (UIInterfaceOrientationMask)supportedOrientations {

lib/ios/RNNSideMenuController.h

@@ -19,4 +19,7 @@
 
 -(instancetype)initWithControllers:(NSArray*)controllers;
 
+-(void)showSideMenu:(MMDrawerSide)side animated:(BOOL)animated;
+-(void)hideSideMenu:(MMDrawerSide)side animated:(BOOL)animated;
+
 @end

lib/ios/RNNSideMenuController.m

@@ -41,6 +41,14 @@
 	return self;
 }
 
+-(void)showSideMenu:(MMDrawerSide)side animated:(BOOL)animated {
+	[self.sideMenu openDrawerSide:side animated:animated completion:nil];
+}
+
+-(void)hideSideMenu:(MMDrawerSide)side animated:(BOOL)animated {
+	[self.sideMenu closeDrawerAnimated:animated completion:nil];
+}
+
 -(void)setControllers:(NSArray*)controllers {
 	for (id controller in controllers) {
 		

lib/ios/RNNSideMenuOptions.h

@@ -0,0 +1,14 @@
+#import <Foundation/Foundation.h>
+
+@interface RNNSideMenuOptions : NSObject
+
+@property (nonatomic, strong) NSNumber* leftSideVisible;
+@property (nonatomic, strong) NSNumber* rightSideVisible;
+
+-(instancetype)init;
+-(instancetype)initWithDict:(NSDictionary *)sideMenuOptions;
+-(void)mergeWith:(NSDictionary*)otherOptions;
+
+-(void)resetOptions;
+
+@end

lib/ios/RNNSideMenuOptions.m

@@ -0,0 +1,27 @@
+#import "RNNSideMenuOptions.h"
+
+@implementation RNNSideMenuOptions
+
+-(instancetype)init {
+	return [self initWithDict:@{}];
+}
+
+-(instancetype)initWithDict:(NSDictionary *)sideMenuOptions {
+	self = [super init];
+	
+	[self mergeWith:sideMenuOptions];
+	
+	return self;
+}
+
+-(void)mergeWith:(NSDictionary *)otherOptions {
+	self.leftSideVisible = [[otherOptions valueForKey:@"left"] valueForKey:@"visible"];
+	self.rightSideVisible = [[otherOptions valueForKey:@"right"] valueForKey:@"visible"];
+}
+
+-(void)resetOptions {
+	self.leftSideVisible = nil;
+	self.rightSideVisible = nil;
+}
+
+@end

lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj

@@ -57,6 +57,8 @@
 		268692831E5054F800E2C612 /* RNNStore.m in Sources */ = {isa = PBXBuildFile; fileRef = 268692811E5054F800E2C612 /* RNNStore.m */; };
 		26916C981E4B9E7700D13680 /* RNNReactRootViewCreator.h in Headers */ = {isa = PBXBuildFile; fileRef = 26916C961E4B9E7700D13680 /* RNNReactRootViewCreator.h */; };
 		26916C991E4B9E7700D13680 /* RNNReactRootViewCreator.m in Sources */ = {isa = PBXBuildFile; fileRef = 26916C971E4B9E7700D13680 /* RNNReactRootViewCreator.m */; };
+		50CB3B691FDE911400AA153B /* RNNSideMenuOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 50CB3B671FDE911400AA153B /* RNNSideMenuOptions.h */; };
+		50CB3B6A1FDE911400AA153B /* RNNSideMenuOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 50CB3B681FDE911400AA153B /* RNNSideMenuOptions.m */; };
 		50F5DFC11F407A8C001A00BC /* RNNTabBarController.h in Headers */ = {isa = PBXBuildFile; fileRef = 50F5DFBF1F407A8C001A00BC /* RNNTabBarController.h */; };
 		50F5DFC21F407A8C001A00BC /* RNNTabBarController.m in Sources */ = {isa = PBXBuildFile; fileRef = 50F5DFC01F407A8C001A00BC /* RNNTabBarController.m */; };
 		50F5DFC51F407AA0001A00BC /* RNNNavigationController.h in Headers */ = {isa = PBXBuildFile; fileRef = 50F5DFC31F407AA0001A00BC /* RNNNavigationController.h */; };
@@ -203,6 +205,8 @@
 		26916C941E4B9CCC00D13680 /* RNNRootViewCreator.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNRootViewCreator.h; sourceTree = "<group>"; };
 		26916C961E4B9E7700D13680 /* RNNReactRootViewCreator.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNReactRootViewCreator.h; sourceTree = "<group>"; };
 		26916C971E4B9E7700D13680 /* RNNReactRootViewCreator.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNReactRootViewCreator.m; sourceTree = "<group>"; };
+		50CB3B671FDE911400AA153B /* RNNSideMenuOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNSideMenuOptions.h; sourceTree = "<group>"; };
+		50CB3B681FDE911400AA153B /* RNNSideMenuOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNSideMenuOptions.m; sourceTree = "<group>"; };
 		50F5DFBF1F407A8C001A00BC /* RNNTabBarController.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNTabBarController.h; sourceTree = "<group>"; };
 		50F5DFC01F407A8C001A00BC /* RNNTabBarController.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNTabBarController.m; sourceTree = "<group>"; };
 		50F5DFC31F407AA0001A00BC /* RNNNavigationController.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNNavigationController.h; sourceTree = "<group>"; };
@@ -411,9 +415,9 @@
 				50F5DFC31F407AA0001A00BC /* RNNNavigationController.h */,
 				50F5DFC41F407AA0001A00BC /* RNNNavigationController.m */,
 				263905D41E4C94970023D7D3 /* RNNSideMenuController.h */,
+				263905D51E4C94970023D7D3 /* RNNSideMenuController.m */,
 				7BC9346C1E26886E00EFA125 /* RNNControllerFactory.h */,
 				7BC9346D1E26886E00EFA125 /* RNNControllerFactory.m */,
-				263905D51E4C94970023D7D3 /* RNNSideMenuController.m */,
 				263905E41E4CAC950023D7D3 /* RNNSideMenuChildVC.h */,
 				263905E51E4CAC950023D7D3 /* RNNSideMenuChildVC.m */,
 				E83BAD691F27362500A9F3DD /* RNNNavigationOptions.h */,
@@ -422,10 +426,12 @@
 				21B85E5C1F44480200B314B5 /* RNNNavigationButtons.m */,
 				214545261F4DC164006E8DA1 /* RNNUIBarButtonItem.h */,
 				214545241F4DC125006E8DA1 /* RNNUIBarButtonItem.m */,
-				A7626BFC1FC2FB2C00492FB8 /* RNNTopBarOptions.m */,
 				A7626BFE1FC2FB6700492FB8 /* RNNTopBarOptions.h */,
+				A7626BFC1FC2FB2C00492FB8 /* RNNTopBarOptions.m */,
 				A7626BFF1FC578AB00492FB8 /* RNNTabBarOptions.h */,
 				A7626C001FC5796200492FB8 /* RNNTabBarOptions.m */,
+				50CB3B671FDE911400AA153B /* RNNSideMenuOptions.h */,
+				50CB3B681FDE911400AA153B /* RNNSideMenuOptions.m */,
 			);
 			name = Controllers;
 			sourceTree = "<group>";
@@ -570,6 +576,7 @@
 				7B4928081E70415400555040 /* RNNCommandsHandler.h in Headers */,
 				263905AE1E4C6F440023D7D3 /* MMDrawerBarButtonItem.h in Headers */,
 				50F5DFC11F407A8C001A00BC /* RNNTabBarController.h in Headers */,
+				50CB3B691FDE911400AA153B /* RNNSideMenuOptions.h in Headers */,
 				263905BD1E4C6F440023D7D3 /* RCCDrawerProtocol.h in Headers */,
 				263905C21E4C6F440023D7D3 /* SidebarAnimation.h in Headers */,
 				E8E518361F83B94A000467AC /* RNNViewLocation.h in Headers */,
@@ -721,6 +728,7 @@
 				7BEF0D191E437684003E96B0 /* RNNRootViewController.m in Sources */,
 				263905C31E4C6F440023D7D3 /* SidebarAnimation.m in Sources */,
 				E8A5CD531F464F0400E89D0D /* RNNAnimator.m in Sources */,
+				50CB3B6A1FDE911400AA153B /* RNNSideMenuOptions.m in Sources */,
 				261F0E6B1E6F028A00989DE2 /* RNNNavigationStackManager.m in Sources */,
 				E8DA24411F97459B00CD552B /* RNNElementFinder.m in Sources */,
 				263905BF1E4C6F440023D7D3 /* RCCTheSideBarManagerViewController.m in Sources */,

lib/src/params/NavigationOptions.js

@@ -26,6 +26,7 @@ class NavigationOptions {
     this.orientation = options.orientation;
     this.rightButtons = options.rightButtons && options.rightButtons.map((button) => new Button(button));
     this.leftButtons = options.leftButtons && options.leftButtons.map((button) => new Button(button));
+    this.sideMenu = options.sideMenu;
   }
 }
 

playground/src/containers/SideMenuScreen.js

@@ -0,0 +1,42 @@
+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 SideMenuScreen extends Component {
+
+  render() {
+    const testID = this.props.side === 'left' ? testIDs.HIDE_LEFT_SIDE_MENU_BUTTON : testIDs.HIDE_RIGHT_SIDE_MENU_BUTTON;
+    return (
+      <View style={styles.root} testID={this.props.testID}>
+        <Text testID={testIDs.SIDE_BAR}>Side Bar</Text>
+        <Text style={styles.h1}>{`This is a ${this.props.side} side menu screen`}</Text>
+        <Button title="Hide Side Menu" testID={testID} onPress={() => this.hideSideMenu()} />
+      </View>
+    );
+  }
+
+  hideSideMenu() {
+    Navigation.setOptions(this.props.containerId, {
+      sideMenu: {
+        [this.props.side]: {
+          visible: false
+        }
+      }
+    });
+  }
+}
+module.exports = SideMenuScreen;
+
+const styles = {
+  root: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5fcff'
+  }
+};
+

playground/src/containers/TextScreen.js

@@ -11,13 +11,15 @@ class TextScreen extends Component {
   render() {
     return (
       <View style={styles.root}>
-        <Text style={styles.h1}>{this.props.text || 'Text Screen'}</Text>
+        <Text style={styles.h1} testID={testIDs.CENTERED_TEXT_HEADER}>{this.props.text || 'Text Screen'}</Text>
         {this.renderTextFromFunctionInProps()}
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
         <Button title={'Set Tab Badge'} testID={testIDs.SET_TAB_BADGE_BUTTON} onPress={() => this.onButtonPress()} />
         <Button title={'Switch To Tab 2'} testID={testIDs.SWITCH_SECOND_TAB_BUTTON} onPress={() => this.onClickSwitchToTab()} />
         <Button title="Hide Tab Bar" onPress={() => this.hideTabBar(true)} />
         <Button title="Show Tab Bar" onPress={() => this.hideTabBar(false)} />
+        <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')} />
       </View>
     );
   }
@@ -56,7 +58,18 @@ class TextScreen extends Component {
       }
     });
   }
+
+  showSideMenu(side) {
+    Navigation.setOptions(this.props.containerId, {
+      sideMenu: {
+        [side]: {
+          visible: true
+        }
+      }
+    });
+  }
 }
+
 module.exports = TextScreen;
 
 const styles = {

playground/src/containers/WelcomeScreen.js

@@ -99,17 +99,17 @@ class WelcomeScreen extends Component {
       sideMenu: {
         left: {
           container: {
-            name: 'navigation.playground.TextScreen',
+            name: 'navigation.playground.SideMenuScreen',
             passProps: {
-              text: 'This is a left side menu screen'
+              side: 'left'
             }
           }
         },
         right: {
           container: {
-            name: 'navigation.playground.TextScreen',
+            name: 'navigation.playground.SideMenuScreen',
             passProps: {
-              text: 'This is a right side menu screen'
+              side: 'right'
             }
           }
         }

playground/src/containers/index.js

@@ -12,6 +12,7 @@ const CustomTransitionOrigin = require('./CustomTransitionOrigin');
 const CustomTransitionDestination = require('./CustomTransitionDestination');
 const CustomDialog = require('./CustomDialog');
 const BandHandlerScreen = require('./BackHandlerScreen');
+const SideMenuScreen = require('./SideMenuScreen');
 
 function registerContainers() {
   Navigation.registerContainer(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
@@ -27,6 +28,7 @@ function registerContainers() {
   Navigation.registerContainer(`navigation.playground.OrientationDetectScreen`, () => OrientationDetectScreen);
   Navigation.registerContainer('navigation.playground.CustomDialog', () => CustomDialog);
   Navigation.registerContainer('navigation.playground.BackHandlerScreen', () => BandHandlerScreen);
+  Navigation.registerContainer('navigation.playground.SideMenuScreen', () => SideMenuScreen);
 }
 
 module.exports = {

playground/src/testIDs.js

@@ -36,9 +36,14 @@ module.exports = {
   TOGGLE_TOP_BAR_HIDE_ON_SCROLL: `TOGGLE_TOP_BAR_HIDE_ON_SCROLL`,
   SET_TAB_BADGE_BUTTON: `SET_TAB_BADGE_BUTTON`,
   PUSH_TO_TEST_DID_DISAPPEAR_BUTTON: `PUSH_TO_TEST_DID_DISAPPEAR_BUTTON`,
+  SHOW_LEFT_SIDE_MENU_BUTTON: `SHOW_LEFT_SIDE_MENU_BUTTON`,
+  SHOW_RIGHT_SIDE_MENU_BUTTON: `SHOW_RIGHT_SIDE_MENU_BUTTON`,
+  HIDE_LEFT_SIDE_MENU_BUTTON: `HIDE_LEFT_SIDE_MENU_BUTTON`,
+  HIDE_RIGHT_SIDE_MENU_BUTTON: `HIDE_RIGHT_SIDE_MENU_BUTTON`,
 
   // Elements
   SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,
+  CENTERED_TEXT_HEADER: `CENTERED_TEXT_HEADER`,
 
   // Headers
   WELCOME_SCREEN_HEADER: `WELCOME_SCREEN_HEADER`,