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

<Navigator
  renderScene={this.renderScene.bind(this)}
  navigator={this.props.navigator}
  navigationBar={
    <Navigator.NavigationBar 
      style={styles.navbar}  
      routeMapper={NavigationBarRouteMapper} />
      } />

By default the navigation bar has a layout where the LeftButton is aligned to the left side of the bar and the RightButton is aligned to right side of the bar. But the Title is aligned to the left side of it's container flexbox. Which is next to the LeftButton.

What I'm trying to achieve is very simple I just want the Title centered between the two buttons of the navigation bar.

My title is just a < Text> component like so

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

I thought I could achieve this using the following style

alignSelf: 'center'

this almost works but it became apparent that the container flexbox for the Title starts on the righthand edge of the LeftButton and ends at the end of the navigation bar at the edge of the screen, so it's centered between those 2 points. Which isn't the center of the screen/navbar.

I just want a central title, can anyone help?

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.