Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 353
sldk Avatar asked Mar 16 '26 13:03

sldk


1 Answers

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.

like image 69
eden Avatar answered Mar 19 '26 01:03

eden



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!