V2 Current tab by container ID (#2264)

* set current tab by container id

* currentTabByContainerID e2e

* lint fix

* e2e test

e2e/ScreenStack.test.js

@@ -50,4 +50,13 @@ describe('screen stack', () => {
     await expect(elementByLabel('This is tab 1')).toBeNotVisible();
     await expect(elementByLabel('This is tab 2')).toBeVisible();
   });
+
+  it('switch to tab by cotnainerId', async () => {
+    await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
+    await expect(elementByLabel('This is tab 1')).toBeVisible();
+    await elementById(testIDs.SWITCH_SECOND_TAB_BUTTON).tap();
+    await expect(elementByLabel('This is tab 2')).toBeVisible();
+    await elementById(testIDs.SWITCH_FIRST_TAB_BUTTON).tap();
+    await expect(elementByLabel('This is tab 1')).toBeVisible();
+  });
 });

lib/ios/RNNNavigationOptions.m

@@ -205,6 +205,11 @@ const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
 		if (self.bottomTabs.currentTabIndex) {
 			[viewController.tabBarController setSelectedIndex:[self.bottomTabs.currentTabIndex unsignedIntegerValue]];
 		}
+		
+		if (self.bottomTabs.currentTabId) {
+			[(RNNTabBarController*)viewController.tabBarController setSelectedIndexByContainerID:self.bottomTabs.currentTabId];
+		}
+		
 		if (self.bottomTabs.hidden) {
 			[((RNNTabBarController *)viewController.tabBarController) setTabBarHidden:[self.bottomTabs.hidden boolValue] animated:[self.bottomTabs.animateHide boolValue]];
 		}
@@ -220,6 +225,8 @@ const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
 				viewController.edgesForExtendedLayout &= ~UIRectEdgeBottom;
 			}
 		}
+		
+		[self.bottomTabs resetOptions];
 	}
 	
 	if (self.statusBarBlur) {

lib/ios/RNNTabBarController.h

@@ -4,5 +4,6 @@
 @interface RNNTabBarController : UITabBarController
 
 - (void)setTabBarHidden:(BOOL)hidden animated:(BOOL)animated;
+- (void)setSelectedIndexByContainerID:(NSString *)containerID;
 
 @end

lib/ios/RNNTabBarController.m

@@ -1,5 +1,6 @@
 
 #import "RNNTabBarController.h"
+#import "RNNRootViewController.h"
 #define kTabBarHiddenDuration 0.3
 
 @implementation RNNTabBarController
@@ -20,4 +21,16 @@
 	}];
 }
 
+- (void)setSelectedIndexByContainerID:(NSString *)containerID {
+	for (id child in self.childViewControllers) {
+		RNNRootViewController* vc = child;
+		if ([child isKindOfClass:[UINavigationController class]]) {
+			vc = ((UINavigationController *)child).childViewControllers.firstObject;
+		}
+		if ([vc.containerId isEqualToString:containerID]) {
+			[self setSelectedIndex:[self.childViewControllers indexOfObject:child]];
+		}
+	}
+}
+
 @end

lib/ios/RNNTabBarOptions.h

@@ -9,9 +9,11 @@ extern const NSInteger BLUR_TOPBAR_TAG;
 @property (nonatomic, strong) NSNumber* currentTabIndex;
 @property (nonatomic, strong) NSString* testID;
 @property (nonatomic, strong) NSNumber* drawUnder;
+@property (nonatomic, strong) NSString* currentTabId;
 
 -(instancetype)init;
 -(instancetype)initWithDict:(NSDictionary *)topBarOptions;
 -(void)mergeWith:(NSDictionary*)otherOptions;
+- (void)resetOptions;
 
 @end

lib/ios/RNNTabBarOptions.m

@@ -13,10 +13,16 @@
 	self.animateHide = [tabBarOptions valueForKey:@"animateHide"];
 	self.currentTabIndex = [tabBarOptions valueForKey:@"currentTabIndex"];
 	self.testID = [tabBarOptions valueForKey:@"testID"];
+	self.currentTabId = [tabBarOptions valueForKey:@"currentTabId"];
 	
 	return self;
 }
 
+- (void)resetOptions {
+	self.currentTabId = nil;
+	self.currentTabIndex = nil;
+}
+
 -(void)mergeWith:(NSDictionary *)otherOptions {
 	for (id key in otherOptions) {
 		[self setValue:[otherOptions objectForKey:key] forKey:key];

playground/src/containers/TextScreen.js

@@ -6,6 +6,8 @@ const { View, Text, Button } = require('react-native');
 const Navigation = require('react-native-navigation');
 const testIDs = require('../testIDs');
 
+let globalFirstContainerID;
+
 class TextScreen extends Component {
   static get navigationOptions() {
     return {
@@ -15,6 +17,11 @@ class TextScreen extends Component {
     };
   }
 
+  constructor(props) {
+    super(props);
+    globalFirstContainerID = (props.text === 'This is tab 1') ? props.containerId : globalFirstContainerID;
+  }
+
   render() {
     return (
       <View style={styles.root}>
@@ -23,6 +30,7 @@ class TextScreen extends Component {
         <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={'Switch To Tab 1 by containerID'} testID={testIDs.SWITCH_FIRST_TAB_BUTTON} onPress={() => this.onClickSwitchToTabByContainerID()} />
         <Button title="Hide Tab Bar" testID={testIDs.HIDE_BOTTOM_TABS_BUTTON} onPress={() => this.hideTabBar(true)} />
         <Button title="Show Tab Bar" testID={testIDs.SHOW_BOTTOM_TABS_BUTTON} onPress={() => this.hideTabBar(false)} />
         <Button title="Show Left Side Menu" testID={testIDs.SHOW_LEFT_SIDE_MENU_BUTTON} onPress={() => this.showSideMenu('left')} />
@@ -58,6 +66,14 @@ class TextScreen extends Component {
     });
   }
 
+  onClickSwitchToTabByContainerID() {
+    Navigation.setOptions(this.props.containerId, {
+      bottomTabs: {
+        currentTabId: globalFirstContainerID
+      }
+    });
+  }
+
   hideTabBar(hidden) {
     Navigation.setOptions(this.props.containerId, {
       bottomTabs: {

playground/src/testIDs.js

@@ -27,6 +27,7 @@ module.exports = {
   POP_TO_ROOT: `POP_TO_ROOT`,
   POP_STACK_POSITION_ONE_BUTTON: `POP_STACK_POSITION_ONE_BUTTON`,
   SWITCH_SECOND_TAB_BUTTON: `SWITCH_SECOND_TAB_BUTTON`,
+  SWITCH_FIRST_TAB_BUTTON: `SWITCH_FIRST_TAB_BUTTON`,
   DYNAMIC_OPTIONS_BUTTON: `DYNAMIC_OPTIONS_BUTTON`,
   SHOW_TOP_BAR_BUTTON: `SHOW_TOP_BAR_BUTTON`,
   HIDE_TOP_BAR_BUTTON: `HIDE_TOP_BAR_BUTTON`,