How to Navigate Between Screens in a React Native App

Oftentimes, when building a React Native app, you'll compose it from different screens like Login, Home, and About. You'll then need to implement a navigation mechanism so your users can navigate the app and access its individual screens in the right order.

The purpose of this tutorial is to walk you through the process of setting up a navigation system in your React Native application. This includes installing the library, adding your screens to the stack navigator, and connecting the screens together from within each of your components.

Before You Begin

To follow this tutorial on your local computer, you need to have the following installed:

Node.js v10 or above
Xcode or Android Studio (set up to run the emulator)
React Native CLI

For step-by-step instructions on how to set up your React Native development environment, you can read the official React Native set-up documentation.

Before you start looking at how to implement navigation in our React Native app, let's understand how the stack navigation mechanism works in React Native.

Imagine that your React Native application is a stack. Initially, on that stack, you have Home, which is the first screen that shows when you open the app.

If you were to navigate to the About screen from the Home screen, the app would push About onto the stack, so it sits on top of Home. Similarly, the app pushes every new screen you navigate to onto the stack.

Now, if you want to go back to the previous screen, the app pops your current screen from the stack and shows you the one underneath it. This behavior is similar to what happens when you click the "back" icon in your web browser.

With a clear understanding of the stack navigation mechanism, it's now time to set it up in a React Native app.

To get started, install the React navigation package for native apps in your React Native project by executing this command on a terminal:

        npm i @react-navigation/native

The package you just installed requires React Native Stack and React Native Screens to run properly. To install RN Stack, run:

        npm i @react-navigation/native-stack

To install the second, run this:

        npm i react-native-screens

Now you have everything you need to start creating the navigation mechanism in your application. The next step is to set up the screens.

2. Set Up the Screen in Your React Native App

For this example, we'll be creating just two screens — the home screen and the about screen.

Create a folder named screens inside your application's root directory. Afterward, create two files named HomeScreen.js and AboutScreen.js inside the directory screens.

What to Add to Your HomeScreen.js File

Open the HomeScreen.js file and start by importing the following:

        import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { useState } from 'react'

Next, create the HomeScreen functional component and access the navigation object using object deconstruction (as per React best practices), then return a title and button for navigating to the about screen:

        export default function HomeScreen({navigation}) { 
  return ( 
    <View style={styles.container}> 
      <Text style={styles.paragraph}> Home Screen </Text> 
      <Button 
        title="Go to About" 
        onPress={() => navigation.navigate('AboutScreen')} 
      />  
    </View> 
  );
}

Here we're telling React Native to navigate to About when a user presses the button. In this case, we're not passing any data to the screen. But suppose you want to pass data to the function; here's how you'd do so:

        export default function HomeScreen({navigation}) { 
  const data = { websiteName: "John's Tech" }

  return ( 
    <View style={styles.container}> 
      // Text goes here 
      <Button 
        title="Go to About" 
        onPress={() => navigation.navigate('AboutScreen', data)} 
      />  
    </View> 
  );
}

Now when you press the button, this code passes the data to the next screen, About. Inside the AboutScreen.js file, you can access the data from the route and display it on the UI.

What to Add to Your AboutScreen.js File

Open the AboutScreen.js file and start by importing the following dependencies:

        import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';

Next, create the AboutScreen functional component that takes in data from the route.params property and returns the data in the UI:

        export default function AboutScreen({route}) { 
  let dataObj = route.params

  return ( 
    <View style={styles.container}> 
      <Text style={styles.paragraph}> 
        This is the About Screen of {dataObj.websiteName} 
      </Text>  
    </View> 
  );
}

If you recall, we specified a single property in the data object named websiteName, which we now render inside the <Text /> component. You can add as many properties as you want in the object, and access them inside the target screens component.

The next step is to set up our stack navigator with the two screens.

3. Connecting the Screens With the Stack Navigator

Inside App.js, start by importing the following dependencies:

        import * as React from 'react';
import HomeScreen from './screens/HomeScreen'
import AboutScreen from './screens/AboutScreen'
import { NavigationContainer } from "@react-navigation/native"
import { createNativeStackNavigator } from "@react-navigation/native-stack"

On lines two and three, we imported the two screens we just created. Then, we imported NavigationContainer

from @react-navigation/native and createNativeStackNavigator from @react-navigation/native-stack to help us connect the screens.

Next, call createNativeStackNavigator to retrieve the Stack:

        const Stack = createNativeStackNavigator()

This allows us to “stack up” the screens you want to transition between in your app.

Create the App component function and return both screens in the <Stack.Navigation> as shown below. Make sure to wrap it in the <NavigationProvider> or it won’t work:

        export default function App() { 
  return ( 
    <NavigationContainer> 
      <Stack.Navigator> 
        <Stack.Screen name="HomeScreen" component = {HomeScreen} /> 
        <Stack.Screen name="AboutScreen" component = {AboutScreen} /> 
      </Stack.Navigator> 
    </NavigationContainer> 
  );
}

This code places the HomeScreen screen on top of the stack, meaning the app will first render the Home component when it finishes loading.

Now everything is set. You can test the app by clicking the Go to About button on the Home UI. This should redirect you to About, and you'll find the websiteName property displayed in the UI:

An image showing a text that says "Home Screen", and a button that says "Go to About"

An image showing a text that says "This is the About Screen of John's Tech"

The best thing about using React Navigation for Native is that it's so easy to set up and use. It doesn't require any extra configurations (besides the required libraries you installed), and you can also connect different types of Paywalls (if you intend to build a subscription-based app).

Learn More About React Native

React Native is a cross-platform framework for creating applications that run on Android and iOS devices. There's so much to learn about React Native, and if you're new to using the framework, you should start by learning the basics.