Modal and bottom sheet in React Native

Introduction

Modals and bottom sheets help show extra information or options without leaving the current screen. They keep the user focused and make the app easier to use.

To ask the user to confirm an action, like deleting a photo.

To show extra details or settings without navigating away.

To present a list of choices or actions related to the current screen.

To display a temporary message or form that needs user input.

Syntax

React Native

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

<Modal
  visible={modalVisible}
  animationType="slide"
  transparent={true}
  onRequestClose={() => setModalVisible(false)}
>
  <View style={styles.centeredView}>
    <View style={styles.modalView}>
      <Text>Modal Content</Text>
      <Button title="Close" onPress={() => setModalVisible(false)} />
    </View>
  </View>
</Modal>

Modal is a component that appears over the current screen.

Use visible prop to show or hide the modal.

Examples

A simple modal that fades in and shows text.

React Native

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

<Modal visible={true} animationType="fade">
  <View>
    <Text>Hello Modal</Text>
  </View>
</Modal>

This modal acts like a bottom sheet sliding up from the bottom.

React Native

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

<Modal visible={modalVisible} animationType="slide" transparent={true}>
  <View style={{flex:1, justifyContent:'flex-end'}}>
    <View style={{backgroundColor:'white', padding:20, borderTopLeftRadius:20, borderTopRightRadius:20}}>
      <Text>Bottom Sheet Content</Text>
      <Button title="Close" onPress={() => setModalVisible(false)} />
    </View>
  </View>
</Modal>

Sample App

This app shows a button. When pressed, a modal slides up with a message and a close button. The background dims to focus on the modal.

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="Show Modal" onPress={() => setModalVisible(true)} />

      <Modal
        visible={modalVisible}
        animationType="slide"
        transparent={true}
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <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' },
  centeredView: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' },
  modalView: { backgroundColor: 'white', padding: 20, borderRadius: 10, alignItems: 'center' },
  modalText: { marginBottom: 15, fontSize: 18 }
});

Important Notes

Always provide a way to close the modal, like a button or tapping outside if allowed.

Use transparent prop to make the background see-through for bottom sheets.

Modals block interaction with the rest of the app until closed.

Summary

Modals show content over the current screen to keep user focus.

Bottom sheets are modals that slide up from the bottom for actions or info.

Use visible prop to control showing or hiding modals.