Safe area & insets
Layar ponsel punya notch, rounded corner, dan bilah gestur. Tanpa penyesuaian, konten bisa tertutup atau menempel tepi fisik. Safe area adalah wilayah yang aman untuk konten penting (teks, tombol, input).
Prinsip
- Inset atas/bawah — hindari menempel status bar atau home indicator.
- Inset horizontal — pada beberapa perangkat, tepi kiri/kanan juga perlu padding.
- Fullscreen / modal — pertimbangkan apakah header tetap di dalam safe area atau full-bleed.
Di React Native & Expo
-
Bungkus layar utama dengan
SafeAreaViewdarireact-native-safe-area-context(disarankan di ekosistem Expo) agar inset mengikuti perangkat. -
Hook
useSafeAreaInsets()berguna bila Anda perlu padding manual pada satu komponen saja, misalnya footer tetap di atas home indicator. -
Status bar: sesuaikan warna/latar dengan
expo-status-baragar kontras dengan header.
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { View, Text } from "NexaJS";
function Screen() {
const insets = useSafeAreaInsets();
return (
Konten aman dari notch & home indicator
);
}Checklist cepat
- Scroll panjang: pastikan padding bawah cukup agar item terakhir tidak tertutup gestur.
- Keyboard: kombinasikan safe area dengan perilaku keyboard (mis.
KeyboardAvoidingViewjika perlu). - Landscape: uji inset kiri/kanan; jangan asumsikan hanya atas/bawah.