React Native Configuring Header Bar

To configure the header bar of a React Native application, the navigation options are used. The navigation options are a static property of the screen component which is either an object or a function.

Header Bar Props

• headerTitle: It is used to set the title of the active screen.
• headerStyle: It is used to add style to the header bar.
• backgroundColor:  It is used to change the background color of the header bar.
• headerTintColor: It is used to change the color to the header title.
• headerTitleStyle: It is used to add customized style to the header title.
• fontWeight: It is used to set the font style of the header title.
• headerRight: It is used to add items on the right side of the header bar.
• headerLeft: It is used to add items on the left side of the header bar.

Implementation: Now let’s see how to configure the Header Bar:

• Step 1: Open your terminal and install expo-cli by the following command.

  
  
  

  npm install -g expo-cli

• Step 2: Now create a project by the following command.

  expo init header-bar

• Step 3: Now go into your project folder i.e. header-bar

  cd header-bar

• Step 4: Install the required packages using the following command:

  npm install –save react-navigation-material-bottom-tabs react-native-paper react-native-vector-icons

Project Structure: The project directory should look like the following:

Example:In our example, we will look at how to style the header bar, how to add header buttons/icons to it, and learn how to dynamically send data from one screen and display it as the header title on another screen.

App.js

import React from "react";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";

import HomeScreen from "./screens/HomeScreen";
import UserScreen from "./screens/UserScreen";
import SettingScreen from "./screens/SettingScreen";

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    User: UserScreen,
    Setting: SettingScreen,
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: "#006600",
      },
      headerTitleStyle: {
        fontWeight: "bold",
        color: "#FFF",
      },
      headerTintColor: "#FFF",
    },
  },
  {
    initialRouteName: "Home",
  }
);

const Navigator = createAppContainer(AppNavigator);

export default function App() {
  return (
    <Navigator>
      <HomeScreen />
    </Navigator>
  );
}

HomeScreen.js: Notice the navigation options. Here, we configure a header button component inside our Header bar, which takes us to the Settings screen. Also, notice that we send the user input when we click on the “Go to user screen” button.

HomeScreen.js

import React, { useState } from "react";
import { Text, View, TextInput, Button } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import {
  Item,
  HeaderButton,
  HeaderButtons,
} from "react-navigation-header-buttons";

const Home = (props) => {
  const [input, setInput] = useState("");
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text style={{ color: "#006600", fontSize: 40 }}>Home Screen!</Text>
      <Ionicons name="ios-home" size={80} color="#006600" />
      <TextInput
        placeholder="Enter your name"
        value={input}
        onChangeText={(value) => setInput(value)}
      />
      <Button
        title="Go to User Screen"
        color="#006600"
        onPress={() => props.navigation.navigate("User", { username: input })}
      />
    </View>
  );
};

const HeaderButtonComponent = (props) => (
  <HeaderButton
    IconComponent={Ionicons}
    iconSize={23}
    color="#FFF"
    {...props}
  />
);

Home.navigationOptions = (navData) => {
  return {
    headerTitle: "Home",
    headerRight: () => (
      <HeaderButtons HeaderButtonComponent={HeaderButtonComponent}>
        <Item
          title="Setting"
          iconName="ios-settings-outline"
          onPress={() => navData.navigation.navigate("Setting")}
        />
      </HeaderButtons>
    ),
  };
};

export default Home;

UserScreen.js: Here we receive the user input which we passed through the home screen and set it as the title in out header bar.

UserScreen.js

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

const User = () => {
  return (
    <View style={{ flex: 1, alignItems: "center",
                   justifyContent: "center" }}>
      <Text style={{ color: "#006600", fontSize: 40 }}>
        User Screen!
      </Text>
      <Ionicons name="ios-person-circle-outline"
                size={80} color="#006600" />
    </View>
  );
};

User.navigationOptions = (navData) => {
  return {
    headerTitle: navData.navigation.getParam("username"),
  };
};

export default User;

SettingScreen.js

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

const Settings = () => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text style={{ color: "#006600", fontSize: 40 }}>Settings Screen!</Text>
      <Ionicons name="ios-settings-outline" size={80} color="#006600" />
    </View>
  );
};

export default Settings;

Run the Application: Start the server by using the following command.

expo start

Output: Notice when you tap on a single tab, there is a slight animation. This is automatically provided by the Material Bottom Tab Navigator.

Reference: https://reactnavigation.org/docs/headers/