React Native Header Bar Example Using React Navigation

In this tutorial, We are going to share some idea how to create header bar in react native application using React Navigation Library.

In a web browser, you can link to different pages using an anchor (<a>) tag. When the user clicks on a link, the URL is pushed to the browser history stack. When the user presses the back button, the browser pops the item from the top of the history stack.

Similarly React Navigation's stack navigator provides a way for your app to transition between screens and manage navigation history.React Navigation is that React Navigation's stack navigator provides the gestures and animations that you would expect on Android and iOS when navigating between routes in the stack.

Create First React Navigation Project :

Lets follow the below steps to create first react navigation project in react native application, that helps to display header bar in your android activity or screen.

Step-1 :  Install the react-navigation package in your React Native project. Refer the below screenshot, while installing react navigation package.

Command :

npm install --save react-navigation

Once installation complete check you package.json file in react native application. You  will find  react-navigation installed version in dependencies section.

{
  "name": "MobileApp56",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.4",
    "react-navigation": "^2.6.2"
  },
  "devDependencies": {
    "babel-jest": "23.2.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "23.3.0",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Step-2 : Lets Open App.js File of react native application and perform the below change in it.

1. Add Platform, StyleSheet, Text, View Component in import block.

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";

2. Add createStackNavigator import from the react-navigation package.

import { createStackNavigator } from "react-navigation";

3. Add YellowBox Component of react-native package in import block.

import { YellowBox } from "react-native";

4. Add static navigationoptions inside that class. Using the static navigation options we can set our activity title name, color and font weight.

// Adding header title, color and font weight
  static navigationOptions = {
    title: "Home",
    headerStyle: {
      backgroundColor: "#03A9F4"
    },
    headerTintColor: "#fff",
    headerTitleStyle: {
      fontWeight: "bold"
    }
  };

5. Call the createStackNavigator  function in order to display react native header bar in react native application activity or screen.

// Adding Header Bar In React Native
export default createStackNavigator({
  Home: {
    screen: HomeActivity
  }
});

6.  Call the ignoreWarnings function, that helps to suppress or hide the warning messages displayed in android screen.

YellowBox.ignoreWarnings([
  "Warning: isMounted(...) is deprecated",
  "Module RCTImageLoader"
]);

Complete Source Code for App.js

Lets see the complete source code that helps to display header bar in react native application. This tutorial helps to build more understanding on react navigation library.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";
import { createStackNavigator } from "react-navigation";
import { YellowBox } from "react-native";

class HomeActivity extends Component {
  // Adding header title, color and font weight
  static navigationOptions = {
    title: "Home",
    headerStyle: {
      backgroundColor: "#03A9F4"
    },
    headerTintColor: "#fff",
    headerTitleStyle: {
      fontWeight: "bold"
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>Home Screen</Text>
      </View>
    );
  }
}

// Adding Header Bar In React Native
export default createStackNavigator({
  Home: {
    screen: HomeActivity
  }
});

YellowBox.ignoreWarnings([
  "Warning: isMounted(...) is deprecated",
  "Module RCTImageLoader"
]);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5"
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  }
});

Screenshot : 

Download Link :

https://github.com/skptricks/React-Native/tree/master/React%20Native%20Header%20Bar%20Example%20Using%20React%20Navigation

This is all about header bar design using createStackNavigator function of react navigation library.