How To Hide Tab Bar in Navigation Interface in React Native?

Question

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

- (BOOL) hidesBottomBarWhenPushed
{
  return YES;
}

Answer 1

This is a more in depth answer based on this issue in React-Native

In Xcode's lefthand sidebar, choose the 'Project Manger' (folder icon) to see the file structure.

The particular folder you are looking for is found 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

In order for this all to work, each tab seemingly needs to have its own NavigatorIOS component. When I had the tab simply present a screen the - (void)navigationController:(UINavigationController *)navigationController... method does not get called. This was not an issue for me, because hiding the navBar is easily done with navigationBarHidden: true.

In my case I had a TabNav > HomeNav > HomeScreen

Passing showTabBar prop in HomeNav:

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

I hope this helps someone!