@lodev09/react-native-true-sheet 4.0.0-beta.0 → 4.0.0-beta.10

package/src/TrueSheet.tsx

@@ -4,12 +4,16 @@ import {
   createRef,
   type ReactNode,
   type ComponentRef,
+  type ComponentType,
   isValidElement,
   createElement,
+  useEffect,
 } from 'react';
 
 import type {
   TrueSheetProps,
+  TrueSheetMethods,
+  TrueSheetStaticMethods,
   DragBeginEvent,
   DragChangeEvent,
   DragEndEvent,
@@ -19,17 +23,49 @@ import type {
   PositionChangeEvent,
   DidDismissEvent,
   WillDismissEvent,
+  DismissAttemptEvent,
   MountEvent,
-  SizeChangeEvent,
+  WillFocusEvent,
+  DidFocusEvent,
+  WillBlurEvent,
+  DidBlurEvent,
 } from './TrueSheet.types';
 import TrueSheetViewNativeComponent from './fabric/TrueSheetViewNativeComponent';
 import TrueSheetContainerViewNativeComponent from './fabric/TrueSheetContainerViewNativeComponent';
 import TrueSheetContentViewNativeComponent from './fabric/TrueSheetContentViewNativeComponent';
+import TrueSheetHeaderViewNativeComponent from './fabric/TrueSheetHeaderViewNativeComponent';
 import TrueSheetFooterViewNativeComponent from './fabric/TrueSheetFooterViewNativeComponent';
 
 import TrueSheetModule from './specs/NativeTrueSheetModule';
 
-import { Platform, processColor, StyleSheet, findNodeHandle } from 'react-native';
+import {
+  Platform,
+  StyleSheet,
+  BackHandler,
+  RootTagContext,
+  findNodeHandle,
+  processColor,
+  type NativeEventSubscription,
+  type GestureResponderEvent,
+  type RootTag,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+interface AppContainerProps {
+  rootTag: RootTag;
+  rootViewStyle?: StyleProp<ViewStyle>;
+  internal_excludeLogBox?: boolean;
+  children?: ReactNode;
+}
+
+// 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: ComponentType<AppContainerProps> | null = __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` +
@@ -44,17 +80,57 @@ if (!TrueSheetModule) {
 
 type NativeRef = ComponentRef<typeof TrueSheetViewNativeComponent>;
 
+// Stop raw touch events from bubbling past the sheet to outside ancestors
+const stopTouchPropagation = (event: GestureResponderEvent) => 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: GestureResponderEvent) => {
+  event.stopPropagation();
+  return false;
+};
+
 interface TrueSheetState {
   shouldRenderNativeView: boolean;
-  containerWidth?: number;
-  containerHeight?: number;
+  initialPresentReady: boolean;
+  scrollableHandle: number | null;
 }
 
-export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
+// 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
+// onReady's, so native receives initialDetentIndex together with the settled
+// tree and presents at the final height instead of resizing mid-flight.
+const InitialPresentGate = ({ onReady }: { onReady: () => void }) => {
+  useEffect(() => {
+    onReady();
+  }, [onReady]);
+
+  return null;
+};
+
+export class TrueSheet
+  extends PureComponent<TrueSheetProps, TrueSheetState>
+  implements TrueSheetMethods
+{
   displayName = 'TrueSheet';
 
+  static contextType = RootTagContext;
+
   private readonly nativeRef: RefObject<NativeRef | null>;
 
+  private cachedGrabberOptions: TrueSheetProps['grabberOptions'] | undefined;
+  private resolvedGrabberOptions: Record<string, unknown> | undefined;
+  private backHandlerSubscription: NativeEventSubscription | null = null;
+  private isPresented: boolean = false;
+  private isSheetVisible: boolean = true;
+
   /**
    * Map of sheet names against their instances.
    */
@@ -65,6 +141,11 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
    */
   private presentationResolver: (() => void) | null = null;
 
+  /**
+   * Tracks if a present operation is in progress
+   */
+  private isPresenting: boolean = false;
+
   constructor(props: TrueSheetProps) {
     super(props);
 
@@ -72,19 +153,21 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
 
     this.validateDetents();
 
-    // Lazy load by default, except when initialDetentIndex is set (for auto-presentation)
+    // Lazy load by default, except when auto-presenting or when lazy is disabled
     const shouldRenderImmediately =
-      props.initialDetentIndex !== undefined && props.initialDetentIndex >= 0;
+      (props.initialDetentIndex !== undefined && props.initialDetentIndex >= 0) ||
+      props.lazy === false;
 
     this.state = {
       shouldRenderNativeView: shouldRenderImmediately,
-      containerWidth: undefined,
-      containerHeight: undefined,
+      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);
@@ -92,7 +175,28 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     this.onDragChange = this.onDragChange.bind(this);
     this.onDragEnd = this.onDragEnd.bind(this);
     this.onPositionChange = this.onPositionChange.bind(this);
-    this.onSizeChange = this.onSizeChange.bind(this);
+    this.onWillFocus = this.onWillFocus.bind(this);
+    this.onDidFocus = this.onDidFocus.bind(this);
+    this.onWillBlur = this.onWillBlur.bind(this);
+    this.onDidBlur = this.onDidBlur.bind(this);
+    this.handleBackPress = this.handleBackPress.bind(this);
+    this.onVisibilityChange = this.onVisibilityChange.bind(this);
+    this.onInitialPresentReady = this.onInitialPresentReady.bind(this);
+  }
+
+  private onInitialPresentReady(): void {
+    this.setState({ 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.
+  private updateScrollableHandle(): void {
+    const { scrollableRef } = this.props;
+    const scrollableHandle = scrollableRef?.current ? findNodeHandle(scrollableRef.current) : null;
+
+    if (scrollableHandle !== this.state.scrollableHandle) {
+      this.setState({ scrollableHandle });
+    }
   }
 
   private validateDetents(): void {
@@ -108,7 +212,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     // Warn for invalid detent fractions
     if (detents) {
       detents.forEach((detent, index) => {
-        if (detent !== 'auto' && typeof detent === 'number') {
+        if (typeof detent === 'number' && detent !== -1 && detent !== -2) {
           if (detent <= 0 || detent > 1) {
             console.warn(
               `TrueSheet: detent at index ${index} (${detent}) should be between 0 and 1. It will be clamped.`
@@ -152,31 +256,53 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
    * Present the sheet by given `name` (Promise-based)
    * @param name - Sheet name (must match sheet's name prop)
    * @param index - Detent index (default: 0)
+   * @param animated - Whether to animate the presentation (default: true)
    * @returns Promise that resolves when sheet is fully presented
    * @throws Error if sheet not found or presentation fails
    */
-  public static async present(name: string, index: number = 0): Promise<void> {
+  public static async present(
+    name: string,
+    index: number = 0,
+    animated: boolean = true
+  ): Promise<void> {
     const instance = TrueSheet.getInstance(name);
     if (!instance) {
       throw new Error(`Sheet with name "${name}" not found`);
     }
 
-    return instance.present(index);
+    return instance.present(index, animated);
   }
 
   /**
    * Dismiss the sheet by given `name` (Promise-based)
    * @param name - Sheet name
+   * @param animated - Whether to animate the dismissal (default: true)
    * @returns Promise that resolves when sheet is fully dismissed
    * @throws Error if sheet not found or dismissal fails
    */
-  public static async dismiss(name: string): Promise<void> {
+  public static async dismiss(name: string, animated: boolean = true): Promise<void> {
     const instance = TrueSheet.getInstance(name);
     if (!instance) {
       throw new Error(`Sheet with name "${name}" not found`);
     }
 
-    return instance.dismiss();
+    return instance.dismiss(animated);
+  }
+
+  /**
+   * Dismiss only the sheets presented on top of a sheet by given `name`
+   * @param name - Sheet name
+   * @param animated - Whether to animate the dismissal (default: true)
+   * @returns Promise that resolves when all child sheets are dismissed
+   * @throws Error if sheet not found
+   */
+  public static async dismissStack(name: string, animated: boolean = true): Promise<void> {
+    const instance = TrueSheet.getInstance(name);
+    if (!instance) {
+      throw new Error(`Sheet with name "${name}" not found`);
+    }
+
+    return instance.dismissStack(animated);
   }
 
   /**
@@ -195,6 +321,16 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     return instance.resize(index);
   }
 
+  /**
+   * Dismiss all presented sheets by dismissing from the bottom of the stack.
+   * This ensures child sheets are dismissed first before their parent.
+   * @param animated - Whether to animate the dismissals (default: true)
+   * @returns Promise that resolves when all sheets are dismissed
+   */
+  public static async dismissAll(animated: boolean = true): Promise<void> {
+    return TrueSheetModule?.dismissAll(animated);
+  }
+
   private registerInstance(): void {
     if (this.props.name) {
       TrueSheet.instances[this.props.name] = this;
@@ -216,6 +352,16 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
   }
 
   private onDidPresent(event: DidPresentEvent): void {
+    this.isPresented = true;
+
+    if (Platform.OS === 'android') {
+      this.backHandlerSubscription?.remove();
+      this.backHandlerSubscription = BackHandler.addEventListener(
+        'hardwareBackPress',
+        this.handleBackPress
+      );
+    }
+
     this.props.onDidPresent?.(event);
   }
 
@@ -223,9 +369,21 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     this.props.onWillDismiss?.(event);
   }
 
+  private onDismissAttempt(event: DismissAttemptEvent): void {
+    this.props.onDismissAttempt?.(event);
+  }
+
   private onDidDismiss(event: DidDismissEvent): void {
-    // Clean up native view after dismiss for lazy loading
-    this.setState({ shouldRenderNativeView: false });
+    this.isPresented = false;
+    this.isSheetVisible = true;
+    this.backHandlerSubscription?.remove();
+    this.backHandlerSubscription = null;
+
+    // Non-lazy content stays mounted; otherwise clean it up unless another presentation is active.
+    if (!this.isPresenting && this.props.lazy !== false) {
+      this.setState({ shouldRenderNativeView: false });
+    }
+
     this.props.onDidDismiss?.(event);
   }
 
@@ -255,23 +413,53 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     this.props.onPositionChange?.(event);
   }
 
-  private onSizeChange(event: SizeChangeEvent): void {
-    const { width, height } = event.nativeEvent;
+  private onWillFocus(event: WillFocusEvent): void {
+    this.props.onWillFocus?.(event);
+  }
 
-    // Update container view dimensions in state
-    this.setState({
-      containerWidth: width,
-      containerHeight: height,
-    });
+  private onDidFocus(event: DidFocusEvent): void {
+    this.props.onDidFocus?.(event);
+  }
 
-    // Internal handler only - not exposed to users
+  private onWillBlur(event: WillBlurEvent): void {
+    this.props.onWillBlur?.(event);
+  }
+
+  private onDidBlur(event: DidBlurEvent): void {
+    this.props.onDidBlur?.(event);
+  }
+
+  private onVisibilityChange(event: { nativeEvent: { visible: boolean } }): void {
+    this.isSheetVisible = event.nativeEvent.visible;
+  }
+
+  private handleBackPress(): boolean {
+    if (!this.isPresented || !this.isSheetVisible) return false;
+
+    // The native view can be detached (e.g. host screen unmounted by navigation)
+    // before onDidDismiss removes this subscription. Treat back press as a no-op
+    // instead of throwing from the handle getter.
+    const nodeHandle = findNodeHandle(this.nativeRef.current);
+    if (nodeHandle == null || nodeHandle === -1) return false;
+
+    // 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) {
+      const { onDismissAttempt, onBackPress } = this.props;
+      onDismissAttempt?.({ nativeEvent: null } as DismissAttemptEvent);
+      return onBackPress?.() ?? onDismissAttempt != null;
+    }
+
+    TrueSheetModule?.handleBackPress(nodeHandle);
+    return this.props.onBackPress?.() ?? true;
   }
 
   /**
-   * Present the Sheet by `index` (Promise-based)
-   * @param index - Detent index (default: 0)
+   * Present the sheet at a given detent index.
+   * @param index - The detent index to present at (default: 0)
+   * @param animated - Whether to animate the presentation (default: true)
    */
-  public async present(index: number = 0): Promise<void> {
+  public async present(index: number = 0, animated: boolean = true): Promise<void> {
     const detentsLength = Math.min(this.props.detents?.length ?? 2, 3); // Max 3 detents
     if (index < 0 || index >= detentsLength) {
       throw new Error(
@@ -279,6 +467,8 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
       );
     }
 
+    this.isPresenting = true;
+
     // Lazy load: render native view if not already rendered
     if (!this.state.shouldRenderNativeView) {
       await new Promise<void>((resolve) => {
@@ -287,68 +477,117 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
       });
     }
 
-    return TrueSheetModule?.presentByRef(this.handle, index);
+    await TrueSheetModule?.presentByRef(this.handle, index, animated);
+    this.isPresenting = false;
   }
 
   /**
-   * Resizes the Sheet programmatically by `index`.
-   * This is an alias of the `present(index)` method.
+   * Resize the sheet to a given detent index.
+   * @param index - The detent index to resize to
    */
   public async resize(index: number): Promise<void> {
-    await this.present(index);
+    await TrueSheetModule?.resizeByRef(this.handle, index);
+  }
+
+  /**
+   * Dismiss this sheet and all sheets presented on top of it in a single animation.
+   * @param animated - Whether to animate the dismissal (default: true)
+   */
+  public async dismiss(animated: boolean = true): Promise<void> {
+    return TrueSheetModule?.dismissByRef(this.handle, animated);
   }
 
   /**
-   * Dismisses the Sheet
+   * Dismiss only the sheets presented on top of this sheet, keeping this sheet presented.
+   * If no sheets are presented on top, this method does nothing.
+   * @param animated - Whether to animate the dismissal (default: true)
    */
-  public async dismiss(): Promise<void> {
-    return TrueSheetModule?.dismissByRef(this.handle);
+  public async dismissStack(animated: boolean = true): Promise<void> {
+    return TrueSheetModule?.dismissStackByRef(this.handle, animated);
   }
 
   componentDidMount(): void {
     this.registerInstance();
+    this.updateScrollableHandle();
   }
 
   componentDidUpdate(prevProps: TrueSheetProps): void {
     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) {
       this.validateDetents();
     }
+
+    // initialDetentIndex set at runtime on a lazily-mounted sheet: render the
+    // native tree so InitialPresentGate can deliver the index (constructor
+    // only computes this for the initial prop).
+    const prevInitialDetentIndex = prevProps.initialDetentIndex ?? -1;
+    const initialDetentIndex = this.props.initialDetentIndex ?? -1;
+    if (
+      prevInitialDetentIndex < 0 &&
+      initialDetentIndex >= 0 &&
+      !this.state.shouldRenderNativeView
+    ) {
+      this.setState({ shouldRenderNativeView: true });
+    }
   }
 
   componentWillUnmount(): void {
     this.unregisterInstance();
-
-    // Clean up presentation resolver
+    this.backHandlerSubscription?.remove();
+    this.backHandlerSubscription = null;
     this.presentationResolver = null;
   }
 
   render(): ReactNode {
     const {
       detents = [0.5, 1],
-      backgroundColor = 'white',
+      backgroundColor,
       dismissible = true,
+      draggable = true,
       grabber = true,
+      grabberOptions,
+      accessibilityOptions,
       dimmed = true,
       initialDetentIndex = -1,
       initialDetentAnimated = true,
-      keyboardMode = 'resize',
-      dimmedIndex,
-      blurTint,
+      dimmedDetentIndex,
+      backgroundBlur,
+      blurOptions,
       cornerRadius,
-      maxHeight,
-      edgeToEdgeFullScreen,
+      maxContentHeight,
+      maxContentWidth,
+      anchor = 'center',
+      anchorOffset,
+      scrollableOptions,
+      footerOptions,
+      presentation = 'page',
       children,
       style,
+      header,
+      headerStyle,
+      headerOptions,
       footer,
-      testID,
+      footerStyle,
+      insetAdjustment = 'automatic',
+      ...rest
     } = this.props;
+    delete rest.lazy;
 
     // Trim to max 3 detents and clamp fractions
-    const resolvedDetents = detents.slice(0, 3).map((detent) => {
+    const resolvedDetents: number[] = detents.slice(0, 3).map((detent) => {
       if (detent === 'auto' || detent === -1) return -1;
+      if (detent === 'peek' || detent === -2) return -2;
 
       // Default to 0.1 if zero or below
       if (detent <= 0) return 0.1;
@@ -357,51 +596,135 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
       return Math.min(1, detent);
     });
 
+    // Hold initialDetentIndex back from native until the gate's effect flushes
+    // (see InitialPresentGate) — native presents when the prop lands.
+    const autoPresent = initialDetentIndex >= 0;
+    const gatedInitialDetentIndex =
+      autoPresent && !this.state.initialPresentReady ? -1 : initialDetentIndex;
+
+    // Cache grabberOptions to avoid creating a new object every render
+    if (grabberOptions !== this.cachedGrabberOptions) {
+      this.cachedGrabberOptions = grabberOptions;
+      this.resolvedGrabberOptions = {
+        ...grabberOptions,
+        color: processColor(grabberOptions?.color),
+      };
+    }
+
+    const sheetContent = (
+      <>
+        {header && (
+          <TrueSheetHeaderViewNativeComponent
+            style={[
+              styles.header,
+              headerOptions?.position === 'absolute' && styles.absoluteHeader,
+              headerStyle,
+            ]}
+          >
+            {isValidElement(header) ? header : createElement(header)}
+          </TrueSheetHeaderViewNativeComponent>
+        )}
+        <TrueSheetContentViewNativeComponent style={style}>
+          {children}
+        </TrueSheetContentViewNativeComponent>
+        {footer && (
+          <TrueSheetFooterViewNativeComponent
+            autoBottomInset={insetAdjustment === 'automatic'}
+            style={[
+              styles.footer,
+              footerOptions?.position === 'absolute'
+                ? styles.absoluteFooter
+                : styles.relativeFooter,
+              footerStyle,
+            ]}
+          >
+            {isValidElement(footer) ? footer : createElement(footer)}
+          </TrueSheetFooterViewNativeComponent>
+        )}
+        {autoPresent && !this.state.initialPresentReady && (
+          <InitialPresentGate onReady={this.onInitialPresentReady} />
+        )}
+      </>
+    );
+
     return (
       <TrueSheetViewNativeComponent
+        {...rest}
         ref={this.nativeRef}
         style={styles.sheetView}
         detents={resolvedDetents}
-        blurTint={blurTint}
-        background={(processColor(backgroundColor) as number) ?? 0}
+        backgroundBlur={backgroundBlur}
+        blurOptions={blurOptions}
+        backgroundColor={backgroundColor}
         cornerRadius={cornerRadius}
         grabber={grabber}
+        grabberOptions={this.resolvedGrabberOptions}
+        accessibilityOptions={accessibilityOptions}
         dimmed={dimmed}
-        dimmedIndex={dimmedIndex}
-        keyboardMode={keyboardMode}
-        initialDetentIndex={initialDetentIndex}
+        dimmedDetentIndex={dimmedDetentIndex}
+        initialDetentIndex={gatedInitialDetentIndex}
         initialDetentAnimated={initialDetentAnimated}
         dismissible={dismissible}
-        maxHeight={maxHeight}
-        edgeToEdgeFullScreen={edgeToEdgeFullScreen}
+        draggable={draggable}
+        maxContentHeight={maxContentHeight}
+        maxContentWidth={maxContentWidth}
+        anchor={anchor}
+        anchorOffset={anchorOffset}
+        scrollableHandle={this.state.scrollableHandle ?? -1}
+        scrollableOptions={scrollableOptions}
+        headerOptions={headerOptions}
+        footerOptions={{
+          footerPosition: footerOptions?.position,
+          keyboardOffset: footerOptions?.keyboardOffset,
+        }}
+        presentation={presentation}
+        insetAdjustment={insetAdjustment}
         onMount={this.onMount}
         onWillPresent={this.onWillPresent}
         onDidPresent={this.onDidPresent}
         onWillDismiss={this.onWillDismiss}
         onDidDismiss={this.onDidDismiss}
+        onDismissAttempt={this.onDismissAttempt}
         onDetentChange={this.onDetentChange}
         onDragBegin={this.onDragBegin}
         onDragChange={this.onDragChange}
         onDragEnd={this.onDragEnd}
         onPositionChange={this.onPositionChange}
-        onSizeChange={this.onSizeChange}
+        onWillFocus={this.onWillFocus}
+        onDidFocus={this.onDidFocus}
+        onWillBlur={this.onWillBlur}
+        onDidBlur={this.onDidBlur}
+        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 — 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={stopResponderNegotiation}
+        onMoveShouldSetResponder={stopResponderNegotiation}
+        onTouchStart={stopTouchPropagation}
+        onTouchMove={stopTouchPropagation}
+        onTouchEnd={stopTouchPropagation}
+        onTouchCancel={stopTouchPropagation}
       >
         {this.state.shouldRenderNativeView && (
-          <TrueSheetContainerViewNativeComponent
-            testID={testID}
-            style={{
-              width: this.state.containerWidth,
-              height: this.state.containerHeight,
-            }}
-            collapsable={false}
-          >
-            <TrueSheetContentViewNativeComponent style={style} collapsable={false}>
-              {children}
-            </TrueSheetContentViewNativeComponent>
-            {footer && (
-              <TrueSheetFooterViewNativeComponent style={styles.footer} collapsable={false}>
-                {isValidElement(footer) ? footer : createElement(footer)}
-              </TrueSheetFooterViewNativeComponent>
+          <TrueSheetContainerViewNativeComponent style={styles.container}>
+            {AppContainer ? (
+              // 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.
+              <AppContainer
+                rootTag={this.context as RootTag}
+                rootViewStyle={styles.inspectorHost}
+                internal_excludeLogBox
+              >
+                {sheetContent}
+              </AppContainer>
+            ) : (
+              sheetContent
             )}
           </TrueSheetContainerViewNativeComponent>
         )}
@@ -410,15 +733,46 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
   }
 }
 
+// Compile-time check: `TrueSheet`'s static surface must satisfy `TrueSheetStaticMethods`.
+TrueSheet satisfies TrueSheetStaticMethods;
+
 const styles = StyleSheet.create({
   sheetView: {
-    position: 'absolute',
-    width: '100%',
+    ...StyleSheet.absoluteFill,
     zIndex: -9999,
+    pointerEvents: 'box-none',
+  },
+  // Fill the sheet so flex layouts track the sheet's size per detent
+  container: {
+    ...StyleSheet.absoluteFill,
+  },
+  inspectorHost: {
+    display: 'contents',
+  },
+  header: {
+    pointerEvents: 'box-none',
+  },
+  // Floats over the content so it doesn't take up layout space
+  absoluteHeader: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1,
   },
   footer: {
+    pointerEvents: 'box-none',
+  },
+  // Pinned to the sheet's bottom edge via Yoga since the container tracks the
+  // sheet's visible height — takes up layout space below the content
+  relativeFooter: {
+    marginTop: 'auto',
+  },
+  // Floats over the content so it doesn't take up layout space
+  absoluteFooter: {
     position: 'absolute',
     left: 0,
     right: 0,
+    bottom: 0,
   },
 });