Pada tutorial kali ini Konsep Koding akan berbagi tutorial mengenai navigasi di React Native. Navigasi adalah cara berpindah halaman/screen pada React Native. Di sini kita akan menggunakan versi React Navigation terbaru yaitu versi 5.x yang merupakan versi terbaru dan sangat support untuk hooks. Nah di tutorial ini kita akan mempelajari bagaiman cara berpindah laman/screen di React Native.

https://www.konsepkoding.com/2020/03/tutorial-react-native-react-navigation.html
Tutorial React Native : React Navigation 5 Untuk Navigasi


Apa Yang Akan Kita Pelajari ?

  • Instalasi dan Setup React Navigation 5
  • Routing di React Navigation
  • Berpindah Halaman/Screen

Memulai Project

  • Pertama instal React Navigation dan Library lainnya yang di butuhkan
npm install @react-navigation/native
  • Setelah itu install library pendukung lainnya 
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
  • Untuk React Native di versi 0.59.x ke bawah anda harus mengetikan perintah link  
react-native link atau npx react-native link
  • Agar bisa din jalankan di iOs ketikan perintah 
cd ios && pod install 
  • Setelah itu tambahkan library untuk android native pada file  android/app/build.gradle
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02' 
  • Lalu kemudian import library gesture handler agar navigasi bekerja pada root file App.js atau Index.js hal ini agar React Navigation dapat di akses di semua komponen project.
import 'react-native-gesture-handler';
  • Contohnya pada file index.js di roor folder saran taruh di index.js jangan pada App.js
  • Setelah itu install library untuk routing, routing berguna sebagai navigasi aplikasi kita, jadi Screen atau Class yang tidak di daftarkan pada Route tidak bisa di panggil dan berpindah halaman. Install library di bawah ini untuk routing aplikasi.
npm install @react-navigation/stack
  • Selamat anda telah berhasil setup dan instalasi React Navigation 5 pada project React Native yang anda buat.
  • Kemudian bagian menariknya kita akan menulis kode untuk Pindah halaman disini saya bikin satu file agar lebih mudah dalam pembelajaran. Kemudian ketikan kode di bawah ini :

Setelah itu run project anda, dah hasilnya akan seperti pada gambar di bawah ini :

Tutorial React Native : React Navigation 5 Untuk Navigasi
Tutorial React Native : React Navigation 5 Untuk Navigasi

Tutorial React Native : React Navigation 5 Untuk Navigasi
Tutorial React Native : React Navigation 5 Untuk Navigasi

Kesimpulan 

Kenapa kita menggunakan React Navigation versi 5.x, jawabannya karena React Navigation 5.x sudah sangat support Hooks dan merupakan versi terupdate dan stable untuk React Navigation. Info lebih lanjut kamu bisa mengunjungi https://reactnavigation.org/