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!

Annulus

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 :)

Stockholm

wow. that little tiny bit saved me sooo much pain and headache. i only needed a custom navbar on one scene and added it there and it worked flawlessly. thank you. – Spellman

ok...so another question, i've done that and it works great, but the navbar component doesn't move with the navbar. it stays put on the page and shows over other content when the page is scrolled. any ideas? – Spellman