What is the Modal component in React Native?
Why Interviewers Ask This
This is a classic screening question for React Native roles. Hiring managers ask it early in interviews to gauge your baseline understanding and determine if you can communicate technical concepts clearly.
Answer
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.
Pro Tip
If you're unsure about a detail, say so honestly and explain your reasoning. Interviewers respect candidates who can think through uncertainty rather than bluffing.