rnm-4.tsx

import { useCallback, useState } from "react";
import { StyleSheet, Text, View, ScrollView } from "react-native";
import Modal from "react-native-modal";

export default function App() {
  const [visible, setVisible] = useState(false);
  const showModal = useCallback(() => setVisible(true), []);
  const hideModal = useCallback(() => setVisible(false), []);

  return (
    <View style={styles.container}>
      <Text onPress={showModal}>Open the modal</Text>
      <Modal
        style={styles.modal}
        isVisible={visible}
        onBackdropPress={hideModal}
        onBackButtonPress={hideModal}
        animationIn={"slideInUp"}
        animationInTiming={400}
        animationOut={"slideOutDown"}
        animationOutTiming={200}
        swipeDirection={["down"]}
        onSwipeComplete={hideModal}
      >
        <View style={styles.content}>
          <ScrollView>
            <Text style={styles.text}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              eleifend lectus vel tellus commodo dapibus. Aliquam non
              pellentesque massa. Donec massa eros, porta vitae nulla quis,
              feugiat tempus felis. In justo dui, eleifend ac metus et, pulvinar
              accumsan diam. Phasellus tempus leo nec consectetur consequat. Nam
              quis ante blandit, porttitor ex eget, dignissim lectus. Quisque
              quis iaculis tellus. Donec in lectus faucibus mauris gravida
              consequat. Vestibulum eget interdum ante. Duis rhoncus finibus
              sapien eget euismod. Etiam at vehicula ex. Vestibulum eleifend
              ante sed consequat sagittis. Vivamus vel nibh id risus volutpat
              blandit. Vestibulum sollicitudin tellus vel nibh sagittis congue.
              Nam auctor in sapien in auctor. Praesent eget tellus lobortis,
              dictum justo non, gravida nibh. Duis nibh nisl, malesuada nec
              iaculis nec, pharetra et lorem. Etiam bibendum sit amet metus a
              dapibus. Sed tincidunt tincidunt mi dictum pharetra. Aliquam
              feugiat feugiat urna, ac pellentesque nulla semper tincidunt. Nunc
              fermentum neque in nunc dignissim scelerisque. Sed eu lobortis
              ante. Integer sagittis, ex sed mattis rutrum, leo felis faucibus
              urna, et tempor turpis risus in elit. Sed semper enim enim, in
              pellentesque est vehicula vitae. Praesent at laoreet lorem. Nullam
              feugiat sapien vitae orci aliquet, at faucibus purus pretium.
              Praesent dapibus nisi at nisl fringilla, at molestie nulla
              fringilla. Morbi vel dapibus quam.
            </Text>
          </ScrollView>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  modal: {
    width: "100%",
    height: "100%",
    margin: 0,
    padding: 0,
  },
  content: {
    marginTop: 200,
    height: "100%",

    paddingHorizontal: 20,
    paddingTop: 20,

    backgroundColor: "white",
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
  },
  text: {
    fontSize: 20,
  },
});