Changing the default style for a Navigator.NavigationBar (title)

Question

I\'ve created a navigation bar in my react-native app using the following syntax

Answer 1

I assume this problem occurred for you on Android. I had the same issue with the title being placed on the left. What worked out for me was the following:

<NavigationBar
        routeMapper={NavigationBarRouteMapper}
        style = {styles.navigationBar}
        navigationStyles={Navigator.NavigationBar.StylesIOS}
/>

The StylesIOS makes the navbar resemble the iOS-look, where the title is centered.

Answer 2

Just to add to this. pinewood's answer will give you iOS styling on android, though it's not quite the same, you will still have to tweak. You can however keep the android styling and still center your title.

The NavigationBar on android has a leftMargin (72px at the time of this writing) applied to the title area, this is why when you center your title it appears just a bit off-center. So in order to center your title, simply apply a rightMargin equal to the existing leftMargin. You can find the value for the margin in Navigator.NavigationBar.Styles.Stages.Left.Title.marginLeft. So your code would look something like the following:

import { Navigator } from 'react-native'

let headerTitleLeftMargin = Navigator.NavigationBar.Styles.Stages.Left.Title.marginLeft || 0

then your styles:

alignSelf: 'center'
marginRight: headerTitleLeftMargin

Answer 3

What you can do is something like this :

<Text style={styles.navbarTitleText}>
 Welcome
</Text>

and in navBarTitleText style :

position: 'absolute',
left: 0,
right: 0,
backgroundColor: 'transparent',
textAlign: 'center'