How to Add Stack Navigator with React Native Navigation

React Native stack navigation tutorial; React Native navigation is useful for creating navigation and routing in React native applications. This tutorial will show you how to use react native navigation library to create navigation between various screens.

Also, we will help you learn how to create stack navigation in react native app and combine react native navigation with stack navigator. Apart from that, we will also use react-native-gesture-handler react-native-screens react-native-reanimated react-native-safe-area-context and @react-native-community/masked-view packages.

Stack Navigator is the backbone of routing and navigation; this library offers navigation between screens where every screen is placed on top of a stack. On the other hand, it gives you the same look and feel of iOS and Android regarding the transition between screens.

How to Create Navigation in React Native using React Native Navigation and Stack Navigator

  • Step 1: Set Up Expo CLI
  • Step 2: Install React Native Project
  • Step 3: Add React Native Navigation Package
  • Step 4: Install Stack Navigator Package
  • Step 5: Enable Navigation in Components
  • Step 6: Update App Js File
  • Step 7: Run App in Device

Set Up Expo CLI in React Native

Before you get into React native development, make sure to set up Node 12 LTS or greater version in your development system;

Here are the commands that let you install the Expo CLI.

# npm
npm install -g expo-cli

# yarn
yarn global add expo-cli

Install React Native Project

Now, you are ready to invoke the new react native project installation through mentioned below command.

expo init RnBlogProject

Head over to the new app directory.

cd RnBlogProject

Add React Native Navigation Package

In this significant step, we will show you how you can install React Navigation, which enables routing and navigation for Expo and React Native apps.

npm install @react-navigation/native

Also, here are the libraries that we will require to smoothen the routing and navigation process in react native applications.

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

Install Stack Navigator Package

Next, you must install the stack navigation library in react native application, it helps you to evoke the transition between screens.

npm install @react-navigation/stack

Enable Navigation in Components

In this step, you have to create the components folder, inside this folder create the screen files.

Create components/HomeComponent.js file and insert the suggested code into it.

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


class HomeComponent extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home</Text>
        <Button
          title="Go to Products"
          onPress={() => this.props.navigation.navigate('ProductComponent')}
        />
      </View>
    );
  }
}


export default HomeComponent;

Create and update given code in components/ProductComponent.js file.

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


class ProductComponent extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Product</Text>
        <Button
          title="Go to Products Details"
          onPress={() => this.props.navigation.navigate('ProductDetailComponent')}
        />
      </View>
    );
  }
}


export default ProductComponent;

Create and add the provided code in components/ProductDetailComponent.js file.

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


class ProductDetailComponent extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Product Details</Text>
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('HomeComponent')}
        />
      </View>
    );
  }
}


export default ProductDetailComponent;

Update App Js File

To activate the routing, you have to make some changes in the App.js file, get into the file, import the components or screen define the stack navigator and tie it to the components.

import * as React from 'react';

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

import HomeComponent from './components/HomeComponent';
import ProductComponent from './components/ProductComponent';
import ProductDetailComponent from './components/ProductDetailComponent';

const Stack = createStackNavigator();

function StackRoutes() {
  return (
    <Stack.Navigator
      screenOptions={{
          headerStyle: {
            backgroundColor: 'blue',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
      >
      <Stack.Screen 
        name="HomeComponent" 
        component={HomeComponent} 
        options={{ title: 'Home' }}
      />
      <Stack.Screen 
        name="ProductComponent" 
        component={ProductComponent} 
        options={{ title: 'Product' }}
      />
      <Stack.Screen 
       name="ProductDetailComponent" 
       component={ProductDetailComponent} 
       options={{ title: 'Product Detail' }}
      />
    </Stack.Navigator>
  );
}

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

Run App in Device

Lastly, we need to run the app on the device; first, install the Expo Client on your smartphone.

You may get the expo client either from Google Play Store or App Store.

Run either of the suggested command.

# npm
npm start

# yarn
yarn start

Now, on your browser or terminal screen, you must be seeing a QR code, you have to scan that QR code through your expo app.

Wait for some time while your app is being compiled. Ensure that your development machine and smartphone are on the same network.

How to Add Stack Navigator with React Native Navigation

Summary

This tutorial explained how to create routing in react native application using the stack navigator and react native navigation 5 libraries. React native navigation is easy to implement and offers you a great deal when it comes to customization.