React Native Navigation v5 Example Tutorial

This is a step by step comprehensive React Native Navigation v5 tutorial. In this tutorial, we will learn how to implement Stack Navigation in React Native app using Stack Navigator.Navigation in React Native is easy to implement, all thanks goes to Navigation library which offers complete solution for Android and iOS.

We will not just enable routing and navigation in React Native app but also look at how to customize the header bar, how to style the header bar, how to center the header title and how to set the initial route in react native application.

React Native Navigation 5.0 Example

In a web browser, you can link to various 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 clicks on the back button, the browser displays the item from the top of the history stack, so the current page is now the previously visited page.

React Native doesn’t have a built-in concept of a global history stack like a web browser does; this is where React Navigation comes in handy.

React Navigation’s stack navigator implements a way for your app to transition between screens and maintain navigation history.

A significant variation between how this runs in a web browser and React Navigation is that React Navigation’s stack navigator produces the gestures and animations that you would require on Android and iOS devices when navigating between routes or screens in the stack.

To know more about React Native Navigation, check out here.

Install React Native App

Let’s install create-react-native-app tool via command line in our system.

sudo npm i -g create-react-native-app

Then, create a React Native App using the following command.

create-react-native-app reactNativeNavigation

When you run the above command, then the CLI asks for permission to install Expo (Y/N), you can select “Y”. Download the Expo app to locally check your Navigation app.

Head over to project folder.

cd reactNativeNavigation

Install Navigation Packages in React Native App

Now, we will install the required packages in our React Native project, and these packages will allow the user to navigate between the various screens in iOS and Android apps.

# for NPM
npm install @react-navigation/native

# for yarn
yarn add @react-navigation/native

React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app.

Let’s install following dependencies used by most navigators.

# for NPM
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

# for yarn
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Installing Stack Navigator Library

The libraries we’ve installed till now are the building blocks and shared foundations for navigators, and each navigator in React Navigation lives in its own library.

To implement the stack navigator in React Native, we have to install @react-navigation/stack:

# for NPM
npm install @react-navigation/stack

# for yarn
yarn add @react-navigation/stack

Create Screens in React Native

Next, create three screens that will help us to define the routes in our React Native application. Go to terminal and run the following command.

mkdir screens

touch screens/Home.js
touch screens/Blog.js
touch screens/BlogDetails.js

Open screen/Home.js file and add the following code.

// screens/Home.js

import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';

class Home extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home screen</Text>
      </View>
    );
  }
}

export default Home;

Open screen/Blog.js file and add the following code.

// screens/Blog.js

import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';

class Blog extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Blog screen</Text>
      </View>
    );
  }
}

export default Blog;

Open screen/BlogDetails.js file and add the following code.

// screens/BlogDetails.js

import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';

class BlogDetails extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Blog Details screen</Text>
      </View>
    );
  }
}

export default BlogDetails;

Adding Stack Navigator in React Native App

The StackNavigator provides a way for your app to transition between screens where each new screen is placed on top of a stack. By default, the stack navigator is configured to have the familiar iOS and Android look & feel: new screens slide in from the right on iOS, fade in from the bottom on Android.
reactnavigation.org

Open App.js file and import the NavigationContainer and createStackNavigator libraries,

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

Next, import Home, Blog, and Blog Details screens on the top part of the App component.

import Home from './screens/Home';
import Blog from './screens/Blog';
import BlogDetails from './screens/BlogDetails';

Next, define const Stack and assign the createStackNavigator() method to it.

const Stack = createStackNavigator();

function NavStack() {
  return (
     <Stack.Navigator
        screenOptions={{
          headerTitleAlign: 'center',
          headerStyle: {
            backgroundColor: '#621FF7',
          },
          headerTintColor: '#fff',
          headerTitleStyle :{
            fontWeight: 'bold',
          },
        }}
      >
      <Stack.Screen 
        name="Home" 
        component={Home} 
        options={{ title: 'Home' }}
      />
      <Stack.Screen 
        name="Blog" 
        component={Blog} 
        options={{ title: 'Blog' }}
      />
      <Stack.Screen 
       name="BlogDetails" 
       component={BlogDetails} 
       options={{ title: 'Blog Detail' }}
      />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <NavStack />
    </NavigationContainer>
  );
}

console.disableYellowBox = true;

We can set up the header bar for every route separately. However, we are going to configure a common header bar for every screen.

Set up the default route in React Native using initialRouteName: ‘screen name’ property, don’t forget to pass in Stack.Navigator tag.

We style the header bar applied headerStyle, background color, and center the title for react-navigation header.

Inside the Stack.Screen tag we declared the route for enabling the routing in react native.

Then, finally, we wrapped NavStack with NavigationContainer to navigate between screens.

Here is the final App.js file.

// App.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import Home from './screens/Home';
import Blog from './screens/Blog';
import BlogDetails from './screens/BlogDetails';

const Stack = createStackNavigator();

function NavStack() {
  return (
     <Stack.Navigator
        screenOptions={{
          headerTitleAlign: 'center',
          headerStyle: {
            backgroundColor: '#621FF7',
          },
          headerTintColor: '#fff',
          headerTitleStyle :{
            fontWeight: 'bold',
          },
        }}
      >
      <Stack.Screen 
        name="Home" 
        component={Home} 
        options={{ title: 'Home' }}
      />
      <Stack.Screen 
        name="Blog" 
        component={Blog} 
        options={{ title: 'Blog' }}
      />
      <Stack.Screen 
       name="BlogDetails" 
       component={BlogDetails} 
       options={{ title: 'Blog Detail' }}
      />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <NavStack />
    </NavigationContainer>
  );
}

Run either of the command based on your package manager.

npm start

--- or ---

yarn start

Conclusion

Finally, React Native Navigation v5 tutorial is over, in this tutorial, we learned how to configure stack navigation in react native app and how to customize the react-native header bar from scratch.

You can download the complete code of this tutorial on this Git repository.

Happy Coding!