Expo Modal

Modal.tsx

import {
  StyleSheet,
  View,
  Modal,
  TouchableOpacity,
  TouchableWithoutFeedback,
} from "react-native";
import { memo } from "react";
import { ms } from "react-native-size-matters";

import type { ModalProps } from "react-native";
import type { ReactNode } from "react";

interface CustomModalProps
  extends Pick<ModalProps, "visible" | "onDismiss"> {
  /** React children */
  children: ReactNode;
}

const CustomModal = ({
  visible = false,
  onDismiss,
  children,
}: CustomModalProps) => (
  <Modal visible={visible} animationType="fade" transparent={true}>
    <TouchableOpacity onPress={onDismiss} style={styles.centeredView}>
      <TouchableWithoutFeedback>
        <View style={styles.modalView}>{children}</View>
      </TouchableWithoutFeedback>
    </TouchableOpacity>
  </Modal>
);

export default memo(CustomModal);

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#38383850",
  },
  modalView: {
    width: "85%",
    alignItems: "center",
    backgroundColor: "#fff",
    borderRadius: ms(20),
    padding: ms(20),
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
});