`SafeAreaView` built-in vs `react-native-safe-area-context` — vì sao team thường thay built-in?

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).

RN core ships <SafeAreaView> that only works on iOS (padding around notch/home indicator). On Android it is a plain <View>. It is also flaky on rotation and multi-window.

react-native-safe-area-context (default in Expo) provides:
- Works on both iOS and Android (Android status-bar inset and gesture-nav inset from Android 10+).
- useSafeAreaInsets() hook returns { top, right, bottom, left } numbers — far more flexible than a wrapper component.
- SafeAreaProvider at the root so insets cascade to every screen.
- Updates correctly on rotation, split-screen, foldables.

Common pattern:

const insets = useSafeAreaInsets()
<View style={{ paddingTop: insets.top, paddingBottom: insets.bottom }} />

Use <SafeAreaView edges={['top']}> from this library when you only want to clear the notch (e.g. a screen with its own bottom tab bar).