A Guide for Latest Library React Navigation 5

For navigation between screens we use this navigation library for react native apps. The stable version of this library React Navigation 5.0, was released in February 2020.

Points we will be covering in this guide –

  1. Key features of React Navigation 5.0
  2. Installation and Setup
  3. Stack, Tab and Drawer Navigator
  4. An example in which all navigators are combined

An Introduction to React Navigation

As we know that mobile apps are made up of different screens, and these screens need to be shown in a particular sequence for various properties. So a basic structure is required to decide this sequence, which we provide in apps using navigators like stack, tab and drawer. React navigation library enables us in implementing navigation in react native apps.

What’s New ? Key features

  1. Dynamic navigator configuration with component
  2. New hooks – useNavigation, useRoute, useNavigationState, useFocusEffect, useIsFocused, useLinking, useScrollToTop
  3. Configuring screen navigation options more intuitive with setOptions, an replacement of static navigationOption
  4. Easier customization with new theming API
  5. First-class autocompletion and type-checking with TypeScript
  6. Redux DevTools integration
  7.  New native stack navigator that uses native navigation primitives for navigation using the react-native-screens library
  8. New backends for Material top tab navigator based on react-native-viewpager and ScrollView
  9. Other improvements – Revamped drawer navigator, simpler API for reset action, reliable focus, blur events, InterationManager integration and better handling of safearea.

Installation and Setup

First of all let’s setup  react-native app, we will use react-native-cli for creating the application. 

After installing react-native-cli, now create an application using the following command.

Now install the react-navigation library –

Now install the following dependency libraries for react-navigation –

We are done with the installation part now. Let’s set up the folder structure and add components for implementing react-navigation through example.

We will understand all types of navigator with examples individually and then will see an example where all navigators are combined.

Let’s start with different navigators individually.

Stack Navigator 

The stack navigator is a stack containing the screens of your app. First screen defined among all screens of stack navigator is the root screen unless we define explicitly initialRouteName to a particular screen. As we move from one screen to another in the stack, the new screen is placed on top of the stack.

Install the react-navigation-stack package –

Now we will configure the stack navigator in App.js/tsx file as given below.

App.js/tsx

App.js/tsx code explanation:

  1. First of all, import all screens which we want to keep in stack.
  2. Then we created an instance of createStackNavigator and defined each screen with the help of the instance in the NavigationContainer wrapper. Navigation container maintains the state of routes in our application.

Let’s create our screens

HomeScreen.tsx

 

Each screen within the stack will carry navigation as props, thus each will have access to Navigation’s navigate() function which enables us to move on another screen.

We have passed two params in the navigate function, first one is ‘Details’ which is the route name of DetailsScreen which we defined in App.js/tsx. The second one is navigation parameter with key ‘details’ and some information is stored in it.

DetailsScreen.tsx

  • In DetailsScreen, we’re accessing the same route params we passed in from HomeScreen.tsx.

Applying styles to header

Modify App.js/tsx to add header styles –

App.js/tsx

Tab navigator

Tabs can be found in most, if not all, apps today, and so ours should have some too! As with the stack, we’ll need to install this package separately:

We need icons for our tabs so we are installing react-native-vector-icons.

Now link your dependencies for icon assets with the command below –

You can use the link below for a complete setup guide –https://www.npmjs.com/package/react-native-vector-icons

Update HomeScreen & DetailsScreen as following as we can not pass params directly between tabs-

HomeScreen.js/tsx

DetailsScreen.js/tsx

Modify App.js/tsx 

Conclusion

Being able to configure navigation configurations dynamically is one of the most important features of react navigation 5. And newly added hooks are super helpful in handling navigation events with great efficiency. Overall features introduced in this react-natigation API will help in creating a better navigation experience for users.

All navigators combined code can be found with git repo link given below-

Repo Link – Nested navigators.

Comments