How to add custom header in react native

In this article, we are going to learn about How to add custom header in react native. As we all know react native uses React navigation which provides all types of navigation in react native projects. React Navigation provides a default header on every screen. but sometimes developers need to add a custom header for their project like they need to add an image and cart icon on the header. so in this article, we will see 3 ways to add a header in react native project.

 

1. Create a react native project

Use the following command to create a new project. Check out this article to install React Navigation v6 in the project.

react-native init ProjectName

2. Custom header in App.js

After installation of React navigation v6. add headerTitle option in Stack.Screen component provided by React-Navigation. there are three different options available to set up a header in React-native using React-navigation.

  • headerLeft:
  • headerTitle:
  • headerRight:

I am using only headerTitle option to set up the back button, App logo & Cart icon as shown in the screenshot so I have added all my required content in one layout. let’s understand with source code. check the App.js React navigation set up below. By using this you can add common global header for your application so you do not need to add header for every screen.

import React from 'react';
import {View, Image, StatusBar} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {SafeAreaProvider} from 'react-native-safe-area-context';

import HomeScreen from './components/Home';
import CartScreen from './components/Cart';
import Dashboard from './components/Dashboard';
import Icon from 'react-native-vector-icons/FontAwesome';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const Stack = createNativeStackNavigator();
//Unused function
function HeaderLeft({navigation}) {
  return (
    <View style={{backgroundColor: 'red'}}>
      <Icon name="angle-left" size={30} color="#1841c7" />
    </View>
  );
}

function HeaderTitle({navigation}) {
  return (
    <View style={{flexDirection: 'row', marginRight: 15}}>
      <View style={{justifyContent: 'center'}}>
        <Icon name="angle-left" size={30} color="#1841c7" />
      </View>
      <View style={{flex: 1}}>
        <Image
          source={{
            uri:
              'https://www.techup.co.in/wp-content/uploads/2020/03/techup_final_logo.png',
          }}
          style={{widith: 100, height: 60, resizeMode: 'contain'}}
        />
      </View>
      <View style={{justifyContent: 'center', padding: 5}}>
        <MaterialCommunityIcons name="cart" size={30} color="#1841c7" />
      </View>
    </View>
  );
}
//Unused function
function HeaderRight({navigation}) {
  return (
    <View style={{marginHorizontal: 10}}>
      <MaterialCommunityIcons name="cart" size={30} color="#1841c7" />
    </View>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <StatusBar backgroundColor="#FFFFFF" barStyle="dark-content"  />
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Dashboard">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Cart" component={CartScreen} />
          <Stack.Screen
            name="Dashboard"
            component={Dashboard}
            options={({navigation}) => {
              return {
                // headerLeft: () => <HeaderLeft navigation={navigation} />,   
                headerTitle: () => <HeaderTitle navigation={navigation} />,
                //headerRight: () => <HeaderRight navigation={navigation} />,
              };
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

3. Header inside the screen

This is another way to add a header to your screen. we have to use navigation.setOptions to add headers inside the screen and add this inside React.useLayoutEffect provided by React. use the following code to show or customize the header inside your screen function.

function HomeScreen({ navigation }) {

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Ionicons name="add" size={30} style={{ marginRight: 20 }} />
      ),
    });
  }, [navigation]);

3. Output

How to add custom header in react native

 

Thank you 🙂

Leave a Reply

Your email address will not be published.