React Navigation 6.x
Tags: react, reactnative, reactnavigation, javascript
Published: 2021-07-29 03:39:21

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](https://www.kpiteng.com/blogs/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](https://www.kpiteng.com/blogs/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](https://reactnavigation.org/docs/6.x/stack-navigator#animations).

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?](https://www.kpiteng.com/blogs/improve-react-native-app-performance)

###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!](https://reactnavigation.org/docs/6.x/elements)

**Thanks for reading Blog!**

KPITENG | DIGITAL TRANSFORMATION
www.kpiteng.com/blogs | hello@kpiteng.com
Connect | Follow Us On - [Linkedin](https://www.linkedin.com/company/kpiteng/) | [Facebook](https://www.facebook.com/kpiteng) | [Instagram] (https://www.instagram.com/kpiteng)