Can't center title in react navigation stack - React-Native?
Question
I can't center the title in react-navigation V4+ its work fine before with v3, when use RN-stack I can't center the title for some reason I don't know.
it just appears on the right,
I try these in headerTitleStyle and headerStyle
justifyContent, alignItems and alignSelf but not works :/
If you have any idea about it tell me?
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",
"react-navigation-stack": "^2.0.16",
"react-native-screens": "^2.0.0-alpha.29",
here's Code
static navigationOptions = ({navigation}) => {
const showModal = navigation.getParam('showModal', () => {});
return {
title: navigation.getParam('title'),
headerTitleStyle: {
fontFamily: 'Cairo-Regular',
fontSize: Platform.OS == 'ios' ? 16 : 18,
color: '#fff',
flex: 1,
textAlign: 'center',
},
headerStyle: {
backgroundColor: navigation.getParam('color'),
},
headerRight: (
<Grid>
<Row>
<Body>
<Button
transparent
icon
onPress={() => {
navigation.openDrawer();
}}>
<Icon
name="ios-menu"
type="Ionicons"
style={{fontSize: 25, color: '#fff'}}
/>
</Button>
</Body>
{!navigation.getParam('title').includes('details') && (
<Body>
<Button transparent icon onPress={() => showModal()}>
<Icon
name="more"
type="Ionicons"
style={{fontSize: 25, color: '#fff'}}
/>
</Button>
</Body>
)}
</Row>
</Grid>
),
headerLeft: (
<Grid>
<Row>
<Body>
<Button
transparent
icon
onPress={() => {
navigation.pop();
}}>
<Icon
name="arrow-round-back"
type="Ionicons"
style={{
fontSize: Platform.OS == 'ios' ? 30 : 25,
color: '#fff',
}}
/>
</Button>
</Body>
<Body>
<Button
transparent
icon
onPress={() => {
navigation.navigate('search');
}}>
<Icon
name="search"
type="Ionicons"
style={{
fontSize: Platform.OS == 'ios' ? 30 : 25,
color: '#fff',
}}
/>
</Button>
</Body>
</Row>
</Grid>
),
};
};
2 answers
solution1
6 ACCPTED 2020-01-25 12:00:55
You need to use headerTitleAlign
https://reactnavigation.org/docs/en/stack-navigator.html#headertitlealign
solution2
-1 2021-05-09 08:28:42
after updated version in react-native: "0.60.0" we can handle the header title like this..under DefaultNavigationOptions
const navigator = createStackNavigator({
IndexScreen : IndexScreen,
},{
initialRouteName:"IndexScreen",
defaultNavigationOptions:{
title:"Blogs",
headerTitleAlign:"center"
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.