How can we center title of react-navigation header?

React Native React Native-Android React Navigation

React Native Problem Overview

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?

React Native Solutions

Solution 1 - React Native

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',
}

Solution 2 - React Native

As of 2021, you can use headerTitleAlign.

Although headerLayoutPreset technically works, it should display a message informing that it is deprecated for expo users. The implementation is as follows:

const AppNavigator = createStackNavigator({
    Home: HomeScreen,
 }, 
 {
  defaultNavigationOptions: {
      title: 'Centered',
      headerTitleAlign: 'center'
  }
})

React-Navigation v5.x Update: As per @Ewan ' s rectification, if you are using React-Navigation v5.x, you cannot pass parameters to createStackNavigator(). Therefore, you should implement it as follows:

<Stack.Navigator screenOptions={{headerTitleAlign: 'center'}}>

Solution 3 - React Native

To center the header title, we need to have flex header by add flex property.

navigationOptions: {
    title: "Title center",
    headerTitleStyle: { 
        textAlign:"center", 
        flex:1 
    },
}

Solution 4 - React Native

For anyone searching in 2020, this is working for me:

<Stack.Navigator screenOptions={{headerTitleAlign: 'center'}}>

https://reactnavigation.org/docs/stack-navigator/#headertitlealign

Solution 5 - React Native

The accepted answer only works for me if there isn't a back button present on the left-hand side. In that case, you need to set an empty View to the right-hand side to properly center it.

static navigationOptions = {
    headerTitleStyle: { alignSelf: 'center' },
    title: 'Center Title',
    headerRight: (<View />)
}

Solution 6 - React Native

The best way to do that is by implementing what is listed in the documentation: Inside the StackNavigatorConfig assign an optional property, as follows:

createStackNavigator({
   { ... // your screens},
   { ...,
     headerLayoutPreset: 'center' // default is 'left'
   })

headerLayoutPreset - Specifies how to lay out the header components.

By doing this you don't have to mess up with the styling at all. And it would be applied to all the nested screens in that stack.

Check the Source

Solution 7 - React Native

Insert and set the headerTitleAlign value in defaultNavigationOptions. Here is the examples:

const MainStack = createStackNavigator(
    {
        ...

        defaultNavigationOptions: {
            headerTitleAlign: 'center',
        }
    }
)

Solution 8 - React Native

This worked for me :)

static navigationOptions = {
title: "SAMPLE",
headerTitleStyle: { flex: 1, textAlign: 'center'},

};

Solution 9 - React Native

headerTitleStyle: {
    color: 'white',
    textAlign: 'center',
               flex: 1
}

Solution 10 - React Native

if you're using react-navigation v4

const stack = createStackNavigator({
  screen1: {screen: Screen},
},{
  defaultNavigationOptions: {
    headerTitleAlign: 'left | center',
  }
});

Docs:

https://reactnavigation.org/docs/en/stack-navigator.html#headertitlealign

or if you're using react-navigation v3

const stack = createStackNavigator({
  screen1: {screen: Screen},
},{
  headerLayoutPreset: 'left | center',
});

Docs:

https://reactnavigation.org/docs/en/3.x/stack-navigator.html

Solution 11 - React Native

for @react-navigation/native@next, I can confirm { headerTitleAlign: 'center' } works for me on android. Example below:

<Stack.Navigator screenOptions={{ headerTitleAlign: 'center' }}>
    <Stack.Screen name="Promo" component={PromoScreen} />
    <Stack.Screen name="Settings" component={SettingsNavigator} />
</Stack.Navigator>

Solution 12 - React Native

I am using react navigation with below dev dependencies, with alignSelf and textAlign I was getting warnings

  "dependencies": {
"@react-native-community/masked-view": "^0.1.6",
"@react-navigation/native": "^5.0.0",
"@react-navigation/stack": "^5.0.0",
"base64-js": "^1.3.1",
"lodash": "^4.17.15",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-base64": "0.0.2",
"react-native-ble-plx": "^1.1.1",
"react-native-gesture-handler": "^1.5.6",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.2",
"react-native-screens": "^2.0.0-beta.2"

none of above option worked for me, then I tried property headerTitleAlign: 'centre' and it worked.

below is my component code

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
            <Stack.Screen
              name="Home"
              component={HomeScreen}
              options={{
                title: 'Track Down',
                headerTitleAlign: 'center',
              }}
            />

          </Stack.Navigator>
        </NavigationContainer>
      );
    };

Solution 13 - React Native

Set react-navigation header title in the center. Using the headerTitleStyle CSS.

static navigationOptions = {
        title: 'Home',
        headerTintColor: '#fff',
        headerTitleStyle: {
            width: '90%',
            textAlign: 'center',
        },
    };

Solution 14 - React Native

navigationOptions:({navigation}) =>({
                    gesturesEnabled :false,
                            
                    headerTitleStyle : {
                            color:"white",
                            fontFamily:"OpenSans",
                            alignSelf: 'center' ,
                            textAlign: 'center',
                            flex:1
                    },
                  }),

here . => {flex:1 ,textAlign: 'center' and alignSelf: 'center'} works for me!

Solution 15 - React Native

You should add headerLayoutPreset: 'center' to your createeStackNavigator function.

This is the one true way:

const someStack = createStackNavigator({
ConfigurationScreen: ConfigurationScreen,
PreferencesScreen: PreferencesScreen},
{ headerLayoutPreset: 'center' });

Reference: https://github.com/react-navigation/react-navigation/pull/4588

Solution 16 - React Native

On React Navigation v5 the only way I managed to center a View was to use it like this:

 <MainStack.Navigator
  screenOptions={{
    headerTitleAlign: 'center',
  }}>

 ...

  <MainStack.Screen
    ...
    options={({navigation, route}) => ({
      headerTitle: () => <ViewButton />,
    ...
    })}

Solution 17 - React Native

In the year 2020, if anyone had a problem as I did, below piece of snippet worked for me.

<Stack.Screen options={({ route, navigation }) => ({
          title: "Register",
          headerTitleAlign: "center")
        })}
 />

Solution 18 - React Native

As per version 5.x of ReactNavigation, you can use option header attribute headerTitleAlign with value center. Here is example of the code:

<Stack.Screen name="ScreenRegister" component={ScreenRegister}
   options={{ 
       headerTitle: props => <LogoHeader {...props} />,
       headerTitleAlign: 'center'
    }} 
/>

Solution 19 - React Native

While I was facing the same thing but the solution is pretty easy. I just added one line of code headerTitleAlign: 'center',

function HomeNavigator() {
  return (
    <TabOneStack.Navigator>
      <TabOneStack.Screen
        name="HomeScreen"
        component={TabOneScreen}
        options={{
          headerRightContainerStyle: {
            marginRight: 20,
          },
          headerTitleAlign: 'center',     <-------- here
          headerTitle: () => (
            <Ionicons
              name={'logo-twitter'}
              color={Colors.light.tint}
              size={30}
            />
          ),
        }}
      />
    </TabOneStack.Navigator>
  )
}

Solution 20 - React Native

Use headerTitleContainerStyle

static navigationOptions = {
  headerTitleStyle: { justifyContent: 'center' },
}

Solution 21 - React Native

This works for me on Android & iOS:

static navigationOptions = {
    headerTitleStyle: {
        textAlign: 'center',
        flexGrow: 1,
    },
    headerRight: (<View/>)
};

Solution 22 - React Native

As of 30th May 2020, you can't no more pass any parameters to createStackNavigator().

To center your title, you have to use the following (with the headerTitleAlign property):

<Stack.Screen
    name="Centered"
    component={Centered}
    options={{
      title: 'Centered title',
      headerShown: true,
      headerTitleAlign:'center'
    }}
/>

Solution 23 - React Native

This will definately work for android

      headerTitleStyle:{
         flex: 1, textAlign: 'center'
      },

Solution 24 - React Native

headerTitleStyle: { color: 'white', textAlign: 'center', flex: 1 }

Solution 25 - React Native

add headerTitleAlign: 'center' in navigationOptions

example:

  static navigationOptions = ({navigation}) => ({
    headerTitle: (
      <Image
        style={{width: 100, height: 100}}
        resizeMode="contain"
        source={icons.logo}
      />
    ),
    headerTitleAlign: 'center',
  });

Solution 26 - React Native

If the header has more than 1 item ie left , right , center as below :

  <TabOneStack.Screen
        name="HomeScreen"
        component={TabOneScreen}
        options={{
          headerLeftContainerStyle: { marginLeft: 10 },
          headerRightContainerStyle: { marginRight: 10 },
          headerTitleContainerStyle: { backgroundColor: "yellow", alignItems: "center" },
          headerLeft: () => <ProfilePicture image="https://pbs.twimg.com/profile_images/1383042648550739968/fS6W0TvY_200x200.jpg" size={40} />,
          headerTitle: () => (<Ionicons name="logo-amazon" size={30}  />),
          headerRight: () => (<MaterialCommunityIcons name="star-four-points-outline" size={30} />)
        }}
      />

then adding alignItems:center to headerTitleContainerStyle will center the title component

Solution 27 - React Native

just use options property additionally,

<Stack.Screen
      component={HomeScreen}
      name="Skin Cancer Prediction"
      options={{
          headerTitleAlign: "center",
      }}
/>

you're good to go 

Solution 28 - React Native

For React Navigation V6 Following is working fine for me:

<Stack.Navigator screenOptions={{ headerTitleAlign: "center" }}>
// Put all of your screens here <Stack.Screen ... />
</Stack.Navigator>

Solution 29 - React Native

headerTitleStyle :{textAlign: 'center', flex: 1}

worked for me

Solution 30 - React Native

 headerTitleAlign: {
        alignItems: 'center',
        justifyContent: 'center'
      },

Solution 31 - React Native

Working with React Navigation v5 you can also use the following option:

headerTitleAlign:'center'

Like in the below example where I wanted to perfectly center the title.

<Stack.Screen
    name="Settings"
    component={SettingsScreen}
    options={{
      title: 'SMS Recipient Number',
      headerShown: true,
      headerTitleAlign:'center'
    }}
/>

Solution 32 - React Native

Simply this works for me with latest version 16.9.0,

defaultNavigationOptions : {title: 'App', headerTitleAlign: 'center' }

Solution 33 - React Native

In react navigation V5

<AuthStack.Screen
  name="SignupScreen"
  component={SignupScreen}
  options={{ title: "Sign Up", animationEnabled: false, headerTitleAlign: 'center', }}
/>

Solution 34 - React Native

Make sure to check the issues before resulting to stack overflow, normally more helpful.issue regarding your problem But as himanshu said in comments you need to access the title style property to adjust the title how you want.

static navigationOptions = {
    header: (navigation) => ({
      title: <Text style={{ 
            color: 'rgba(0, 0, 0, .9)', 
            fontWeight: Platform.OS === 'ios' ? '600' : '500',  
            fontSize: Platform.OS === 'ios' ? 17 : 18, 
            alignSelf: 'center' 
         }}>Filters</Text>,
      right: <SearchButton />,
      left: <CancelButton />,
    })
  };

As shown in the issue, i presume you've already managed to find a solution as this was a while ago. But for anyone else coming across this issue it may be helpful.

Solution 35 - React Native

You can set the header title center for android in stack navigator of react navigation using this file change:

node_modules\react-navigation\src\views\Header.js

Change This Code In Header.js file:-

title: {
bottom: 0,
left: TITLE_OFFSET,
right: TITLE_OFFSET,
top: 0,
position: 'absolute',
alignItems: Platform.OS === 'ios' ? 'center' : 'center',
},

Content Type	Original Author	Original Content on Stackoverflow
Question	jsdario	View Question on Stackoverflow
Solution 1 - React Native	Val	View Answer on Stackoverflow
Solution 2 - React Native	ThatFrenchComputerGuy	View Answer on Stackoverflow
Solution 3 - React Native	Cong Nguyen	View Answer on Stackoverflow
Solution 4 - React Native	Ewan	View Answer on Stackoverflow
Solution 5 - React Native	Rawa	View Answer on Stackoverflow
Solution 6 - React Native	Hasan Sh	View Answer on Stackoverflow
Solution 7 - React Native	AndriyFM	View Answer on Stackoverflow
Solution 8 - React Native	Pavitha	View Answer on Stackoverflow
Solution 9 - React Native	user10253937	View Answer on Stackoverflow
Solution 10 - React Native	BlaShadow	View Answer on Stackoverflow
Solution 11 - React Native	Mazin Luriahk	View Answer on Stackoverflow
Solution 12 - React Native	Rajnikant	View Answer on Stackoverflow
Solution 13 - React Native	Asif vora	View Answer on Stackoverflow
Solution 14 - React Native	Akshita Agarwal	View Answer on Stackoverflow
Solution 15 - React Native	Daniel S.	View Answer on Stackoverflow
Solution 16 - React Native	Dihan	View Answer on Stackoverflow
Solution 17 - React Native	Vibin	View Answer on Stackoverflow
Solution 18 - React Native	azwar_akbar	View Answer on Stackoverflow
Solution 19 - React Native	kayongo Johnson Brian	View Answer on Stackoverflow
Solution 20 - React Native	Omri Givoni	View Answer on Stackoverflow
Solution 21 - React Native	Dodi	View Answer on Stackoverflow
Solution 22 - React Native	cocool97	View Answer on Stackoverflow
Solution 23 - React Native	M.Hassam Yahya	View Answer on Stackoverflow
Solution 24 - React Native	Akhila Antony	View Answer on Stackoverflow
Solution 25 - React Native	samad324	View Answer on Stackoverflow
Solution 26 - React Native	Bhupendra	View Answer on Stackoverflow
Solution 27 - React Native	naimur978	View Answer on Stackoverflow
Solution 28 - React Native	SaumyadipDev	View Answer on Stackoverflow
Solution 29 - React Native	Hiten Sharma	View Answer on Stackoverflow
Solution 30 - React Native	victor klippel de souza	View Answer on Stackoverflow
Solution 31 - React Native	Tadiwanashe	View Answer on Stackoverflow
Solution 32 - React Native	Thiru	View Answer on Stackoverflow
Solution 33 - React Native	Menon Hasan	View Answer on Stackoverflow
Solution 34 - React Native	TomTom	View Answer on Stackoverflow
Solution 35 - React Native	Vishal Dhaduk	View Answer on Stackoverflow