Somename Somename -3 years ago 202
React JSX Question

Align the Header in center

react-navigation: 1.0.0-beta.11

react: 16.0.0-alpha.12

react-native: 0.47.1

I'm following the ReactNavigation tutorial to render the

Header
from a passed prop to the screen.

class ChatScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: `Chat with ${navigation.state.params.user}`, // <- Talking bout this
});
render() {
const { params } = this.props.navigation.state;
return (
<View>
<Text>Chat with {params.user}</Text>
</View>
);
}
}


I want the
title
in
title: Chat with ${navigation.state.params.user}
to appear in the center. How do I style it? I also want change it's color.

I tried this suggestion but did not work.

Many thanks.

After updating the code, it's aligning to the center but it's not quite the center. It's more to the right. I think it's cause of the arrow to the left, how can I fix it?

enter image description here

Updated Code:

static navigationOptions = ({ navigation }) => ({
title: `${navigation.state.params.name.item.name}`,
headerTitleStyle: {
color: '#000',
textAlign: 'center',
alignSelf: 'center'
}
});

Answer Source

titleStyle property has been rename to headerTitleStyle You can now style you header title via headerTitleStyle by passing it to navigation options.

....
headerTitleStyle: {
      color: 'color value',
      textAlign: 'center',
      alignSelf: 'center' //if style using flexbox
}
....
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download