title: How to hide React Native NavigationBar
body: <p>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?</p>
  
  <p>This is <a href="https://www.dropbox.com/s/eugz8bx5tz1px1p/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202015-05-13%207.25.49.png" rel="noreferrer">screenshot</a> that I've seen. I need backend of NavigatorIOS..</p>
  
  <p>The structure that I want to build is the following:</p>
  
  <pre><code>├── NavigatorRoute1
  │   ├── NavigatorIOSRoute1
  │   ├── NavigatorIOSRoute2
  │   └── NavigatorIOSRoute3
  └── NavigatorRoute2
  </code></pre>
  
  <p>The code that I have is the below. (Basically obtained from UIExplore examples.</p>
  
  <h3>Navigator</h3>
  
  <pre><code>render: function(){
  return (
    &lt;Navigator
      initialRoute={ROUTE_STACK[this.getInitialRouteIndex()]}
      initialRouteStack={ROUTE_STACK}
      style={styles.container}
      renderScene={this.renderScene}
      navigationBar={
        &lt;Navigator.NavigationBar
          routeMapper={NavigationBarRouteMapper}
          style={styles.navBar}
        /&gt;
      }
    /&gt;
  );
  }
  </code></pre>
  
  <h3>NavigatorIOS</h3>
  
  <pre><code>render: function(){
  var nav = this.props.navigator;
   return (
    &lt;NavigatorIOS
      style={styles.container}
      ref="nav"
      initialRoute={{
        component: UserSetting,
        rightButtonTitle: 'Done',
        title: 'My View Title',
        passProps: {nav: nav},
      }}
      tintColor="#FFFFFF"
      barTintColor="#183E63"
      titleTextColor="#FFFFFF"
    /&gt;
  );
  </code></pre>
  
  <p>}</p>
  
  <h2>UPDATE with my solution</h2>
  
  <p>I added a function to change state that handle rendering of Navigator and pass the prop to the component to change the state.</p>
  
  <pre><code>hideNavBar: function(){
    this.setState({hideNavBar: true});
  },
  render: function(){
   if ( this.state.hideNavBar === true ) {
    return (
      &lt;Navigator
        initialRoute={ROUTE_STACK[0]}
        initialRouteStack={ROUTE_STACK}
        renderScene={this.renderScene}
      /&gt;
    );
   }else{
    return (
      &lt;Navigator
        initialRoute={ROUTE_STACK[this.getInitialRouteIndex()]}
        initialRouteStack={ROUTE_STACK}
        style={styles.container}
        renderScene={this.renderScene}
        navigationBar={
          &lt;Navigator.NavigationBar
            routeMapper={NavigationBarRouteMapper}
            style={styles.navBar}
          /&gt;
        }
      /&gt;
    );
  }
  </code></pre>
  
  <p>}</p>
  
  <p>and </p>
  
  <pre><code>render: function(){
   var hideNavBar = this.props.hideNavBar;
   return (
    &lt;NavigatorIOS
      style={styles.container}
      initialRoute={{
        component: UserSetting,
        rightButtonTitle: 'Done',
        title: 'My View Title',
        passProps: {hideNavBar: hideNavBar},
      }}
      tintColor="#FFFFFF"
      barTintColor="#183E63"
      titleTextColor="#FFFFFF"
    /&gt;
   );
  </code></pre>
  
  <p>}</p>