Custom navBar using react-native-router-flux

Question

I can't t seem to find any complete examples for creating your own navBar component and then wiring it up to react-native-router-flux. Can anyone help me out? Looking at the github issues it seems like this is a big need for the library. What I'm looking to do is:

• Create a new component with a left button and an image to the right.
• Have the button icon change depending on the scene, but use the same image to the right.
• Wire it to react-native-router-flux so that the navBar displays properly and keeps track of the users position in the same way that the default navBar does.

Thanks!

Answer 1

This a similar problem I faced. No tutorials online that tell you how to use custom navbar. I have found a way that works for me. Try this:

<Router navBar = {MainNavBar}>
    <Scene key = "home" component = {HomeScreenContainer} title = "Home" initial = {true} />
</Router>

This is the code for main Root component where you define scene. You have to pass the Nav bar component in router or in any scene where you want your navbar.

And your Navbar will be something like this:

<NavigationBar      
    leftComponent = {<TouchableOpacity><Icon name="sidebar" /></TouchableOpacity>}
    centerComponent = {<Title>{props.title}</Title>}
    />

Hope this helps :)