react-nativereact-navigation

How can we center title of react-navigation header?


React-navigation docs are still young, and reading through the issues is not working quite much for me (changes on each version) does anyone have a working method to center title in Android using react-navigation in React Native?


Solution

  • Warning: react-navigation changes a lot, the way to do title align, already changed for like 2-3 times from my first answer of it.

    If my answer doesn't work for you, please see other answers.

    Modified 2021/08/31:

    In year of 2020, headerLayoutPreset was also deprecated. The new way is via defaultNavigationOptions: (@ThatFrenchComputerGuy's answer helped me)

    const AppNavigator = createStackNavigator({
        Home: { screen: HomeScreen },
     }, 
     {
      defaultNavigationOptions: {
          title: 'Aligned Center',
          headerTitleAlign: 'center'
      }
    });
    

    Modified 2019/03/12:

    In year of 2018, after react-navigation v2 release (7 Apr 2018), for some reason alignSelf was not working anymore. Here it is the new working way, using headerLayoutPreset. from @HasanSH:

    const HomeActivity_StackNavigator = createStackNavigator({
        Home: {screen: Main},
    }, {headerLayoutPreset: 'center'});
    

    Original Answer 2017/07/11:

    Use headerTitleStyle:

    static navigationOptions = {
        headerTitleStyle: { alignSelf: 'center' },
        title: 'Center Title',
    }
    

    enter image description here