React Navigation v5 Example (React Native)
Tags: reactnative, navigation, android, ios
Published: 2020-04-28 10:16:58

---
title: "React Navigation v5 Example (React Native)"
published: true
description: "navigation in React native Apps with React Navigation 5"
tags: reactnative, navigation, android, ios
cover_image: https://thepracticaldev.s3.amazonaws.com/i/u1x7n8mbvor1nq6tcbk0.jpg
---

##Step 1: Set up a blank react-native project

Open terminal in the working directory and run 

```BASH 
npx react-native init ExampleApp
```

cd into project folder i.e ExampleApp

```BASH 
cd ExampleApp
```

##Step 2: Add the necessary dependencies.

```BASH 
yarn add @react-navigation/native
```

```BASH 
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
```

The libraries we've installed so far are the building blocks and shared foundations for navigators, and each navigator in React Navigation lives in its own library.

So far what we have installed is the foundation for navigation using React Navigation. However, in order to start navigating to different screens/scenes/pages in our app, we will need to install other navigators depending on how we want to navigate.

#The 3 most common ones are
1. Stack Navigator
2. Drawer Navigator (As the name suggests, it provides a navigation drawer navigator)
3. BottomTabs (Provides bottom tabbed navigation).

//Install only the one that you need. Refer to the documentation to understand in details

```BASH
yarn add @react-navigation/stack

yarn add @react-navigation/bottom-tabs

yarn add @react-navigation/drawer
```

All these navigators contain properties (Navigator and Screen) that are essential in setting up the Navigator.

#Step 3: Building our navigation

Let's get started by bootstrapping and creating all the files we are going to work with.

```BASH
mkdir src && cd src && touch package.json

mkdir navigation screens components 

cd navigation && touch AppNavigator.js MainTabs.js

cd .. && cd screens && touch Home.js  Profile.js Contacts.js

cd .. && cd components && touch ContactListItem.js Avatar.js Icons.js
``` 


Open our App.js and add the following code to create a stack navigator

```JSX
// In App.js in a new project

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import AppNavigator from 'src/navigation/AppNavigator.js';

const App = () => {
 return (
  <NavigationContainer>
   <AppNavigator />
  </NavigationContainer>
 );
}

export default App;
```
Now open the AppNavigator.js file and add code

```JSX
import * as React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import MainTabs from './MainTabs';

const Stack = createStackNavigator();

const AppNavigator = () => {
 return (
   <Stack.Navigator>
     <Stack.Screen name='MainTabs' component={MainTabs} />
   </Stack.Navigator>
 );
}

export default AppNavigator;
```

Next, we open the MainTabs file and edit the code as below

```JSX
//MainTabs.js

import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from 'src/screens/Home';
import Profile from 'src/screens/Profile';
import Contacts from 'src/screens/Contacts';

const Tabs = createBottomTabNavigator();

const MainTabs = () => {
  return (
    <Tab.Navigator>
     <Tab.Screen name='Home' component={Home} />
     <Tab.Screen name='Home' component={Profile} />
     <Tab.Screen name='Home' component={Contacts} />
    </Tab.Navigator>
  );
}

export default MainTabs;
```