How to Make Bottom Tabs Navigation in React Native - My Blog Share

How to Make Bottom Tabs Navigation in React Native

Selamat di blog kami My Blog Share, kali ini saya ingin berbagi ilmu tentang Cara Membuat Navigation Bottom di React Native. Untuk membuat Navigation Bottom Tabs di React Native saya sudah membuat beberapa langkah proses untuk pembuatannya.

Dibawah ini langkah-langkah yang kalian lakukan untuk pembuatan Navigation Bottom Tabs.

1. Install / Pasang Library React Navigation

Untuk langkah pertama yang kalian lakukan, silahkan kalian Install / Pasang Library React Navigation dengan cara masukkan code di bawah ini ke terminal.

yarn add @react-navigation/native

OR

npm install @react-navigation/native

2. Install / Pasang Dependencies React Native

Untuk langkah kedua yang kalian lakukan, silahkan kalian Install / Pasang Dependencies React Native dengan cara masukkan code di bawah ini ke terminal.

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

OR

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

3. Install / Pasang Library React Navigation Bottom Tabs

Untuk langkah ketiga yang kalian lakukan, silahkan kalian Install / Pasang Library React Navigation Bottom Tabs dengan cara masukkan code di bawah ini ke terminal.

yarn add @react-navigation/bottom-tabs

OR

npm install @react-navigation/bottom-tabs

4. Import dan Render Library React Navigation Bottom Tabs in Component

Untuk langkah keempat silahkan kalian import library Navigation Bottom Tabs dan buat tampilan Navigation Tabs, jika kalian bingung, silahkan kalian bisa mengikuti source code untuk memanggil dan membuat navigation bottom yang sudah saya buat dibawah ini.

5. Jalankan Aplikasi

Untuk langkah terakhir silahkan kalian jalankan aplikasi kalian ke device yang sudah kalian siapkan, Semoga berhasil.

Sekian dari saya semoga bermanfaat untuk kalin dan jangan lupa share keteman-teman kalian agar teman kalian juga bisa membuat Navigation Bottom pada React Native. Jika ada kendala atau masalah silahkan comment dibawah.