"use strict";

/** @format */

import React from 'react';
import { View, Modal, StyleSheet, Text } from 'react-native';
import { jsx as _jsx } from "react/jsx-runtime";
export const Overlay = ({
  children,
  visible,
  style
}) => /*#__PURE__*/_jsx(Modal, {
  transparent: true,
  animationType: "fade",
  visible: visible,
  onRequestClose: () => {
    // Implement logic to close the modal if needed
  },
  children: /*#__PURE__*/_jsx(View, {
    style: [styles.modal, style],
    children: children
  })
});
export const StyledModal = ({
  children,
  style
}) => {
  return /*#__PURE__*/_jsx(Text, {
    style: [style],
    children: children
  });
};
const styles = StyleSheet.create({
  overlay: {
    backgroundColor: 'rgba(0, 0, 0, 0.75)',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 999,
    // Use zIndex for stacking, although this won't work in all cases, Android uses elevation.
    elevation: 999 // Added to give the overlay layer a higher stacking context on Android.
  },
  modal: {
    flex: 1,
    width: '100%',
    height: '100%',
    backgroundColor: 'white',
    padding: 0,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  }
});
//# sourceMappingURL=MediaModal.js.map