Tujuan Pembelajaran

Memahami konsep safe area pada perangkat mobile modern
Mampu menggunakan SafeAreaView dan useSafeAreaInsets
Mengerti cara membuat platform-specific styling

Analogi

Diagram


      SafeArea seperti bingkai foto:
- Foto = konten aplikasi
- Bingkai = notch + status bar + home indicator
- Foto harus muat di dalam bingkai, tidak boleh ketutup

Tanpa SafeAreaView = foto terlalu besar, ketutup bingkai
Dengan SafeAreaView = foto pas di dalam bingkai

SafeAreaView seperti bingkai foto — memastikan konten tidak tertutup oleh notch, status bar, atau home indicator.

Penjelasan Konsep

Safe area adalah region di layar yang aman untuk menampilkan konten — tidak tertutup oleh notch (iPhone X+), Dynamic Island (iPhone 14 Pro+), status bar, atau home indicator (bawah layar).

Tanpa safe area handling, header aplikasi bisa ketutup notch, atau tombol di bawah layar tidak bisa ditekan karena ketutup home indicator.

SafeAreaView: wrapper dari react-native-safe-area-context. Otomatis menambahkan padding berdasarkan safe area insets. Pakai ini sebagai root wrapper semua halaman.

useSafeAreaInsets hook: dapatkan nilai insets (top, bottom, left, right) untuk styling custom. Berguna kalau butuh kontrol lebih granular — misal header gradient yang extend ke notch tapi konten di bawah notch.

Platform-specific styling: (1) Platform.OS check: Platform.OS === 'ios' ? 60 : 40. (2) Platform.select(): Platform.select({ ios: 60, android: 40, default: 0 }). (3) Platform-specific file extension: Header.ios.tsx dan Header.android.tsx. (4) react-native-platform-specific-extensions plugin untuk auto-resolve.

Common pattern: SafeAreaView sebagai root, dengan edgeInsets untuk kontrol area mana yang di-safe-area-kan.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami konsep safe area pada perangkat mobile modern., mampu menggunakan SafeAreaView dan useSafeAreaInsets., dan mengerti cara membuat platform-specific styling. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca SafeAreaView & Platform-Specific Styling, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

SafeAreaView seperti bingkai foto — memastikan konten tidak tertutup oleh notch, status bar, atau home indicator. 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. SafeAreaProvider wajib sebagai root wrapper. SafeAreaView dengan edges: [‘top’] hanya menambahkan safe area di atas. useSafeAreaInsets untuk kontrol granular.

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 { SafeAreaProvider, SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { View, Text, StyleSheet, Platform } from "react-native";

export default function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.root} edges={["top"]}>
        <Header />
        <Content />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

function Header() {
  const insets = useSafeAreaInsets();
  return (
    <View style={[styles.header, { paddingTop: insets.top + 8 }]}>
      <Text style={styles.headerText}>My App</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  root: { flex: 1, backgroundColor: "#fff" },
  header: { paddingHorizontal: 16, paddingBottom: 12, backgroundColor: "#007AFF" },
  headerText: { color: "white", fontSize: 18, fontWeight: "bold" },
});

Penjelasan Kode

SafeAreaProvider wajib sebagai root wrapper. SafeAreaView dengan edges: ['top'] hanya menambahkan safe area di atas. useSafeAreaInsets untuk kontrol granular.

Prompt AI

Jelaskan perbedaan antara SafeAreaView, StatusBar, dan NavigationBar. Berikan contoh kapan harus menggunakan masing-masing di React Native.

Pertanyaan Reflektif

Buka aplikasi favoritmu. Perhatikan bagaimana mereka menangani notch dan safe area. Adakah yang tidak handle dengan baik? Apa yang bisa diperbaiki?