Modal

Learn custom dialogs with the Modal component.

The Modal component

A Modal is an overlay component that covers the entire screen. It is more flexible than Alert: you can put any components inside it; custom buttons, forms, images. Modal is part of the react-native package.

Whether the Modal is shown depends on the visible prop. When visible is true the Modal is shown, when false it is hidden. It is usually controlled with a useState variable.

Exercise Your turn: show content with Modal

Add a Modal. Set its visible prop to {visible}. Inside the Modal place a <Text> and a <Button>; when pressed call setVisible(false).

Show example solution

import { useState } from 'react';
import { Modal, View, Text, Button } from 'react-native';

function Screen() {
  const [visible, setVisible] = useState(false);
  return (
    <View>
      <Button title="Open" onPress={() => setVisible(true)} />
      <Modal visible={visible}>
        <View>
          <Text>Content</Text>
          <Button title="Close" onPress={() => setVisible(false)} />
        </View>
      </Modal>
    </View>
  );
}

Modal content

You can put any React Native component inside the Modal component: View, Text, TextInput, Button and more. The content stays on screen as long as the Modal is visible. When the Modal closes the content is hidden too.

You usually wrap the Modal content in a View and style it. This lets you control the content position and background. By default the Modal covers the entire screen; you can customize it with transparent and styles.

Test yourself

Which prop controls the visibility of a Modal?
```
<Modal visible={true}>...</Modal>
```
- open
- visible
- show
- display
Show answer

visible — The visible prop opens and closes the Modal.

Fill in the blank: Modal visible prop

<Modal ____={visible}>

Show answer

<Modal visible={visible}>

Match: Modal prop and role

visible

visibility control
animationType

open animation
transparent

background transparency

Next lesson: Modal animation

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies