Guide to React Native Header Design

We can implement the React native header in different ways, depending on the application need and the libraries we are using. The React Native header is a component that displays information and actions related to the current screen. It is typically used for navigation purposes and can be customized to fit the design and functionality requirements of your app.

In this article we have several objectives, here are our main objectives as follows

Creating our own React native custom header for the home page.
Create header configuration using React Navigation
React native header search bar

React Native Header using Custom Header Component

In our first example, we will demonstrate a React native header component using a customer component, here is our screenshot.

When we want more control over the header design and functionality, then we can create a custom header component using the basic building blocks provided by React Native, such as View, Text, and TouchableOpacity.

Step 1: Here is our React native header component, where the title and icon are passed through as props

import { View, StyleSheet, Text } from "react-native";
import { Ionicons } from "@expo/vector-icons";

const CustomHeader = ({ title, icon }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>{title}</Text>
      <Ionicons name={icon} color="white" size={18} style={styles.icon} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    padding: 16,
    paddingTop: 25,
    justifyContent: "space-between",
    backgroundColor: "blue",
  },
  title: {
    fontSize: 18,
    fontWeight: "bold",
    color: "white",
    alignItems: "center",
  },
});
export default CustomHeader;

Step 2: We have two screens Home and About Screen. Let’s add code for HomeScreen.jsx

import { Button, StyleSheet, Text, View } from "react-native";

const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.rootContainer}>
      <Text>Home Screen</Text>
      <Button
        title="Navigate to About Screen"
        onPress={() => navigation.navigate("About")}
      />
    </View>
  );
};

export default HomeScreen;

const styles = StyleSheet.create({
  rootContainer: {
    flex: 1,
    marginTop: "50",
    backgroundColor: "#fbefa6",
  },
});

On the home screen, we have a Text and a button to navigate to the About screen.

Step 3: Configure navigation and use Navigation Stack options to add a custom header component. We need to install React navigation libraries, here are our articles on how to configure React native stack navigation.

import { StatusBar } from "expo-status-bar";
import { StyleSheet } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import HomeScreen from "./screens/HomeScreen";
import AboutScreen from "./screens/AboutScreen";
import CustomHeader from "./components/CustomHeader";

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <StatusBar style="light" />
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            header: (props) => (
              <CustomHeader {...props} title="Home" icon="menu-outline" />
            ),
          }}
        />
        <Stack.Screen
          name="About"
          component={AboutScreen}
          options={{
            header: (props) => (
              <CustomHeader {...props} title="About" icon="search" />
            ),
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

React header bar using React Navigation

If you are using React Navigation, you can configure the React native header bar using the navigation options. In our app.js we can use the options property of the React navigation stack or in our screen component, we can define the navigationOptions static property to customize the header.

For example, you can set the headerTitle to change the title of the active screen, headerStyle to add styles to the header bar, and headerRight or headerLeft to add items to the right or left side of the header bar. Let’s add code in app.js to configure the HomeScreen and AboutScreen header configuration.

import { StatusBar } from "expo-status-bar";
import { StyleSheet } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import HomeScreen from "./screens/HomeScreen";
import AboutScreen from "./screens/AboutScreen";
import { Ionicons } from "@expo/vector-icons";

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <StatusBar style="light" />
      <Stack.Navigator>
        <Stack.Screen
          name="About"
          component={AboutScreen}
          options={{
            headerStyle: { backgroundColor: "#f4511e" }, // header bg color
            contentStyle: { backgroundColor: "#bdbebd" },
            title: "About",
            headerRight: () => (
              <Ionicons
                name="search"
                color="white"
                size={18}
                style={{ padding: 10, marginRight: 10 }}
              />
            ),
          }}
        />
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            // headerShown: false,
            title: "Home title",
            headerStyle: { backgroundColor: "#f4511e" }, // header bg color
            contentStyle: { backgroundColor: "#bdbebd" }, // Different background color
            headerTitleStyle: {
              fontWeight: "bold",
            },
            headerTintColor: "white", //Title font color
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Conclusion
In this article, we learn about react native header using custom header components and using react-navigation options to add the header. In the next articles, we will learn about React native tabs and drawers with examples. Check more information on React Native Navigation Stack documentation

Related React Tutorial

Guide to React Native Header Design

Table of Contents

React Native Header using Custom Header Component

React header bar using React Navigation

Leave a Reply Cancel reply