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

Native implementation with the ability to display multiple Modals

"use strict";

import { Platform, Pressable, StatusBar, StyleSheet, View } from 'react-native';
import { LayoutInspectorProvider } from './LayoutInspectorProvider';
import { ScrollContextResetter } from './ScrollContextResetter';
import { GestureHandlerRootView } from './integrations/GestureHandlerRootView';
import RNTModalView from './newarch/NativeRNTModalView';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export let 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 = Platform.OS === 'ios';
export const ModalView = ({
  children,
  renderBackdrop,
  onRequestDismiss,
  contentContainerStyle,
  statusBar,
  showBackdrop = true,
  BackdropPressableComponent = Pressable,
  backdropColor = defaultBackdropColor,
  disableDefaultStatusBarIOS = false,
  animationType = 'none',
  statusBarTranslucent
}) => {
  return /*#__PURE__*/_jsx(RNTModalView, {
    style: styles.container,
    statusBarTranslucent: statusBar?.translucent ?? statusBarTranslucent,
    statusBarIconsStyle: statusBar?.barStyle ?? undefined,
    onPressBackAndroid: () => onRequestDismiss?.(DismissalSource.BackButton),
    animationType: animationType,
    children: /*#__PURE__*/_jsx(View, {
      collapsable: false,
      style: styles.flex,
      children: /*#__PURE__*/_jsxs(LayoutInspectorProvider, {
        children: [isIOS && statusBar && !disableDefaultStatusBarIOS ? /*#__PURE__*/_jsx(StatusBar, {
          ...statusBar
        }) : null, /*#__PURE__*/_jsxs(GestureHandlerRootView, {
          style: styles.flex,
          children: [showBackdrop && /*#__PURE__*/_jsx(View, {
            style: [styles.backdropContainer],
            children: /*#__PURE__*/_jsx(BackdropPressableComponent, {
              accessibilityLabel: backdropAccessibilityLabel,
              accessibilityHint: backdropAccessibilityHint,
              style: styles.flex,
              onPress: () => onRequestDismiss?.(DismissalSource.Backdrop),
              children: renderBackdrop ? renderBackdrop() : /*#__PURE__*/_jsx(View, {
                style: [styles.flex, {
                  backgroundColor: backdropColor
                }]
              })
            })
          }), /*#__PURE__*/_jsx(ScrollContextResetter, {
            children: /*#__PURE__*/_jsx(View, {
              pointerEvents: "box-none",
              style: [styles.content, contentContainerStyle],
              children: children
            })
          })]
        })]
      })
    })
  });
};
const styles = 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