Custom Header In React Native & Expo Apps

For Android & iOS Applications

Custom header in react native and expo

Hey! My name is Rohit. I’m not a professional content writer, but I will do my best to ensure that by the end of this article, you will be able to add the custom Header to your React Native and Expo applications.

I recommend that you watch the step-by-step tutorial here:

Project setup, Package Requirements, and Code

• Start your expo project
• When you build a full-fledged application, it has multiple screens. So, we use react-navigation to navigate to the different screens. I am also going to use react-navigation in this project. You are free to use the stack, bottom, drawer, or top tab navigation in your project.
• Install the following package:

npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context

• For the stack navigation:

npm install @react-navigation/stack
npx expo install react-native-gesture-handler

• To finalize the installation of react-native-gesture-handler, add the following at the top of App.js:

import 'react-native-gesture-handler';

• Optional installation

npx expo install @react-native-masked-view/masked-view

• Make a screens folder inside the root directory. Inside this directory, make two JavaScript files for the Profile and Home screen.
• Customize the Profile and Home Screen then import them to the App.js
• Next, make a header component in a separate JavaScript file, ‘Header.js’.

import { View, Text } from 'react-native'
import React from 'react'

const Header = (props) => {
  return (
    <View style={{flexDirection:'row', margin:15 }}>
      <Text style={{fontWeight:'bold', fontSize:30, color:'white'}}>
        {props.name}
      </Text>
        
    </View>
  )
}

export default Header

• In the Header.js file, I am using the name of the header as props. The header name for the Home screen will be ‘Home’ and the header name for the Profile screen will be ‘Profile.’
• Now, in the App.js:

Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad

<NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen 
          component={HomeScreen} 
          name="HomeScreen" 
          options={{
            headerTitle: () => <Header name="Home" />,
            headerStyle: {
              backgroundColor: '#4c00b0',
              height: 120,
            }
          }}
        />
        <Stack.Screen 
          component={ProfileScreen} 
          name="ProfileScreen"
          options={{
            headerTitle: () => <Header name="Profile" />,
            headerStyle: {
              backgroundColor: '#4c00b0',
              height: 120,
            }
          }}
        />
        
      </Stack.Navigator>
</NavigationContainer>

• You can see that I passed both of the screens to the stack screen and inside the headerTitle, I used the props name for Home and Profile Screens.
• That’s it. Now, you can test the application in the Expo Go Mobile Application.
• If you are confused or lost, I would recommend watching a step-by-step video tutorial. Few minutes of setup and code, you will be ready to test the application.

Why do I suggest watching more videos?

I am from India and I love writing code and sharing it with the community. We all know that money is the ultimate motivation for work, and the Medium payment system uses Stripe, which has been in preview mode in India for the past 4–5 years. I waited a year on the Medium platform, but in the end, nothing worked out.

So, I started making YouTube videos to make a living. I have posted the important code in the code snippet, but for a step-by-step guide, please follow the video. And if you go there, don’t forget to subscribe to my channel for React Native, Django, Python, and Data Science-related videos.

Thank you.