@lodev09/react-native-true-sheet 4.0.0-beta.6 → 4.0.0-beta.7

package/src/TrueSheetOverlay.web.tsx

@@ -0,0 +1,33 @@
+/// <reference lib="dom" />
+import { useLayoutEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { StyleSheet, View, type ViewProps } from 'react-native';
+
+/**
+ * Renders its children in a layer above every presented sheet — for
+ * toasts, dialogs, and other content a sheet must not cover.
+ * Fills the window; touches that miss its children pass through to the views beneath.
+ */
+export const TrueSheetOverlay = ({ style, ...rest }: ViewProps) => {
+  // Portal target appended to the body so it stacks above the sheets' portal
+  const [container] = useState(() =>
+    typeof document !== 'undefined' ? document.createElement('div') : null
+  );
+
+  useLayoutEffect(() => {
+    if (!container) return;
+
+    container.style.cssText = 'position:fixed;inset:0;pointer-events:none';
+    document.body.appendChild(container);
+    return () => {
+      container.remove();
+    };
+  }, [container]);
+
+  if (!container) return null;
+
+  return createPortal(
+    <View pointerEvents="box-none" {...rest} style={[StyleSheet.absoluteFill, style]} />,
+    container
+  );
+};

package/src/fabric/TrueSheetOverlayViewNativeComponent.ts

@@ -0,0 +1,12 @@
+import type { ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+export interface NativeProps extends ViewProps {
+  // No props needed - sized to the window from native
+}
+
+// interfaceOnly: shadow node/state/descriptor are custom (common/cpp) so the
+// overlay is sized to the window
+export default codegenNativeComponent<NativeProps>('TrueSheetOverlayView', {
+  interfaceOnly: true,
+});

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './TrueSheet';
 export * from './TrueSheet.types';
 export { TrueSheetPeek } from './TrueSheetPeek';
+export { TrueSheetOverlay } from './TrueSheetOverlay';
 export { TrueSheetProvider, useTrueSheet } from './TrueSheetProvider';

package/src/mocks/index.ts

@@ -66,6 +66,13 @@ export function TrueSheetPeek({ children, ...rest }: ViewProps) {
   return React.createElement(View, rest, children);
 }
 
+/**
+ * Mock TrueSheetOverlay component for testing.
+ */
+export function TrueSheetOverlay({ children, ...rest }: ViewProps) {
+  return React.createElement(View, rest, children);
+}
+
 /**
  * Mock TrueSheetProvider for testing.
  */