Implementation of Modal Presentation for iOS in React Native

modal-presentation-react-native.js

import React, { useState } from "react";
import {
  Alert,
  Modal,
  Text,
  Pressable,
  View,
  SafeAreaView,
} from "react-native";

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <SafeAreaView>
      <View className="h-full flex items-center justify-center">
        <Modal
          animationType="slide"
          visible={modalVisible}
          presentationStyle="pageSheet"
          onRequestClose={() => {
            Alert.alert("Modal has been closed.");
            setModalVisible(!modalVisible);
          }}
        >
          <View>
            <View className="bg-white h-full flex items-center justify-center">
              <Text className="text-2xl my-4">Hello World!</Text>
              <Pressable onPress={() => setModalVisible(!modalVisible)}>
                <Text className="font-bold">Hide Modal</Text>
              </Pressable>
            </View>
          </View>
        </Modal>
        <Pressable onPress={() => setModalVisible(true)}>
          <Text className="font-bold">Show Modal</Text>
        </Pressable>
      </View>
    </SafeAreaView>
  );
};

export default App;

Demo

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-07-08.at.13.04.54.mp4