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

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