[NavigatorIOS] doesn't update when navigationBarHidden changes

[ustun]

On my main view, I want to hide navigation bar, but show it in the child views. I pass some props to show/hide the navbar to children, and call them accordingly in componentDidMount/ componentWillUnmount.

Showing works, but hiding doesn't work (or sometimes works, sometimes doesn't).

I have also tested whether it works reliably when just setting it on/off in a single view and it doesn't seem to work. Here is a gist: https://gist.github.com/ustun/5670b7480569fbb784a4

[ericzwong]

i have sample problem with u , and when i change the tarbar, the navigationbar title can't change

[MandarinConLaBarba]

I'm also having this issue.

[kujohn]

Having this issue as well. Tried to follow the chain that lead to this. This method does get called on state change or on navigator.replace and navgiation.resetTo, but it stops there.

Perhaps the UIKit portion isn't setup for accepting the changes? https://github.com/facebook/react-native/blob/master/React/Views/RCTWrapperViewController.m#L69

[kujohn]

Perhaps the work around for now is to setup the first page as non-navigatorIOS page, and the child views to start navigatorIOS routes. You'll loose the swipe back to first page though.

[jeroenbourgois]

Any more insights on this? I just reverted a lot of code since I was using the 'navigatorIOS' from the second page forward. But then I saw the navigationBarHidden prop and thought it would solve my setup. But I was wrong :)

[liubko]

navigationBarHidden works properly when I use navigator.push, but it doesn't work when I use navigator.replace or navigator.resetTo

[jeroenbourgois]

@liubko I cannot get that to work. Can you show the code you use to change navigationBarHidden when using navigator.push?

Here is how I do it, with no effect (btw navigationBarHidden was set to false when setting up the NavigatorIOS component):

 this.props.navigator.push({
   component: Login,
   title: "Sign In",
   navigationBarHidden: false, // try it here
 })

 this.props.navigator.navigationBarHidden = false // and here

[nicinabox]

@jeroenbourgois navigationBarHidden is a prop on NavigatorIOS itself. Passing it in push won't work because those are options for the route. I'm not sure about setting it like this.props.navigator.navigationBarHidden = false.

[liubko]

@jeroenbourgois I save isNavBarHidden status in parent component state.

<NavigatorIOS navigationBarHidden={this.state.isNavBarHidden}
              ref="nav"
              initialRoute={{...}}  />

so then if I do smth like this:

this.refs.nav.push({...});
this.setState({
  isNavBarHidden: ...
});

it works correctly. But it doesn't work when I use replace or resetTo

[jeroenbourgois]

AHA but of course! Should have seen that.... thanks a bunch!

[eltoob]

Still not quite clear how to change isNavBarHidden from a child view .... @liubko how does this.setState is going to fix the problem as the state is at the parent level class

[liubko]

@eltoob when you change state in parent component you then pass it to NavigatorIOS

<NavigatorIOS navigationBarHidden={this.state.isNavBarHidden} />

this will cause a re-render with new navigationBarHidden value

[alexrabarts]

@liubko are you passing the context of the parent component to the child component through the props object?

[liubko]

@alexrabarts you can pass a callback which will change state in parent component
If you are using flux you could trigger some action to update store's isNavBarHidden value, and you will need to listen for that store in parent component.

Actually I ended up using my own header component, to have more control on it