Search code examples
react-nativereact-reduxreact-native-router-flux

Hide navbar programatically in react-native-router-flux

I'm using react-native-router-flux.

I'm aware one can show/hide the navbar per scene by using hideNavbar on the respective scene like so:

const scenes = Actions.create(
    <Scene key="root">
        <Scene key="main" component={mainComponent} initial={true} hideNavBar={true}/>
        <Scene key="secondary" component={secondaryComponent} hideNavBar={false} />
    </Scene>
);

I need to toggle the navbar on/off dynamically depending on the state of the current Scene.

The readme says:

Highly Customizable Navigation Bar - Show/hide the navbar depending on Scene or even the state of a Scene (e.g. Edit/Save navbar for edit mode).

I didn't find any detailed instructions for that though. Can anyone please advise or provide a link to an example?

Thank you!

Solution

  • From the Readme:

    Actions.refresh(PARAMS) will update the properties of the current screen.

    To update mounted scene programmatically, you can simply do:

    Actions.refresh({key: 'yourSceneKey', hideNavBar: true});

    Feel free to put any other props there, for example you can also change the title of your scene with this refresh function.