What is the Modal component in React Native?

The Modal component creates a full-screen overlay that renders on top of other content. Used for dialogs, alerts, pickers, full-screen images, and custom pop-up UI. Basic Modal: import { Modal, View, Text, TouchableOpacity } from "react-native"; function App() { const [visible, setVisible] = useState(false); return ( <> <TouchableOpacity onPress={() => setVisible(true)}> <Text>Open Modal</Text> </TouchableOpacity> <Modal visible={visible} transparent={true} animationType="fade" onRequestClose={() => setVisible(false)} // Android back button > <View style={styles.overlay}> <View style={styles.dialog}> <Text>Modal Content</Text> <TouchableOpacity onPress={() => setVisible(false)}> <Text>Close</Text> </TouchableOpacity> </View> </View> </Modal> </> ); }. Key props: visible — show/hide; transparent — if true, background remains visible (modal renders on transparent overlay). If false, modal covers everything with a white background; animationType: "none" | "slide" | "fade" — entrance animation; onRequestClose — required on Android for hardware back button; onShow — fires when modal shown; statusBarTranslucent (Android) — modal overlaps status bar. Semi-transparent overlay: const styles = StyleSheet.create({ overlay: { flex: 1, backgroundColor: "rgba(0,0,0,0.5)", justifyContent: "center", alignItems: "center", }, dialog: { backgroundColor: "white", borderRadius: 12, padding: 24, width: "80%" } });. For more complex modals, consider react-native-modal library with swipe-to-close, animated backdrop, etc.