Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Stack Navigator
3.
Project Setup and Installing React Navigation
3.1.
Setup
3.2.
Installing
4.
Example of React Native Navigation  
5.
Frequently Asked Questions
5.1.
What is the react-navigation package?
5.2.
What is the use of createStackNavigator?
5.3.
What is the use of createAppContainer?
6.
Conclusion
Last Updated: Mar 27, 2024
Easy

Navigation in React Native

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

In this blog, we shall learn how to use navigation to make our app multi-screen. A single screen is rarely used in mobile apps. A navigator is responsible for managing the presentation of many screens and the transition between screens.

React Navigation is a well-known navigation library for React. React navigation uses a stack navigator to keep track of a user's navigation history and provide the relevant screen based on their path through the app. We'll go over the fundamentals and basics of React Native navigation, teach you how to get started using React Navigation in your React Native project, and walk through various React Native navigation examples in this lesson. But first, let's discuss the react-native stack navigator.

Stack Navigator

React Navigation uses a stack navigator to keep track of a user's navigation history and provide the relevant screen based on their path through the app. At any one time, a user is only shown one screen.

Consider a stack of papers: moving to a new screen adds it to the stack while navigating back takes it away. The stack navigator also has transitions and motions similar to those found on native iOS and Android devices. It's worth noting that an app can have many stack navigators. Now let's set up a project and install the package.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Project Setup and Installing React Navigation

Here in this example, we will set up our project using the expo tool because it allows us to set up our project without installing android studio and Xcode. We are assuming that you have Node LTS version 14 or greater.

Setup

Run this command to install the expo globally into your system.

npm install -g expo-cli


Run this command to create a new project.

expo init NavigationTutorial


Now run these commands to enter your project's directory and open the project in your code editor.

cd NavigationTutorial
code . #This opens the project in VScode

Installing

Now install the react-native navigation library using the following command.

npm install @react-navigation/native @react-navigation/native-stack


Now install the peer dependencies this command is used with expo only.

expo install react-native-screens react-native-safe-area-context

If you are using React Native CLI Quickstart on your machine, you do not need to do the above procedure. Create a new project and install the navigation library using the first command from installing section above, and to install the peer dependencies use the following command.

npm install react-native-screens react-native-safe-area-context

Also see,  React Native Reanimated

Example of React Native Navigation  

In this example, we will create a simple react native application with two screens home screen (HomeScreen.js) and an about screen (AboutScreen.js) both the files are in the components folder. By default home screen will open up with a button on it and after pressing the button, you will be navigated to the other screen.

Now Let’s see the codes.

HomeScreen.js

Code:

import React, { Component } from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
 
export default class Homescreen extends Component {
  render() {
    return (  
            <View style={styles.container}> 
                <View
                  style={{
                    flex: 1,
                    justifyContent: "center",
                    alignItems: "center",
                  }}>
                  <Text style={styles.titleText}>Home Screen</Text>
                </View>
                <View style={styles.buttonContainer}>  
                    <Button  
                        onPress={() => this.props.navigation.navigate('About')}  
                        title="Go To About Screen" 
                        color="orange"
                    />  
                </View>
                <View style={styles.bottomText}>
                  <Text>
                  <Text style={styles.bottomText1}>code</Text>
                  <Text style={styles.bottomText2}>studio</Text>
                  </Text>
                  <Text>Powered By</Text>
                  <Text style={styles.bottomText3}>Coding Ninjas</Text>
                </View>  
            </View>  
  }
}

const styles = StyleSheet.create({  
    container: {  
        flex: 1,  
        justifyContent: 'center',
        backgroundColor: 'teal'
    },  
    buttonContainer: {
        flex: 1,  
        margin: 30  
    },
    titleText: {
      fontSize: 30,
      color: 'black',
      fontWeight: "bold"
  },
  bottomText: {
      marginBottom:30,
      textAlign: 'center',
      alignItems: "center",
    },
    bottomText1: {
      fontSize: 25,
      fontWeight: 'bold',    
    },
    bottomText2: {
      fontSize: 25,
    },
    bottomText3: {
      fontWeight: 'bold',
      color: 'orange'
    }   
})  


Explanation: We have made a new file for designing the home screen as HomeScreen.js. This practice brings modularity to our code. Here we have a text view with the text "Home Screen" and below it, there is a button view with the text "Go to About" in its onpress property, we are specifying the destination screen.

AboutScreen.js

Code:

import React, { Component } from 'react';
import { Button, View, Text, StyleSheet, Image } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
 
export default class Aboutscreen extends Component {
  render() {
    return (
     <View style={styles.container}> 
                <View
                  style={{
                    flex: 1,
                    justifyContent: "center",
                    alignItems: "center",
                  }}>
                  <Text style={styles.titleText}>About Screen</Text>
                </View>
                <View style={styles.bottomText}>
                  <Text>
                  <Text style={styles.bottomText1}>code</Text>
                  <Text style={styles.bottomText2}>studio</Text>
                  </Text>
                  <Text>Powered By</Text>
                  <Text style={styles.bottomText3}>Coding Ninjas</Text>
                </View>  
            </View>  
        );
  }
}

const styles = StyleSheet.create({  
    container: {  
        flex: 1,  
        justifyContent: 'center',
        backgroundColor: 'teal'
    },  
    titleText: {
      fontSize: 30,
      color: 'black',
      fontWeight: "bold"
  },
  imageStyle: {
    flex: 1,
    height: 10,
    width: 10,
    alignItems: 'center',
  },
  bottomText: {
      marginBottom:30,
      textAlign: 'center',
      alignItems: "center",
    },
    bottomText1: {
      fontSize: 25,
      fontWeight: 'bold',    
    },
    bottomText2: {
      fontSize: 25,
    },
    bottomText3: {
      fontWeight: 'bold',
      color: 'orange'
    }   
})  


Explanation: In the about screen, there is just a text view with the text of "About Screen" it does nothing much.

App.js

Code:

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
 
import HomeScreen from './components/HomeScreen';
import AboutScreen from './components/AboutScreen';
 
 
export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}
 
const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
  About: {
    screen: AboutScreen
  },
},{
  initialRouteName: "Home"
 
});
 
const AppContainer = createAppContainer(AppNavigator);
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});


Explanation: Here, the render() function calls the AppContainer, which in return calls the AppNavigator, which is calling the createStackNavigator function where we define all our screens that are previously being imported, and we are giving an initial route screen also. By default home screen will get open up.

Output:

Frequently Asked Questions

What is the react-navigation package?

React Navigation was created out of the necessity for an expandable yet simple-to-use navigation solution built on top of powerful native primitives and written fully in JavaScript (so you can read and understand the entire code).

What is the use of createStackNavigator?

It allows your app to transition between screens by stacking each new screen on the previous one. The stack navigation is set up to have the same appearance and feel as iOS and Android: fresh screens slide in from the right on iOS and fade in from the bottom on Android.  

What is the use of createAppContainer?

In react-native, createAppContainer is a function that returns a React component that takes the React component created by createStackNavigator as a parameter and can be exported directly to be used as our app's root component from App.js.

Conclusion

In this article, we have extensively discussed Navigation in React Native. We discussed how this navigation package works and one simple example to clarify the concept.

We hope that this blog has helped you enhance your knowledge regarding Navigation. Do check out the awesome content on the Coding Ninjas Website, Android DevelopmentCoding Ninjas Studio ProblemsCoding Ninjas Studio Interview BundleCoding Ninjas Studio Interview ExperiencesCoding Ninjas CoursesCoding Ninjas Studio Contests, and Coding Ninjas Studio Test SeriesDo upvote our blog to help other ninjas grow. 

Happy Coding!

Live masterclass