rnm-2.tsx

import { useCallback, useState } from "react";
import { StyleSheet, Text, View } 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
        isVisible={visible}
        onBackdropPress={hideModal}
        onBackButtonPress={hideModal}
        animationIn={"slideInLeft"}
        animationInTiming={400}
        animationOut={"slideOutLeft"}
        animationOutTiming={200}
      >
        <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",
  },
  content: {
    backgroundColor: "white",
    padding: 20,
  },
});