Trung BìnhReact Native iconReact Native

`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.
tsx
<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.

Xem toàn bộ React Native cùng filter theo level & chủ đề con.

Mở danh sách React Native