Navigation in React Native

Navigation means moving from one screen or page to another screen inside an application.

For example:

Login
  ↓
Home
  ↓
Profile
  ↓
Settings

A mobile application usually contains multiple screens, so navigation is required to move between them.

Most real-world mobile applications contain many screens. Navigation connects these screens together.

• Login screen
• Home screen
• Profile screen
• Product screen
• Cart screen
• Settings screen
• About screen

Without navigation, users would have difficulty moving through a multi-screen application.

React Navigation is a popular navigation library used with React Native applications.

It provides different navigation patterns such as stack navigation, tab navigation and drawer navigation.

It also provides APIs for navigating between screens and passing data between them.

A React Native project needs the required navigation packages before navigation can be implemented.

For a typical React Navigation setup, the core package is installed with:

npm install @react-navigation/native

The exact additional dependencies depend on the navigator you choose and the platform configuration of your project.

A screen is a React Native component that represents one section of the application.

For example, we can create:

HomeScreen.js
ProfileScreen.js
SettingsScreen.js

Each component can represent a separate screen.

import React from 'react';

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

export default function HomeScreen() {

    return (

        <View>

            <Text>
                Home Screen
            </Text>

        </View>

    );

}

This component can be registered as a screen in a navigator.

import React from 'react';

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

export default function ProfileScreen() {

    return (

        <View>

            <Text>
                Profile Screen
            </Text>

        </View>

    );

}

The Profile screen can be opened through the navigation system.

A navigator manages a group of screens and controls how users move between those screens.

Common navigators include:

• Stack Navigator
• Bottom Tab Navigator
• Drawer Navigator

Different navigators are useful for different application designs.

Stack navigation places screens on top of one another like a stack.

Home
  ↓
Details
  ↓
Profile

When the user presses Back, the current screen can be removed from the stack and the previous screen becomes visible.

For stack-based navigation, React Navigation provides the native stack package.

npm install @react-navigation/native-stack

The required React Native dependencies should also be configured according to the React Navigation setup for the project.

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

const Stack =
    createNativeStackNavigator();

The Stack object is used to create the navigation structure for the application.

The NavigationContainer is used to contain the navigation tree of the application.

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

A typical navigation application places its navigator inside the NavigationContainer.

import React from 'react';

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

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

const Stack =
    createNativeStackNavigator();

export default function App() {

    return (

        <NavigationContainer>

            <Stack.Navigator>

                <Stack.Screen
                    name="Home"
                    component={HomeScreen}
                />

            </Stack.Navigator>

        </NavigationContainer>

    );

}

The screen named Home becomes part of the navigation stack.

<Stack.Navigator>

    <Stack.Screen
        name="Home"
        component={HomeScreen}
    />

    <Stack.Screen
        name="Profile"
        component={ProfileScreen}
    />

</Stack.Navigator>

Multiple screens can be registered inside the same navigator.

<Stack.Screen
    name="Home"
    component={HomeScreen}
/>

The name property identifies the route.

The route name is later used when navigating to that screen.

A screen receives a navigation object that can be used to move to another registered screen.

navigation.navigate('Profile');

This tells the navigator to move to the screen registered with the route name Profile.

<Pressable
    onPress={() =>
        navigation.navigate('Profile')
    }
>

    <Text>
        Open Profile
    </Text>

</Pressable>

A Pressable component can be used as a navigation button.

<Button
    title="Open Profile"
    onPress={() =>
        navigation.navigate('Profile')
    }
/>

The Button component can also be used to navigate between screens.

The goBack() method can be used to return to the previous screen.

navigation.goBack();

For example, a button can call goBack() when the user wants to return to the previous screen.

Navigation can also be used to pass parameters to another screen.

navigation.navigate(
    'Profile',
    {
        studentId: 101
    }
);

The Profile screen can then access the parameter through its route information.

A screen can receive the route object and read the parameters passed to it.

export default function ProfileScreen({
    route
}) {

    const {
        studentId
    } = route.params;

    return (

        <Text>
            Student ID: {studentId}
        </Text>

    );

}

Bottom tab navigation allows users to switch between important sections using tabs at the bottom of the screen.

Home
Profile
Settings

It is commonly used in applications where users frequently switch between major sections.

Drawer navigation provides a menu that can slide from the side of the screen.

For example:

Home
Profile
Courses
Settings
Logout

Drawer navigation is useful when an application contains many navigation options.

Navigators can be combined or nested to create more advanced application structures.

For example:

Drawer
   |
   └── Tabs
        |
        ├── Home
        ├── Courses
        └── Profile

Nested navigation allows complex applications to organize screens into logical groups.

Stack screens can display a header at the top of the screen.

<Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{
        title: 'Home'
    }}
/>

The options property can be used to customize screen options.

• Forgetting to install the required navigation packages.
• Forgetting NavigationContainer.
• Using a route name that has not been registered.
• Using incorrect screen component names.
• Passing parameters with incorrect names.
• Forgetting to handle the back action where necessary.
• Creating an unnecessarily complicated navigation structure.
• Not organizing screens into logical groups.

import React from 'react';

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

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

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

const Stack =
    createNativeStackNavigator();

function HomeScreen({
    navigation
}) {

    return (

        <View>

            <Text>
                Home Screen
            </Text>

            <Button
                title="Open Profile"
                onPress={() =>
                    navigation.navigate(
                        'Profile',
                        {
                            name: 'Rahul'
                        }
                    )
                }
            />

        </View>

    );

}

function ProfileScreen({
    navigation,
    route
}) {

    return (

        <View>

            <Text>
                Profile Screen
            </Text>

            <Text>
                Name: {route.params.name}
            </Text>

            <Button
                title="Go Back"
                onPress={() =>
                    navigation.goBack()
                }
            />

        </View>

    );

}

export default function App() {

    return (

        <NavigationContainer>

            <Stack.Navigator>

                <Stack.Screen
                    name="Home"
                    component={HomeScreen}
                />

                <Stack.Screen
                    name="Profile"
                    component={ProfileScreen}
                />

            </Stack.Navigator>

        </NavigationContainer>

    );

}

• Give screens clear names.
• Keep navigation structures organized.
• Use appropriate navigators for the application design.
• Pass only the data required by the destination screen.
• Keep screen components separate and reusable.
• Use consistent route names.
• Keep nested navigation as simple as possible.
• Test forward and backward navigation carefully.

Create Screens
       ↓
Install Navigation Packages
       ↓
Create NavigationContainer
       ↓
Choose a Navigator
       ↓
Register Screens
       ↓
Give Each Screen a Route Name
       ↓
Navigate Between Screens
       ↓
Pass Parameters When Required
       ↓
Use goBack() for Previous Screen
       ↓
Organize Navigation Structure
       ↓
Test All Navigation Paths

Navigation is essential for building multi-screen React Native applications. Understanding screens, routes, navigators and navigation methods provides the foundation for building real-world mobile apps.