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

  />

 );

}