@lodev09/react-native-true-sheet 4.0.0-beta.24 → 4.0.0-beta.26

package/lib/typescript/src/web/vaul/use-snap-points.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { DrawerDirection } from './types';
-export declare function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints, drawerRef, overlayRef, fadeFromIndex, onSnapPointChange, direction, container, snapToSequentialPoint, isOpen, contentHeight, detachedOffset, maxContentHeight, peekHeight, initialAnimated, }: {
+import type { DrawerDirection, KeyboardViewport } from './types';
+export declare function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints, drawerRef, overlayRef, fadeFromIndex, onSnapPointChange, direction, container, snapToSequentialPoint, isOpen, contentHeight, detachedOffset, maxContentHeight, peekHeight, initialAnimated, keyboardViewport, }: {
     activeSnapPointProp?: number | string | null;
     setActiveSnapPointProp?(snapPoint: number | null | string): void;
     snapPoints?: (number | string)[];
@@ -17,6 +17,7 @@ export declare function useSnapPoints({ activeSnapPointProp, setActiveSnapPointP
     maxContentHeight?: number;
     peekHeight?: number;
     initialAnimated?: boolean;
+    keyboardViewport?: KeyboardViewport;
 }): {
     isLastSnapPoint: true | null;
     activeSnapPoint: string | number | null | undefined;

package/lib/typescript/src/web/vaul/use-snap-points.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-snap-points.d.ts","sourceRoot":"","sources":["../../../../../src/web/vaul/use-snap-points.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,wBAAgB,aAAa,CAAC,EAC5B,mBAAmB,EACnB,sBAAsB,EACtB,UAAU,EACV,SAAS,EACT,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,SAAoB,EACpB,SAAS,EACT,qBAAqB,EACrB,MAAM,EACN,aAAa,EACb,cAAkB,EAClB,gBAAgB,EAChB,UAAU,EACV,eAAsB,GACvB,EAAE;IACD,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7C,sBAAsB,CAAC,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IACjE,UAAU,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,iBAAiB,CAAC,oBAAoB,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IACzE,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;;;;+CA+XmD,MAAM,kBAAkB,OAAO;;;4FA9I9E;QACD,eAAe,EAAE,MAAM,CAAC;QACxB,WAAW,EAAE,MAAM,IAAI,CAAC;QACxB,QAAQ,EAAE,MAAM,CAAC;QACjB,WAAW,EAAE,OAAO,CAAC;QACrB,gBAAgB,EAAE,MAAM,GAAG,OAAO,CAAC;KACpC;kCA6FoC;QAAE,eAAe,EAAE,MAAM,CAAA;KAAE;;EA8GjE"}
+{"version":3,"file":"use-snap-points.d.ts","sourceRoot":"","sources":["../../../../../src/web/vaul/use-snap-points.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEjE,wBAAgB,aAAa,CAAC,EAC5B,mBAAmB,EACnB,sBAAsB,EACtB,UAAU,EACV,SAAS,EACT,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,SAAoB,EACpB,SAAS,EACT,qBAAqB,EACrB,MAAM,EACN,aAAa,EACb,cAAkB,EAClB,gBAAgB,EAChB,UAAU,EACV,eAAsB,EACtB,gBAAgB,GACjB,EAAE;IACD,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7C,sBAAsB,CAAC,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IACjE,UAAU,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,iBAAiB,CAAC,oBAAoB,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IACzE,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;;;;+CAuYmD,MAAM,kBAAkB,OAAO;;;4FA9I9E;QACD,eAAe,EAAE,MAAM,CAAC;QACxB,WAAW,EAAE,MAAM,IAAI,CAAC;QACxB,QAAQ,EAAE,MAAM,CAAC;QACjB,WAAW,EAAE,OAAO,CAAC;QACrB,gBAAgB,EAAE,MAAM,GAAG,OAAO,CAAC;KACpC;kCA6FoC;QAAE,eAAe,EAAE,MAAM,CAAA;KAAE;;EA8GjE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lodev09/react-native-true-sheet",
-  "version": "4.0.0-beta.24",
+  "version": "4.0.0-beta.26",
   "description": "The true native bottom sheet experience for your React Native Apps.",
   "source": "./src/index.ts",
   "main": "./lib/module/index.js",

package/src/TrueSheet.tsx

@@ -39,6 +39,7 @@ import TrueSheetFooterViewNativeComponent from './fabric/TrueSheetFooterViewNati
 import TrueSheetModule from './specs/NativeTrueSheetModule';
 import { TrueSheetBackground } from './TrueSheetBackground';
 import { normalizeDetentBackground } from './detentBackgrounds';
+import { resolveScrollable } from './scrollable';
 
 import {
   Platform,
@@ -139,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 presentationResolver: (() => void) | null = null;
+  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 nativeViewUnmount: Promise<void> | null = null;
 
   /**
    * Tracks if a present operation is in progress
@@ -198,13 +209,17 @@ export class TrueSheet
     if (scrollableRef?.current) {
       try {
         scrollableHandle = findNodeHandle(
-          scrollableRef.current as Parameters<typeof findNodeHandle>[0]
+          resolveScrollable(scrollableRef.current) as Parameters<typeof findNodeHandle>[0]
         );
       } catch (error) {
-        // A stale ref (e.g. a wrapper that never clears it on unmount) makes
-        // findNodeHandle throw. Treat it as no scrollable instead of crashing.
+        // 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 points to an unmounted component.', error);
+          console.warn(
+            'TrueSheet: scrollableRef could not be resolved to a native view. It may be stale or expose no scroll node.',
+            error
+          );
         }
       }
     }
@@ -343,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);
   }
 
@@ -396,16 +412,17 @@ export class TrueSheet
 
     // 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.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;
     }
 
@@ -465,7 +482,9 @@ export class TrueSheet
       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;
   }
 
@@ -482,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
@@ -509,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);
   }
 
@@ -522,6 +591,7 @@ export class TrueSheet
   }
 
   componentDidMount(): void {
+    TrueSheet.mountedInstances.add(this);
     this.registerInstance();
     this.updateScrollableHandle();
   }
@@ -558,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;
   }
 
@@ -578,6 +651,8 @@ export class TrueSheet
       grabberOptions,
       accessibilityOptions,
       dimmed = true,
+      dimColor,
+      dimOpacity,
       initialDetentIndex = -1,
       initialDetentAnimated = true,
       dimmedDetentIndex,
@@ -686,6 +761,8 @@ export class TrueSheet
         grabberOptions={this.resolvedGrabberOptions}
         accessibilityOptions={accessibilityOptions}
         dimmed={dimmed}
+        dimColor={dimColor}
+        dimOpacity={dimOpacity}
         dimmedDetentIndex={dimmedDetentIndex}
         initialDetentIndex={gatedInitialDetentIndex}
         initialDetentAnimated={initialDetentAnimated}

package/src/TrueSheet.types.ts

@@ -262,6 +262,33 @@ export interface HeaderOptions {
   position?: 'relative' | 'absolute';
 }
 
+/**
+ * Options for foldables. Applies while the device is half-open with a horizontal
+ * fold (tabletop). In book posture (vertical fold), iOS already keeps sheets on
+ * one panel — use `placement` to pick the side.
+ */
+export interface FoldOptions {
+  /**
+   * The detent that rests on the hinge in tabletop, so the sheet fills the panel
+   * below it. In any other posture the detent keeps its own value. Lower detents
+   * stay below it and higher ones above it, so the detents keep their order.
+   */
+  hingeDetentIndex?: number;
+
+  /**
+   * How the sheet treats the hinge in tabletop.
+   *
+   * - `'none'`: Detents are free to cross the hinge.
+   * - `'avoid'`: Caps every detent at the hinge, so the sheet never crosses it.
+   * - `'snap'`: Like `'avoid'`, and also moves the sheet to `hingeDetentIndex` when
+   *    the device enters tabletop, then back to its previous detent when it leaves,
+   *    unless the sheet was moved off the hinge in between.
+   *
+   * @default 'none'
+   */
+  hingeBehavior?: 'none' | 'avoid' | 'snap';
+}
+
 /**
  * Options for footer behavior
  */
@@ -439,6 +466,22 @@ export interface TrueSheetProps extends ViewProps {
    */
   dimmed?: boolean;
 
+  /**
+   * The color of the dim overlay behind the sheet.
+   * This is ignored if `dimmed` is set to `false`.
+   *
+   * @default '#000000'
+   */
+  dimColor?: ColorValue;
+
+  /**
+   * The maximum opacity of the dim overlay behind the sheet (0 to 1).
+   * This is ignored if `dimmed` is set to `false`.
+   *
+   * @default 0.5
+   */
+  dimOpacity?: number;
+
   /**
    * Initially present the sheet, after mounting, at a given detent index.
    *
@@ -629,6 +672,13 @@ export interface TrueSheetProps extends ViewProps {
    */
   placementOffset?: number;
 
+  /**
+   * How the sheet behaves on a foldable.
+   *
+   * @platform ios 27.1+
+   */
+  foldOptions?: FoldOptions;
+
   /**
    * Controls how the sheet adjusts its height for system insets (safe area).
    *
@@ -677,7 +727,9 @@ export interface TrueSheetProps extends ViewProps {
 
   /**
    * A ref to the scrollable component (e.g. `ScrollView`, `FlatList`)
-   * rendered within the sheet content.
+   * rendered within the sheet content. Lists that expose an imperative handle
+   * (e.g. `LegendList`, `FlashList`) work too, through their
+   * `getScrollableNode()` or `getNativeScrollRef()`.
    * Required for scrollable handling — nested scrolling, keyboard insets,
    * and `auto` detent sizing are wired to this scrollable.
    *
@@ -690,7 +742,13 @@ export interface TrueSheetProps extends ViewProps {
    * </TrueSheet>
    * ```
    */
-  scrollableRef?: RefObject<Component<unknown> | HostInstance | null>;
+  scrollableRef?: RefObject<
+    | Component<unknown>
+    | HostInstance
+    | { getScrollableNode(): unknown }
+    | { getNativeScrollRef(): unknown }
+    | null
+  >;
 
   /**
    * Options for scrollable behavior.