How to Use Modal in React Native: Simple Guide

In React Native, use the Modal component to display content above an existing screen. Wrap your content inside Modal and control its visibility with a boolean visible prop.

Syntax

The Modal component requires a visible prop to show or hide the modal. Inside it, place the content you want to display. You can also use props like animationType to control how the modal appears.

• visible: Boolean to show or hide the modal.
• animationType: Controls animation ('none', 'slide', 'fade').
• onRequestClose: Function called when the user tries to close the modal (important for Android).

react_native

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

export default function MyModal() {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View>
      <Modal
        visible={modalVisible}
        animationType="slide"
        onRequestClose={() => setModalVisible(false)}
      >
        <View>
          <Text>This is a modal!</Text>
          <Button title="Close" onPress={() => setModalVisible(false)} />
        </View>
      </Modal>
      <Button title="Show Modal" onPress={() => setModalVisible(true)} />
    </View>
  );
}

Output

A button labeled 'Show Modal' is visible. When tapped, a sliding modal appears with text 'This is a modal!' and a 'Close' button. Tapping 'Close' hides the modal.

Example

This example shows a button that opens a modal with a message and a close button. It demonstrates toggling the modal's visibility using state.

react_native

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

export default function App() {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={styles.container}>
      <Button title="Open Modal" onPress={() => setModalVisible(true)} />
      <Modal
        visible={modalVisible}
        animationType="fade"
        transparent={true}
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.modalBackground}>
          <View style={styles.modalContent}>
            <Text style={styles.modalText}>Hello from Modal!</Text>
            <Button title="Close" onPress={() => setModalVisible(false)} />
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  modalBackground: { flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center' },
  modalContent: { backgroundColor: 'white', padding: 20, borderRadius: 10, alignItems: 'center' },
  modalText: { marginBottom: 10, fontSize: 18 }
});

Output

The app shows a centered 'Open Modal' button. Pressing it fades in a semi-transparent dark background with a white box containing 'Hello from Modal!' and a 'Close' button. Pressing 'Close' hides the modal.

Common Pitfalls

Common mistakes include forgetting to control the visible prop, which means the modal never shows or hides. Another issue is not handling onRequestClose on Android, which can cause the back button to not close the modal. Also, placing modal content outside the Modal component will not display it as a modal.

react_native

/* Wrong: Modal visible prop not controlled */
<Modal>
  <Text>Modal content</Text>
</Modal>

/* Right: Control visible with state */
const [show, setShow] = useState(false);
<Modal visible={show} onRequestClose={() => setShow(false)}>
  <Text>Modal content</Text>
</Modal>

Quick Reference

Prop	Description	Values/Type
visible	Controls modal visibility	Boolean (true/false)
animationType	Animation style when showing modal	'none', 'slide', 'fade'
transparent	Makes modal background transparent	Boolean
onRequestClose	Callback when modal is requested to close (Android back button)	Function
presentationStyle	Style of modal presentation	'fullScreen', 'pageSheet', 'formSheet', 'overFullScreen'

Key Takeaways

Use the visible prop to show or hide the Modal component.

Wrap all modal content inside the Modal component to display it properly.

Always handle onRequestClose on Android to allow closing the modal with the back button.

Use animationType to improve user experience with smooth modal transitions.

Set transparent to true for overlay effects with custom backgrounds.