How can we center title of react-navigation header?

In React Native, using the react-navigation library provides an easy way to manage navigation and routing. To center the navigation title, we can define the title's style within the navigator's configuration.

Here is a specific example demonstrating how to center the titles of all screens when using Stack.Navigator:

jsx
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerTitleAlign: 'center',
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    >
      <Stack.Screen 
        name="Home" 
        component={HomeScreen}
        options={{ title: 'Home Page' }}
      />
      <Stack.Screen 
        name="Details" 
        component={DetailsScreen} 
        options={{ title: 'Detail Page' }}
      />
    </Stack.Navigator>
  );
}

export default AppNavigator;

In this example, we first import the necessary components and functions. We create a Stack.Navigator that includes two screens: HomeScreen and DetailsScreen.

The key part is setting headerTitleAlign: 'center' in the screenOptions property of Stack.Navigator. This ensures that all screen titles are centered in the header navigation.

Additionally, the properties headerStyle, headerTintColor, and headerTitleStyle are used to customize the navigation bar's appearance, such as background color, text color, and text style.

This approach not only centers the navigation title but also provides a unified way to customize and maintain the navigation bar style for all screens in the application. This is highly beneficial for maintaining consistency and professionalism.