Tujuan Pembelajaran

Memahami perbedaan utama Flexbox di React Native vs web
Mampu membuat layout card, list, dan grid dengan Flexbox
Menguasai flex, justifyContent, alignItems, alignSelf

Analogi

Diagram


      Web Flexbox:
- Default direction: ROW (kiri ke kanan)
- Display: flex explicit
- Width default: auto (content)

RN Flexbox:
- Default direction: COLUMN (atas ke bawah)
- Display: flex implicit (semua View)
- Width default: stretch (fill parent)

Seperti setir mobil — kanan di UK, kiri di US. Fungsi sama, orientasi beda.

Flexbox di React Native seperti setir mobil di negara berbeda — fungsi sama persis, cuma orientasi default-nya yang beda.

Penjelasan Konsep

Flexbox di React Native sama konsepnya dengan web, tapi ada beberapa perbedaan krusial yang sering bikin frustrasi web developer.

(1) flexDirection default COLUMN — semua View di React Native secara default menyusun child secara vertikal. Web default-nya ROW (horizontal). Jadi layout card yang berjajar ke samping butuh explicit flexDirection: 'row'.

(2) Semua View otomatis display: flex — tidak ada inline, block, inline-block. Tidak perlu menulis display: 'flex' seperti di web.

(3) Width default stretch, bukan auto — View akan mengisi lebar parent-nya secara otomatis. Di web, width default auto (mengikuti content).

(4) Gap support native — kamu bisa pakai gap, rowGap, columnGap di StyleSheet tanpa plugin tambahan. Tapi support bervariasi antar versi RN — amannya pakai margin.

(5) Flex basis berbeda — flex: 1 di RN berarti “isi sisa space” (seperti flexGrow: 1). Untuk eksplisit flex-basis per item, kombinasikan dengan width/height.

Layout patterns: (a) Centered content — flex: 1 + justifyContent: center + alignItems: center. (b) Fixed header + scroll content — flex: 1 untuk content, height fixed untuk header. (c) Sidebar + main — flexDirection: row, sidebar width fixed, main flex: 1. (d) Grid — flexWrap: wrap + width percentage per item.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami perbedaan utama Flexbox di React Native vs web., mampu membuat layout card, list, dan grid dengan Flexbox., dan menguasai flex, justifyContent, alignItems, alignSelf. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Flexbox di React Native, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Flexbox di React Native seperti setir mobil di negara berbeda — fungsi sama persis, cuma orientasi default-nya yang beda. 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. Row layout butuh flexDirection explicit. Grid pakai flexWrap + width persen dengan gap. Card pakai flex: 1 untuk equal width.

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 { View, Text, StyleSheet } from "react-native";

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  row: { flexDirection: "row", gap: 12, marginBottom: 16 },
  card: { flex: 1, backgroundColor: "white", borderRadius: 12, padding: 20, alignItems: "center" },
  grid: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
  gridItem: { width: "31%", aspectRatio: 1, backgroundColor: "#e0e0e0", borderRadius: 8 },
  centerBox: { flex: 1, justifyContent: "center", alignItems: "center" },
});

export default function Layouts() {
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <View style={styles.card}><Text>Card 1</Text></View>
        <View style={styles.card}><Text>Card 2</Text></View>
      </View>
      <View style={styles.grid}>
        {[...Array(6)].map((_, i) => <View key={i} style={styles.gridItem} />)}
      </View>
    </View>
  );
}

Penjelasan Kode

Row layout butuh flexDirection explicit. Grid pakai flexWrap + width persen dengan gap. Card pakai flex: 1 untuk equal width.

Prompt AI

Desain layout aplikasi e-commerce mobile: header fixed, tab navigasi bawah, dan konten tengah yang scroll. Minta AI buat skeleton-nya dengan Flexbox.

Pertanyaan Reflektif

Ambil satu halaman web yang layout-nya kompleks. Coba re-create layout tersebut dengan Flexbox React Native. Bagian mana yang paling sulit?