How can we center title of react-navigation header?

Question

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?

there may be some solution for this, but what I do in my projects I don't use header and tabs from react-navigation. For header I use custom header (******performance of react-navigation tabs isn't that great*********). — Manjeet Singh, Apr 10 '17 at 15:51
Theres a `titleStyle`props that can be used for styling. Did you try it out ? Here's the [link](https://github.com/react-community/react-navigation/search?utf8=✓&q=titleStyle). Check the `StackNavigator.md` — Himanshu Soni, Apr 10 '17 at 16:54
I did, i am trying to set default props to all screens, it did not work :/ — jsdario, Apr 10 '17 at 17:32

Val · Accepted Answer · 2021-09-13T02:16:08.323

175

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

edited Sep 13 '21 at 02:16

answered Jul 11 '17 at 06:36

Val

21,938
10
68
86

12

doesn't work for me!,I added textAlign:"center",flex:1 in order to accomplish the job. – mehdi jalilvand Mar 04 '19 at 11:02
On iOS it was working just fine but not on Android. Adding the code made it work for both platforms. Thanks – Matias Seguel Jul 14 '19 at 15:41
Not work for me to. I added headerRight: and it's working for me – Andrey Patseiko Sep 12 '19 at 08:36
5

headerLayoutPreset is deprecation and was renamed to headerTitleAlign and moved to navigationOptions. It should be declared on defaultNavigationOptions to get same behavior – C-lio Garcia Jan 21 '20 at 10:19
1

2021 with your updated answer is really working, thank you very much!! – fnaquira Sep 30 '21 at 23:22
Thanks for keeping this updated. `headerTitleAlign` is what I needed to fix Android alignment issue. iOS seemed to default to center. – Dwigt Apr 26 '22 at 13:40

score 130 · Answer 2 · edited May 22 '23 at 03:04

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

Cong Nguyen · Answer 3 · 2018-10-30T08:56:42.780

61

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

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

edited Oct 30 '18 at 08:56

answered Apr 23 '18 at 04:36

Cong Nguyen

3,199
1
23
22

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Vishal Chhodwani Apr 23 '18 at 05:35
headerTitleStyle: { alignSelf: 'center' , textAlign:"center",flex:1 }, Worked for me! – mehdi jalilvand Mar 04 '19 at 11:03

Ewan · Answer 4 · 2020-06-20T14:02:24.920

50

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

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

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

edited Jun 20 '20 at 14:02

answered Mar 20 '20 at 17:49

Ewan

721
5
8

I had to add `headerTitleStyle: { textAlign: 'center' },` as well – Jordan Daniels Mar 30 '20 at 18:07
Works for react-navigation v5. – Eyong Kevin Enowanyo Apr 28 '20 at 19:58
4

Right (and only working) anwser for react-navigation >=v5 (see: https://reactnavigation.org/docs/stack-navigator/#headertitlealign) – suther May 06 '20 at 12:53
Thanks. It is working. – Orhan Abar Jan 24 '22 at 13:29
This should be the preferred answer as it seems to be the standard API for this. Please upvote. – Artemis Prime Jul 17 '23 at 10:01

score 31 · Answer 5 · edited Apr 03 '18 at 08:55

31

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 />)
}

edited Apr 03 '18 at 08:55

David Schumann

13,380
9
75
96

answered Feb 08 '18 at 15:49

Rawa

411
5
3

This is what I do most often, but I find this is a work-around and should not be treated as a proper answer. I have upvoted it anyway, because it's handy. – jsdario Feb 08 '18 at 23:28
I totally agree that it's a workaround and I wish it wasn't. But I don't think there's a proper solution yet. Hopefully, it will be fixed soon. – Rawa Feb 09 '18 at 16:59
1

I also added `flex: 1, textAlign: 'center',` to headerTitleStyle and `headerLeft: (),` AND worked – Nagibaba Aug 18 '18 at 10:45
This works for me if I have a button on both sides. `{headerTitleStyle: { alignSelf: 'center' }, title: 'Center Title', headerLeft: (), headerRight: () }` – Harry Moreno Feb 06 '19 at 17:56

score 24 · Answer 6 · answered Sep 15 '18 at 10:43

24

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

answered Sep 15 '18 at 10:43

Hasan Sh

1,018
9
16

it works and deals all cases with/without the back arrow – Sergey Nov 16 '18 at 08:33
This is the most appropriate answer :) – ziishaned Nov 28 '19 at 22:06
1

But only for react-native < v5, else use Ewan's answer: https://stackoverflow.com/a/60779193/1256697 – suther May 06 '20 at 12:55

score 10 · Answer 7 · answered Jan 06 '20 at 14:20

10

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

const MainStack = createStackNavigator(
    {
        ...

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

answered Jan 06 '20 at 14:20

AndriyFM

1,389
14
11

1

react-navigation has updated and this is, currently, the correct way to do this. https://reactnavigation.org/docs/en/stack-navigator.html – adhdj Jan 10 '20 at 18:36
1

Great!!... This should be the selected answer. – METALHEAD Mar 28 '20 at 06:50

score 8 · Answer 8 · edited Jun 20 '20 at 09:12

8

This worked for me :)

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

};

edited Jun 20 '20 at 09:12

Community

1
1

answered May 09 '19 at 05:10

Pavitha

181
2
10

score 8 · Answer 9 · answered Apr 06 '22 at 19:36

8

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>

answered Apr 06 '22 at 19:36

SaumyadipDev

225
2
5

score 5 · Answer 10 · answered Jan 26 '20 at 21:25

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

score 5 · Answer 11 · answered Feb 08 '20 at 23:54

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>
      );
    };

score 5 · Answer 12 · edited Jun 24 '21 at 22:34

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>
  )
}

score 4 · Answer 13 · edited Sep 20 '18 at 13:27

4

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

edited Sep 20 '18 at 13:27

EstevaoLuis

2,422
7
33
40

answered Sep 20 '18 at 12:40

score 4 · Answer 14 · answered Feb 04 '20 at 02:18

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>

score 3 · Answer 15 · edited Apr 26 '18 at 14:06

3

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

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

edited Apr 26 '18 at 14:06

Tom Aranda

5,919
11
35
51

answered Apr 25 '18 at 05:26

Asif vora

3,163
3
15
31

Please make this a full answer, not just a code answer with no explanation. – petezurich Apr 25 '18 at 06:24

Akshita Agarwal · Answer 16 · 2019-03-18T11:21:49.420

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!

score 3 · Answer 17 · answered Apr 25 '19 at 15:38

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

score 3 · Answer 18 · answered Feb 18 '20 at 11:36

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 />,
    ...
    })}

score 3 · Answer 19 · edited Aug 10 '20 at 16:05

3

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")
        })}
 />

edited Aug 10 '20 at 16:05

David Buck

3,752
35
31
35

answered Aug 10 '20 at 14:34

Vibin

155
1
4

score 3 · Answer 20 · answered Sep 08 '20 at 10:02

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

score 2 · Answer 21 · answered Jan 10 '19 at 14:22

2

Use headerTitleContainerStyle

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

answered Jan 10 '19 at 14:22

Omri Givoni

51
3

score 2 · Answer 22 · answered Aug 21 '19 at 17:17

2

This works for me on Android & iOS:

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

answered Aug 21 '19 at 17:17

Dodi

2,201
4
30
39

score 2 · Answer 23 · answered May 30 '20 at 16:34

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

score 1 · Answer 24 · answered Aug 07 '19 at 07:57

1

This will definately work for android

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

answered Aug 07 '19 at 07:57

M.Hassam Yahya

382
2
7

score 1 · Answer 25 · answered Oct 03 '19 at 11:49

1

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

answered Oct 03 '19 at 11:49

Akhila Antony

31
5

This just repeat existing answers. New answers should add new information and new insights into the topic. – AdrianHHH Oct 03 '19 at 12:10

score 1 · Answer 26 · answered Apr 17 '20 at 20:20

add headerTitleAlign: 'center' in navigationOptions

example:

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

score 1 · Answer 27 · answered Aug 28 '20 at 18:42

1

In react navigation V5

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

answered Aug 28 '20 at 18:42

M Mahmud Hasan

1,303
1
13
20

add options={{ title: "Sign Up", animationEnabled: false, headerTitleAlign: 'center'}} – M Mahmud Hasan Aug 28 '20 at 18:44

score 1 · Answer 28 · answered May 08 '21 at 08:57

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

score 1 · Answer 29 · answered May 24 '21 at 16:03

1

just use options property additionally,

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

you're good to go

answered May 24 '21 at 16:03

naimur978

144
8

Hiten Sharma · Answer 30 · 2020-05-13T11:31:11.873

0

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

worked for me

edited May 13 '20 at 11:31

answered Dec 19 '19 at 09:37

Hiten Sharma

117
1
5

Please consider providing a little more context, and possibly an explanation about _why_ the code works. – ZGski Dec 19 '19 at 15:30

score 0 · Answer 31 · edited Feb 12 '20 at 17:06

0

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

edited Feb 12 '20 at 17:06

ChrisMM

8,448
13
29
48

answered Feb 12 '20 at 16:49

victor klippel de souza

1

Thank you for this answer! To help other understand your solution, can you provide a quick description of why this code works? – RedBassett Feb 12 '20 at 19:14

score 0 · Answer 32 · answered Apr 14 '20 at 23:35

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

score 0 · Answer 33 · answered May 11 '20 at 15:30

0

Simply this works for me with latest version 16.9.0,

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

answered May 11 '20 at 15:30

Thiru

33
7

score 0 · Answer 34 · answered Jun 26 '22 at 14:53

0

we can achieve this with

headerTitleStyle :{ alignSelf:"center" };

answered Jun 26 '22 at 14:53

Acash

9
1

score -3 · Answer 35 · edited Apr 03 '18 at 08:46

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.

score -4 · Answer 36 · edited Apr 03 '18 at 08:46

-4

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

edited Apr 03 '18 at 08:46

David Schumann

13,380
9
75
96

answered May 29 '17 at 09:38

Vishal Dhaduk

492
5
13

1

don't modify files in node_modules! the changes can be easily stomped, and if you use yarn, the next package you install will revert the change – arolson101 Jun 27 '18 at 02:08
1

what's the use of ternary operator when both ends have same value? – Jimit Patel Sep 05 '18 at 12:54

How can we center title of react-navigation header?

36 Answers36

Modified 2021/08/31:

Modified 2019/03/12:

Original Answer 2017/07/11:

This worked for me :)

Linked