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

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 -

{
"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 -

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';

--

--

--

Founder & CEO at KPITENG

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Create multilingual web app using VueJS 2 + vue 18n

“Machine Learning for Life Sciences” #AutoML Twitter Chat Highlights from 23/2/2022

Are you looking for a reliable Mobile App Developer?

Blog Prompt 205

10 Tips To Speed Up Your Bootstrap Development Process

What is React?

Golang Trivia

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
KPITENG

KPITENG

Founder & CEO at KPITENG

More from Medium

4 Problems that You Need to Know Before Using React Native Webview

How to Solve React Native (IOS) Build Failed on Apple M1 Pro CHIP With Existing Application

How to Block Taking Screenshots in React Native

3 Must-Know Ways to Make Buttons/Touchables in React Native