V2 tabBarHidden (#2297)

* added tabBar toggle

* added tabBarHidden e2e

* changed tabBar api prop to bottomTabs

* unit test fix

e2e/ScreenStyle.test.js

@@ -59,6 +59,21 @@ describe('screen style', () => {
     await expect(element(by.text('TeSt'))).toBeVisible();
   });
 
+  it('hide Tab Bar', async () => {
+    await elementByLabel('Switch to tab based app').tap();
+    await expect(element(by.type('UITabBar'))).toBeVisible();
+    await elementByLabel('Hide Tab Bar').tap();
+    await expect(element(by.type('UITabBar'))).toBeNotVisible();
+  });
+
+  it('show Tab Bar', async () => {
+    await elementByLabel('Switch to tab based app').tap();
+    await elementByLabel('Hide Tab Bar').tap();
+    await expect(element(by.type('UITabBar'))).toBeNotVisible();
+    await elementByLabel('Show Tab Bar').tap();
+    await expect(element(by.type('UITabBar'))).toBeVisible();
+  });
+
   it('set right buttons', async () => {
     await elementByLabel('Push Options Screen').tap();
     await expect(elementById('buttonOne')).toBeVisible();

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

@@ -30,7 +30,7 @@ public class NavigationOptions implements DEFAULT_VALUES {
 		if (json == null) return result;
 
 		result.topBarOptions = TopBarOptions.parse(json.optJSONObject("topBar"));
-		result.bottomTabsOptions = BottomTabsOptions.parse(json.optJSONObject("tabBar"));
+		result.bottomTabsOptions = BottomTabsOptions.parse(json.optJSONObject("bottomTabs"));
 
 		return result.withDefaultOptions(defaultOptions);
 	}

lib/android/app/src/test/java/com/reactnativenavigation/parse/NavigationOptionsTest.java

@@ -34,7 +34,7 @@ public class NavigationOptionsTest extends BaseTest {
 	public void parsesJson() throws Exception {
 		JSONObject json = new JSONObject()
                 .put("topBar", createTopBar())
-                .put("tabBar", createTabBar());
+                .put("bottomTabs", createTabBar());
 		NavigationOptions result = NavigationOptions.parse(json);
         assertResult(result);
 	}
@@ -99,7 +99,7 @@ public class NavigationOptionsTest extends BaseTest {
     public void mergeDefaultOptions() throws Exception {
         JSONObject json = new JSONObject();
         json.put("topBar", createTopBar());
-        json.put("tabBar", createTabBar());
+        json.put("bottomTabs", createTabBar());
         NavigationOptions defaultOptions = NavigationOptions.parse(json);
         NavigationOptions options = new NavigationOptions();
 
@@ -111,12 +111,12 @@ public class NavigationOptionsTest extends BaseTest {
     public void mergedDefaultOptionsDontOverrideGivenOptions() throws Exception {
         JSONObject defaultJson = new JSONObject()
             .put("topBar", createOtherTopBar())
-            .put("tabBar", createOtherTabBar());
+            .put("bottomTabs", createOtherTabBar());
         NavigationOptions defaultOptions = NavigationOptions.parse(defaultJson);
 
         JSONObject json = new JSONObject()
                 .put("topBar", createTopBar())
-                .put("tabBar", createTabBar());
+                .put("bottomTabs", createTabBar());
         NavigationOptions options = NavigationOptions.parse(json);
         options.withDefaultOptions(defaultOptions);
         assertResult(options);

lib/ios/RNNNavigationOptions.h

@@ -20,7 +20,7 @@ extern const NSInteger TOP_BAR_TRANSPARENT_TAG;
 @property (nonatomic, strong) NSNumber* statusBarHideWithTopBar;
 @property (nonatomic, strong) NSNumber* popGesture;
 @property (nonatomic, strong) RNNTopBarOptions* topBar;
-@property (nonatomic, strong) RNNTabBarOptions* tabBar;
+@property (nonatomic, strong) RNNTabBarOptions* bottomTabs;
 
 
 - (UIInterfaceOrientationMask)supportedOrientations;

lib/ios/RNNNavigationOptions.m

@@ -25,7 +25,7 @@ const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
 	self.leftButtons = [navigationOptions objectForKey:@"leftButtons"];
 	self.rightButtons = [navigationOptions objectForKey:@"rightButtons"];
 	self.topBar = [[RNNTopBarOptions alloc] initWithDict:[navigationOptions objectForKey:@"topBar"]];
-	self.tabBar = [[RNNTabBarOptions alloc] initWithDict:[navigationOptions objectForKey:@"tabBar"]];
+	self.bottomTabs = [[RNNTabBarOptions alloc] initWithDict:[navigationOptions objectForKey:@"bottomTabs"]];
 	
 	return self;
 }
@@ -34,8 +34,8 @@ const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
 	for (id key in otherOptions) {
 		if ([key isEqualToString:@"topBar"]) {
 			[self.topBar mergeWith:[otherOptions objectForKey:key]];
-		} else if ([key isEqualToString:@"tabBar"]) {
-			[self.tabBar mergeWith:[otherOptions objectForKey:key]];
+		} else if ([key isEqualToString:@"bottomTabs"]) {
+			[self.bottomTabs mergeWith:[otherOptions objectForKey:key]];
 		} else {
 			[self setValue:[otherOptions objectForKey:key] forKey:key];
 		}
@@ -176,17 +176,20 @@ const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
 		viewController.view.backgroundColor = screenColor;
 	}
 	
-	if (self.tabBar) {
-		if (self.tabBar.tabBadge) {
-			NSString *badge = [RCTConvert NSString:self.tabBar.tabBadge];
+	if (self.bottomTabs) {
+		if (self.bottomTabs.tabBadge) {
+			NSString *badge = [RCTConvert NSString:self.bottomTabs.tabBadge];
 			if (viewController.navigationController) {
 				viewController.navigationController.tabBarItem.badgeValue = badge;
 			} else {
 				viewController.tabBarItem.badgeValue = badge;
 			}
 		}
-		if (self.tabBar.currentTabIndex) {
-			[viewController.tabBarController setSelectedIndex:[self.tabBar.currentTabIndex unsignedIntegerValue]];
+		if (self.bottomTabs.currentTabIndex) {
+			[viewController.tabBarController setSelectedIndex:[self.bottomTabs.currentTabIndex unsignedIntegerValue]];
+		}
+		if (self.bottomTabs.hidden) {
+			[((RNNTabBarController *)viewController.tabBarController) setTabBarHidden:[self.bottomTabs.hidden boolValue] animated:[self.bottomTabs.animateHide boolValue]];
 		}
 	}
 	

lib/ios/RNNRootViewController.m

@@ -61,8 +61,8 @@
 
 - (BOOL)hidesBottomBarWhenPushed
 {
-	if (self.navigationOptions.tabBar && self.navigationOptions.tabBar.hidden) {
-		return [self.navigationOptions.tabBar.hidden boolValue];
+	if (self.navigationOptions.bottomTabs && self.navigationOptions.bottomTabs.hidden) {
+		return [self.navigationOptions.bottomTabs.hidden boolValue];
 	}
 	return NO;
 }

lib/ios/RNNTabBarController.h

@@ -3,4 +3,6 @@
 
 @interface RNNTabBarController : UITabBarController
 
+- (void)setTabBarHidden:(BOOL)hidden animated:(BOOL)animated;
+
 @end

lib/ios/RNNTabBarController.m

@@ -1,5 +1,6 @@
 
 #import "RNNTabBarController.h"
+#define kTabBarHiddenDuration 0.3
 
 @implementation RNNTabBarController
 
@@ -7,4 +8,16 @@
 	return self.selectedViewController.supportedInterfaceOrientations;
 }
 
+- (void)setTabBarHidden:(BOOL)hidden animated:(BOOL)animated {
+	CGRect frame = self.tabBar.frame;
+	CGFloat height = frame.size.height;
+	CGFloat offsetY = (hidden ? self.view.frame.size.height : self.view.frame.size.height-height);
+	frame.origin.y = offsetY;
+	NSTimeInterval duration = animated ? kTabBarHiddenDuration : 0.0;
+	
+	[UIView animateWithDuration:duration animations:^{
+		self.tabBar.frame = frame;
+	}];
+}
+
 @end

lib/ios/ReactNativeNavigationTests/RNNRootViewControllerTest.m

@@ -174,7 +174,7 @@
 
 -(void)testTabBadge {
 	NSString* tabBadgeInput = @"5";
-	self.options.tabBar.tabBadge = tabBadgeInput;
+	self.options.bottomTabs.tabBadge = tabBadgeInput;
 	__unused RNNTabBarController* vc = [[RNNTabBarController alloc] init];
 	NSMutableArray* controllers = [NSMutableArray new];
 	UITabBarItem* item = [[UITabBarItem alloc] initWithTitle:@"A Tab" image:nil tag:1];
@@ -456,7 +456,7 @@
 
 
 - (void)testTabBarHidden_true {
-	self.options.tabBar.hidden = @(1);
+	self.options.bottomTabs.hidden = @(1);
 	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
 	[self.uut viewWillAppear:false];
 
@@ -464,7 +464,7 @@
 }
 
 - (void)testTabBarHidden_false {
-	self.options.tabBar.hidden = @(0);
+	self.options.bottomTabs.hidden = @(0);
 	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
 	[self.uut viewWillAppear:false];
 

playground/src/containers/TextScreen.js

@@ -15,6 +15,8 @@ class TextScreen extends Component {
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
         <Button title={'Set Tab Badge'} onPress={() => this.onButtonPress()} />
         <Button title="Switch To Tab 2" onPress={() => this.onClickSwitchToTab()} />
+        <Button title="Hide Tab Bar" onPress={() => this.hideTabBar(true)} />
+        <Button title="Show Tab Bar" onPress={() => this.hideTabBar(false)} />
       </View>
     );
   }
@@ -30,7 +32,7 @@ class TextScreen extends Component {
 
   onButtonPress() {
     Navigation.setOptions(this.props.containerId, {
-      tabBar: {
+      bottomTabs: {
         tabBadge: `TeSt`
       }
     });
@@ -38,8 +40,18 @@ class TextScreen extends Component {
 
   onClickSwitchToTab() {
     Navigation.setOptions(this.props.containerId, {
-      tabBar: {
-        currentTabIndex: 1
+      bottomTabs: {
+        currentTabIndex: 1,
+        hidden: true,
+        animateHide: true
+      }
+    });
+  }
+
+  hideTabBar(hidden) {
+    Navigation.setOptions(this.props.containerId, {
+      bottomTabs: {
+        hidden
       }
     });
   }