How to use React Navigation v5 in React Native

In an App, the most common way of page navigation is using Tab bar and header, while the official third party library recommended by React Native is react-navigation. React Navigation have already released version 5.x, which is quite different from the previous version, but it is more convenient to use. This article mainly explains the usage of react navigation 5.0 and above.

Installation

Install Core Library

Install Dependencies

From React Native 0.60 and higher, linking is automatic. So you don’t need to run react-native link.

If you’re on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking.

Now, we need to wrap the whole app in NavigationContainer. Usually you'd do this in your entry file, such as index.js or App.js:

Note: If you also use the Redux framework, you need to place the provider in the outermost layer and the NavigationContainerin the secondary layer, similar to the following:

Usage

React Navigation has several navigation modes: Stack Navigation , Tab Navigation and Drawer Navigation . Here I mainly talk about Stack Navigation and Tab Navigation.

Stack Navigation

Stack Navigation is relatively simple to use. It only needs to encapsulate the page components that need to be navigated Stack.ScreenAnd then wrapped in Stack Navigator That’s it. The top one Stack.Screen is the default page.

It can also be in the Stack.Screen There are two ways to set the properties of the navigation bar. One is with route parameter, and the other is set it directly.

When you need to jump to other pages, you can use navigation parameter to navigate.

If the page is created in class mode, the code will look like this:

Note: We can be used navigation.navigate or navigation.push . If navigate , it will find out whether there is a route with the same name in the current stack. If not, it will create a new route and jump. If push will create a new route and jump directly, that is, it can jump to the same page repeatedly.

More actions please check CommonActions

Tab Navigation

First, you need to install the corresponding library

The Tab.Navigator is used in a similar way. You need to package these page components into Tab.Screen .

The Tab.Navigator properties can be set as follows:

Nesting navigators

Nesting navigators means rendering a navigator inside a screen of another navigator, for example:

React Navigation v5 (Stack & Tabs) Demo

Check the docs for more details: https://reactnavigation.org/docs/getting-started

Happy Coding!

Software Developer and YouTuber | Beginner #ReactNative on my YouTube Chanel.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store