Rasik Modi
  24 Jul 20

Introduction

React navigation is a library that enables a developer to navigate between the screens in react native.Its the most popular solution when it comes for navigation in react native apps which also supports both expo and CLI.The latest update of the react  navigation brings a huge change from the previous versions.

The latest react navigation version comes with an improved API design which brings the simplicity and new features to define the routes .

Requirements to install React navigation

1. Node above version 10.x.x
2. Npm or yarn 
3. Latest CLI or expo version

Installation for CLI

Installation Command

NPM

npm install @react-navigation/native                      

Yarn

yarn add @react-navigation/native

Installation of following dependencies is necessary to support the navigation library.

Just paste the following commands in the terminal and you are good to go.

For npm 

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

For Yarn

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

 For IOS we need to install the cocoapods using the following command

npx pod-install ios

Installation for expo

Install the dependencies from the following commands

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

Getting Started

The latest version of navigation comes with dynamic Imports and makes the navigation more dynamic and easy for developers.

In the top level file such as app.js or index.js  initialise the react-native-gesture-handler  with import ‘react-native-gesture-handler’;

This step is very important as the react  navigation uses the native gesture handler for gestures. If not initialised then the app may crash in production build.

Now we have to wrap the whole app into a single component NavigationContainer.

For example:

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


export default function App() {
 return (
 	<NavigationContainer>
{/* Rest of your app code */}
</NavigationContainer>
 );
}

Creating a stack navigator

To implement stack navigator we have to import createStackNavigator . The create stack navigator is a function that returns two properties which are used to create the stack i.e Stack and Navigator .So, first, we have to call the function and then use the properties.

The  following example shows the implementation.

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
 return (
   <View>
     <Text>Home Screen</Text>
   </View>
 );
}
const Stack = createStackNavigator(); // calling the Stack Navigator

function App() {
 return (
   <NavigationContainer>
     <Stack.Navigator>  //wrapping the components into the stack Navigator 
       <Stack.Screen name="Home" component={HomeScreen} />
     </Stack.Navigator>
   </NavigationContainer>
 );
}
export default App;

The  name props refer to the name of the component and the  component props refer to

the  component to be rendered.

NOTE-The component props receives a component name .we cannot pass a callback function.

To set the initial route set the props initialRouteName to the initial component to be rendered in the stackNavigator.

Specify the options for each screen

In the latest version of react navigation we can specify the options of each screen by options props.

<Stack.Screen name='Home' component={Home} options={{ title: 'Home Screen}} />

Navigation between the screens 

We can navigate between screens by props provided by the navigation library for all the components within the navigation container.

The navigation props are accessible to all the components and we need to call the navigation functions provided in the props.  

Let’s consider we have to pass the props from one screen to another defined in the stack navigator.

function HomeScreen(props) {
 return (
   <View>
     <TouchableOpacity onPress={()=>props.navigation.navigate(“Screen B”) }>To screen B </TouchableOpacity>
   </View>
 );
}

The following functions are used to navigate from one screen to another.

1.navigate(‘screen name’)

The navigation function is used to go from one screen to another.It searches for the screen passed in the arguments and if the screen is not  present in the stack it will create  the instance of the screen at top of the stack and if the screen is present in the stack it will navigate it at the top of the stack .The navigation function do not allow duplication in the stack.

NOTE- If you are passing the same screen name in which you are present then it will not do anything.

2. push(‘screen name’)

Let’s say we have a case in which we want to create a copy of the same screen multiple times then we can use the push function .This will allow us to create a copy of the screen multiple times even if the screen is present in the stack.It works similarly to the stack push operation.

 Example below.

function HomeScreen(props) {
 return (
   <View>
     <TouchableOpacity   onPress={()=>props.navigation.push(“HomeScreen”) }>Push homescreen again </TouchableOpacity>
   </View>
 );
}

3.goback()

The goback function does not require any arguments to be passed in. This function behaves similar to the back button in any smartphone. The header bar automatically shows the back button that works the same as the goback function. Example below.

function HomeScreen(props) {
 return (
   <View>
     <TouchableOpacity   onPress={()=>props.navigation.goBack()}>Go back </TouchableOpacity>
   </View>
 );
}

Passing parameters to screen 

 We can pass params to a route by putting them in an object and then passing it as a second parameter in the navigation.navigate function. 

To read the parameter in the routed screen we can use route.params.

Hooks Api

With react hooks ,it’s much easier to to use stateful logic in react native.The new api v5 comes with some additional hooks .

1. useNavigation- It can access the navigation props from any child component.
2. useRoute- It can access the route route props of the parent component.
3. useIsFocused-It can get the current focus state of the component ,useful for rendering  content based on focus.
4. useFocusEffect- It is used to subscribe to the event listeners only when the screen is focused.

Final verdict 

I recommend that it’s the best library to manage react native navigation. If you are building a new project then you should give a try react-navigation 5. It’s developer-friendly and really awesome!!!