React Navigation v5 Example (React Native)

Paul Obunga — Tue, 28 Apr 2020 10:16:58 +0000

Step 1: Set up a blank react-native project

Open terminal in the working directory and run

npx react-native init ExampleApp

cd into project folder i.e ExampleApp

cd ExampleApp

Step 2: Add the necessary dependencies.

yarn add @react-navigation/native

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

Stack Navigator
Drawer Navigator (As the name suggests, it provides a navigation drawer navigator)
BottomTabs (Provides bottom tabbed navigation).

//Install only the one that you need. Refer to the documentation to understand in details

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.

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

// 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

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

//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;

DEV Community: Paul Obunga

React Navigation v5 Example (React Native)

Step 1: Set up a blank react-native project

Step 2: Add the necessary dependencies.

The 3 most common ones are

Step 3: Building our navigation