React Navigation 6.0

React Navigation 6.0 — KPITENG

Key Points -


npm install @react-navigation/native@next @react-navigation/stack@next
yarn add @react-navigation/native@next @react-navigation/stack@next
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 -

"articleTitle": "React Navigation",
"articleBody": "Top React Navigation Library"
"articleTitle": "Smart Home",
"articleBody": "Top React Navigation Library"
name: “Article”,
params: { articleTitle: 'Smart Home' },
merge: true,

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 -

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 -

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

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 -

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