`Modal` built-in vs portal-based custom modal — chọn cái nào?

Built-in <Modal>: render qua native modal API (UIViewController iOS, Dialog Android).

• Ưu điểm: tự xử lý back button Android, status bar, true full-screen overlay vượt qua mọi layer.
• Nhược: animation hạn chế (slide, fade, none), khó style header/backdrop, prop presentationStyle chỉ iOS.

<Modal visible={open} animationType="slide" onRequestClose={() => setOpen(false)}>
  <SafeAreaView style={{ flex: 1 }}>{...}</SafeAreaView>
</Modal>

Custom modal qua portal-like pattern: render <View style={StyleSheet.absoluteFill}> ở root layout, animate qua Reanimated. Lib phổ biến: react-native-modal, @gorhom/bottom-sheet. Ưu: animation tự do, gesture-driven (kéo xuống dismiss), backdrop blur, snap point. Nhược: phải manage stacking thủ công, overlay với native UI (vd date picker) có thể bị che.

Quy tắc thực tế:
- Confirm dialog đơn giản: built-in Modal.
- Bottom sheet: @gorhom/bottom-sheet.
- Toast/snackbar: lib khác (react-native-toast-message).
- Full-screen overlay với navigation gesture: react-navigation presentation: 'modal' thay vì Modal component.

Built-in <Modal> renders via the native modal API (UIViewController on iOS, Dialog on Android).

• Pros: handles Android back button, status bar, true full-screen overlay above every layer.
• Cons: limited animations (slide, fade, none), hard to style header/backdrop, presentationStyle is iOS-only.

<Modal visible={open} animationType="slide" onRequestClose={() => setOpen(false)}>
  <SafeAreaView style={{ flex: 1 }}>{...}</SafeAreaView>
</Modal>

Custom modal via portal-like pattern: render <View style={StyleSheet.absoluteFill}> at the root layout, animate through Reanimated. Popular libs: react-native-modal, @gorhom/bottom-sheet. Pros: free-form animation, gesture-driven (drag to dismiss), backdrop blur, snap points. Cons: you manage stacking manually, and overlays can sit below native UI (e.g. native date picker).

Practical rule:
- Simple confirm dialog → built-in Modal.
- Bottom sheet → @gorhom/bottom-sheet.
- Toast/snackbar → another library (react-native-toast-message).
- Full-screen overlay with navigation gestures → react-navigation presentation: 'modal' instead of <Modal>.