How to hide React Native NavigationBar

Question

I have NavigatorIOS under Navigator and would like to hide Navigator's NavigationBar to use NavigatorIOS's bar. Is there any way to do this?

This is screenshot that I've seen. I need backend of NavigatorIOS..

The structure that I want to build is the following:

├── NavigatorRoute1 │   ├── NavigatorIOSRoute1 │   ├── NavigatorIOSRoute2 │   └── NavigatorIOSRoute3 └── NavigatorRoute2 

The code that I have is the below. (Basically obtained from UIExplore examples.

Navigator

render: function(){ return (   <Navigator     initialRoute={ROUTE_STACK[this.getInitialRouteIndex()]}     initialRouteStack={ROUTE_STACK}     style={styles.container}     renderScene={this.renderScene}     navigationBar={       <Navigator.NavigationBar         routeMapper={NavigationBarRouteMapper}         style={styles.navBar}       />     }   /> ); } 

NavigatorIOS

render: function(){ var nav = this.props.navigator;  return (   <NavigatorIOS     style={styles.container}     ref="nav"     initialRoute={{       component: UserSetting,       rightButtonTitle: 'Done',       title: 'My View Title',       passProps: {nav: nav},     }}     tintColor="#FFFFFF"     barTintColor="#183E63"     titleTextColor="#FFFFFF"   /> ); 

}

UPDATE with my solution

I added a function to change state that handle rendering of Navigator and pass the prop to the component to change the state.

hideNavBar: function(){   this.setState({hideNavBar: true}); }, render: function(){  if ( this.state.hideNavBar === true ) {   return (     <Navigator       initialRoute={ROUTE_STACK[0]}       initialRouteStack={ROUTE_STACK}       renderScene={this.renderScene}     />   );  }else{   return (     <Navigator       initialRoute={ROUTE_STACK[this.getInitialRouteIndex()]}       initialRouteStack={ROUTE_STACK}       style={styles.container}       renderScene={this.renderScene}       navigationBar={         <Navigator.NavigationBar           routeMapper={NavigationBarRouteMapper}           style={styles.navBar}         />       }     />   ); } 

}

and

render: function(){  var hideNavBar = this.props.hideNavBar;  return (   <NavigatorIOS     style={styles.container}     initialRoute={{       component: UserSetting,       rightButtonTitle: 'Done',       title: 'My View Title',       passProps: {hideNavBar: hideNavBar},     }}     tintColor="#FFFFFF"     barTintColor="#183E63"     titleTextColor="#FFFFFF"   />  ); 

}

Answer 1

Because some old methods are deprecated i used stacknavigator. It works for me, if you are using StackNavigator.

//******For Older Versions. But Will be Deprecated in future******* //static navigationOptions = { title: 'Welcome', header: null };  //For Latest Version Use: static navigationOptions = { title: 'Welcome', headerShown: false}; 

Feel free to contact, if any issue.

Answer 2

I solved this by defining a custom NavigationBar which can inspect the current route. Would look something like this:

class NavigationBar extends Navigator.NavigationBar {   render() {     var routes = this.props.navState.routeStack;      if (routes.length) {       var route = routes[routes.length - 1];        if (route.display === false) {         return null;       }     }      return super.render();   } } 

Using your example:

render: function(){   return (     <Navigator       initialRoute={{         component: UserSetting,         rightButtonTitle: 'Done',         title: 'My View Title',         display: false,       }}       style={styles.container}       renderScene={this.renderScene}       navigationBar={         <NavigationBar           routeMapper={NavigationBarRouteMapper}           style={styles.navBar}         />       }     />   ); }