Getting Started with the React Navigation

If you are working on React Native App iOS or Android and Want to set routing/navigation on your pages, You can use the React Navigation with the React Native library to set navigation from one screen to another Screen.

React Navigation library Support Stack Navigation, Tab Navigation and Drawer Navigation.

Let’s Start Now

Below steps are for the React Navigation library version 5.

Install React Navigation Library in your root Folder, Run below command in your Terminal.

npm install @react-navigation/native@⁵.x

Install dependencies which are required for React Navigation. Run Below command in your terminal.

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

Now for the linking navigate to the Project/iOS folder and Run below command.

pod install or npx pod-install ios

Now we need to wrap whole app to NavigationContainer for that import below lines in your entry file like index Js or App Js file.

For NavigationContainer Run below command for the install dependency

Before importing File follow below steps:
1. Do npm install @react-navigation/native 
2. go to cd ios/ folder 
3. Run pod install command.
import { NavigationContainer} from '@react-navigation/native';

Then write in your render method below code:

return (
    <NavigationContainer>
        <StackNavigator/> {/* Stack Navigation its use for our application stack defined component. */}
    </NavigationContainer>
);

Now we will write our first stack navigation Component.

We will first create a separate file for stack navigation, Lets Say our file name Stack.Navigator.js file

Before creating File follow below steps:
1. Do npm install @react-navigation/stack 
2. go to cd ios/ folder 
3. Run pod install command.
/**
* Example of Stack Navigator Component 
*/
import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';

function HomeScreen({ navigation }) {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text> Home Screen </Text>
            <TouchableOpacity onPress={() => {
                navigation.navigate('Settings')
            }}><Text style={{color: 'blue'}}>Go to Settings Screen </Text></TouchableOpacity>
        </View>
    )
}

function SettingScreen({ navigation }) {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text> Setting Screen </Text>
            <TouchableOpacity onPress={() => {
                navigation.navigate('Home')
            }}><Text style={{color: 'blue'}}>Go to Home Screen </Text></TouchableOpacity>
        </View>
    )
}

function StackNavigator() {
    const Stack = createStackNavigator();
    return (
        <Stack.Navigator>
            <Stack.Screen name="Home" component={HomeScreen}/>
            <Stack.Screen name="Settings" component={SettingScreen}/>
        </Stack.Navigator>
    );
}

export default StackNavigator;

So in the above example, we are navigating using below method

navigation.navigate(screenName)

Example of Stack Navigation

Github link: https://github.com/sahilpandya/react-native-stack-navigation

Thanks for reading

Hopefully You have found this article useful to Start with the Stack Navigation using React Navigation.

If you have any recommendation please let me know in the below comment section.