Guide to React Native Screen Navigation

As a mobile app developer, designing a user interface with multiple screens and functionalities that enable easy navigation throughout the application is essential for creating a seamless user experience.
There are several libraries used for screen navigation in React Native applications. Still, React-Native-Navigation is one of the most common because it is well-maintained, easy to learn, and has a large community.
In this tutorial, we will learn about React Native navigation and how to dynamically navigate our application from one screen to another.

Prerequisites

To follow this tutorial, you should have the following prerequisites in place:

• Basic knowledge of React Native programming.
• You should have Node.js and npm installed on your computer.
• Additionally, you should have set up your emulator already.

What is React Native Navigation

React-Native-Navigation is a popular screen navigation library for React Native applications created and maintained by Wix. It provides a smooth and seamless navigation experience for iOS and Android platforms, with a native look and feels.
One of the benefits of using React-Native-Navigation is its performance, which makes it a good choice for applications that require a fast and responsive navigation system. It supports various navigation options, such as stack navigation, bottom tab navigation, and side menu navigation.

Creating React Native App

To get started, let's create a new React Native app using the Expo tools, which allow us to install the application without configuring Xcode or Android Studio. To create the React Native app, run the following command in your terminal.

npx create-expo-app ReactNavigationApp

After creating the project, open it in your code editor. Using the VS Code editor, you can open the project using the command below.

cd ReactNavigationDemo
code .

Using React Router Native

To use React Router Native in the application, we first need to install the dependency into the application. Run the following commands to install the React Router Native package:

npm install @react-navigation/native

Now, let's explore some major patterns and examples of using the React Native navigation library in our application.
Stack Navigator
Stack Navigator provides a way to switch between different screens or pages within a mobile app. It works by stacking screens on top of each other, and when the user goes back, the top screen is removed from the Stack.
Using the commands below, we need to install react-native-screens and react-native-safe-area-context to use Stack Navigator.

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

Let’s start by creating a components folder in the project root directory. Then, inside the components folder, create HomeScreen.js and ProfileScreen.js.
Next, to create the home screen, open the HomeScreen.js file and add the following code:

    // Homescreen.js
    import React from "react";
    import { Button, View, Text } from "react-native";
    export default function HomeScreen({ navigation }) {
      return (
        <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
          <Text>Home Screen</Text>
          <Button
            title="Go to Profile"
            onPress={() => navigation.navigate("Profile")}
          />
        </View>
      );
    }

In the code above, the functional component HomeScreen takes 'navigation' as a parameter, which is used to pass in the 'navigation' object. This object provides access to the navigation methods used to move between screens in the app.
Also, we created a button with an onPress property. When the user presses the button, the navigation.navigate("Profile") method is triggered, causing the screen to transition to the Profile screen.
Now, open ProfileScreen.js and add the following code:

    // ProfileScreen.js
    import React from "react";
    import { View, Text } from "react-native";
    export default function AboutScreen() {
      return (
        <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
          <Text>Profile Screen</Text>
        </View>
      );
    }

Now we need to import both NavigationContainer and createNativeStackNavigator in the app.js file. From your project root directory, open the app.js file and add the following code to it:

    // App.js
    import * as React from "react";
    import { NavigationContainer } from "@react-navigation/native";
    import { createNativeStackNavigator } from "@react-navigation/native-stack";
    import HomeScreen from "./components/HomeScreen";
    import ProfileScreen from "./components/ProfileScreen";
    const Stack = createNativeStackNavigator();
    export default function App() {
      return (
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Profile" component={ProfileScreen} />
          </Stack.Navigator>
        </NavigationContainer>
      );
    }

The code above creates a Stack object using the createNativeStackNavigator function and uses it to define the navigator for the app. The navigator contains two screens, Home and Profile, defined using the Stack.Screen component. The name property of each screen specifies its unique identifier, while the component property specifies the React component to render when the screen is displayed.
To start the application, run the following command on your terminal:

    npx expo start
    #  press i to start on IOS

The above command will start the iOS emulator, and you should have the following output:

Tab Navigation
Tab Navigation allows users to switch between screens in a React Native app by tapping on tabs at the bottom or top of the screen. Each tab represents a different section of the app, and tapping on a tab takes the user to the corresponding screen for that section.
To use the bottom tab navigation, we must first install createBottomTabNavigator in our application using the below command.

npm i @react-navigation/bottom-tabs

Next, in the app.js file, we need to import createBottomTabNavigator and replace the code in the file with the code below.

    // App.js
    import * as React from "react";
    import { NavigationContainer } from "@react-navigation/native";
    import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
    import HomeScreen from "./components/HomeScreen";
    import ProfileScreen from "./components/ProfileScreen";
    const Tab = createBottomTabNavigator();
    export default function App() {
      return (
        <NavigationContainer>
          <Tab.Navigator>
            <Tab.Screen name="Home" component={HomeScreen} />
            <Tab.Screen name="Profile" component={ProfileScreen} />
          </Tab.Navigator>
        </NavigationContainer>
      );
    }

In the code above, we create a Tab object using the createBottomTabNavigator function and use it to define the tab navigator for the app. The navigator contains two tabs, 'Home' and 'Profile', defined using the Tab.Screen component. The name property of each tab specifies its unique identifier, while the component property specifies the React component to render when the tab is selected.
Save the code and refresh your emulator. You should have the following output:

Drawer Navigation
Drawer navigation is a type of navigation component in React Native that allows users to access different screens within an app by opening a drawer menu that slides in from the side of the screen.
To use the drawer navigation, we need to install the following dependencies using the command below:

    npm install @react-navigation/drawer
    npx expo install react-native-gesture-handler react-native-reanimated

Next, to use the drawer navigation effect, open the app.js file and replace its code with the following code:

    // App.js
    import * as React from "react";
    import { NavigationContainer } from "@react-navigation/native";
    import { createDrawerNavigator } from '@react-navigation/drawer';
    import HomeScreen from './HomeScreen';
    import ProfileScreen from './ProfileScreen';
    const Drawer = createDrawerNavigator();
    function App() {
      return (
        <NavigationContainer>
          <Drawer.Navigator>
            <Drawer.Screen name="Home" component={HomeScreen} />
            <Drawer.Screen name="Profile" component={ProfileScreen} />
          </Drawer.Navigator>
        <NavigationContainer>
      );
    }

In this code, we create a Drawer object using the createDrawerNavigator function and use it to define the drawer navigator for the app.

Passing parameters in Screen Navigation

Sometimes we must pass data like a user ID from one screen to another as the user navigates through the application. In React Native Navigation, sending data between screens is pretty simple.
To pass data, we’ll add route parameters to the navigation. Use the navigate function as shown below.

    onPress={() => navigation.navigate("About",{ userID:12 })}
    Next, we can get the data in the ProfileScreen using the following code:
    // Profilescreen.js
    import React, { Component } from "react";
    import { Button, View, Text } from "react-native";
    export default function AboutScreen({ route }) {
    const { userID } = route;

Conclusion

With React Native Navigation, we can implement screen navigation with different effects to swap between screens. In this article, we learned how to implement screen navigation in a React Native app using React Native Navigator.
I'm just getting into React Native development and found this library interesting. I hope the tutorial is helpful. You can learn more about React Native Navigation from their official documentation.