React Navigation 6.x

Hello Developers! Let's see what's new in React Navigation 6.x.

Key Points -

• Installation
• Params are now overwritten on navigation instead of merging
• By default, modals in iOS uses presentation style and in android it uses slide animation
• Drawer now uses a slide animation by default on iOS
• Headers by default in Drawer & Bottom Tab, No more need to add Stack Navigator
• Material Top Tabs now uses ViewPager based implementation with native experience
• UI Elements Library with rich feature component to be used in React Navigation

Installation

Minimum requirements
React Navigation 6 requires at least react-native@0.63.0. If you’re using Expo, your SDK needs to be at least 41.

NPM

npm install @react-navigation/native@next @react-navigation/stack@next

YARN

yarn add @react-navigation/native@next @react-navigation/stack@next

React Navigation using some core utilities and those are used by navigators to create navigation structures in the app.

Following libraries needs to be install -

react-native-gesture-handler
react-native-reanimated
react-native-screens 
React-native-safe-area-context

Install dependency -
NPM

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context

YARN

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context

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.

npx pod-install ios

Older versions of some libraries are longer supported, React Navigation requires newer versions of the following libraries:

react-native-safe-area-context >= 3.0.0
react-native-screens >= 2.15.0
react-native-tab-view >= 3.0.0
react-native >= 0.63.0
expo - 40+ (if you use Expo)

Recommended - Securing React Native Application

Params are now overwritten on navigation instead of merging -

When navigating to an existing component/screen, params are merged from the initial version. Example - Let’s say there is existing article screen with the following params:

{
  "articleTitle": "React Navigation",
  "articleBody": "Top React Navigation Library"
}

When you navigate with navigation.navigate ("Article", { "articleTitle": "Smart Home"}), so after param merge it will look like

{ 
  "articleTitle": "Smart Home", 
  "articleBody": "Top React Navigation Library"
}

So, Merging behavior is useful in a few scenarios, but it’s problematic in other cases. In React Navigation 6, no more default merge, instead it will be overwritten. If you want merge params then you can do it by explicitly by merge: true like this,

navigation.navigate({
  name: “Article”,
  params: { articleTitle: 'Smart Home' },
  merge: true,
});   

Recommended - Top 10 React Hooks Library

By default, modals in iOS uses presentation style and in android it uses slide animation -

iOS -
mode="modal" is removed in favor of presentation: "modal", New presentation options there, allow developers to customer whether screen is modal or screen(basic).

iOS having presentation: "modal" - which shows a new presentation style modal introduced in iOS 13. It also manages status bar height in the header automatically, that ideally we did manually before.

Android -
Previously we didn’t have modal animation in Android, but now there is a slide from the bottom animation. If you don’t want to use new animation then you can change it using animation related options.

New presentation: "transparentModal" option to make it easier to bulier transparent modals. Developers can mix regular screens with modal screens in the same stack.

Recommended - How to improve the performance of React Native Application?

Drawer now uses a slide animation by default on iOS -

Installation -
NPM

npm install @react-navigation/drawer@next

YARN

yarn add @react-navigation/drawer@next

There is a new implementation based on the Reanimated Library v2, if it’s not available then it will take the old implementation. To force apply to the old implementation using - useLegacyImplementation={true} to Drawer.Navigator.

Slide animation is default in iOS, Still you want to keep previous behavior then you can specify, drawerType: "front" in screenOptions.

Headers by default in Drawer & Bottom Tab, No more need to add Stack Navigator -

TabScreen & Drawer now show a header by default similar to the screen in stack navigator.

If you want previous behavior not to keep the header then you can use, headerShown: false in screenOptions.

Material Top Tabs now uses ViewPager based implementation with native experience -

Installation
NPM

npm install @react-navigation/material-top-tabs@next react-native-pager-view

YARN

yarn add @react-navigation/material-top-tabs@next react-native-pager-view

The react-native-tab-view dependency is upgraded to the latest version (3.x) which now uses react-native-pager-view instead of Reanimated and Gesture Handler. Same like bottom tabs, the tabBarOptions prop was removed and the options from there were moved to screen's options instead.

Previously lazy props is on stack level now shift to lazy per-screen configuration for material top tabs.

UI Elements Library with rich feature component to be used in React Navigation -

React Navigation added a new package which contains multiple UI Elements related to navigation like, Header, Header Title, Header Background Component and many more. So developers can use those components in all navigations.

Installation
NPM

npm install @react-navigation/elements@next react-native-safe-area-context

YARN

yarn add @react-navigation/elements@next react-native-safe-area-context

import

import { useHeaderHeight } from '@react-navigation/elements';

Discover Element Library for more details!

Thanks for reading Blog!

KPITENG | DIGITAL TRANSFORMATION
www.kpiteng.com/blogs | hello@kpiteng.com
Connect | Follow Us On - Linkedin | Facebook | Instagram