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

Browser Automation using JS (Part II)

ReactJs: A (Java) Developers sojourn

Class and object : Do we really understand these basic OOP concept?

React Native integration with Redux and TypeScript (Part 1)

Resto — a CLI app can send pretty HTTP & API requests with TUI

Let’s Try to Reduce With JavaScript

Static Typing in Ruby 3.0

A red stone set to a pitch-black background.

Configure Redux with React

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

How to Integrate React Native Web into React Native Apps

React Native vs Ionic: Which One to Choose?

Why React Native For Your Mobile Application?

Quick Way to Track Render Count in React Native with useRef()