React navigation Part 1: How to add react navigation 5.0 in React Native project

Introduction :

Navigation means managing the transition between multiple screens in mobile apps. For handling navigation in react native, one library is used called react-navigation. This is a feature-rich library with a lot of functionalities. In this post, we will show you how to add react-navigation to an existing react-native or expo project.

Installation :

Use the below npm or yarn command to add the base of react-navigation to your project :

npm install @react-navigation/native
or
yarn add @react-navigation/native

We need a couple of other dependencies as well. Use the below command to install them on your expo or react native project :__

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

or

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

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Setup for iOS :

Do the following if you are developing for iOS as well :

npx pod-install ios

Import and use it :

Make the below changes on your entry-level file :

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

And wrap everything inside :

<NavigationContainer>
..
</NavigationContainer>

That’s all. Now you can start to add navigations.