Add method to hide Navigator.NavigationBar

[satya164]

Is there a way to hide the Navigator.NavigationBar?

For example, I have a search button, when it is pressed, I want to hide the navigation bar, and show the search bar in place of it. Is it possible?

It'll be very useful to add such a method, and users will be able to do lots of things like hide navigation bar on scroll etc.

[mkonicek]

Can you please use Stack Overflow to ask questions and tag them with react-native? http://stackoverflow.com/questions/tagged/react-native

Many people from the community hang out on Stack Overflow and will be able to see your question. Using Stack Overflow for questions also helps us use Github issues to keep track of bugs that need to be fixed.

[satya164]

I'll ask on StackOverflow. BTW, I've changed my title to reflect that it is more of a feature request than just a question.

[mkonicek]

👍 Thanks @satya164!

[hedgerwang]

@satya164

We'd like to avoid imperativeAPI as possible as we can.

If you want to make the "hidden" state controllable, you may do this.

var NavigationBarOne = React.createClass({
  render() {
    if (this.props.hidden) {
      return null;
    }
    return <Navigator.NavigationBar {...this.props} />
  }
});

Still, if imperativeAPI is what you'd like to have, you can do this:

var NavigationBarTwo = React.createClass({
  render() {
    if (this.state.hidden) {
      return null;
    }
    return <Navigator.NavigationBar {...this.props} />
  },

  hide() {
    this.setState({hidden: true});
  },

  show() {
    this.setState({hidden: false});
  },
});

IMHO, this isn't really the core feature that needs to be backed into the core component and there
more ways to do this.

For now, we're working on refactoring the Navigator API so stabilizing the API is high priority for now.

[satya164]

@hedgerwang Understood. Looking forward to the improved navigator API.

Just returning null won't be enough in my case as I'll want to animate hiding there navbar. I'll try playing with Animated to try and achieve that.

Thank you.

[despairblue]

@hedgerwang the imperative approach does not work since it is impossible to get a ref to NavigationBarTwo. A ref callback added to the component that is passed to the Navigator's navigationBar property is never called.
I also could not get the NavigationBarOne approach to work. Eventually the navigation bar is rendered, but only after a second render pass. The first render pass still renders the navigation bar with the old props, so the view slides in, shows no navigation bar (what I want is to hide the navbar for the first route, and show it for subsequent ones), after a while (when the app is rerendered for some reason) the navigation bar updates and renders correctly.

I'll try to make some minimal examples.