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.

[BhavanPatel]

Well I had made one plugin for that it is use full to achieve what you want.
Whether its Statusbar or Navbar Color

https://github.com/BhavanPatel/react-native-navbar-color

https://www.npmjs.com/package/react-native-navbar-color

[alexpavlovaskblue]

@BhavanPatel, is it working for iOS?

[BhavanPatel]

@alexpavlovaskblue Yes, Please check Readme of plugin. Thanks

[petatemarvin26]

The other possible way to change background color of of Status Bar and Navigation Bar of Android Device is through StatusBar module and NativeModules

and you may check the answer link below

https://stackoverflow.com/a/66415888/10646511