Cara Membuat Navigasi Bottom Tab Pada React Native

 

Ketika kita menggunakan aplikasi android, terkadang kita menjumpai beberapa komponen yang berfungsi apabila kita menyentuhnya maka aplikasi tersebut akan menyajikan segala pilihan menu sesuai kebutuhan kita

Contohnya seperti yang terjadi pada aplikasi ini

Tab Bottom yang menyediakan tombol untuk Home, Order, dan Profile

Bagaimana cara membuatnya? Ternyata ada beberapa langkah yang harus diikuti

Langkah Langkah

Instal package menggunakan perintah berikut

npm install @react-navigation/bottom-tabs@^5.x

 Atau kalian bisa melihatnya pada documentation resminya 

Lalu kita tambahkan kode ini pada file index.js pada folder route kita yang sudah kita terapkan sesuai dengan prinsip Atomic Design

Baca Juga: Belum Tahu Atomic Design? Pelajari Sekarang Juga Disini!

./src/routes/index.js

Lalu, buat component untuk tiap tiap halaman Profile, Home, dan Order. Untuk pembuatan tahap awal boleh menggunakan kode yang sederhana saja atau setidaknya menampilkan teks yang menjelaskan tiap tiap components. Contohnya seperti ini

Tambahkan kode ini di dalam <Stack.Navigator></Stack.Navigator>

Sehingga keseluruhan kode akan seperti ini

Kesimpulan

Dalam membuat Navigasi Tab pada React Native harus menginstal package dan membuat sebuah komponen yang mengarahkan pada suatu halaman. Lalu masukkannya kedalam stack yang merupakan isi dari sebuag router