Fixes pushing bottomTabs - #4172

e2e/ScreenStack.test.js

@@ -103,4 +103,11 @@ describe('screen stack', () => {
     await elementById(testIDs.PUSH_BUTTON).tap();
     await expect(elementById(testIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
   });
+
+  test('push bottom tabs', async () => {
+    await elementById(testIDs.PUSH_BUTTON).tap();
+    await expect(elementById(testIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
+    await elementById(testIDs.PUSH_BOTTOM_TABS_BUTTON).tap();
+    await expect(elementById(testIDs.BOTTOM_TABS_ELEMENT)).toBeVisible();
+  });
 });

lib/ios/RNNCommandsHandler.m

@@ -97,7 +97,7 @@ static NSString* const setDefaultOptions	= @"setDefaultOptions";
 - (void)push:(NSString*)componentId layout:(NSDictionary*)layout completion:(RNNTransitionCompletionBlock)completion rejection:(RCTPromiseRejectBlock)rejection {
 	[self assertReady];
 	
-	RNNRootViewController *newVc = (RNNRootViewController *)[_controllerFactory createLayoutAndSaveToStore:layout];
+	UIViewController<RNNLayoutProtocol> *newVc = [_controllerFactory createLayoutAndSaveToStore:layout];
 	UIViewController *fromVC = [_store findComponentForId:componentId];
 	
 	if ([newVc.options.preview.reactTag floatValue] > 0) {
@@ -107,7 +107,7 @@ static NSString* const setDefaultOptions	= @"setDefaultOptions";
 			RNNRootViewController* rootVc = (RNNRootViewController*)vc;
 			rootVc.previewController = newVc;
 
-      rootVc.previewCallback = ^(UIViewController *vcc) {
+      		rootVc.previewCallback = ^(UIViewController *vcc) {
 				RNNRootViewController* rvc  = (RNNRootViewController*)vcc;
 				[self->_eventEmitter sendOnPreviewCompleted:componentId previewComponentId:newVc.layoutInfo.componentId];
 				if ([newVc.options.preview.commit floatValue] > 0) {
@@ -141,8 +141,8 @@ static NSString* const setDefaultOptions	= @"setDefaultOptions";
 			});
 		}
 	} else {
-		id animationDelegate = (newVc.options.animations.push.hasCustomAnimation || newVc.isCustomTransitioned) ? newVc : nil;
-		[newVc waitForReactViewRender:(newVc.options.animations.push.waitForRender || animationDelegate) perform:^{
+		id animationDelegate = (newVc.options.animations.push.hasCustomAnimation || newVc.getCurrentChild.isCustomTransitioned) ? newVc : nil;
+		[newVc.getCurrentChild waitForReactViewRender:(newVc.options.animations.push.waitForRender || animationDelegate) perform:^{
 			[_stackManager push:newVc onTop:fromVC animated:newVc.options.animations.push.enable animationDelegate:animationDelegate completion:^{
 				[_eventEmitter sendOnNavigationCommandCompletion:push params:@{@"componentId": componentId}];
 				completion();

lib/ios/RNNLeafProtocol.h

@@ -7,4 +7,6 @@ typedef void (^RNNReactViewReadyCompletionBlock)(void);
 
 - (void)bindViewController:(UIViewController *)viewController;
 
+- (BOOL)isCustomTransitioned;
+
 @end

lib/ios/RNNRootViewController.h

@@ -35,7 +35,6 @@ typedef void (^PreviewCallback)(UIViewController *vc);
 											options:(RNNNavigationOptions *)options;
 
 - (BOOL)isExternalViewController;
-- (BOOL)isCustomTransitioned;
 
 -(void)onButtonPress:(RNNUIBarButtonItem *)barButtonItem;
 

lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj

@@ -767,8 +767,8 @@
 				263905E51E4CAC950023D7D3 /* RNNSideMenuChildVC.m */,
 				507F43C31FF4F17C00D9425B /* RNNTopTabsViewController.h */,
 				507F43C41FF4F17C00D9425B /* RNNTopTabsViewController.m */,
-				E33AC1FF20B5BA0B0090DB8A /* RNNSplitViewController.m */,
 				E33AC20120B5BA550090DB8A /* RNNSplitViewController.h */,
+				E33AC1FF20B5BA0B0090DB8A /* RNNSplitViewController.m */,
 			);
 			name = "Parent ViewControllers";
 			sourceTree = "<group>";

playground/src/screens/PushedScreen.js

@@ -34,6 +34,7 @@ class PushedScreen extends Component {
       this.simulateLongRunningTask();
     }
     this.onClickPush = this.onClickPush.bind(this);
+    this.onClickPushBottomTabs = this.onClickPushBottomTabs.bind(this);
     this.onClickPop = this.onClickPop.bind(this);
     this.onClickPopPrevious = this.onClickPopPrevious.bind(this);
     this.onClickPopToFirstPosition = this.onClickPopToFirstPosition.bind(this);
@@ -80,6 +81,7 @@ class PushedScreen extends Component {
         <Text testID={testIDs.PUSHED_SCREEN_HEADER} style={styles.h1}>{`Pushed Screen`}</Text>
         <Text style={styles.h2}>{`Stack Position: ${stackPosition}`}</Text>
         <Button title='Push' testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
+        <Button title='Push bottomTabs' testID={testIDs.PUSH_BOTTOM_TABS_BUTTON} onPress={this.onClickPushBottomTabs} />
         {Platform.OS === 'ios' && <Button testID={testIDs.SHOW_PREVIEW_BUTTON} onPress={this.onClickPush} onPressIn={this.onClickShowPreview} title='Push Preview' />}
         <Button title='Pop' testID={testIDs.POP_BUTTON} onPress={this.onClickPop} />
         <Button title='Pop Previous' testID={testIDs.POP_PREVIOUS_BUTTON} onPress={this.onClickPopPrevious} />
@@ -216,6 +218,99 @@ class PushedScreen extends Component {
     });
   }
 
+  async onClickPushBottomTabs() {
+    await Navigation.push(this.props.componentId, {
+      bottomTabs: {
+        id: 'BottomTabs',
+        children: [
+          {
+            stack: {
+              id: 'TAB1_ID',
+              children: [
+                {
+                  component: {
+                    name: 'navigation.playground.TextScreen',
+                    passProps: {
+                      text: 'This is tab 1',
+                      myFunction: () => 'Hello from a function!'
+                    },
+                    options: {
+                      topBar: {
+                        visible: true,
+                        animate: false,
+                        title: {
+                          text: 'React Native Navigation!'
+                        }
+                      },
+                      bottomTab: {
+                        text: 'Tab 1',
+                        icon: require('../images/one.png'),
+                        selectedIcon: require('../images/one.png'),
+                        testID: testIDs.FIRST_TAB_BAR_BUTTON
+                      }
+                    }
+                  }
+                }
+              ],
+              options: {
+                topBar: {
+                  visible: false
+                }
+              }
+            }
+          },
+          {
+            stack: {
+              children: [
+                {
+                  component: {
+                    name: 'navigation.playground.TextScreen',
+                    passProps: {
+                      text: 'This is tab 2'
+                    }
+                  }
+                }
+              ],
+              options: {
+                bottomTab: {
+                  text: 'Tab 2',
+                  icon: require('../images/two.png'),
+                  testID: testIDs.SECOND_TAB_BAR_BUTTON
+                }
+              }
+            }
+          },
+          {
+            component: {
+              name: 'navigation.playground.TextScreen',
+              passProps: {
+                text: 'This is tab 3',
+                myFunction: () => 'Hello from a function!'
+              },
+              options: {
+                topBar: {
+                  visible: true,
+                  animate: false
+                },
+                bottomTab: {
+                  text: 'Tab 3',
+                  icon: require('../images/one.png'),
+                  selectedIcon: require('../images/one.png')
+                }
+              }
+            }
+          }
+        ],
+        options: {
+          bottomTabs: {
+            titleDisplayMode: 'alwaysShow',
+            testID: testIDs.BOTTOM_TABS_ELEMENT
+          }
+        }
+      }
+    });
+  }
+
   getStackPosition() {
     return this.props.stackPosition || 1;
   }

playground/src/testIDs.js

@@ -75,6 +75,7 @@ module.exports = {
   SIDE_MENU_LAYOUT_INSIDE_BOTTOM_TAB: `SIDE_MENU_LAYOUT_INSIDE_BOTTOM_TAB`,
   OPEN_SIDE_MENU: `OPEN_SIDE_MENU`,
   SET_ROOT_BUTTON: `SET_ROOT_BUTTON`,
+  PUSH_BOTTOM_TABS_BUTTON: `PUSH_BOTTOM_TABS_BUTTON`,
   
   // Elements
   SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,