React Navigation

A Navigator is one of the most basic and important parts of a mobile application. It allows you to switch between different screens of an application and also links up the app with external links that navigate you in-and-out of the application.

React Navigation is the package that allows you to create navigators which let you navigate between screens with cool built in animations, for your react native applications. There are three major types of navigators that are used across react native applications, they are the Drawer navigator, the Stack navigator and the Tab navigator.

In this article, you’re going to learn how to setup navigation in a React Native application and learn about the three types of navigators mentioned above.

Setting up the application

Before with start off, let us create a React native project and install the required dependencies.

Note: Please follow the initial setup from here if you are working on react native for the first time.

Let us create a new react native project by executing the below command.

npx react-native init NavigationProject

Then, let us create a local.properties file, inside the android folder in the root directory of your project, and add the path to Android SDK.

Below is an example for a windows user.

sdk.dir=C:\\Users\\reactUser\\AppData\\Local\\Android\\Sdk

NavigationProject/android/local.properties

Where reactUser is your device’s logged in user name.

Install react navigation package-

This is the core package that is required to use navigation in a react native app.

yarn add @react-navigation/native

Install package dependencies-

These are responsible for the cool transitions and animations you see during navigation.

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

Now, add the react-native-gesture-handler to our entry file, which is App.tsx located in the root folder, and wrap the complete application inside the NavigationContainer.

import 'react-native-gesture-handler';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {View, Text} from 'react-native'

const App = () => {
  return (
    <NavigationContainer>
      <View>
        <Text>Hello World</Text>
      </View>
    </NavigationContainer>
  );
};

export default App;

App.tsx

Note: Please rename the App.js file to App.tsx file as I will be using typescript as the language, throughout this article.

Now, as we are ready with the project setup, let’s quickly jump into setting up different navigators for our application.

Drawer Navigator

Drawer navigator is one of the widely used navigators, you might have already seen one in the apps you used earlier. Let us quickly setup a drawer navigator to our Application.

First of all, we need to add a few screens, or components to our application so that we can switch between them. Let us create three components which will be the core components of our sample application.

I am going to create an src folder under the root directory of the project, and a components folder inside it. Then add three files named Home.tsx, Details.tsx and Profile.tsx which will be our screens.

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

const Home = () => {
  return (
    <View style={[styles.screen, styles.body]}>
      <View style={{marginVertical: 30}}>
        <Text>This is the common Home component</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
  body: {
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default Home;

Home.tsx

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

const Details = () => {
  return (
    <View style={[styles.screen, styles.body]}>
      <View style={{marginVertical: 30}}>
        <Text>This is the common Details component</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
  body: {
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default Details;

Details.tsx

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

const Profile = () => {
  return (
    <View style={[styles.screen, styles.body]}>
      <View style={{marginVertical: 30}}>
        <Text>This is the common Profile component</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
  body: {
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default Profile;

Profile.tsx

After adding all the three files, the folder structure may look like this.

NavigationProject
|-android
|-ios
|+src
 |+components
  |+Home.tsx
  |+Details.tsx
  |+Profile.tsx

Folder structure

Here comes the interesting part, now, let us add a drawer navigator to switch between the three screens we just created.

The first step is to add the drawer navigator package to our project. You can do that by executing the below command.

yarn add @react-navigation/drawer

Then, create a drawer navigator using createDrawerNavigator that can be imported from the installed package.

Now, let’s add the navigator to our application as shown below.

import 'react-native-gesture-handler';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import Home from './src/components/Home';
import Details from './src/components/Details';
import Profile from './src/components/Profile';

const App = () => {

const Drawer = createDrawerNavigator();

  return (
    <NavigationContainer>
    
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="Details" component={Details} />
        <Drawer.Screen name="Profile" component={Profile} />
      </Drawer.Navigator>
      
    </NavigationContainer>
  );
};

export default App;

App.tsx

Every drawer navigator contains multiple screens, which need two mandatory properties, name and component. The name property is just a unique string that identifies a screen of that navigator, and the component property is the react screen that the route must navigate to.

You can swipe from the left side of your screen to see the drawer, from where you can navigate to any of the three screens you created. Now, let us move on to the next type of navigator.

Stack Navigator

A stack navigator works similar to your web browser. Every time you visit a new screen, it places the screen on top of the stack, so when you come back you’re left with the previous one.

We will need to install the stack navigator using the below command before we use it in our application.

yarn add @react-navigation/stack

Now, we need to add the stack navigator inside the App.tsx file.

Note: I will be editing/reusing the same files and components for all the navigators.

For that, we will need to import the createStackNavigator from @react-navigation/stack, and use that to create a stack navigator.

Similar to Drawer navigator, every stack navigator contains screens which needs two mandatory properties, the name and the component.

Now, let’s add the navigator to our application as shown below.

import 'react-native-gesture-handler';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import Home from './src/components/Home';
import Details from './src/components/Details';
import Profile from './src/components/Profile';
import { createStackNavigator } from '@react-navigation/stack';


const App = () => {

  const Stack = createStackNavigator();
  
  return (
    <NavigationContainer>
    
      <Stack.Navigator>
      <Stack.Screen name="HomeRoute" component={Home} />
      <Stack.Screen name="ProfileRoute" component={Profile} />
      <Stack.Screen name="DetailsRoute" component={Details} />
    </Stack.Navigator>
    
    </NavigationContainer>
  );
};

export default App;

A stack navigator is a bit different from the drawer navigator. If you try to run the app now, you will be landed on the home screen, which is the first screen of your stack navigator and not be able to navigate anywhere else. In order to navigate, we need to add some functionality to our components.

Every component that is a part of a react navigator receives two parameters named navigation and route by default, which help us to perform various actions that are supported by that navigator. We just need to receive them inside our components and use them.

Let us now make some changes to the home screen. We are going to add the two parameters that were mentioned above and add two text components that respond to an onClick event. And re run the application.

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

const Home = ({navigation, route}) => {
  return (
    <View style={[styles.screen, styles.body]}>
      <View style={{marginVertical: 30}}>
        <Text>This is the common Home component</Text>
      </View>
      <Text onPress={()=>{navigation.navigate("ProfileRoute")}}>Profile</Text>
      <Text onPress={()=>{navigation.navigate("DetailsRoute")}}>Details</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
  body: {
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default Home;

Home.tsx

The action navigation.navigate function will accept one mandatory parameter which is the route name that the navigator must navigate to. You can also use various other actions like push, pop, goBack etc. to navigate between the screens.

Now, clicking on the ‘Profile’ text will take you to the profile screen and clicking on the ‘Details’ text will take you to the details screen. You can also modify the profile and details screens in the similar way, to navigate between each other instead of using the back button on the header to go back.

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

const Profile = ({navigation, route}) => {
  return (
    <View style={[styles.screen, styles.body]}>
      <View style={{marginVertical: 30}}>
        <Text>This is the common Profile component</Text>
      </View>
      <Text onPress={()=>{navigation.navigate("HomeRoute")}}>Home</Text>
      <Text onPress={()=>{navigation.navigate("DetailsRoute")}}>Details</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
  body: {
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default Profile;

Profile.tsx

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

const Details = ({navigation, route}) => {
  return (
    <View style={[styles.screen, styles.body]}>
      <View style={{marginVertical: 30}}>
        <Text>This is the common Profile component</Text>
      </View>
      <Text onPress={()=>{navigation.navigate("HomeRoute")}}>Home</Text>
      <Text onPress={()=>{navigation.navigate("ProfileRoute")}}>Profile</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
  body: {
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default Details;

Details.tsx

That was a basic example of a Stack navigator, let us now move on to the last type of navigator.

Tab Navigator

Tab navigator is one of the most commonly used navigators across social media applications. It provides a fixed bottom tab that navigate you to different screens.

Let us first install the required package, in order to use the bottom tab navigator, by executing the below command.

yarn add @react-navigation/bottom-tabs

Similar to the other navigators, we need to import the createBottomTabNavigator from the installed package and use that to create a bottom tab navigator.

Let us now create a bottom tab navigator to our application and add multiple screens to it as shown below.

import 'react-native-gesture-handler';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import Home from './src/components/Home';
import Details from './src/components/Details';
import Profile from './src/components/Profile';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';


const App = () => {

  const Tab = createBottomTabNavigator();
  
  return (
    <NavigationContainer>
    
    <Tab.Navigator>
      <Tab.Screen name="HomeRoute" component={Home}/>
      <Tab.Screen name="ProfileRoute" component={Profile}/>
      <Tab.Screen name="DetailsRoute" component={Details} />
    </Tab.Navigator>
    
    </NavigationContainer>
  );
};

export default App;

App.tsx

We need not make any changes to the other component files as we are using the same route names.

On running the app, you will see three clickable names on the bottom tab of your landing screen with the route names you used above. Clicking on each of them will navigate you to the specific component.

That was some basic introduction about how navigators are setup in react native applications. Hope you gained some knowledge about react navigation by reading this article.