React Native Configuring Header Bar

14 Jul, 2021
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 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 2: Now create a project by the following command.
expo init header-bar
Step 3: Now go into your project folder i.e. header-barcd 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
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/
Picked
React-Native
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
REST API (Introduction)
Node.js fs.readFileSync() Method
How to set the default value for an HTML <select> element ?
How to create footer to stay at the bottom of a Web page?
How to set input type date in dd-mm-yyyy format using HTML ?
Difference Between PUT and PATCH Request