Hiding and showing Navigator for different scenes - react-native

Question

I'd like to, in my router on renderScene, be able to have a property of scenes/components etc. to hide the Navigator bar.
Unfortunately, I can't modify the state of the navigationbar, and have a re-render fire with conditions. I guess that's because of the way it's set?
export default class Root extends React.Component {
render(){
return (
<Navigator
initialRoute={Routes.SubdomainScreen}
renderScene={Router.renderScene}
configureScene={Router.configureScene}
navigationBar={
<Navigator.NavigationBar
routeMapper={NavigationBarRouteMapper}
/>
}
style={styles.container}
/>
)
}
}
Ideally, in my router, some components with have navigationbar set to false, and I will then update the style of the navigator to {opacity:0}. When/where would someone accomplish this?

Answer 1

You can use your route definitions and add a hideNavBar property to it, then track it with state.
export default class Root extends React.Component {
constructor(props) {
super(props);
this.state = {
hideNavBar: false,
};
}
render(){
let navBar = null;
if (! this.state.hideNavBar) {
navBar = (
<Navigator.NavigationBar
routeMapper={NavigationBarRouteMapper}
/>
);
}
return (
<Navigator
initialRoute={Routes.SubdomainScreen}
renderScene={Router.renderScene}
configureScene={Router.configureScene}
onWillFocus={this.onNavWillFocus.bind(this)}
navigationBar={navBar}
style={styles.container}
/>
)
}
onNavWillFocus(route) {
if (route.hideNavBar !== undefined && this.state.hideNavBar !== route.hideNavBar) {
this.setState({hideNavBar: route.hideNavBar});
}
}
}