React Navigation 6.0

React Navigation 6.0 — KPITENG

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

npm install @react-navigation/native@next @react-navigation/stack@next
yarn add @react-navigation/native@next @react-navigation/stack@next
react-native-gesture-handler
react-native-reanimated
react-native-screens
React-native-safe-area-context
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context
npx pod-install ios
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)

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"
}
{ 
"articleTitle": "Smart Home",
"articleBody": "Top React Navigation Library"
}
navigation.navigate({
name: “Article”,
params: { articleTitle: 'Smart Home' },
merge: true,
});

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

iOS -

Drawer now uses a slide animation by default on iOS -

Installation -

npm install @react-navigation/drawer@next
yarn add @react-navigation/drawer@next

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.

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

Installation

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

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.

npm install @react-navigation/elements@next react-native-safe-area-context
yarn add @react-navigation/elements@next react-native-safe-area-context
import { useHeaderHeight } from '@react-navigation/elements';

--

--

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