How to hide tab bar in navigation interface in React Native?

Question

In Native IOS, it seems very easy to hide the tab bar in the navigation interface ( http://www.appcoda.com/ios-programming-101-how-to-hide-tab-bar-navigation-controller/ ), but in React Native, it seems not so easy to implement. Even I override the hidesBottomBarWhenPushed method for RCTWrapperViewController :

- (BOOL) hidesBottomBarWhenPushed { return YES; } 

Answer 1

This is a deeper answer based on this issue in React-Native.

In the left sidebar of Xcode, select “Project Manger” (folder icon) to see the file structure.

The specific folder you are looking for is located at: [YourAppName]> Libraries> React.xcodeproj> React> Views

RCTNavItem.h

 #import "RCTComponent.h" @interface RCTNavItem : UIView //add this line: @property (nonatomic, assign) BOOL showTabBar; 

RCTNavItemManager.m

 @implementation RCTNavItemManager RCT_EXPORT_MODULE() - (UIView *)view { return [RCTNavItem new]; } // add this line: RCT_EXPORT_VIEW_PROPERTY(showTabBar, BOOL) 

RCTNavigator.m

 - (void)navigationController:(UINavigationController *)navigationController willShowViewController:(__unused UIViewController *)viewController animated:(__unused BOOL)animated { // Add these two lines: RCTWrapperViewController *thisController = (RCTWrapperViewController *)viewController; navigationController.tabBarController.tabBar.hidden = !thisController.navItem.showTabBar; 

I did not need to add propTypes to NavigatorIOS.ios.js or TabBarIOS.ios.js

For all this to work, each tab seems to have its own NavigatorIOS component. When I just had a screen in my tab, the method - (void) navigationController: (UINavigationController *) navigationController ... was not called. This is not a problem for me, because hiding navBar is easily done using navigationBarHidden: true.

In my case, I had TabNav> HomeNav> HomeScreen

Passing showTabBar to HomeNav:

 render() { return ( <NavigatorIOS style={styles.container} client={this.props.client} initialRoute={{ title: 'Home', component: HomeScreen, navigationBarHidden: true, showTabBar: false, passProps: { ...}, }}/> ); } } 

Hope this helps someone!

Answer 2

React native has two main components of Navigator: Navigator and NavigatorIOS .

• The documentation has a good comparison of the pros and cons of each.

---

Hiding the navigation bar for NavigatorIOS components

Set the navigationBarHidden property to true to hide the navigation bar:

 <NavigatorIOS navigationBarHidden={true}> <View> ... </View> </NavigatorIOS> 

See "React source documentation .

Hiding the navigation bar for Navigator components

Since navbar is explicitly specified for Navigator components, it is not displayed by default.

Answer 3

You can try using the package below, it has a good solution for this.

react-native-tabbar-navigator

Answer 4

I am changing the source code of ReactNative 0.11 for this problem. If you need it: In RCTNavigationController add the codes:

 - (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated{ if (self.viewControllers.count >= 1) { [self hideTabBarIfExist:YES]; } [super pushViewController:viewController animated:animated]; } - (UIViewController *)popViewControllerAnimated:(BOOL)animated { if (self.viewControllers.count <= 2) { [self hideTabBarIfExist:NO]; } return [super popViewControllerAnimated:animated]; } - (NSArray *)popToViewController:(UIViewController *)viewController animated:(BOOL)animated { if ([self.viewControllers indexOfObject:viewController] == 0) { [self hideTabBarIfExist:NO]; } return [super popToViewController:viewController animated:animated]; } - (NSArray *)popToRootViewControllerAnimated:(BOOL)animated{ [self hideTabBarIfExist:NO]; return [super popToRootViewControllerAnimated:animated]; } - (void)hideTabBarIfExist:(BOOL)flag { UIWindow *keyWindow = [[[UIApplication sharedApplication]delegate]window]; UIView *tabView = [self getTabBarView:keyWindow]; if (tabView) { // you can use other animations [UIView animateWithDuration:0.3 animations:^{ tabView.hidden = flag; }]; } } - (UIView *)getTabBarView:(UIView *)pView { if (pView == nil) { return nil; } for (UIView *sView in [pView subviews]) { if ([sView isKindOfClass:[UITabBar class]]) { return sView; } UIView *t = [self getTabBarView:sView]; if (t) { return t; } } return nil; } 

Answer 5

If you use the react-navigation package, this is pretty simple:

 class ScreenWhereTabbarIsHidden extends React.Component { static navigationOptions = { tabBarVisible: false, } } 

Answer 6

RCTWrapperViewController.m

 - (BOOL)hidesBottomBarWhenPushed { return self.navigationController.viewControllers.count != 1; } 

RCTTabBar.m

 - (void)reactBridgeDidFinishTransaction { ... if (_tabsChanged) { NSMutableArray<UIViewController *> *viewControllers = [NSMutableArray array]; for (RCTTabBarItem *tab in [self reactSubviews]) { UIViewController *controller = tab.reactViewController; if (!controller) { NSArray *tabSubViews = [[[tab reactSubviews] firstObject] reactSubviews]; RCTNavigator *navigator = [tabSubViews firstObject]; if (!tabSubViews.count) { tab.onPress(nil); return; } else if ([navigator isKindOfClass:[RCTNavigator class]]) { controller = navigator.reactViewController; } else { controller = [[RCTWrapperViewController alloc] initWithContentView:tab]; } } [viewControllers addObject:controller]; } _tabController.viewControllers = viewControllers; _tabsChanged = NO; RCTTabBarItem *tab = (RCTTabBarItem *)[[self reactSubviews] firstObject]; tab.onPress(nil); } ... }