react native-tutorial

React Native Header Bar

The navigation options are used to customise a React Native application’s header bar. The screen component, which is either an object or a function, has the navigation choices as a static property.

Header Bar Props

  • headerTitle: This property is used to set the active screen’s title.
  • headerStyle: This attribute is used to give the header bar style.
  • backgroundColor: This property is used to alter the header bar’s background colour.
  • Using headerTintColor, you can alter the colour of the header title.
  • headerTitleStyle: It is used to give the header title a certain style.
  • fontWeight: This property controls the font weight used for the header title.
  • headerRight: This property is used to add things to the header bar’s right side.
  • headerLeft: This property is used to add things to the header bar’s left side.

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

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.

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.