How can we center title of react-navigation header?

react-native react-native-android react-navigation
jsdario picture jsdario · Apr 10, 2017 · Viewed 55.1k times · Source

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?

Answer

Val picture Val · Jul 11, 2017

Use headerTitleStyle:

static navigationOptions = {
    headerTitleStyle: { alignSelf: 'center' },
    title: 'Center Title',
}

enter image description here

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

Related questions

React Native - how to scroll a ScrollView to a given location after navigation from another screen

Is it possible to tell a ScrollView to scroll to a specific position when we just navigated to the current screen via StackNavigator? I have two screens; Menu and Items. The Menu is a list of Buttons, one for each …

Read More
How to add a Drawer Inside Stack Navigation in React Navigation

I am working on a Practice Project like Login/Register Application and I am using Stack Navigation from react-navigations and it's working perfect, Now when User Login's he should be redirected to the Dashboard Screen where I want a Drawer …

Read More
How to pass props to component inside a React Navigation navigator?

I'm trying to pass props to a component that has been wrapped through a call to create...Navigator call, i.e. // Search.js const Navigator = createMaterialTopTabNavigator({ Wines, Stores, Vineyards, Restaurants }); // Somewhere in render()... <Navigator /> I'm trying to figure …

Read More