How to style the Nav Bar ?

[KBLNY]

Hi,
I successfully change the background color of the nav bar in the "master" branch, but not in the "2.0" branch.
Any help ?
Thanks

[AdamBrodzinski]

@aksonov this would be really helpful for me too. I'm looking to use the Android styles and it seems like a lot less work to do this instead of creating a custom header.

Thanks for this project btw... it's perfect!

[pewh]

You can change navbar background color on Router.

<Router navigationBarStyle={styles.navBar} titleStyle={styles.navTitle} sceneStyle={styles.routerScene}>
    <Schema .../>
    <Route .../>
</Router>

const styles = StyleSheet.create({
  navBar: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'red', // changing navbar color
  },
  navTitle: {
    color: 'white', // changing navbar title color
  },
  routerScene: {
    paddingTop: Navigator.NavigationBar.Styles.General.NavBarHeight, // some navbar padding to avoid content overlap
  },
})

[thngdude]

@pewh Is this possible with nested Routers? I am trying to have different styled Navigation Bars for different screens. For instance, one screen may have a green navbar and another may have a red navbar.

The code below routes correctly, however no style is applied to the navigation bar in the signin route.

`< Router>

            <Route hideNavBar={true} name="launch" component={Launch} initial={true} wrapRouter={true} title="Launch"/>
            <Route name="signin">
                <Router navigationBarStyle={styles.navBar} titleStyle={styles.navTitle}>
                    <Route hideNavBar={false} name="signinmain" component={SignIn} title="SignIn"/>
                </Router>
            </Route>
        </Router>`

const styles = StyleSheet.create({ navBar: { flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', backgroundColor: 'green', }, navTitle: { color: 'white', } });

Apoligies for the bad styling ... I can't figure out how to format it correctly.

[KBLNY]

I thank you @pewh ! thanks to you I just discover that I was unable to customize the nav bar due to that overlap, I sometimes successfully customized the nav bar by juggling with the hideNavBar and showNavigationBar attributes.
However, following your guidelines the nav bar is well customized but when I switch between tabs, the nav bar displays the previous tab name in place of the "back" button. Here is my code, can you please help me to spot the mistake?

<Router name="root" hideNavBar={true} showNavigationBar={false} navigationBarStyle={styles.navBar} titleStyle={styles.navBarTitle} sceneStyle={styles.routerScene} >
              <Schema name="modal" sceneConfig={Navigator.SceneConfigs.FloatFromBottom}/>
              <Schema name="default" sceneConfig={Navigator.SceneConfigs.FloatFromRight}/>
              <Schema name="tab" type="switch" icon={TabIcon} />

              <Route name="register" schema="modal" component={registerComponent} />
              <Route name="login" schema="modal" component={loginComponent} />

              <Route name="tabbar" style={styles.tabBar} >
                  <Router navigationBarStyle={styles.navBar} titleStyle={styles.navBarTitle}>
                    <Route name="newsFeed" schema="tab" title="News" component={newsFeedComponent} />
                      <Route name="notifications" schema="tab" title="Notif." component={notificationsComponent} />
                      <Route name="events" schema="tab" title="Events" component={eventsComponent} />
                  </Router>
              </Route>
          </Router>

Please Note, if I change the hideNavBar and showNavigationBar, I get the following outputs:

• hideNavBar={true} showNavigationBar={true} : 2 styled nav bars, the topest one with only a "Back" button (<) and the bottomest one with the title and the back button "< Title of previous screen" (even when switching between tabs)
• hideNavBar={false} showNavigationBar={true} : idem than above
• hideNavBar={true} showNavigationBar={false} : 1 styled nav bar, with the title and the back button "< Title of previous screen" (even when switching between tabs)
• hideNavBar={false} showNavigationBar={false} : idem than above

I can't really understand the difference between hideNavBar and showNavigationBar and their impacts to get the expected output : 1 styled bar with the Screen Title and the Back Button that should appear only when "stacked" screens are handled, not when switching between tabs.

Thanks a lot for help

[pewh]

Hi @thngdude, you can styling navbar on each Router. Look at this below to see what I've mean. I have not test this code below, so let me know if something is wrong.

        <Router>
            <Route hideNavBar={true} name="launch" component={Launch} initial={true} wrapRouter={true} title="Launch"/>
            <Route name="signin">
                <Router navigationBarStyle={styles.greenNavBar} titleStyle={styles.navTitle}>
                    <Route hideNavBar={false} name="signinmain" component={SignIn} title="SignIn"/>
                </Router>
                <Router navigationBarStyle={styles.redNavBar} titleStyle={styles.navTitle}>
                    <Route hideNavBar={false} name="signupmain" component={SignUp} title="SignUp"/>
                </Router>
            </Route>
        </Router>

or do this if above doesn't work.

        <Router>
            <Route hideNavBar={true} name="launch" component={Launch} initial={true} wrapRouter={true} title="Launch"/>
            <Route name="signin">
                <Router navigationBarStyle={styles.greenNavBar} titleStyle={styles.navTitle}>
                    <Route hideNavBar={false} name="signinmain" component={SignIn} title="SignIn"/>
                </Router>
            </Route>

            <Route name="signup">
                <Router navigationBarStyle={styles.redNavBar} titleStyle={styles.navTitle}>
                    <Route hideNavBar={false} name="signupmain" component={SignUp} title="SignUp"/>
                </Router>
            </Route>
        </Router>

Ps: Wrap with triple backtick instead of one backtick ( ` ) to format multiline code.

[pewh]

Hi @KBLNY, I'm glad I can help your problem 😄
It seems you forget to include footer prop in Router inside tabbar route.
So your code should be:

Router name="root" hideNavBar={true} showNavigationBar={false} navigationBarStyle={styles.navBar} titleStyle={styles.navBarTitle} sceneStyle={styles.routerScene} >
              <Schema name="modal" sceneConfig={Navigator.SceneConfigs.FloatFromBottom}/>
              <Schema name="default" sceneConfig={Navigator.SceneConfigs.FloatFromRight}/>
              <Schema name="tab" type="switch" icon={TabIcon} />

              <Route name="register" schema="modal" component={registerComponent} />
              <Route name="login" schema="modal" component={loginComponent} />

              <Route name="tabbar" style={styles.tabBar} >
                  <Router footer={TabIcon}  navigationBarStyle={styles.navBar} titleStyle={styles.navBarTitle}>
                    <Route name="newsFeed" schema="tab" title="News" component={newsFeedComponent} />
                      <Route name="notifications" schema="tab" title="Notif." component={notificationsComponent} />
                      <Route name="events" schema="tab" title="Events" component={eventsComponent} />
                  </Router>
              </Route>
          </Router>

and don't forget to include TabIcon component.

class TabIcon extends React.Component {
    render(){
        return (
            <Text style={{color: this.props.selected ? 'red' :'black'}}>{this.props.title}</Text>
        );
    }
}

I have not tested it, but it should work.

[aksonov]

Hi guys, any PR about docs improve would be very helpful, thanks.

[thngdude]

@pewh Thanks, I tried your suggestions, and the navbar appears, but no title is present and the styling is the default style.

[AdamBrodzinski]

Thanks @pewh I got it to work. However, to get Android styles and transitions is becoming rather difficult. This seems like the underlying ex-navigator issue expo/ex-navigator#24 would solve this. Ideally if the user is on an Android and the hideNavBar={false} is set... it should just look like an Android.

It seems like Navigator.NavigationBar.StylesAndroid opens up a can of worms and the whole NavigatorBar is poorly documented. I really don't have time to sink into this currently so I might try and find another NavBar component instead.

** edit **

Digging deeper the built in ToolbarAndroid is going to the ticket. Using your built in header prop will allow me to integrate this.

https://github.com/facebook/react-native/blob/master/Examples/Movies/MoviesApp.android.js#L50-L56

[aksonov]

3.0 is released with improved docs. Closing it for now, because it is for outdated version (2.x)

[AdamBrodzinski]

@alirezavalizade I would use the StatusBar component on the page that has the dark backgrounds:
https://facebook.github.io/react-native/docs/statusbar.html

[fostertime]

How would one remove, what looks like about 20 pixels of padding, on the top of the NavBar if your app does not display the Status Bar? I've tried top: -10, and marginTop: 0, etc. But it doesn't seem to correctly alignItems (back button and title) to the center of the row.

[robtg4]

is it possible to add custom buttons to the navbar at all?

[travisday]

@robtg4 I was wondering the same, the sample navbar here is very confusing since I am just starting.