CODEWITHSUNDEEP
react-nativereact-navigation
jsdario
jsdario

Reputation: 6833

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?

Upvotes: 100

Views: 134707

Answers (30)

Shan Biswas
Shan Biswas

Reputation: 429

Using react-native 0.76.1, headerTitleAlign: 'center'

Upvotes: 0

Harsha Gihan Liyanage
Harsha Gihan Liyanage

Reputation: 31

<Stack.Screen
        name="RegisterName" 
        component={RegisterName}
        options={{
          title: "RegisterName",
          headerTitleAlign: "center",
          headerTintColor: theme.text,
          headerLeft: () => <></>,
          headerStyle: {
            backgroundColor: theme.background, 
          },
         
        }}
      />

Upvotes: 0

ThatFrenchComputerGuy
ThatFrenchComputerGuy

Reputation: 1606

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

Here is an image of it working

Upvotes: 142

Acash
Acash

Reputation: 19

we can achieve this with

headerTitleStyle :{ alignSelf:"center" };

Upvotes: 1

SaumyadipDev
SaumyadipDev

Reputation: 275

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>

Upvotes: 10

Val
Val

Reputation: 22797

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

Upvotes: 196

kaybrian
kaybrian

Reputation: 71

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

Upvotes: 6

naimur978
naimur978

Reputation: 154

just use options property additionally,

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

you're good to go 🙂

Upvotes: 2

Bhupendra
Bhupendra

Reputation: 1286

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 enter image description here

Upvotes: 1

azwar_akbar
azwar_akbar

Reputation: 1651

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

Upvotes: 4

M Mahmud Hasan
M Mahmud Hasan

Reputation: 1173

In react navigation V5

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

Upvotes: 2

Vibin
Vibin

Reputation: 185

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

Upvotes: 4

Ewan
Ewan

Reputation: 791

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

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

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

Upvotes: 57

cocool97
cocool97

Reputation: 1251

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

Upvotes: 3

Hiten Sharma
Hiten Sharma

Reputation: 117

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

worked for me

Upvotes: 0

Thiru
Thiru

Reputation: 33

Simply this works for me with latest version 16.9.0,

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

Upvotes: 0

samad324
samad324

Reputation: 229

add headerTitleAlign: 'center' in navigationOptions

example:

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

Upvotes: 1

Tadiwanashe
Tadiwanashe

Reputation: 1304

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

Upvotes: 0

Dihan
Dihan

Reputation: 279

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

Upvotes: 3

victor klippel de souza
victor klippel de souza

Reputation: 1

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

Upvotes: 0

Rajnikant
Rajnikant

Reputation: 2236

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

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

Upvotes: 5

Mazin Luriahk
Mazin Luriahk

Reputation: 878

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>

Upvotes: 4

BlaShadow
BlaShadow

Reputation: 11683

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

Upvotes: 5

AndriyFM
AndriyFM

Reputation: 1605

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

const MainStack = createStackNavigator(
    {
        ...

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

Upvotes: 10

Akhila Antony
Akhila Antony

Reputation: 31

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

Upvotes: 1

Dodi
Dodi

Reputation: 2269

This works for me on Android & iOS:

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

Upvotes: 2

M.Hassam Yahya
M.Hassam Yahya

Reputation: 442

This will definately work for android

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

Upvotes: 1

Pavitha
Pavitha

Reputation: 181

This worked for me :)

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

};

Upvotes: 8

Daniel S.
Daniel S.

Reputation: 830

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

Upvotes: 3

Akshita Agarwal
Akshita Agarwal

Reputation: 255

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!

Upvotes: 4

Related Questions