CODEWITHSUNDEEP
androidreactjsreact-native
Mark Silver
Mark Silver

Reputation: 422

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

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?

Upvotes: 6

Views: 5949

Answers (3)

ragamufin
ragamufin

Reputation: 4162

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

Upvotes: 3

pinewood
pinewood

Reputation: 1839

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.

Upvotes: 13

G. Hamaide
G. Hamaide

Reputation: 7106

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'

Upvotes: -2

Related Questions