React-native-router-flux: How to hide navBar pragmatically

[pgonzalez-santiago]

Version

• react-native-router-flux v4.0.0-beta.21 (v3 is not supported)
• react-native v0.48.3,

I need to hide the navBar inside the component. I have tried to run:

Actions.refresh({ hideNavBar: true })

but it doesn't work. Any ideas of how can I hide the navBar programmatically?

[MichaelPintos]

<Scene key="myView" component={myView} hideNavBar={true}/>

in myView you will need to create your own navigation bar.

<View style={styles.container}>
        {this.state.renderNav && (
          <View>
            <Text>NavBar</Text>
          </View>
        )}
        <Text>MyView</Text>
        <TouchableHighlight onPress={() => this.setState({ renderNav: !this.state.renderNav })}>
          <Text>Toggle Nav</Text>
        </TouchableHighlight>
 </View>

[onrige]

@pgonzalez-santiago This feature was able about two weeks ago by my PR but it's broke drawer in some cases it seems.
So you can have a look at commit: https://github.com/aksonov/react-native-router-flux/commit/29090461469d4eb907072c63e9881f99205fab73

[pgonzalez-santiago]

So what do we do now? I am doing feature that needs fullscreen so I have to hide the navbar.

[onrige]

@pgonzalez-santiago Fine, I will try to reproduce this bug in commit and resolve it. But you must admit that there is no accepted PRs since @aksonov went on vacation (till 8 october).

[ihor]

I'm having the same issue but I want to display navBar on scroll.

[thiemo--bleeken]

have the same issue. how can we hide the navbar?

[alexhoo]

Same issue here :(

[johanmic]

This can be solved using a custom nav bar

<Router 
navBar={NavBar} >
....
</Router>

export default class CustomNavBar extends Component {
    render() {
        const { title, hideNavBar } = this.props;
        if(hideNavBar === true) return <View />
        return (
            <View>
                <Text>{title}</Text>
            </View>
        );
    }
}

then whenever you can set

Actions.refresh({hideNavBar:true})

[onrige]

@pgonzalez-santiago @ihor @thiemo--bleeken @alexhoo now you can monitor any updates on this here #2492.

[pgonzalez-santiago]

Thank you @onrige

[hatemjaber]

Is it possible to use the LeftButton, RightButton, etc... in the NavBar.js file and pass properties to it? I was hoping there is a way to access it so that I can pass it along to the renderRightButton property or right property in order to use it rather than creating one from scratch. Please advise how I can go about doing that.

[aksonov]

Please check latest master.