How to use react-navigation to center headerTitle?

Question

Home: {
  screen: Home,
  headerTitleStyle: {
    alignSelf: 'center',
  }

HeaderTitleStyle is used for header style in code but does not take effect

Answer 1

I have encountered this issue on Android devices. After searching for a while, there were many suggestions to use alignSelf: 'center'. However it wasn't fixed with it. But I was able to fix it by textAlign: 'center' and flex: 1

You could specify the navigationOptions in your component:

static navigationOptions = { headerTitleStyle: { textAlign: 'center', flex: 1 }, };

UPDATED:
The best solution is to use headerLayoutPreset: 'center' in createStackNavigator()

const MainStack = createStackNavigator({ screen: YourScreen, navigationOptions: { title: 'Title' } }, { headerLayoutPreset: 'center' });

I hope this should work:-)

Answer 2

On the newer versions (2020) you should use (inside navigationOptions), this: headerTitleAlign: 'center' It should work! ;)