Menggunakan React Navigation pada React Native

Salah satu fitur yang dibutuhkan ketika membuat aplikasi adalah fitur pindah-pindah ke sebuah halaman. Pada React Native, ada sebuah package yang sangat direkomendasikan untuk menambahkan fitur-fitur pindah halaman tadi, nama package tersebut adalah React Navigation.

Disini saya akan menjelaskan langkah-langkah bagaimana mengimplementasikan React Navigation pada aplikasi yang kita buat. Pastikan juga bahwa project aplikasinya yang bare React Native bukan expo React Native.

Pertama kita install dahulu package berikut ini :

Jika kalian menggunakan npm

npm install react-native-screens react-native-safe-area-context

Jika kalian menggunakan yarn

yarn add react-native-screens react-native-safe-area-context

Jika kalian mengembangkan project untuk aplikasi di iOS jangan lupa untuk menginstall pods dengan perintah berikut ini :

npx pod-install ios

Selanjutnya untuk project Android, jika ingin package react-native-screens kalian berjalan dengan baik. Perlu ada edit manual di file mainActivity.java dimana file ini tempatnya ada di android/app/src/main/java/<your package name>/MainActivity.java .

Tambahkan baris code berikut ini :

Pada bagian atas

import android.os.Bundle;

Kemudian pada bagian body class MainActivity tambahkan baris code berikut ini :

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null);
}

Kurang lebih seperti gambar dibawah ini

Jika sudah, terakhir kita install lagi satu package tambahan yaitu @react-navigation/native-stack.

Jika kalian menggunakan npm

npm install @react-navigation/native-stack

Jika kalian menggunakan yarn

yarn add @react-navigation/native-stack

Jika sudah, kita bisa langsung implementasikan React Navigation pada aplikasi kita, berikut adalah contoh sederhana dari penggunaan React Navigation. Disini saya membuat tiga buah component fungsi, ada App sebagai root fungsinya, HomeScreen, dan DetailsScreen. Dimana pada component fungsi App untuk menampung tag dari package-package React Navigation tersebut. Sedangkan component HomesScreen dan DetailsScreen sebagai halaman yang tampil di aplikasinya.

Berikut adalah baris codenya :

Dan tampilan Aplikasinya akan seperti berikut ini :

Ketika klik tombol GO TO DETAILS, maka akan mengarah ke halaman Detail.

Berikut adalah contohnya :

Sekian dari pembahasan kali ini, semoga bisa bermanfaat, cheers.