? React Native Modal

? Quick Overview

Modal is a core React Native component used to display content above the current screen. It is commonly used for dialogs, alerts, forms, confirmations, and popups.

? Key Concepts

• Modal appears on top of the current screen
• Visibility is controlled using state
• Supports animation types like slide and fade
• Can be transparent or full-screen

? Syntax / Theory

The Modal component uses the visible prop to control whether it is shown or hidden. It usually works together with useState.

// Basic Modal syntax
<Modal
  visible={true}
  animationType="slide"
  transparent={true}
>
</Modal>

? Code Example(s)

// Modal example using useState
import React, { useState } from "react";
import { View, Text, Modal, Button } from "react-native";

export default function App() {
const [open, setOpen] = useState(false);

return (
<View>
<Button title="Open Modal" onPress={() => setOpen(true)} />

<Modal visible={open} animationType="slide">
<View>
<Text>This is a Modal</Text>
<Button title="Close" onPress={() => setOpen(false)} />
</View>
</Modal>
</View>
);
}

? Live Output / Explanation

? Interactive Example / Visualization

Interact with the phone simulator below to understand how the Modal component behaves in a real React Native environment.

? Use Cases

• Login or signup popups
• Confirmation dialogs
• Bottom sheets
• Image preview overlays