Tujuan Pembelajaran

Memahami konsep responsive design di mobile (bukan cuma web)
Mampu menggunakan Dimensions API dan useWindowDimensions
Mengerti breakpoint strategy untuk phone vs tablet

Analogi

Diagram


      Responsive = Pakaian yang Pas:
- iPhone SE = kaos ukuran S
- iPhone Pro Max = kaos ukuran L
- iPad = kaos ukuran XXL

Canvas yang sama, ukuran beda. Jangan pakai fixed width untuk semua — pakai persen atau flex.

Responsive di mobile seperti pakaian — harus pas di semua ukuran. Jangan paksa fixed width, gunakan flex dan persen.

Penjelasan Konsep

Responsive design bukan cuma untuk web. Mobile punya variasi ukuran layar besar: iPhone SE (375x667), iPhone 15 Pro Max (430x932), iPad Pro 13” (1024x1366), Android tablet berbagai ukuran.

Dimensions API: Dimensions.get('window') untuk width/height. TAPI ini static — tidak update saat rotasi. Gunakan useWindowDimensions() hook (dari react-native) yang otomatis update saat orientasi berubah.

Breakpoint strategy: (1) < 380: compact phone (iPhone SE). (2) 380-430: regular phone (mayoritas). (3) > 430: large phone (Pro Max). (4) > 768: tablet.

Teknik responsive: (1) Flex-based: flexDirection row di tablet, column di phone. (2) Grid columns: 2 kolom di phone, 4 kolom di tablet. (3) Font scaling: fontSize relatif ke screen width. (4) Layout: side-by-side di tablet (split view), stacked di phone.

Orientation handling: landscape vs portrait. useEffect pada dimensions change, atau pakai komponen yang otomatis re-render.

Testing: jangan cuma test di emulator satu device. Coba di device kecil (SE) dan besar (Pro Max) atau tablet. Layout yang terlihat bagus di Pro Max bisa broken di SE.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami konsep responsive design di mobile (bukan cuma web)., mampu menggunakan Dimensions API dan useWindowDimensions., dan mengerti breakpoint strategy untuk phone vs tablet. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Responsive Design untuk Mobile, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Responsive di mobile seperti pakaian — harus pas di semua ukuran. Jangan paksa fixed width, gunakan flex dan persen. 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. useWindowDimensions untuk width dinamis. Perhitungan column berdasarkan width. 2 kolom di phone, 4 di tablet.

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

export default function ResponsiveGrid() {
  const { width } = useWindowDimensions();
  const isTablet = width > 768;
  const columns = isTablet ? 4 : 2;

  return (
    <View style={{ flexDirection: "row", flexWrap: "wrap", padding: 8 }}>
      {[...Array(12)].map((_, i) => (
        <View key={i} style={{ width: `${100 / columns}%`, aspectRatio: 1, padding: 4 }}>
          <View style={styles.item}><Text>{i + 1}</Text></View>
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({ item: { flex: 1, backgroundColor: "#e0e0e0", borderRadius: 8, justifyContent: "center", alignItems: "center" } });

Penjelasan Kode

useWindowDimensions untuk width dinamis. Perhitungan column berdasarkan width. 2 kolom di phone, 4 di tablet.

Prompt AI

Buat hook `useResponsive` yang return: isPhone, isTablet, screenWidth, columns (number), dan spacing (number) — adaptif berdasarkan breakpoint.

Pertanyaan Reflektif

Desain satu halaman yang layout-nya berubah signifikan antara phone dan tablet. Component mana yang paling tricky untuk dibuat responsive?