React Native Modal: Presenting Content Above Other Views

WHY IT EXISTS: Apps often need to interrupt a user's task to request input, show a critical alert, or display content without losing the context of the underlying screen. A Modal provides a standardized way to present this interrupting content in a separate layer, ensuring it gets the user's full attention.

THE MENTAL MODEL: A Modal is not just another component in your view hierarchy. Think of it as a new, temporary window that appears on top of your entire application. It lives outside the regular component tree, managed by the native OS. You control its visibility with a state variable, and you must provide a way for the user to dismiss it, or they will be stuck.

HOW IT WORKS: The Modal component is a wrapper for the content you want to display. Its visibility is controlled by the visible prop, typically linked to a boolean state variable. When visible becomes true, the modal appears, animated by the animationType prop ('slide', 'fade', or 'none'). A crucial prop is onRequestClose. This function is mandatory on Android and is triggered by the hardware back button. On iOS, it's triggered by swipe gestures on certain presentation styles. You must use this callback to set the modal's visibility state back to false.

WHEN TO USE IT: Use a Modal when you need to block interaction with the rest of the app until a task is completed. Three common scenarios are: first, showing a confirmation dialog ('Are you sure?'); second, collecting user input in a form (like a login screen that appears over content); third, displaying an image or video in a lightbox.

WHEN NOT TO USE IT: Avoid Modals for content that is part of the main navigation flow, like a settings screen or a user profile. For these, a dedicated screen in your navigation stack (e.g., using React Navigation) is more appropriate and provides better accessibility and history management. Overusing modals can create a disjointed user experience. If the user doesn't need to be interrupted, don't use a modal.

ONE CANONICAL EXAMPLE: A simple alert modal. You have a state variable, isModalVisible, initialized to false. A button's onPress handler sets isModalVisible to true. The Modal component has visible={isModalVisible} and transparent={true}. Inside the Modal, you render a View with a dark, semi-transparent background, containing a centered white box with text and a 'Close' button. The onRequestClose prop and the 'Close' button's onPress both call a function that sets isModalVisible back to false. This ensures the user can close it with the back button on Android or the explicit UI button.