RN core có <SafeAreaView>, hoạt động trên iOS only (đặt padding theo notch/home indicator). Trên Android render như <View> thường — không có effect. Bị deprecate-ish và không xử lý đúng khi rotate hay multi-window.
react-native-safe-area-context (lib mặc định trong Expo) cung cấp:
- Hoạt động cả iOS và Android (Android có status bar inset, gesture nav inset từ Android 10+).
- useSafeAreaInsets() hook trả { top, right, bottom, left } numeric — dễ tùy biến hơn component bao toàn bộ.
- SafeAreaProvider ở root để inset context lan xuống mọi screen.
- Update đúng khi rotate, split-screen, foldable.
Pattern phổ biến:
const insets = useSafeAreaInsets()
<View style={{ paddingTop: insets.top, paddingBottom: insets.bottom }} />Dùng <SafeAreaView edges={['top']}> từ lib này khi muốn chỉ thoát notch trên (vd screen có tab bar bottom riêng).