react-native-multiple-modals/lib/commonjs/ModalView.js

Native implementation with the ability to display multiple Modals

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ModalView = exports.DismissalSource = void 0;
var _reactNative = require("react-native");
var _LayoutInspectorProvider = require("./LayoutInspectorProvider");
var _ScrollContextResetter = require("./ScrollContextResetter");
var _GestureHandlerRootView = require("./integrations/GestureHandlerRootView");
var _NativeRNTModalView = _interopRequireDefault(require("./newarch/NativeRNTModalView"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
let DismissalSource = exports.DismissalSource = /*#__PURE__*/function (DismissalSource) {
  DismissalSource["BackButton"] = "BackButton";
  DismissalSource["Backdrop"] = "Backdrop";
  return DismissalSource;
}({});
const backdropAccessibilityLabel = 'Backdrop';
const backdropAccessibilityHint = 'Double-tap to close the modal';
const defaultBackdropColor = 'rgba(0, 0, 0, 0.3)';
const isIOS = _reactNative.Platform.OS === 'ios';
const ModalView = ({
  children,
  renderBackdrop,
  onRequestDismiss,
  contentContainerStyle,
  statusBar,
  showBackdrop = true,
  BackdropPressableComponent = _reactNative.Pressable,
  backdropColor = defaultBackdropColor,
  disableDefaultStatusBarIOS = false,
  animationType = 'none',
  statusBarTranslucent
}) => {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NativeRNTModalView.default, {
    style: styles.container,
    statusBarTranslucent: statusBar?.translucent ?? statusBarTranslucent,
    statusBarIconsStyle: statusBar?.barStyle ?? undefined,
    onPressBackAndroid: () => onRequestDismiss?.(DismissalSource.BackButton),
    animationType: animationType,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      collapsable: false,
      style: styles.flex,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_LayoutInspectorProvider.LayoutInspectorProvider, {
        children: [isIOS && statusBar && !disableDefaultStatusBarIOS ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.StatusBar, {
          ...statusBar
        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GestureHandlerRootView.GestureHandlerRootView, {
          style: styles.flex,
          children: [showBackdrop && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
            style: [styles.backdropContainer],
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BackdropPressableComponent, {
              accessibilityLabel: backdropAccessibilityLabel,
              accessibilityHint: backdropAccessibilityHint,
              style: styles.flex,
              onPress: () => onRequestDismiss?.(DismissalSource.Backdrop),
              children: renderBackdrop ? renderBackdrop() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                style: [styles.flex, {
                  backgroundColor: backdropColor
                }]
              })
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollContextResetter.ScrollContextResetter, {
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
              pointerEvents: "box-none",
              style: [styles.content, contentContainerStyle],
              children: children
            })
          })]
        })]
      })
    })
  });
};
exports.ModalView = ModalView;
const styles = _reactNative.StyleSheet.create({
  container: {
    position: 'absolute'
  },
  flex: {
    flex: 1
  },
  content: {
    zIndex: 1,
    flex: 1
  },
  backdropContainer: {
    position: 'absolute',
    zIndex: 0,
    top: 0,
    bottom: 0,
    left: 0,
    right: 0
  }
});
//# sourceMappingURL=ModalView.js.map