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

package/src/TrueSheet.tsx

@@ -4,6 +4,7 @@ import {
   createRef,
   type ReactNode,
   type ComponentRef,
+  type ComponentType,
   isValidElement,
   createElement,
   useEffect,
@@ -22,6 +23,7 @@ import type {
   PositionChangeEvent,
   DidDismissEvent,
   WillDismissEvent,
+  DismissAttemptEvent,
   MountEvent,
   WillFocusEvent,
   DidFocusEvent,
@@ -35,17 +37,39 @@ import TrueSheetHeaderViewNativeComponent from './fabric/TrueSheetHeaderViewNati
 import TrueSheetFooterViewNativeComponent from './fabric/TrueSheetFooterViewNativeComponent';
 
 import TrueSheetModule from './specs/NativeTrueSheetModule';
+import { TrueSheetBackground } from './TrueSheetBackground';
+import { normalizeDetentBackground } from './detentBackgrounds';
+import { resolveScrollable } from './scrollable';
 
 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` +
   Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
@@ -59,16 +83,26 @@ if (!TrueSheetModule) {
 
 type NativeRef = ComponentRef<typeof TrueSheetViewNativeComponent>;
 
-// 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: 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;
   initialPresentReady: boolean;
+  scrollableHandle: number | null;
 }
 
 // Gates auto-present (initialDetentIndex) by one commit. Rendered last in the
@@ -90,6 +124,8 @@ export class TrueSheet
 {
   displayName = 'TrueSheet';
 
+  static contextType = RootTagContext;
+
   private readonly nativeRef: RefObject<NativeRef | null>;
 
   private cachedGrabberOptions: TrueSheetProps['grabberOptions'] | undefined;
@@ -104,9 +140,19 @@ export class TrueSheet
   private static readonly instances: { [name: string]: TrueSheet } = {};
 
   /**
-   * Resolver to be called when mount event is received
+   * All mounted sheets, named or not.
+   */
+  private static readonly mountedInstances = new Set<TrueSheet>();
+
+  /**
+   * Resolver to be called when mount event is received, or with `false` when the present is cancelled
+   */
+  private presentationResolver: ((mounted: boolean) => void) | null = null;
+
+  /**
+   * Settles once a scheduled lazy unmount has committed
    */
-  private presentationResolver: (() => void) | null = null;
+  private nativeViewUnmount: Promise<void> | null = null;
 
   /**
    * Tracks if a present operation is in progress
@@ -120,18 +166,21 @@ export class TrueSheet
 
     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,
       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);
@@ -152,6 +201,34 @@ export class TrueSheet
     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;
+    let scrollableHandle: number | null = null;
+    if (scrollableRef?.current) {
+      try {
+        scrollableHandle = findNodeHandle(
+          resolveScrollable(scrollableRef.current) as Parameters<typeof findNodeHandle>[0]
+        );
+      } 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 });
+    }
+  }
+
   private validateDetents(): void {
     const { detents, initialDetentIndex } = this.props;
 
@@ -281,6 +358,7 @@ export class TrueSheet
    * @returns Promise that resolves when all sheets are dismissed
    */
   public static async dismissAll(animated: boolean = true): Promise<void> {
+    TrueSheet.mountedInstances.forEach((sheet) => sheet.cancelPendingPresent());
     return TrueSheetModule?.dismissAll(animated);
   }
 
@@ -322,25 +400,29 @@ export class TrueSheet
     this.props.onWillDismiss?.(event);
   }
 
+  private onDismissAttempt(event: DismissAttemptEvent): void {
+    this.props.onDismissAttempt?.(event);
+  }
+
   private onDidDismiss(event: DidDismissEvent): void {
     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);
   }
 
   private onMount(event: MountEvent): void {
-    // 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;
     }
 
@@ -392,12 +474,17 @@ export class TrueSheet
     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 } as DismissAttemptEvent);
+      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;
   }
 
@@ -414,20 +501,67 @@ export class TrueSheet
       );
     }
 
+    // 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<void>((resolve) => {
+    const unmount = this.nativeViewUnmount;
+    if (unmount || !this.state.shouldRenderNativeView) {
+      const mounted = await new Promise<boolean>((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.
+   */
+  private cancelPendingPresent(): boolean {
+    if (!this.presentationResolver) return false;
+
+    this.presentationResolver(false);
+    this.presentationResolver = null;
+    this.unmountNativeView();
+    return true;
+  }
+
+  private unmountNativeView(): void {
+    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
@@ -441,6 +575,9 @@ export class TrueSheet
    * @param animated - Whether to animate the dismissal (default: true)
    */
   public async dismiss(animated: boolean = true): Promise<void> {
+    // Dismissing before the lazy mount finishes cancels the present — nothing was presented
+    if (this.cancelPendingPresent()) return;
+
     return TrueSheetModule?.dismissByRef(this.handle, animated);
   }
 
@@ -454,11 +591,22 @@ export class TrueSheet
   }
 
   componentDidMount(): void {
+    TrueSheet.mountedInstances.add(this);
     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) {
@@ -480,9 +628,12 @@ export class TrueSheet
   }
 
   componentWillUnmount(): void {
+    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;
   }
 
@@ -490,22 +641,27 @@ export class TrueSheet
     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',
@@ -519,6 +675,7 @@ export class TrueSheet
       insetAdjustment = 'automatic',
       ...rest
     } = this.props;
+    delete rest.lazy;
 
     // Trim to max 3 detents and clamp fractions
     const resolvedDetents: number[] = detents.slice(0, 3).map((detent) => {
@@ -547,6 +704,43 @@ export class TrueSheet
       };
     }
 
+    const sheetContent = (
+      <>
+        <TrueSheetBackground background={background} backgroundStyle={backgroundStyle} />
+        {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}
@@ -554,27 +748,38 @@ export class TrueSheet
         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,
+          avoidKeyboard: footerOptions?.avoidKeyboard,
         }}
         presentation={presentation}
         insetAdjustment={insetAdjustment}
@@ -583,6 +788,7 @@ export class TrueSheet
         onDidPresent={this.onDidPresent}
         onWillDismiss={this.onWillDismiss}
         onDidDismiss={this.onDidDismiss}
+        onDismissAttempt={this.onDismissAttempt}
         onDetentChange={this.onDetentChange}
         onDragBegin={this.onDragBegin}
         onDragChange={this.onDragChange}
@@ -595,10 +801,11 @@ export class TrueSheet
         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.
-        onStartShouldSetResponder={absorbUnclaimedTouches}
+        // 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}
@@ -606,36 +813,22 @@ export class TrueSheet
       >
         {this.state.shouldRenderNativeView && (
           <TrueSheetContainerViewNativeComponent style={styles.container}>
-            {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,
-                ]}
+            {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
               >
-                {isValidElement(footer) ? footer : createElement(footer)}
-              </TrueSheetFooterViewNativeComponent>
-            )}
-            {autoPresent && !this.state.initialPresentReady && (
-              <InitialPresentGate onReady={this.onInitialPresentReady} />
+                {sheetContent}
+              </AppContainer>
+            ) : (
+              sheetContent
             )}
           </TrueSheetContainerViewNativeComponent>
         )}
@@ -650,13 +843,15 @@ TrueSheet satisfies TrueSheetStaticMethods;
 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',
   },