React Navigation 6 Next

React Navigation mengeluarkan terobosan versi terbarunya dalam tahap demo , yaitu React Navigation 6 Next .

Beberapa hal yang baru adalah automatic linking , navigasi antar parameter , slide animation dan beberapa dukungan library lebih lanjut . Artikel dan Dokumentasi lihat : https://reactnavigation.org/docs/6.x/getting-started

Meski pada Repo GitHub masih tercantum version 5 yang stabil . Namun kita dapat mencoba nya terlebih dahulu untuk React Navigation 6.x .

https://github.com/react-navigation/react-navigation

Overview Update

- Perubahan Navigasi pada params linking

- Presentation Style dan Slide Animation pada IOS dan Android

- Drawer menggunakan default Animasi pada IOS

- Header secara default dapat digunakan tanpa Stack Navigator

- Material Top Tabs menggunakan UI Native

- Tambahan pada UI Elements Library

Instalasi

React Navigation 6 membutuhkan react-native @0.63.0 . Untuk Expo dibutuhkan SDK 41 .

Baiklah seperti biasa jalankan perintah NPM atau yarn

NPM

$ npm install @react-navigation/native@next @react-navigation/stack@next

YARN

$ yarn add @react-navigation/native@next @react-navigation/stack@next

Install juga pendukung Library nya

react-native-gesture-handler
react-native-reanimated
react-native-screens
React-native-safe-area-context

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

Terkhusus untuk Mac untuk developing Application IOS , anda membutuhkan cocoapods

NPX

$ npx pod-install ios

Parameter sekarang dapat diakses melalui Navigasi secara langsung

Pada Navigasi sebelumnya , kita menggunakan navigasi untuk parameter secara tersendiri untuk di merge nantinya . Di React Navigation 6 ini memungkinkan kita dapat menavigasikan secara langsung melalui props navigation.navigate .

Sebagai contoh kita akan menggunakan param berikut ,

{
"articleTitle": "React Navigation",
"articleBody": "Top React Navigation Library"
}

Anda biasanya menggunakan

navigation.navigate (“Article”, { “articleTitle”: “Smart Home”}),

Tetapi di React Navigation mempunyai metode baru yang lebih simple dalam merging ,

navigation.navigate({
name: “Article”,
params: { articleTitle: 'Smart Home' },
merge: true,
});

Perubahan Modal pada IOS dan Android

Secara tampilan ada sedikit perubahan UI pada React Navigation 6 IOS menggunakan Presentation Style dan untuk Android menggunakan Slide Animation. Berikut adalah list fitur dan perubahannya

IOS ,

- Anda dapat memilih untuk menggunakan modal atau screen untuk kostumisasi .

- Header dan status bar menyesuaikan tinggi secara otomatis .

Android ,

- Efek slide tambahan berasal dari bottom animation .

- Transparent Modal yang dapat di kostumisasi dan penggabungan diantara keduanya dalam satu stack . regular screens dan modal screens.

Drawer

Instalasi

NPM

$ npm install @react-navigation/drawer@next

YARN

$ yarn add @react-navigation/drawer@next

Fitur baru pada animasi Slide IOS Untuk drawer secara default .

Header tambahan secara default ketika di navigasikan pada Drawer & Bottom Tab .

Header secara default tertera pada TabScreen dan Drawer pada Stack Navigator .

Untuk menyembunyikan Header gunakan props. headerShown: false pada screenOptions.

Material Top Tabs dapat menggunakan ViewPager untuk Component Native

Instalasi

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

Sehubungan dengan itu react-native-tab-view v. 3.x menggunakan Library react-native-pager-view ketimbang Reanimated dan Gesture Handler . Seperti halnya bottom tabs , penggunaan props. tabBarOption dialihkan ke opsi screen per props .

Update Dukungan UI Elements Library pada React Navigation

Pada update kali ini UI Elements pada React Navigations mendapat tambahan elements seperti Header , Header Title , Header Background Component , dan lainnya .

Instalasi

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