@lodev09/react-native-true-sheet 4.0.0-beta.3 → 4.0.0-beta.30

package/ios/events/TrueSheetLifecycleEvents.h

@@ -33,6 +33,8 @@ NS_ASSUME_NONNULL_BEGIN
 
 + (void)emitDidDismiss:(std::shared_ptr<const facebook::react::EventEmitter>)eventEmitter;
 
++ (void)emitDismissAttempt:(std::shared_ptr<const facebook::react::EventEmitter>)eventEmitter;
+
 @end
 
 NS_ASSUME_NONNULL_END

package/ios/events/TrueSheetLifecycleEvents.mm

@@ -66,6 +66,14 @@
   emitter->onDidDismiss({});
 }
 
++ (void)emitDismissAttempt:(std::shared_ptr<const facebook::react::EventEmitter>)eventEmitter {
+  if (!eventEmitter)
+    return;
+
+  auto emitter = std::static_pointer_cast<TrueSheetViewEventEmitter const>(eventEmitter);
+  emitter->onDismissAttempt({});
+}
+
 @end
 
 #endif  // RCT_NEW_ARCH_ENABLED

package/ios/tvos/TrueSheetStubs.mm

@@ -20,6 +20,7 @@
 #import <react/renderer/components/TrueSheetSpec/ComponentDescriptors.h>
 #import <react/renderer/components/TrueSheetSpec/TrueSheetContentViewComponentDescriptor.h>
 #import <react/renderer/components/TrueSheetSpec/TrueSheetFooterViewComponentDescriptor.h>
+#import <react/renderer/components/TrueSheetSpec/TrueSheetOverlayViewComponentDescriptor.h>
 #import <react/renderer/components/TrueSheetSpec/TrueSheetViewComponentDescriptor.h>
 
 #import <TrueSheetSpec/TrueSheetSpec.h>
@@ -94,6 +95,17 @@ using namespace facebook::react;
 
 @end
 
+@interface TrueSheetOverlayView : RCTViewComponentView
+@end
+
+@implementation TrueSheetOverlayView
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<TrueSheetOverlayViewComponentDescriptor>();
+}
+
+@end
+
 #pragma mark - Module
 
 @interface TrueSheetModule : NSObject <RCTBridgeModule, NativeTrueSheetModuleSpec>

package/ios/utils/UIView+ScrollEdgeInteraction.h

@@ -17,6 +17,7 @@ NS_ASSUME_NONNULL_BEGIN
 - (void)setupEdgeInteractionWithScrollView:(nullable UIScrollView *)scrollView
                                       edge:(UIRectEdge)edge API_AVAILABLE(ios(26.0));
 - (void)cleanupEdgeInteraction API_AVAILABLE(ios(26.0));
+- (nullable UIScrollView *)edgeInteractionScrollView API_AVAILABLE(ios(26.0));
 
 @end
 

package/ios/utils/UIView+ScrollEdgeInteraction.mm

@@ -31,15 +31,37 @@ static const void *kEdgeEffectHintKey = &kEdgeEffectHintKey;
   objc_setAssociatedObject(self, kEdgeEffectHintKey, nil, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
 }
 
+- (nullable UIScrollView *)edgeInteractionScrollView API_AVAILABLE(ios(26.0)) {
+#if RNTS_IPHONE_OS_VERSION_AVAILABLE(26_0)
+  for (id<UIInteraction> interaction in self.interactions) {
+    if ([interaction isKindOfClass:[UIScrollEdgeElementContainerInteraction class]]) {
+      return ((UIScrollEdgeElementContainerInteraction *)interaction).scrollView;
+    }
+  }
+#endif
+  return nil;
+}
+
 - (void)setupEdgeInteractionWithScrollView:(nullable UIScrollView *)scrollView
                                       edge:(UIRectEdge)edge API_AVAILABLE(ios(26.0)) {
-  [self cleanupEdgeInteraction];
-
   if (!scrollView) {
+    [self cleanupEdgeInteraction];
     return;
   }
 
 #if RNTS_IPHONE_OS_VERSION_AVAILABLE(26_0)
+  // Update in place — this re-runs on every footer/header size change, and
+  // tearing the interaction down mid keyboard animation flashes the edge
+  // effect at the footer's final position.
+  for (id<UIInteraction> interaction in self.interactions) {
+    if ([interaction isKindOfClass:[UIScrollEdgeElementContainerInteraction class]]) {
+      UIScrollEdgeElementContainerInteraction *existing = (UIScrollEdgeElementContainerInteraction *)interaction;
+      existing.scrollView = scrollView;
+      existing.edge = edge;
+      return;
+    }
+  }
+
   // UIScrollEdgeElementContainerInteraction requires standard UIKit element
   // descendants (UILabel, UIControl, etc.) to trigger the edge effect.
   // RCTViewComponentView subviews are not recognized, so we add a

package/lib/module/TrueSheet.js

@@ -7,8 +7,16 @@ import TrueSheetContentViewNativeComponent from './fabric/TrueSheetContentViewNa
 import TrueSheetHeaderViewNativeComponent from './fabric/TrueSheetHeaderViewNativeComponent';
 import TrueSheetFooterViewNativeComponent from './fabric/TrueSheetFooterViewNativeComponent';
 import TrueSheetModule from "./specs/NativeTrueSheetModule.js";
-import { Platform, StyleSheet, BackHandler, findNodeHandle, processColor } from 'react-native';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrueSheetBackground } from "./TrueSheetBackground.js";
+import { normalizeDetentBackground } from "./detentBackgrounds.js";
+import { resolveScrollable } from "./scrollable.js";
+import { Platform, StyleSheet, BackHandler, RootTagContext, findNodeHandle, processColor } from 'react-native';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// RN has no public API for hosting the element inspector inside a presented view;
+// this is the internal RN's Modal uses. Dev-only so prod bundles never resolve it.
+// The template literal keeps the RN babel preset's deep-import warning off while
+// Metro still resolves the module statically.
+const AppContainer = __DEV__ ? require(`react-native/Libraries/ReactNative/AppContainer`).default : null;
 const LINKING_ERROR = `The package '@lodev09/react-native-true-sheet' doesn't seem to be linked. Make sure: \n\n` + Platform.select({
   ios: "- You have run 'pod install'\n",
   default: ''
@@ -16,12 +24,21 @@ const LINKING_ERROR = `The package '@lodev09/react-native-true-sheet' doesn't se
 if (!TrueSheetModule) {
   throw new Error(LINKING_ERROR);
 }
-// Claim touches that no descendant claimed so the responder negotiation
-// doesn't bubble up to touchables outside the sheet
-const absorbUnclaimedTouches = () => true;
-
 // Stop raw touch events from bubbling past the sheet to outside ancestors
 const stopTouchPropagation = event => event.stopPropagation();
+
+// Stop the responder negotiation at the sheet boundary without claiming the
+// responder. Views inside the sheet are asked before this one, so in-sheet
+// touchables work normally; views outside are asked after, so stopping here
+// keeps unclaimed touches from leaking to touchables behind the sheet.
+// Claiming instead (returning true) would steal the responder from a pressed
+// touchable whenever the negotiation re-runs mid-gesture — e.g. a second
+// finger, or the duplicate touch stream from a nested react-native-screens
+// screen that attaches its own touch handler inside the sheet.
+const stopResponderNegotiation = event => {
+  event.stopPropagation();
+  return false;
+};
 // Gates auto-present (initialDetentIndex) by one commit. Rendered last in the
 // sheet subtree so its mount effect runs after the content's mount effects —
 // updates they schedule (e.g. a navigation footer via setOptions) batch with
@@ -37,6 +54,7 @@ const InitialPresentGate = ({
 };
 export class TrueSheet extends PureComponent {
   displayName = 'TrueSheet';
+  static contextType = RootTagContext;
   backHandlerSubscription = null;
   isPresented = false;
   isSheetVisible = true;
@@ -47,10 +65,20 @@ export class TrueSheet extends PureComponent {
   static instances = {};
 
   /**
-   * Resolver to be called when mount event is received
+   * All mounted sheets, named or not.
+   */
+  static mountedInstances = new Set();
+
+  /**
+   * Resolver to be called when mount event is received, or with `false` when the present is cancelled
    */
   presentationResolver = null;
 
+  /**
+   * Settles once a scheduled lazy unmount has committed
+   */
+  nativeViewUnmount = null;
+
   /**
    * Tracks if a present operation is in progress
    */
@@ -60,15 +88,17 @@ export class TrueSheet extends PureComponent {
     this.nativeRef = /*#__PURE__*/createRef();
     this.validateDetents();
 
-    // Lazy load by default, except when initialDetentIndex is set (for auto-presentation)
-    const shouldRenderImmediately = props.initialDetentIndex !== undefined && props.initialDetentIndex >= 0;
+    // Lazy load by default, except when auto-presenting or when lazy is disabled
+    const shouldRenderImmediately = props.initialDetentIndex !== undefined && props.initialDetentIndex >= 0 || props.lazy === false;
     this.state = {
       shouldRenderNativeView: shouldRenderImmediately,
-      initialPresentReady: false
+      initialPresentReady: false,
+      scrollableHandle: null
     };
     this.onMount = this.onMount.bind(this);
     this.onWillDismiss = this.onWillDismiss.bind(this);
     this.onDidDismiss = this.onDidDismiss.bind(this);
+    this.onDismissAttempt = this.onDismissAttempt.bind(this);
     this.onWillPresent = this.onWillPresent.bind(this);
     this.onDidPresent = this.onDidPresent.bind(this);
     this.onDetentChange = this.onDetentChange.bind(this);
@@ -89,6 +119,32 @@ export class TrueSheet extends PureComponent {
       initialPresentReady: true
     });
   }
+
+  // Resolves after commit (didMount/didUpdate) — the scrollable mounts with the
+  // sheet content, so its ref is only populated once the native tree renders.
+  updateScrollableHandle() {
+    const {
+      scrollableRef
+    } = this.props;
+    let scrollableHandle = null;
+    if (scrollableRef?.current) {
+      try {
+        scrollableHandle = findNodeHandle(resolveScrollable(scrollableRef.current));
+      } catch (error) {
+        // findNodeHandle throws on a stale ref (e.g. a wrapper that never clears
+        // it on unmount) or a handle with no usable scroll accessor. Treat it as
+        // no scrollable instead of crashing.
+        if (__DEV__) {
+          console.warn('TrueSheet: scrollableRef could not be resolved to a native view. It may be stale or expose no scroll node.', error);
+        }
+      }
+    }
+    if (scrollableHandle !== this.state.scrollableHandle) {
+      this.setState({
+        scrollableHandle
+      });
+    }
+  }
   validateDetents() {
     const {
       detents,
@@ -203,6 +259,7 @@ export class TrueSheet extends PureComponent {
    * @returns Promise that resolves when all sheets are dismissed
    */
   static async dismissAll(animated = true) {
+    TrueSheet.mountedInstances.forEach(sheet => sheet.cancelPendingPresent());
     return TrueSheetModule?.dismissAll(animated);
   }
   registerInstance() {
@@ -232,25 +289,26 @@ export class TrueSheet extends PureComponent {
   onWillDismiss(event) {
     this.props.onWillDismiss?.(event);
   }
+  onDismissAttempt(event) {
+    this.props.onDismissAttempt?.(event);
+  }
   onDidDismiss(event) {
     this.isPresented = false;
     this.isSheetVisible = true;
     this.backHandlerSubscription?.remove();
     this.backHandlerSubscription = null;
 
-    // Clean up native view after dismiss for lazy loading.
-    // Skip unmount if a present is in progress to avoid race condition.
-    if (!this.isPresenting) {
-      this.setState({
-        shouldRenderNativeView: false
-      });
+    // Non-lazy content stays mounted; otherwise clean it up unless another presentation is active.
+    if (!this.isPresenting && this.props.lazy !== false) {
+      this.unmountNativeView();
     }
     this.props.onDidDismiss?.(event);
   }
   onMount(event) {
-    // Resolve the mount promise if waiting
-    if (this.presentationResolver) {
-      this.presentationResolver();
+    // Resolve the mount promise if waiting. While an unmount is pending, the event is from
+    // the outgoing view — present() waits for the remount instead.
+    if (this.presentationResolver && !this.nativeViewUnmount) {
+      this.presentationResolver(true);
       this.presentationResolver = null;
     }
     this.props.onMount?.(event);
@@ -291,11 +349,22 @@ export class TrueSheet extends PureComponent {
     const nodeHandle = findNodeHandle(this.nativeRef.current);
     if (nodeHandle == null || nodeHandle === -1) return false;
 
-    // When not dismissible, let back propagate (e.g. navigation goes back to the previous screen)
+    // When not dismissible, report the attempt. An attempt handler consumes the back
+    // press; otherwise let it propagate (e.g. navigation goes back to the previous screen)
     if (this.props.dismissible === false) {
-      return this.props.onBackPress?.() ?? false;
+      const {
+        onDismissAttempt,
+        onBackPress
+      } = this.props;
+      onDismissAttempt?.({
+        nativeEvent: null
+      });
+      return onBackPress?.() ?? onDismissAttempt != null;
     }
-    TrueSheetModule?.handleBackPress(nodeHandle);
+
+    // Rejects when the native view is gone but JS hasn't unmounted yet (e.g. the surface
+    // stopped while this back press was queued). Nothing is left to dismiss.
+    TrueSheetModule?.handleBackPress(nodeHandle).catch(() => {});
     return this.props.onBackPress?.() ?? true;
   }
 
@@ -309,21 +378,67 @@ export class TrueSheet extends PureComponent {
     if (index < 0 || index >= detentsLength) {
       throw new Error(`TrueSheet: present index (${index}) is out of bounds. detents array has ${detentsLength} item(s)`);
     }
+
+    // Still waiting on the lazy mount — like native, a second present is a no-op
+    if (this.presentationResolver) {
+      console.warn('TrueSheet: sheet is already presented. Use resize() to change detent.');
+      return;
+    }
     this.isPresenting = true;
 
     // Lazy load: render native view if not already rendered
-    if (!this.state.shouldRenderNativeView) {
-      await new Promise(resolve => {
+    const unmount = this.nativeViewUnmount;
+    if (unmount || !this.state.shouldRenderNativeView) {
+      const mounted = await new Promise(resolve => {
         this.presentationResolver = resolve;
-        this.setState({
-          shouldRenderNativeView: true
-        });
+        const mount = () => {
+          if (this.presentationResolver === resolve) {
+            this.setState({
+              shouldRenderNativeView: true
+            });
+          }
+        };
+
+        // An unmount from the last dismiss may not have committed yet — state still reads
+        // mounted, and presenting now would lose the sheet when it lands. Remount after it.
+        if (unmount) {
+          unmount.then(mount);
+        } else {
+          mount();
+        }
       });
+
+      // Dismissed before the native view mounted
+      if (!mounted) {
+        this.isPresenting = false;
+        return;
+      }
     }
     await TrueSheetModule?.presentByRef(this.handle, index, animated);
     this.isPresenting = false;
   }
 
+  /**
+   * Cancels a present still waiting on the lazy mount. Returns whether one was pending.
+   */
+  cancelPendingPresent() {
+    if (!this.presentationResolver) return false;
+    this.presentationResolver(false);
+    this.presentationResolver = null;
+    this.unmountNativeView();
+    return true;
+  }
+  unmountNativeView() {
+    this.nativeViewUnmount = new Promise(resolve => {
+      this.setState({
+        shouldRenderNativeView: false
+      }, () => {
+        this.nativeViewUnmount = null;
+        resolve();
+      });
+    });
+  }
+
   /**
    * Resize the sheet to a given detent index.
    * @param index - The detent index to resize to
@@ -337,6 +452,8 @@ export class TrueSheet extends PureComponent {
    * @param animated - Whether to animate the dismissal (default: true)
    */
   async dismiss(animated = true) {
+    // Dismissing before the lazy mount finishes cancels the present — nothing was presented
+    if (this.cancelPendingPresent()) return;
     return TrueSheetModule?.dismissByRef(this.handle, animated);
   }
 
@@ -349,10 +466,18 @@ export class TrueSheet extends PureComponent {
     return TrueSheetModule?.dismissStackByRef(this.handle, animated);
   }
   componentDidMount() {
+    TrueSheet.mountedInstances.add(this);
     this.registerInstance();
+    this.updateScrollableHandle();
   }
   componentDidUpdate(prevProps) {
     this.registerInstance();
+    this.updateScrollableHandle();
+    if (prevProps.lazy !== false && this.props.lazy === false && !this.state.shouldRenderNativeView) {
+      this.setState({
+        shouldRenderNativeView: true
+      });
+    }
 
     // Validate when detents prop changes
     if (prevProps.detents !== this.props.detents) {
@@ -371,31 +496,39 @@ export class TrueSheet extends PureComponent {
     }
   }
   componentWillUnmount() {
+    TrueSheet.mountedInstances.delete(this);
     this.unregisterInstance();
     this.backHandlerSubscription?.remove();
     this.backHandlerSubscription = null;
+    // Don't leave a present waiting on the lazy mount hanging
+    this.presentationResolver?.(false);
     this.presentationResolver = null;
   }
   render() {
     const {
       detents = [0.5, 1],
       backgroundColor,
+      detentBackgrounds,
+      background,
+      backgroundStyle,
       dismissible = true,
       draggable = true,
+      dismissThreshold = 'half',
       grabber = true,
       grabberOptions,
       accessibilityOptions,
       dimmed = true,
+      dimColor,
+      dimOpacity,
       initialDetentIndex = -1,
       initialDetentAnimated = true,
       dimmedDetentIndex,
       backgroundBlur,
-      blurOptions,
       cornerRadius,
       maxContentHeight,
       maxContentWidth,
-      anchor = 'center',
-      anchorOffset,
+      placement = 'automatic',
+      placementOffset,
       scrollableOptions,
       footerOptions,
       presentation = 'page',
@@ -409,6 +542,7 @@ export class TrueSheet extends PureComponent {
       insetAdjustment = 'automatic',
       ...rest
     } = this.props;
+    delete rest.lazy;
 
     // Trim to max 3 detents and clamp fractions
     const resolvedDetents = detents.slice(0, 3).map(detent => {
@@ -435,33 +569,62 @@ export class TrueSheet extends PureComponent {
         color: processColor(grabberOptions?.color)
       };
     }
+    const sheetContent = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(TrueSheetBackground, {
+        background: background,
+        backgroundStyle: backgroundStyle
+      }), header && /*#__PURE__*/_jsx(TrueSheetHeaderViewNativeComponent, {
+        style: [styles.header, headerOptions?.position === 'absolute' && styles.absoluteHeader, headerStyle],
+        children: /*#__PURE__*/isValidElement(header) ? header : /*#__PURE__*/createElement(header)
+      }), /*#__PURE__*/_jsx(TrueSheetContentViewNativeComponent, {
+        style: style,
+        children: children
+      }), footer && /*#__PURE__*/_jsx(TrueSheetFooterViewNativeComponent, {
+        autoBottomInset: insetAdjustment === 'automatic',
+        style: [styles.footer, footerOptions?.position === 'absolute' ? styles.absoluteFooter : styles.relativeFooter, footerStyle],
+        children: /*#__PURE__*/isValidElement(footer) ? footer : /*#__PURE__*/createElement(footer)
+      }), autoPresent && !this.state.initialPresentReady && /*#__PURE__*/_jsx(InitialPresentGate, {
+        onReady: this.onInitialPresentReady
+      })]
+    });
     return /*#__PURE__*/_jsx(TrueSheetViewNativeComponent, {
       ...rest,
       ref: this.nativeRef,
       style: styles.sheetView,
       detents: resolvedDetents,
       backgroundBlur: backgroundBlur,
-      blurOptions: blurOptions,
       backgroundColor: backgroundColor,
+      detentBackgrounds: detentBackgrounds && Array.from(detentBackgrounds.slice(0, 3), entry => {
+        const normalized = normalizeDetentBackground(entry);
+        return normalized ? {
+          ...normalized,
+          color: processColor(normalized.color)
+        } : {};
+      }),
       cornerRadius: cornerRadius,
       grabber: grabber,
       grabberOptions: this.resolvedGrabberOptions,
       accessibilityOptions: accessibilityOptions,
       dimmed: dimmed,
+      dimColor: dimColor,
+      dimOpacity: dimOpacity,
       dimmedDetentIndex: dimmedDetentIndex,
       initialDetentIndex: gatedInitialDetentIndex,
       initialDetentAnimated: initialDetentAnimated,
       dismissible: dismissible,
       draggable: draggable,
+      dismissThreshold: dismissThreshold,
       maxContentHeight: maxContentHeight,
       maxContentWidth: maxContentWidth,
-      anchor: anchor,
-      anchorOffset: anchorOffset,
+      placement: placement,
+      placementOffset: placementOffset,
+      scrollableHandle: this.state.scrollableHandle ?? -1,
       scrollableOptions: scrollableOptions,
       headerOptions: headerOptions,
       footerOptions: {
         footerPosition: footerOptions?.position,
-        keyboardOffset: footerOptions?.keyboardOffset
+        keyboardOffset: footerOptions?.keyboardOffset,
+        avoidKeyboard: footerOptions?.avoidKeyboard
       },
       presentation: presentation,
       insetAdjustment: insetAdjustment,
@@ -470,6 +633,7 @@ export class TrueSheet extends PureComponent {
       onDidPresent: this.onDidPresent,
       onWillDismiss: this.onWillDismiss,
       onDidDismiss: this.onDidDismiss,
+      onDismissAttempt: this.onDismissAttempt,
       onDetentChange: this.onDetentChange,
       onDragBegin: this.onDragBegin,
       onDragChange: this.onDragChange,
@@ -482,30 +646,32 @@ export class TrueSheet extends PureComponent {
       onVisibilityChange: this.onVisibilityChange
       // These must stay on this host view, not on the container. The container is
       // reparented into the native sheet, so this view is never a native ancestor of
-      // the sheet content. Claiming the responder here stops the negotiation at the
-      // sheet boundary without making an ancestor of the content the JS responder,
-      // which would block scrolling inside the sheet.
+      // the sheet content — this is the React-tree boundary between the sheet and
+      // the presenting screen, where both the responder negotiation and raw touch
+      // bubbling must stop.
       ,
-      onStartShouldSetResponder: absorbUnclaimedTouches,
+      onStartShouldSetResponder: stopResponderNegotiation,
+      onMoveShouldSetResponder: stopResponderNegotiation,
       onTouchStart: stopTouchPropagation,
       onTouchMove: stopTouchPropagation,
       onTouchEnd: stopTouchPropagation,
       onTouchCancel: stopTouchPropagation,
-      children: this.state.shouldRenderNativeView && /*#__PURE__*/_jsxs(TrueSheetContainerViewNativeComponent, {
+      children: this.state.shouldRenderNativeView && /*#__PURE__*/_jsx(TrueSheetContainerViewNativeComponent, {
         style: styles.container,
-        children: [header && /*#__PURE__*/_jsx(TrueSheetHeaderViewNativeComponent, {
-          style: [styles.header, headerOptions?.position === 'absolute' && styles.absoluteHeader, headerStyle],
-          children: /*#__PURE__*/isValidElement(header) ? header : /*#__PURE__*/createElement(header)
-        }), /*#__PURE__*/_jsx(TrueSheetContentViewNativeComponent, {
-          style: style,
-          children: children
-        }), footer && /*#__PURE__*/_jsx(TrueSheetFooterViewNativeComponent, {
-          autoBottomInset: insetAdjustment === 'automatic',
-          style: [styles.footer, footerOptions?.position === 'absolute' ? styles.absoluteFooter : styles.relativeFooter, footerStyle],
-          children: /*#__PURE__*/isValidElement(footer) ? footer : /*#__PURE__*/createElement(footer)
-        }), autoPresent && !this.state.initialPresentReady && /*#__PURE__*/_jsx(InitialPresentGate, {
-          onReady: this.onInitialPresentReady
-        })]
+        children: AppContainer ?
+        /*#__PURE__*/
+        // Hosts the element inspector inside the sheet, like RN's Modal does —
+        // the app-level one sits behind the presented sheet.
+        // `display: contents` keeps AppContainer's wrapper views out of both
+        // Yoga layout and the native tree, so header/content/footer remain the
+        // container's direct native children, while the inspector overlay
+        // anchors to the container and lines up with measured frames.
+        _jsx(AppContainer, {
+          rootTag: this.context,
+          rootViewStyle: styles.inspectorHost,
+          internal_excludeLogBox: true,
+          children: sheetContent
+        }) : sheetContent
       })
     });
   }
@@ -516,13 +682,15 @@ TrueSheet;
 const styles = StyleSheet.create({
   sheetView: {
     ...StyleSheet.absoluteFill,
-    zIndex: -9999,
-    pointerEvents: 'box-none'
+    pointerEvents: 'none'
   },
   // Fill the sheet so flex layouts track the sheet's size per detent
   container: {
     ...StyleSheet.absoluteFill
   },
+  inspectorHost: {
+    display: 'contents'
+  },
   header: {
     pointerEvents: 'box-none'
   },