CODEWITHSUNDEEP
react-native
NewbieCoder
NewbieCoder

Reputation: 706

React Native Navigation - adding headerRight causes title to be pushed away from the left side

Consider the following code: 

'Points of Interest': {
    screen: Views.POI,
    navigationOptions: ({ navigation }) => ({
        headerTitle: 'Interesting Places',
    }),
},

Produces: enter image description here

However, if I were to add a view of any kind, say, a button, to headerRight like:

'Points of Interest': {
    screen: Views.POI,
    navigationOptions: ({ navigation }) => ({
        headerTitle: 'Interesting Places',
        headerRight: <BackButton navigation={navigation} screen={'Points of Interest'} />,
    }),
 },

enter image description here

What am I missing out here?

Upvotes: 1

Views: 368

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 281686

You can make use of headerTitleAlign to set the left value to headerTitle

'Points of Interest': {
    screen: Views.POI,
    navigationOptions: ({ navigation }) => ({
        headerTitle: 'Interesting Places',
        headerRight: <BackButton navigation={navigation} screen={'Points of Interest'} />,
        headerTitleAlign: 'left' 
    }),
 },

You can make use of headerRightContainerStyle to add further stylings to headerRight

Upvotes: 0

Anhdevit
Anhdevit

Reputation: 2104

Like me I will set backButton in headerLeft and title in center

'Points of Interest': {
    screen: Views.POI,
    navigationOptions: ({ navigation }) => ({
        headerTitle: 'Interesting Places',
        headerLeft: <BackButton navigation={navigation} screen={'Points of Interest'} />,
        headerTitleAlign: 'center', // align center in android
    }),
},

Upvotes: 1

Related Questions