SafeAreaView

SafeAreaView adalah komponen React Native yang menambahkan padding otomatis berdasarkan safe area insets device — area layar yang aman untuk menampilkan konten, tidak tertutup oleh notch (iPhone X+), Dynamic Island (iPhone 14 Pro+), status bar, atau home indicator. Menggunakan react-native-safe-area-context di dalamnya. useSafeAreaInsets() hook memberikan akses ke nilai insets (top, bottom, left, right) untuk styling kustom. Tanpa SafeAreaView, header aplikasi bisa tertutup notch atau tombol di bawah layar tidak bisa ditekan karena ketutup home indicator. SafeAreaView sebaiknya digunakan sebagai root wrapper semua halaman.

Contoh Kode

import { SafeAreaView } from "react-native-safe-area-context";

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }} edges={["top"]}>
      <Header />
    </SafeAreaView>
  );
}