What’s new in React Navigation 6

Published in

Simform Engineering

6 min readOct 17, 2022

When was the last time you saw an application with one screen/page? The answer is probably never! Every app has multiple screens and routes through which users can interact with the content or services you provide. Thus, navigation is the foundation on which your app stands.

React Navigation is the most well-liked library to implement navigation in React Native. React Navigation 6 is what you can call an enhanced version of React Navigation 5, and it also shares most of the same APIs.

So, let’s take a look at the new features that this library introduces with version 6. But wait… if you’re a beginner and aren’t sure how to use React Navigation, don’t worry; we’ll cover the basics in this blog as well!

In this blog, we will learn :

What is React Navigation and what does it offer?
Installation
Group Component
Element Library
Flexibility in Navigators
Navigation Params overwritten
Changes in existing functionality

What is React Navigation and what does it offer? 🤔

React Navigation is a JavaScript-based library that provides navigation functionality using which developers can easily implement navigation in their mobile applications.

There are three main navigation options: Stack, Drawer, and Tab.

Stack Navigator

It allows the app to transition between screens, and each screen is placed on top of the stack. The @react-navigation/stack is highly customizable and implemented in JavaScript.

The performance is not as fast as the native implementation. If you face a performance issue during navigation, you can also use @react-navigation/native-stack. It basically uses native navigation primitives.

Drawer Navigator

It is an optional UI panel in the application. By default, it is hidden. It could be opened and closed by a dedicated button or swipe gesture on the screen.

We can use drawer navigation by adding @react-navigation/drawer in our project.

Tab Navigators

There are two types of Tab Navigators :

Bottom Tabs
Top Tabs

The @react-navigation/bottom-tabs are placed at the bottom of the screen and provide options for switching between screens.

The @react-navigation/material-top-tabs are placed under the header of the application and do the same functionality as the bottom tabs.

To install React Navigation 6 in the Project, follow these steps 👨‍💻

Minimum project requirements:

react-native version ≥ 0.63.0
expo version ≥ 41
typescript version ≥ 4.1.0

Step 1: Install Library ⬇️

# npm
npm install @react-navigation/native@^6.x# yarn
yarn add @react-navigation/native@^6.x

Step 2: Install Dependencies

# npm
npm install react-native-screens react-native-safe-area-context# yarn
yarn add react-native-screens react-native-safe-area-context

📘 Note: From React Native 0.60 or higher, you don’t need to run the
react-native link as linking is automatic.

Step 3: Install Pods (iOS)

For Mac users or those developing for iOS, you need to install Pod for complete linking:

npx pod-install

Step 4: Configure MainActivity.java (Android)

The react-native-screens library needs one additional configuration to properly work on Android devices.

Open android/app/src/main/java/<your package name>/MainActivity.java
and add the below configuration to that.

MainActivity.java

Now, let’s explore what’s new in React Navigation 6. 🤩

Group Component

Now, assume that there are four different screens in the project: Home, Inbox, Chat, and Profile.

Now, you wanted to change the header color for the Home and Profile screens to red and the Inbox and Chat screens to blue.

For that, you probably would think of changing the particular screen options. But you don’t need to do that as now there is a Group component; you can wrap your screens in that, it is considered a group, and you can apply screenOptions to the particular group.

Here is an example code for a Group component:

GroupExample.js

Here is the output:

Element Library

This library contains UI elements and helpers used in react-navigation like Header, HeaderTitle, HeaderBackground, etc.

It is very useful when you are building your own navigator or want to reuse the default functionality in the app.

If you’re going to use this library, first you have to install @react-navigation/native and its dependencies, then install the library.

# npm
npm install @react-navigation/elements# yarn
yarn add @react-navigation/elements

Here is an example of a Header and HeaderBackButton components from the Elements library:

ElementExample.js

Here is the output:

Flexibility in Navigators

Earlier, we couldn’t customize the Navigator based on the active screen because of the many customization options as props. But now these props have been moved to screenOptions.

In the Tab Navigator, the tabBarOption and in the Drawer Navigator, the drawerContentOptions are moved to screenOptions.

In Version 5

NavigationVersion5.js

In Version 6

NavigationVersion6.js

Navigation Params are now overwritten instead of merging

Earlier, all params were merged automatically, but now onwards, there is a merge option. By default, it is false, and all params are overwritten.

Here is an Example:

Params.js

Changes in existing functionality

Modals in Stack now use presentation style by default on iOS, and modals on Android now have a new slide animation.
On iOS, the Drawer now uses a slide animation by default.
Now there is only a single option to use a modal presentation style and a transparent model with the presentation.
There is no longer a need for additional stack navigation because headers are now, by default, shown on the Drawer and Bottom Tabs screens.
ViewPager has replaced Reanimated and Gesture Handler in Material Top Tabs because it offers a native user experience and improves performance.
Hidden headers are now ignored by the useHeaderHeight hook and return the height of the closest visible header in the parent.
There is a tabBarBackground prop for customizing the TabBar background (such as an image), so there is no need to create a custom TabBar.
headerMode="none" is a prop that hides the header in the stack navigator. headerShown is another prop that hides and shows the header. So, rather than having two ways to do the same thing, headerMode="none" is removed in favor of headerShown. If you want to use headerMode, it has been moved to screenOptions.
Now there is a new API to manage ref on the container (createNavigationContainerRef and useNavigationContainerRef)

Conclusion 📍

React Navigation 6 includes a new component, library, and changes to existing functionality to make it easier for developers to understand and implement. It also provides a smooth user experience when navigating between screens.

For more information, you can always check out the official documentation of React Navigation.