SafeAreaView — apa itu, tata letak dengan Safe Area di React Native

Apa itu SafeAreaView?

SafeAreaView — komponen React Native yang secara otomatis menambahkan jarak dalam (padding) agar konten tidak tertutup oleh elemen antarmuka sistem: bilah status, Notch, Dynamic Island dan panel navigasi sistem. Komponen ini muncul di React Native 0.50 untuk iOS dan kemudian diperluas untuk Android.

Di iOS SafeAreaView menggunakan UIView.safeAreaInsets asli yang muncul di iOS 11 (2017). Di Android komponen memperhitungkan WindowInsets — jarak sistem yang tersedia sejak Android 5.0 (API 21). Menurut data Apple (2026), 92% iPhone aktif memiliki layar dengan potongan atau Dynamic Island.

Mengapa Safe Area diperlukan

Konsep Safe Area — bagian dari rekomendasi Apple HIG (Human Interface Guidelines). Sebelum iPhone X (2017) seluruh ruang layar aman. Dengan munculnya Notch, Apple mendefinisikan area di mana konten tidak boleh ditempatkan: potongan kamera, indikator waktu dan baterai, indikator beranda. Android memperkenalkan konsep serupa dengan munculnya layar berpotongan pada tahun 2018.

Bagaimana Safe Area bekerja di iOS dan Android

Di iOS SafeAreaView membaca safeAreaInsets dari layout-guide asli. Jarak atas mencakup tinggi bilah status (biasanya 44 atau 50 poin untuk iPhone dengan Notch). Jarak bawah — 34 poin untuk Indikator Beranda (Home Indicator). Android menggunakan WindowInsets — jarak atas untuk bilah status dan bawah untuk navigasi sistem.

Penting: SafeAreaView menerapkan padding secara otomatis, tetapi hanya untuk kontainer akar. Komponen bersarang tidak mendapatkan perlindungan — setiap layar harus memiliki SafeAreaView sendiri. Untuk jendela modal dan BottomSheet, perhitungkan jarak secara terpisah.

Notch, Dynamic Island dan panel sistem

Notch — potongan perangkat keras di bagian atas layar yang berisi kamera dan sensor. Muncul di iPhone X (2017). Dynamic Island — area perangkat lunak-perangkat keras iPhone 14 Pro dan lebih baru yang menggantikan Notch dengan elemen interaktif. Keduanya memerlukan jarak atas 50-56 pt.

Di Android potongan memiliki berbagai bentuk: tetesan, lubang di sudut (punch-hole), strip di bawah kamera. SafeAreaView di Android menggunakan WindowInsets yang memperhitungkan bentuk potongan. Untuk aplikasi dalam orientasi lanskap, jarak samping ditambahkan agar konten tidak tertutup oleh elemen sistem.

import React from 'react';
import { SafeAreaView, View, Text } from 'react-native';

const App = () => (
  <SafeAreaView style={{ flex: 1 }}>
    <View style={styles.content}>
      <Text>Content is safe from Notch and system bars</Text>
    </View>
  </SafeAreaView>
);

Pendekatan Edge-to-edge (Android 15+) merekomendasikan menggambar konten di bawah panel sistem, tetapi dengan mempertimbangkan jarak untuk elemen interaktif. SafeAreaView membantu menjaga keseimbangan ini: latar belakang digambar di bawah panel, sedangkan tombol dan teks — di zona aman.

Penggunaan dan alternatif SafeAreaView

SafeAreaView — cara paling sederhana untuk melindungi konten, tetapi tidak selalu fleksibel. Komponen menerapkan jarak yang sama ke semua sisi, yang tidak nyaman ketika padding berbeda diperlukan untuk tepi yang berbeda. Misalnya, jarak samping mungkin tidak diperlukan, dan jarak bawah hanya untuk tombol.

Alternatif utama: useSafeAreaInsets dari react-native-safe-area-context (solusi paling fleksibel), StatusBar.currentHeight di Android, Platform.OS dengan pemeriksaan manual model perangkat. Untuk kasus kompleks, gunakan kombinasi SafeAreaView untuk kontainer umum dan useSafeAreaInsets untuk elemen individual.

import { useSafeAreaInsets } from 'react-native-safe-area-context';

const CustomHeader = () => {
  const insets = useSafeAreaInsets();

  return (
    <View style={{ paddingTop: insets.top }}>
      <Header />
    </View>
  );
};

Pustaka react-native-safe-area-context — standar de facto untuk bekerja dengan Safe Area di React Native. Didukung oleh Expo, React Navigation dan sebagian besar kit UI. Menyediakan hook dan komponen Consumer untuk pendekatan fungsional dan kelas.

react-native-safe-area-context untuk kontrol penuh

react-native-safe-area-context — pustaka yang menyediakan API lebih fleksibel daripada SafeAreaView bawaan. Keuntungan utama — akses ke nilai jarak individual (top, bottom, left, right) melalui hook useSafeAreaInsets, memungkinkan penerapan selektif.

Pustaka juga menyediakan SafeAreaProvider — komponen yang wajib di tingkat atas aplikasi. Ia berlangganan perubahan jarak sistem saat rotasi layar atau pembukaan keyboard. React Navigation menggunakan pustaka ini secara default.

SafeAreaView dari react-native-safe-area-context berbeda dari yang bawaan: bekerja pada lebih banyak perangkat dan mendukung animasi perubahan jarak. Untuk proyek baru, disarankan menginstal pustaka ini sebagai dependensi dan menggunakan SafeAreaView miliknya daripada yang bawaan.

Kesalahan umum saat bekerja dengan SafeAreaView

SafeAreaView sering digunakan secara tidak benar. Kesalahan pertama — membungkus setiap komponen dalam SafeAreaView, yang menciptakan jarak ganda. Aturan: satu SafeAreaView per View akar layar. Komponen bersarang mewarisi jarak melalui tata letak Flex.

Kesalahan kedua — mengabaikan Android. Di Android SafeAreaView menggunakan WindowInsets, yang dapat berbeda pada versi OS yang berbeda. Di Android 15+ panel sistem bisa transparan dan jarak berubah. Selalu uji SafeAreaView pada perangkat nyata, bukan hanya di emulator.

Kesalahan ketiga — padding yang dikodekan keras. Jangan pernah menggunakan Platform.OS === 'ios' ? 44 : 24 — nilai jarak berubah antar model dan versi OS. Selalu gunakan API sistem: safeAreaInsets atau useSafeAreaInsets. Dynamic Island di iPhone 15 Pro memiliki jarak berbeda dari Notch di iPhone X.