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?
36 Answers
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',
}
-
12doesn't work for me!,I added textAlign:"center",flex:1 in order to accomplish the job. Mar 4, 2019 at 11:02
-
On iOS it was working just fine but not on Android. Adding the code made it work for both platforms. Thanks Jul 14, 2019 at 15:41
-
Not work for me to. I added headerRight: <View style={{ padding: 6 }} /> and it's working for me Sep 12, 2019 at 8:36
-
5headerLayoutPreset is deprecation and was renamed to headerTitleAlign and moved to navigationOptions. It should be declared on defaultNavigationOptions to get same behavior Jan 21, 2020 at 10:19
-
12021 with your updated answer is really working, thank you very much!!– fnaquiraSep 30, 2021 at 23:22
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'}}>
To center the header title, we need to have flex header by add flex property.
navigationOptions: {
title: "Title center",
headerTitleStyle: {
textAlign:"center",
flex:1
},
}
-
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. Apr 23, 2018 at 5:35
-
headerTitleStyle: { alignSelf: 'center' , textAlign:"center",flex:1 }, Worked for me! Mar 4, 2019 at 11:03
For anyone searching in 2020, this is working for me:
<Stack.Navigator screenOptions={{headerTitleAlign: 'center'}}>
https://reactnavigation.org/docs/stack-navigator/#headertitlealign
-
I had to add
headerTitleStyle: { textAlign: 'center' },
as well Mar 30, 2020 at 18:07 -
-
3Right (and only working) anwser for react-navigation >=v5 (see: reactnavigation.org/docs/stack-navigator/#headertitlealign)– sutherMay 6, 2020 at 12:53
-
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 />)
}
-
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.– jsdarioFeb 8, 2018 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.– RawaFeb 9, 2018 at 16:59
-
1I also added
flex: 1, textAlign: 'center',
to headerTitleStyle andheaderLeft: (<View/>),
AND worked– NagibabaAug 18, 2018 at 10:45 -
This works for me if I have a button on both sides.
{headerTitleStyle: { alignSelf: 'center' }, title: 'Center Title', headerLeft: (<Icon ... />), headerRight: (<View />) }
Feb 6, 2019 at 17:56
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
-
-
-
1But only for react-native < v5, else use Ewan's answer: stackoverflow.com/a/60779193/1256697– sutherMay 6, 2020 at 12:55
Insert and set the headerTitleAlign
value in defaultNavigationOptions
. Here is the examples:
const MainStack = createStackNavigator(
{
...
defaultNavigationOptions: {
headerTitleAlign: 'center',
}
}
)
-
1react-navigation has updated and this is, currently, the correct way to do this. reactnavigation.org/docs/en/stack-navigator.html– adhdjJan 10, 2020 at 18:36
-
1
This worked for me :)
static navigationOptions = {
title: "SAMPLE",
headerTitleStyle: { flex: 1, textAlign: 'center'},
};
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
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>
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>
);
};
Set react-navigation header title in the center. Using the headerTitleStyle CSS.
static navigationOptions = {
title: 'Home',
headerTintColor: '#fff',
headerTitleStyle: {
width: '90%',
textAlign: 'center',
},
};
-
Please make this a full answer, not just a code answer with no explanation. Apr 25, 2018 at 6:24
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!
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
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 />,
...
})}
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")
})}
/>
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'
}}
/>
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>
)
}
static navigationOptions = {
headerTitleStyle: { justifyContent: 'center' },
}
This works for me on Android & iOS:
static navigationOptions = {
headerTitleStyle: {
textAlign: 'center',
flexGrow: 1,
},
headerRight: (<View/>)
};
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'
}}
/>
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>
This will definately work for android
headerTitleStyle:{
flex: 1, textAlign: 'center'
},
headerTitleStyle: { color: 'white', textAlign: 'center', flex: 1 }
-
This just repeat existing answers. New answers should add new information and new insights into the topic. Oct 3, 2019 at 12:10
add headerTitleAlign: 'center'
in navigationOptions
example:
static navigationOptions = ({navigation}) => ({
headerTitle: (
<Image
style={{width: 100, height: 100}}
resizeMode="contain"
source={icons.logo}
/>
),
headerTitleAlign: 'center',
});
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
just use options property additionally,
<Stack.Screen
component={HomeScreen}
name="Skin Cancer Prediction"
options={{
headerTitleAlign: "center",
}}
/>
you're good to go 🙂
headerTitleAlign: {
alignItems: 'center',
justifyContent: 'center'
},
-
Thank you for this answer! To help other understand your solution, can you provide a quick description of why this code works? Feb 12, 2020 at 19:14
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'
}}
/>
titleStyle
props that can be used for styling. Did you try it out ? Here's the link. Check theStackNavigator.md