@madeja-studio/telar/lib/module/component/Overlay/Overlay.js

UI component library by Madeja Studio

"use strict";

import { Platform, View } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { FullWindowOverlay } from 'react-native-screens';
import tw from "../../tailwind/index.js";
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * This container component just bypasses the warning implemented inside FullWindowOverlay
 * in platforms other than iOS.
 */
const Container = ({
  children
}) => {
  if (Platform.OS === 'ios') {
    return /*#__PURE__*/_jsx(FullWindowOverlay, {
      children: children
    });
  } else {
    return /*#__PURE__*/_jsx(View, {
      style: tw`absolute fill`,
      children: children
    });
  }
};

/**
 * Overlay component that provides a container for rendering views over other components,
 * including when used in conjunction with native iOS modals. It leverages
 * `FullWindowOverlay` from `react-native-screens` to ensure the overlay content
 * is displayed on top of everything else and is fully interactive.
 *
 * This component is particularly useful when you need to display interactive UI
 * elements, such as dialogs, over a native modal. By wrapping the content with
 * `GestureHandlerRootView`, it ensures that all gesture-based interactions are handled
 * correctly.
 *
 * @component
 * @example
 * ```jsx
 * <Overlay>
 *   <YourComponent />
 * </Overlay>
 * ```
 *
 * @param children - React Native children
 * @param props - The props for the Overlay component.
 * @returns The rendered overlay component.
 *
 * @see {@link https://github.com/software-mansion/react-native-screens/issues/1666#issuecomment-1873598993}
 * for more information on adding gesture recognition inside `FullWindowOverlay`.
 *
 * @see {@link https://github.com/gorhom/react-native-portal/issues/44} for discussion
 * on displaying content on top of a native iOS modal.
 */
export const Overlay = ({
  children,
  ...props
}) => {
  return /*#__PURE__*/_jsx(Container, {
    children: /*#__PURE__*/_jsx(GestureHandlerRootView, {
      pointerEvents: "box-none",
      style: tw`flex-1`,
      ...props,
      children: children
    })
  });
};
//# sourceMappingURL=Overlay.js.map