React Navigation 5: Center the header title on Android

Last updated on June 3, 2020 A Goodman Loading... One comment

By default, the header title of a React Native app that using React Navigation 5 is on the left side. To center it, just add this option:

headerTitleAlign: 'center'

Full example:

import 'react-native-gesture-handler';

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

const MainStack = createStackNavigator();

const HomeScreen = props => {
  return (
    <View style={styles.screen}>
      <Text>Home Screen</Text>
    </View>
  );
};

function App() {
  return (
    <NavigationContainer>
      <MainStack.Navigator>
        <MainStack.Screen
          name="home"
          component={HomeScreen}
          options={{
            title: 'Home Title',
            
            // Center the header title on Android
            headerTitleAlign: 'center',
          }}
        />
      </MainStack.Navigator>
    </NavigationContainer>
  );
}

export default App;

/// Just some styles
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Screenshot:

Happy coding 🙂

Subscribe
Notify of
guest
1 Comment
Inline Feedbacks
View all comments
alterretla
alterretla
5 months ago

How to add the icon in the left of the title?

Related Articles