React navigation tutorial 7: How to add header and header text color, font etc.

Introduction :

I have already explained to you how we can add one header and how to navigate between different screens in react native. Navigation Header is an important part in mobile application, also its style. It should follow a design pattern on all screens of your app to make it attractive.

React navigation makes it easier to add style to the navigation header. We can change the color, tint color, or font easily using props. In this post, I will show you how we can customize the header of react-navigation with an example.

Change the color of header :

To change the color of the header, we can use headerStyle props. It takes one style object and backgroundColor in that object is used to change the header color. Let’s take a look at the below example snippet :

<Stack.Screen
    name="HomeScreen"
    component={HomeScreen}
    options={{
    title: 'Home Page',
    headerStyle: {
        backgroundColor: '#3f51b5',
    },
    }}
/>

This screen is inside a Navigator. You can add headerStyle with different colors to different screens if you want. Normally we use only one color on all screen headers, not different. For that, we can put the style in the Navigator. I will show it to the end of the article.

Changing header tint color and title style :

The tint color is used for the title and the back button. Other that it, we can change title font family, title font weight and other font related settings. headerTintColor is used to change the tint color. headerTitleStyle takes props related to the title text style like fontWeight for font-weight. For example :

<Stack.Screen
    name="HomeScreen"
    component={HomeScreen}
    options={{
    title: 'Home Page',
    headerStyle: {
        backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
        fontFamily: 'Cochin',
        fontWeight: 'bold',
        fontSize: 20,
    },
    }}
/>

Using common header style and color for all screens :

The above example applies the style only to specific screens. That means if we want the same style in all of our application screens, we need to copy-paste the same header and header title style on each. That will make more repeated code.

Instead, we can move the same style settings to the Navigator under a prop called screenOptions like below :

import React from 'react';
import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import HomeScreen from './screens/HomeScreen';
import DetailScreen from './screens/DetailScreen';
import {createStackNavigator} from '@react-navigation/stack';

export default function App() {
  const Stack = createStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="HomeScreen"
        screenOptions={{
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontFamily: 'Cochin',
            fontWeight: 'bold',
            fontSize: 20,
          },
        }}>
        <Stack.Screen
          name="HomeScreen"
          component={HomeScreen}
          options={{
            title: 'Home Page',
          }}
        />
        <Stack.Screen
          name="DetailScreen"
          component={DetailScreen}
          options={({route}) => ({title: route.params.title})}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

We have two screens defined in this example: HomeScreen and DetailScreen. Putting the header style in the Navigator will apply the same settings to both of these screens. If you want to change the style on all screens, you can do it in one commonplace. Also, if you add any more screens, it will apply that style automatically to that screen.

Putting the style in a commonplace makes the code easy to maintain.

On an iOS device, the Home screen will look as like below :