What is a Modal in React Native, and how should pop-up windows be handled?

Short answer

The Modal component displays content in a window floating above the current app screen. It uses native system modules and supports appearance and fade animations and handling the Android back button.

Explanation

Modal provides properties such as animationType ("slide" or "fade"), transparent for a semi-transparent background, and the required onRequestClose property to handle the physical back button on Android phones. Modern iOS devices use Presentation Controllers to display page-sheet style cards.

Code example

import { Modal, View, Text, Pressable, StyleSheet } from 'react-native';

function ConfirmModal({ visible, onClose }: { visible: boolean; onClose: () => void }) {
  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="fade"
      onRequestClose={onClose} // Required on Android devices
    >
      <View style={styles.backdrop}>
        <View style={styles.modalCard}>
          <Text>Are you sure?</Text>
          <Pressable onPress={onClose}><Text>Cancel</Text></Pressable>
        </View>
      </View>
    </Modal>
  );
}

Common mistakes

• Forgetting to provide onRequestClose, leaving the Android back button completely unresponsive while the Modal is open.

Follow-up questions

• What is SafeAreaView, how has it evolved in React Native, and how does it integrate with react-native-safe-area-context?

Sources

• React Native docs — Modal