"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledModal = exports.Overlay = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** @format */

const Overlay = ({
  children,
  visible,
  style
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
  transparent: true,
  animationType: "fade",
  visible: visible,
  onRequestClose: () => {
    // Implement logic to close the modal if needed
  },
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: [styles.modal, style],
    children: children
  })
});
exports.Overlay = Overlay;
const StyledModal = ({
  children,
  style
}) => {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
    style: [style],
    children: children
  });
};
exports.StyledModal = StyledModal;
const styles = _reactNative.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