How to handle navigation from one page to another in react native?

While working on the app, we would like to switch from one screen to another and that is handled by React Navigation library.

Installation

To work on navigating pages we need to install few packages as follows:

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

Once you are done with the above installation let us now proceed with the next setup of navigation in React Native.

Creating Page Components

In your app project create a folder called pages/. Create 2 js files HomePage.js and AboutPage.js.

pages/HomePage.js

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

const HomeScreen = ({ navigation }) => {
    return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <Text style={{marginBottom: 20}}>Welcome to Home Page</Text>
            <Button 
                title="Click Here" 
                onPress={() => navigation.navigate('About', { name: 'About Page' })}
            />
        </View>
    );
};

export default HomeScreen;

In the home page, we display a button with title as "Click Here". On click of the button the user will navigate to AboutPage screen.

pages/AboutPage.js

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

const AboutPage = ({ navigation }) => {
    return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <Text style={{marginBottom: 20}}>You have reached inside About Page!</Text>
            <Button 
                title="Go Back" 
                onPress={() => navigation.goBack()}
            />
        </View>
    );
};

export default AboutPage;

In about page we are displaying the text and a back button to navigate back to the home screen.

Setting Up Navigation Container

Now let us call the pages in App.js as follows:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

const Stack = createStackNavigator();

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Home">
                <Stack.Screen 
                    name="Home" 
                    component={HomePage} 
                    options={{ title: 'From home page : Navigation' }} 
                />
                <Stack.Screen 
                    name="About" 
                    component={AboutPage}
                    options={{ title: 'About Page' }}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
};

export default App;

How It Works

NavigationContainer: Acts as the main navigation container that wraps all navigation components.

Stack.Navigator: Helps your app transition between screens where each new screen is placed on top of a stack.

Stack.Screen: Defines individual screens in the navigation stack with their names and components.

Navigation Methods

Common navigation methods available through the navigation prop:

• navigation.navigate('ScreenName') - Navigate to a specific screen
• navigation.goBack() - Go back to the previous screen
• navigation.push('ScreenName') - Push a new screen onto the stack
• navigation.reset() - Reset the navigation state

Passing Parameters

You can pass parameters between screens as shown in the HomePage example:

// Passing parameters
navigation.navigate('About', { name: 'About Page', userId: 123 });

// Receiving parameters in AboutPage
const AboutPage = ({ route, navigation }) => {
    const { name, userId } = route.params || {};
    
    return (
        <View>
            <Text>Screen: {name}</Text>
            <Text>User ID: {userId}</Text>
        </View>
    );
};

Conclusion

React Navigation provides a powerful and flexible way to handle navigation in React Native apps. The stack navigator allows seamless transitions between screens with built-in header management and parameter passing capabilities.