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>
),
};
};
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>
),
};
};
You need to use headerTitleAlign
https://reactnavigation/docs/en/stack-navigator.html#headertitlealign
after updated version in react-native: "0.60.0" we can handle the header title like this..under DefaultNavigationOptions|screenOptions|options
const navigator = createStackNavigator({
IndexScreen : IndexScreen,
},{
initialRouteName:"IndexScreen",
defaultNavigationOptions:{// or in screenOptions||options
title:"Blogs",
headerTitleAlign:"center"
}
});