REACT NATIVE

PERTEMUAN KE-3
HAL YANG AKAN DIBAHAS

• Navigasi ( React Navigation )

• Penggunaan Penyimpanan local ( AsyncStorage )
NAVIGASI

Navigasi adalah cara untuk berpindah halaman/screen pada react native. Ada beberapa library yang dapat
digunakan React Native agar aplikasi yang kita bangun dapat berpindah halaman, diantaranya :
1. React Navigation
2. React Native Navigation
3. React Native Screen
Untuk saat ini kita akan menggunakan React Navigation, disamping library didukung oleh komunitas yang
besar dan github repo nya yang aktif, untuk penggunaan library ini pun relative mudah dengan
performance library yang cepat.
APA YANG AKAN KITA PELAJARI ?

1. Instalasi dan Setup React Navigation

2. Membuat Container Untuk Router
3. Berpindah Halaman/Screen
4. Parsing Parameter dari halaman ke halaman lainnya
5. Membuat Drawer / Side menu menggunakan React Navigation Drawer
INSTALASI DAN SETUP REACT NAVIGATION
Pertama kita installkan library React Navigation dan beberapa library yang dibutuhkan :
“npm install @react-navigation/native --save” untuk root dari library React Navigation ini
“npm install react-native-screens react-native-safe-area-context --save”
“npm install –save @react-navigation-stack”

Untuk Android setelah installasi wajib melakukan perintah dibawah pada folder ‘android’ :
“.gradlew clean”
Untuk IOS setelah installasi wajib melakukan perintah dibawah :
“npx pod-install”

Kemudian import library dibawah pada index root dari project yang kita buat , ini agar React Navigation dapat diakses dimana saja:
“import ‘react-native-gesture-handler’”
ASYNC STORAGE
AsyncStorage adalah React Native API untuk menyimpan data secara local pada smartphone yang digunakan oleh user,
singkatnya Ketika aplikasi di close oleh user maka data yang disimpan tidak akan hilang dan bisa dipanggil / digunakan
kapan saja

Untuk memulai menggunakan AsyncStorage yang harus dilakukan pertama kali adalah menginstall library
AsyncStorage
“npm install –save @react-native-community/async-storage”
Kemudian ketikan perintah dibawah ini untuk android
“cd android && .\gradlew clean && cd ..”
Untuk ios dapat mengetikan :
“npx pod-install” atau “cd ios && pod install”