How to use React Native Navigation v6

In this article, we are going to learn about How to use React Native Navigation v6. To navigate between screens react native provides a powerful React-Navigation package. which you need to install in the project. this package provides different types of navigators like Stack, Native Stack, Drawer, Bottom Tabs, Material Bottom Tabs, and Material Top Tabs. So in this article, we are going to use a stack navigator which needs to be set up in the App.js file and pass our screens in the stack navigator. Also, this package provides functionality to pass data from one screen to another screen. so let’s start with the Implementation of React navigation package in our project.

1. Create a new project

Use following command to create new React Native project

react-native init ProjectName

2. Install React Navigation package

Use the following command to install the package

npm install @react-navigation/native

This package needs some supported packages that need to install. use the following command to install.

npm install react-native-screens react-native-safe-area-context

If you are using mac then you much use the pod install command to set up this package for iOS.

3. Use of React navigation

In the App.js file, you need to wrap all your stack navigators in NavigationContainer. let’s understand with code

import * as React from 'react';
//Import this NavigationContainer from @react-navigation/native
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Use stack navigator with your screens name */}</NavigationContainer>
  );
}

4. Use of stack navigator

After completing the third step. you need to install another package called native stack navigator. to install this package using the following command.

npm install @react-navigation/native-stack

After successfully installing you need to create this navigator and then register different screens that should be a part of that navigator for that see the following code.

import * as React from 'react';
import { View } from 'react-native';

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

//Import native-stack navigator like this
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import DashboardScreen from './components/screens/DashboardScreen';

//Create Native-Stack Navigator like this
const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Dashboard" component={DashboardScreen} />
        //<Stack.Screen name="Profile" component={ProfileScreen} />   <--Register different screens 
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

You need to register all screens inside Stack.Navigator component and In Stack.Screen the component is the actual imported component and the name is the identifier that you can use anywhere in the app.

5. Output

This is how to use React Native Navigation v6 for the setup of React Native Application.

Hope you will like this article. I have tried to explain React Native Navigation v6 implementation step by step in one article