Tujuan Pembelajaran

Mampu mengimplementasikan Bottom Tab Navigator
Memahami struktur nested navigators
Mengerti kapan menggunakan tab vs drawer

Analogi

Diagram


      Tab = Rak Buku Terbuka:
Semua tab terlihat, user tinggal pilih
Cocok: 3-5 section utama

Drawer = Lemari Arsip:
Tersembunyi di samping, dibuka saat perlu
Cocok: BANYAK section, atau section yang jarang diakses

Tab seperti rak buku — user bisa lompat antar section kapan saja. Drawer seperti lemari arsip — untuk section yang lebih banyak tapi jarang diakses.

Penjelasan Konsep

Bottom Tab Navigator menampilkan tab bar di bawah layar — pola paling umum di aplikasi mobile. Biasanya 3-5 tab: Home, Search, Create, Notifications, Profile. Install: @react-navigation/bottom-tabs.

Konfigurasi tab: (1) tabBarIcon — ikon per tab (gunakan @expo/vector-icons atau lucide-react-native). (2) tabBarActiveTintColor — warna saat tab aktif. (3) tabBarStyle — styling bar (backgroundColor, borderTop, height). (4) tabBarBadge — badge notifikasi (angka merah). (5) headerShown: false untuk sembunyikan header dobel (karena tab sudah punya header).

Nested navigators: Kombinasikan Stack + Tab. Pola paling umum: Tab sebagai root (Home, Search, Profile) → setiap tab punya Stack Navigator sendiri (HomeStack, SearchStack, ProfileStack). Ini memungkinkan push/pop di dalam satu tab tanpa mengganggu tab lain.

Drawer Navigator: menu geser dari kiri (atau kanan di RTL). Cocok untuk aplikasi dengan banyak section seperti dashboard admin. Install: @react-navigation/drawer. Props: drawerContent untuk kustomisasi konten drawer, drawerType: front/slide/permanent.

Kapan tab vs drawer: tab untuk top-level navigation (3-5 items), drawer untuk section banyak atau secondary navigation.

Inti yang Perlu Dipahami

Bagian ini berfokus pada mampu mengimplementasikan Bottom Tab Navigator., memahami struktur nested navigators., dan mengerti kapan menggunakan tab vs drawer. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Tab & Drawer Navigation, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Tab seperti rak buku — user bisa lompat antar section kapan saja. Drawer seperti lemari arsip — untuk section yang lebih banyak tapi jarang diakses. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. createBottomTabNavigator untuk bottom tabs. headerShown: false supaya tidak dobel header. Setiap tab bisa punya Stack Navigator sendiri untuk navigasi dalam tab.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import { Text, View } from "react-native";

const Tab = createBottomTabNavigator();

function HomeScreen() { return <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}><Text>Home</Text></View>; }
function SearchScreen() { return <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}><Text>Search</Text></View>; }
function ProfileScreen() { return <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}><Text>Profile</Text></View>; }

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator screenOptions={{ tabBarActiveTintColor: "#007AFF", headerShown: false }}>
        <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarLabel: "Beranda" }} />
        <Tab.Screen name="Search" component={SearchScreen} options={{ tabBarLabel: "Cari" }} />
        <Tab.Screen name="Profile" component={ProfileScreen} options={{ tabBarLabel: "Profil" }} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Penjelasan Kode

createBottomTabNavigator untuk bottom tabs. headerShown: false supaya tidak dobel header. Setiap tab bisa punya Stack Navigator sendiri untuk navigasi dalam tab.

Prompt AI

Desain arsitektur navigasi untuk aplikasi social media: bottom tabs (Feed, Search, Create Post, Notifications, Profile), dan setiap tab punya stack navigator sendiri dengan minimal 2 screens.

Pertanyaan Reflektif

Analisis 3 aplikasi mobile favoritmu. Apakah mereka pakai tab, drawer, atau kombinasi? Kenapa mereka memilih pola tersebut?