rnm-3.tsx

import { useCallback, useState } from "react";
import { StyleSheet, Text, View, Modal as RNM } 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}>
          <Text>This is a modal !</Text>
        </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,
  },
});