I'm new to react-native and I was playing around with react-navigation. I have a problem with positioning of the back-arrow in the navigation tab. I would like to target the back-arrow in order to position it.

Here is what I've done so far

static navigationOptions = ({navigation}) => {
  return { 
    headerTitle: navigation.state.params.navTitle,
    headerStyle: {
      height: '45%',
      backgroundColor: '#ffae19'
    },
    headerTintColor: 'white',

    // this what I tried to implement
    headerTitleStyle: { position: 'absolute', top: 10 }
  }
}

I'm new to react-native and I was playing around with react-navigation. I have a problem with positioning of the back-arrow in the navigation tab. I would like to target the back-arrow in order to position it.

Here is what I've done so far

static navigationOptions = ({navigation}) => {
  return { 
    headerTitle: navigation.state.params.navTitle,
    headerStyle: {
      height: '45%',
      backgroundColor: '#ffae19'
    },
    headerTintColor: 'white',

    // this what I tried to implement
    headerTitleStyle: { position: 'absolute', top: 10 }
  }
}

You see I just need to make the back-arrow positioned at the top, because in my current tab the arrow is at the center of the nav-tab (vertically), which looks ugly. Any help ?

• javascript
• reactjs
• react-native
• ecmascript-6
• react-navigation

1 Answer 1

You cannot directly change the style of the automatic back arrow. However, you can override the back arrow with your custom ponent, as explained on React Navigation docs. The article is about right part of the bar, but as stated in the last part, the same holds for the left part of the bar, where the arrow is placed.

static navigationOptions = ({navigation}) => {
  return { 
    headerTitle: navigation.state.params.navTitle,
    headerStyle: {
      height: '45%',
      backgroundColor: '#ffae19'
    },
    headerTintColor: 'white',
    headerLeft: (
      <Button onPress={() => navigation.goBack()} title="Back" />
    )
  }
}

If you don't like the "Back" label, you can install react-native-vector-icons using npm and modify the previous code like

static navigationOptions = ({navigation}) => {
  return { 
    headerTitle: navigation.state.params.navTitle,
    headerStyle: {
      height: '45%',
      backgroundColor: '#ffae19'
    },
    headerTintColor: 'white',
    headerLeft: (
      <TouchableWithoutFeedback 
          style={{ /* Put your style here */}}
          onPress={() => navigation.goBack()} >
      >
          <Icon name="md-arrow-round-back" size={16} color="#000" />
      </TouchableWithoutFeedback>
    )
  }
}

Don't forget to import icons

import Icon from 'react-native-vector-icons/Ionicons;