CODEWITHSUNDEEP
react-nativereact-native-router-flux
Shorpy
Shorpy

Reputation: 1579

Custom navBar using react-native-router-flux

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:

Thanks!

Upvotes: 6

Views: 7406

Answers (1)

Shiva Pandey
Shiva Pandey

Reputation: 655

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

Upvotes: 13

Related Questions