@lodev09/react-native-true-sheet 4.0.0-beta.23 → 4.0.0-beta.25

package/src/fabric/TrueSheetViewNativeComponent.ts

@@ -1,71 +1,71 @@
-import type { ColorValue, ProcessedColorValue, ViewProps } from 'react-native';
-import type {
-  DirectEventHandler,
-  Double,
-  Int32,
-  WithDefault,
-} from 'react-native/Libraries/Types/CodegenTypes';
+import type { CodegenTypes, ColorValue, ProcessedColorValue, ViewProps } from 'react-native';
 import { codegenNativeComponent } from 'react-native';
 
 type GrabberOptionsType = Readonly<{
-  width?: Double;
-  height?: Double;
-  topMargin?: Double;
-  cornerRadius?: WithDefault<Double, -1>;
+  width?: CodegenTypes.Double;
+  height?: CodegenTypes.Double;
+  topMargin?: CodegenTypes.Double;
+  cornerRadius?: CodegenTypes.WithDefault<CodegenTypes.Double, -1>;
   color?: ProcessedColorValue | null;
-  adaptive?: WithDefault<boolean, true>;
+  adaptive?: CodegenTypes.WithDefault<boolean, true>;
 }>;
 
 type AccessibilityOptionsType = Readonly<{
-  grabberLabel?: WithDefault<string, 'Sheet Grabber'>;
-  grabberHint?: WithDefault<string, 'Double-tap to expand. Swipe up or down to resize the sheet'>;
-  expandedValue?: WithDefault<string, 'Expanded'>;
-  collapsedValue?: WithDefault<string, 'Collapsed'>;
-  detentValue?: WithDefault<string, 'Detent {index} of {count}'>;
-  expandActionLabel?: WithDefault<string, 'Expand'>;
-  collapseActionLabel?: WithDefault<string, 'Collapse'>;
-  paneTitle?: WithDefault<string, 'Bottom sheet'>;
+  grabberLabel?: CodegenTypes.WithDefault<string, 'Sheet Grabber'>;
+  grabberHint?: CodegenTypes.WithDefault<
+    string,
+    'Double-tap to expand. Swipe up or down to resize the sheet'
+  >;
+  expandedValue?: CodegenTypes.WithDefault<string, 'Expanded'>;
+  collapsedValue?: CodegenTypes.WithDefault<string, 'Collapsed'>;
+  detentValue?: CodegenTypes.WithDefault<string, 'Detent {index} of {count}'>;
+  expandActionLabel?: CodegenTypes.WithDefault<string, 'Expand'>;
+  collapseActionLabel?: CodegenTypes.WithDefault<string, 'Collapse'>;
+  paneTitle?: CodegenTypes.WithDefault<string, 'Bottom sheet'>;
 }>;
 
 type ScrollEdgeEffect = 'automatic' | 'hard' | 'soft' | 'hidden';
 
 type ScrollableOptionsType = Readonly<{
-  contentInsetAdjustment?: WithDefault<'automatic' | 'safe-area' | 'footer' | 'never', 'automatic'>;
-  keyboardScrollOffset?: WithDefault<Double, 0>;
-  keyboardOffset?: WithDefault<Double, 0>;
-  scrollingExpandsSheet?: WithDefault<boolean, true>;
-  topScrollEdgeEffect?: WithDefault<ScrollEdgeEffect, 'hidden'>;
-  bottomScrollEdgeEffect?: WithDefault<ScrollEdgeEffect, 'hidden'>;
+  contentInsetAdjustment?: CodegenTypes.WithDefault<
+    'automatic' | 'safe-area' | 'footer' | 'never',
+    'automatic'
+  >;
+  keyboardScrollOffset?: CodegenTypes.WithDefault<CodegenTypes.Double, 0>;
+  keyboardOffset?: CodegenTypes.WithDefault<CodegenTypes.Double, 0>;
+  scrollingExpandsSheet?: CodegenTypes.WithDefault<boolean, true>;
+  topScrollEdgeEffect?: CodegenTypes.WithDefault<ScrollEdgeEffect, 'hidden'>;
+  bottomScrollEdgeEffect?: CodegenTypes.WithDefault<ScrollEdgeEffect, 'hidden'>;
 }>;
 
 type FooterOptionsType = Readonly<{
   // Named uniquely across option structs — codegen derives the enum name from
   // the field name, so a second `position` would redefine TrueSheetViewPosition
-  footerPosition?: WithDefault<'relative' | 'absolute', 'relative'>;
-  keyboardOffset?: WithDefault<Double, 0>;
-  avoidKeyboard?: WithDefault<boolean, true>;
+  footerPosition?: CodegenTypes.WithDefault<'relative' | 'absolute', 'relative'>;
+  keyboardOffset?: CodegenTypes.WithDefault<CodegenTypes.Double, 0>;
+  avoidKeyboard?: CodegenTypes.WithDefault<boolean, true>;
 }>;
 
 type HeaderOptionsType = Readonly<{
-  position?: WithDefault<'relative' | 'absolute', 'relative'>;
+  position?: CodegenTypes.WithDefault<'relative' | 'absolute', 'relative'>;
 }>;
 
 export interface DetentInfoEventPayload {
-  index: Int32;
-  position: Double;
-  detent: Double;
+  index: CodegenTypes.Int32;
+  position: CodegenTypes.Double;
+  detent: CodegenTypes.Double;
 }
 
 export interface PositionChangeEventPayload {
-  index: Double;
-  position: Double;
-  detent: Double;
+  index: CodegenTypes.Double;
+  position: CodegenTypes.Double;
+  detent: CodegenTypes.Double;
   realtime: boolean;
 }
 
 export interface NativeProps extends ViewProps {
   // Array properties
-  detents?: ReadonlyArray<Double>;
+  detents?: ReadonlyArray<CodegenTypes.Double>;
   detentBackgrounds?: ReadonlyArray<
     Readonly<{
       color?: ProcessedColorValue | null;
@@ -74,18 +74,20 @@ export interface NativeProps extends ViewProps {
   >;
 
   // Number properties - use 0 as default to avoid nil insertion
-  maxContentHeight?: WithDefault<Double, 0>;
-  maxContentWidth?: WithDefault<Double, 0>;
-  cornerRadius?: WithDefault<Double, -1>;
-  elevation?: WithDefault<Double, -1>;
+  maxContentHeight?: CodegenTypes.WithDefault<CodegenTypes.Double, 0>;
+  maxContentWidth?: CodegenTypes.WithDefault<CodegenTypes.Double, 0>;
+  cornerRadius?: CodegenTypes.WithDefault<CodegenTypes.Double, -1>;
+  elevation?: CodegenTypes.WithDefault<CodegenTypes.Double, -1>;
 
   // Color properties
   backgroundColor?: ColorValue;
-  initialDetentIndex?: WithDefault<Int32, -1>;
-  dimmedDetentIndex?: WithDefault<Int32, 0>;
+  initialDetentIndex?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
+  dimColor?: ColorValue;
+  dimOpacity?: CodegenTypes.WithDefault<CodegenTypes.Double, -1>;
+  dimmedDetentIndex?: CodegenTypes.WithDefault<CodegenTypes.Int32, 0>;
 
   // String properties - use empty string as default to avoid nil insertion
-  backgroundBlur?: WithDefault<
+  backgroundBlur?: CodegenTypes.WithDefault<
     | 'none'
     | 'light'
     | 'dark'
@@ -111,43 +113,46 @@ export interface NativeProps extends ViewProps {
     'none'
   >;
 
-  placement?: WithDefault<'automatic' | 'leading' | 'center' | 'trailing', 'automatic'>;
-  placementOffset?: WithDefault<Double, 16>;
-  insetAdjustment?: WithDefault<'automatic' | 'never', 'automatic'>;
-  dismissThreshold?: WithDefault<'half' | 'short', 'half'>;
+  placement?: CodegenTypes.WithDefault<
+    'automatic' | 'leading' | 'center' | 'trailing',
+    'automatic'
+  >;
+  placementOffset?: CodegenTypes.WithDefault<CodegenTypes.Double, 16>;
+  insetAdjustment?: CodegenTypes.WithDefault<'automatic' | 'never', 'automatic'>;
+  dismissThreshold?: CodegenTypes.WithDefault<'half' | 'short', 'half'>;
 
   // Boolean properties - match defaults from TrueSheet.types.ts
-  grabber?: WithDefault<boolean, true>;
+  grabber?: CodegenTypes.WithDefault<boolean, true>;
   grabberOptions?: GrabberOptionsType;
   accessibilityOptions?: AccessibilityOptionsType;
-  dismissible?: WithDefault<boolean, true>;
-  draggable?: WithDefault<boolean, true>;
-  dimmed?: WithDefault<boolean, true>;
-  initialDetentAnimated?: WithDefault<boolean, true>;
+  dismissible?: CodegenTypes.WithDefault<boolean, true>;
+  draggable?: CodegenTypes.WithDefault<boolean, true>;
+  dimmed?: CodegenTypes.WithDefault<boolean, true>;
+  initialDetentAnimated?: CodegenTypes.WithDefault<boolean, true>;
   // React tag of the scrollable component within the content (see scrollableRef)
-  scrollableHandle?: WithDefault<Int32, -1>;
+  scrollableHandle?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
   scrollableOptions?: ScrollableOptionsType;
   headerOptions?: HeaderOptionsType;
   footerOptions?: FooterOptionsType;
-  presentation?: WithDefault<'page' | 'form', 'page'>;
+  presentation?: CodegenTypes.WithDefault<'page' | 'form', 'page'>;
 
   // Event handlers
-  onMount?: DirectEventHandler<null>;
-  onWillPresent?: DirectEventHandler<DetentInfoEventPayload>;
-  onDidPresent?: DirectEventHandler<DetentInfoEventPayload>;
-  onWillDismiss?: DirectEventHandler<null>;
-  onDidDismiss?: DirectEventHandler<null>;
-  onDismissAttempt?: DirectEventHandler<null>;
-  onDetentChange?: DirectEventHandler<DetentInfoEventPayload>;
-  onDragBegin?: DirectEventHandler<DetentInfoEventPayload>;
-  onDragChange?: DirectEventHandler<DetentInfoEventPayload>;
-  onDragEnd?: DirectEventHandler<DetentInfoEventPayload>;
-  onPositionChange?: DirectEventHandler<PositionChangeEventPayload>;
-  onWillFocus?: DirectEventHandler<null>;
-  onDidFocus?: DirectEventHandler<null>;
-  onWillBlur?: DirectEventHandler<null>;
-  onDidBlur?: DirectEventHandler<null>;
-  onVisibilityChange?: DirectEventHandler<Readonly<{ visible: boolean }>>;
+  onMount?: CodegenTypes.DirectEventHandler<null>;
+  onWillPresent?: CodegenTypes.DirectEventHandler<DetentInfoEventPayload>;
+  onDidPresent?: CodegenTypes.DirectEventHandler<DetentInfoEventPayload>;
+  onWillDismiss?: CodegenTypes.DirectEventHandler<null>;
+  onDidDismiss?: CodegenTypes.DirectEventHandler<null>;
+  onDismissAttempt?: CodegenTypes.DirectEventHandler<null>;
+  onDetentChange?: CodegenTypes.DirectEventHandler<DetentInfoEventPayload>;
+  onDragBegin?: CodegenTypes.DirectEventHandler<DetentInfoEventPayload>;
+  onDragChange?: CodegenTypes.DirectEventHandler<DetentInfoEventPayload>;
+  onDragEnd?: CodegenTypes.DirectEventHandler<DetentInfoEventPayload>;
+  onPositionChange?: CodegenTypes.DirectEventHandler<PositionChangeEventPayload>;
+  onWillFocus?: CodegenTypes.DirectEventHandler<null>;
+  onDidFocus?: CodegenTypes.DirectEventHandler<null>;
+  onWillBlur?: CodegenTypes.DirectEventHandler<null>;
+  onDidBlur?: CodegenTypes.DirectEventHandler<null>;
+  onVisibilityChange?: CodegenTypes.DirectEventHandler<Readonly<{ visible: boolean }>>;
 }
 
 export default codegenNativeComponent<NativeProps>('TrueSheetView', {

package/src/navigation/createTrueSheetRouter.ts

@@ -1,4 +1,4 @@
-import { TrueSheetActions } from './actions';
+import { TrueSheetActions, type TrueSheetActionType } from './actions';
 import type { TrueSheetRouter, TrueSheetRouterFactory, TrueSheetRouterOptions } from './types';
 
 const uid = () => Math.random().toString(36).slice(2, 10);
@@ -31,6 +31,151 @@ const ensureBaseRoute = <T extends { routes: { name: string }[] }>(
   return state as T & { index: number; routes: T['routes'] };
 };
 
+type SheetRoute = {
+  key: string;
+  name: string;
+  closing?: boolean;
+  dismissing?: boolean;
+  resizeIndex?: number;
+  resizeKey?: number;
+};
+type SheetState = { key: string; index: number; routes: SheetRoute[] };
+
+/**
+ * Index of the route a `RESIZE` targets: the dispatching screen, else the focused route.
+ */
+export const getResizeRouteIndex = (
+  state: SheetState,
+  action: { source?: string; target?: string }
+): number =>
+  action.target === state.key && action.source
+    ? state.routes.findIndex((r) => r.key === action.source)
+    : state.index;
+
+/**
+ * Reduces the sheet-specific actions shared by every router flavour.
+ * Returns `undefined` for actions the base `StackRouter` should handle.
+ */
+export const getTrueSheetStateForAction = <State extends SheetState>(
+  state: State,
+  action: TrueSheetActionType
+): State | null | undefined => {
+  switch (action.type) {
+    case 'RESIZE': {
+      const routeIndex = getResizeRouteIndex(state, action);
+
+      return {
+        ...state,
+        routes: state.routes.map((route, i) =>
+          i === routeIndex
+            ? {
+                ...route,
+                resizeIndex: action.index,
+                resizeKey: (route.resizeKey ?? 0) + 1,
+              }
+            : route
+        ),
+      };
+    }
+
+    case 'GO_BACK':
+    case 'DISMISS': {
+      return getTrueSheetStateForAction(state, TrueSheetActions.pop(1));
+    }
+
+    case 'POP': {
+      // Only base screen remains - let parent navigator handle it
+      if (state.routes.length <= 1) {
+        return null;
+      }
+
+      const count =
+        'payload' in action && typeof action.payload?.count === 'number' ? action.payload.count : 1;
+
+      // Calculate how many routes we can actually pop (don't pop base screen)
+      const maxPopCount = state.routes.length - 1;
+      const actualCount = Math.min(count, maxPopCount);
+
+      // Base screen - let parent navigator handle it
+      if (actualCount <= 0) {
+        return null;
+      }
+
+      // Target index is the route we want to stay on (land on after pop)
+      // closingIndex is the first route to be dismissed (the one after target)
+      const targetIndex = state.routes.length - 1 - actualCount;
+      const closingIndex = targetIndex + 1;
+
+      // Mark only the bottom-most route to pop as closing
+      // The sheet's dismiss() will handle dismissing sheets above it first
+      return {
+        ...state,
+        index: closingIndex,
+        routes: state.routes.map((route, i) => {
+          if (i === closingIndex) return { ...route, closing: true };
+          if (i > closingIndex) return { ...route, dismissing: true };
+          return route;
+        }),
+      };
+    }
+
+    case 'POP_TO_TOP': {
+      const popCount = state.routes.length - 1;
+      return getTrueSheetStateForAction(state, TrueSheetActions.pop(popCount));
+    }
+
+    case 'POP_TO': {
+      const targetName =
+        'payload' in action && typeof action.payload?.name === 'string'
+          ? action.payload.name
+          : null;
+
+      if (!targetName) {
+        return null;
+      }
+
+      const targetIndex = state.routes.findIndex((r) => r.name === targetName);
+
+      // Target not found or is the current route
+      if (targetIndex === -1 || targetIndex >= state.index) {
+        return null;
+      }
+
+      const popCount = state.routes.length - 1 - targetIndex;
+      return getTrueSheetStateForAction(state, TrueSheetActions.pop(popCount));
+    }
+
+    case 'REMOVE': {
+      // Actually remove the closing route and all routes above it
+      const routeKey = action.source;
+      const routeIndex = routeKey
+        ? state.routes.findIndex((r) => r.key === routeKey)
+        : state.routes.findIndex((r) => r.closing);
+
+      if (routeIndex === -1) {
+        return state;
+      }
+
+      // Remove the route and the routes dismissed with it. A popped route keeps the
+      // routes pushed after the pop started: they aren't stacked on it natively.
+      const removed = state.routes[routeIndex]!;
+      const isPopped = removed.closing || removed.dismissing;
+      const routes = state.routes.filter(
+        (route, i) => i < routeIndex || (i > routeIndex && isPopped && !route.dismissing)
+      );
+
+      return {
+        ...state,
+        index: Math.min(state.index, routes.length - 1),
+        routes,
+      };
+    }
+
+    default:
+      return undefined;
+  }
+};
+
 export const createTrueSheetRouter =
   (stackRouter: TrueSheetRouterFactory) =>
   (routerOptions: TrueSheetRouterOptions): TrueSheetRouter => {
@@ -54,118 +199,9 @@ export const createTrueSheetRouter =
       },
 
       getStateForAction(state, action, options) {
-        switch (action.type) {
-          case 'RESIZE': {
-            const routeIndex =
-              action.target === state.key && action.source
-                ? state.routes.findIndex((r) => r.key === action.source)
-                : state.index;
-
-            return {
-              ...state,
-              routes: state.routes.map((route, i) =>
-                i === routeIndex
-                  ? {
-                      ...route,
-                      resizeIndex: action.index,
-                      resizeKey: (route.resizeKey ?? 0) + 1,
-                    }
-                  : route
-              ),
-            };
-          }
-
-          case 'GO_BACK':
-          case 'DISMISS': {
-            return this.getStateForAction(state, TrueSheetActions.pop(1), options);
-          }
-
-          case 'POP': {
-            // Only base screen remains - let parent navigator handle it
-            if (state.routes.length <= 1) {
-              return null;
-            }
-
-            const count =
-              'payload' in action && typeof action.payload?.count === 'number'
-                ? action.payload.count
-                : 1;
-
-            // Calculate how many routes we can actually pop (don't pop base screen)
-            const maxPopCount = state.routes.length - 1;
-            const actualCount = Math.min(count, maxPopCount);
-
-            // Base screen - let parent navigator handle it
-            if (actualCount <= 0) {
-              return null;
-            }
-
-            // Target index is the route we want to stay on (land on after pop)
-            // closingIndex is the first route to be dismissed (the one after target)
-            const targetIndex = state.routes.length - 1 - actualCount;
-            const closingIndex = targetIndex + 1;
-
-            // Mark only the bottom-most route to pop as closing
-            // The sheet's dismiss() will handle dismissing sheets above it first
-            return {
-              ...state,
-              index: closingIndex,
-              routes: state.routes.map((route, i) =>
-                i === closingIndex ? { ...route, closing: true } : route
-              ),
-            };
-          }
-
-          case 'POP_TO_TOP': {
-            const popCount = state.routes.length - 1;
-            return this.getStateForAction(state, TrueSheetActions.pop(popCount), options);
-          }
-
-          case 'POP_TO': {
-            const targetName =
-              'payload' in action && typeof action.payload?.name === 'string'
-                ? action.payload.name
-                : null;
-
-            if (!targetName) {
-              return null;
-            }
-
-            const targetIndex = state.routes.findIndex((r) => r.name === targetName);
-
-            // Target not found or is the current route
-            if (targetIndex === -1 || targetIndex >= state.index) {
-              return null;
-            }
-
-            const popCount = state.routes.length - 1 - targetIndex;
-            return this.getStateForAction(state, TrueSheetActions.pop(popCount), options);
-          }
-
-          case 'REMOVE': {
-            // Actually remove the closing route and all routes above it
-            const routeKey = action.source;
-            const routeIndex = routeKey
-              ? state.routes.findIndex((r) => r.key === routeKey)
-              : state.routes.findIndex((r) => r.closing);
-
-            if (routeIndex === -1) {
-              return state;
-            }
-
-            // Remove the route and all routes above it (they were dismissed together)
-            const routes = state.routes.filter((_, i) => i < routeIndex);
-
-            return {
-              ...state,
-              index: Math.min(state.index, routes.length - 1),
-              routes,
-            };
-          }
-
-          default:
-            return baseRouter.getStateForAction(state, action, options);
-        }
+        const result = getTrueSheetStateForAction(state, action);
+
+        return result === undefined ? baseRouter.getStateForAction(state, action, options) : result;
       },
 
       getRehydratedState(partialState, { routeNames, routeParamList, routeGetIdList }) {

package/src/navigation/expo-router/extendTrueSheetRouter.ts

@@ -0,0 +1,71 @@
+import { TrueSheetActions, type TrueSheetActionType } from '../actions';
+import { getResizeRouteIndex, getTrueSheetStateForAction } from '../createTrueSheetRouter';
+import type { StackRouterFactory, TrueSheetRouterFactory, TrueSheetRouterState } from './types';
+
+type ActionResult = { state: TrueSheetRouterState; affectedRouteKey?: string };
+
+type RouterExtension = (context: {
+  baseRouter: {
+    getStateForAction(
+      state: TrueSheetRouterState,
+      action: TrueSheetActionType,
+      options: object
+    ): ActionResult | null;
+  };
+  options: { initialRouteName?: string };
+}) => object;
+
+/**
+ * `extendRouter` from Expo Router 58+. Declared locally because the
+ * Expo Router types this package builds against predate it.
+ */
+export type ExtendRouter = (
+  base: StackRouterFactory,
+  extension: RouterExtension,
+  options: { type: string }
+) => TrueSheetRouterFactory;
+
+/**
+ * Router for Expo Router 58+, where navigator state is seeded by Expo Router
+ * (no `getInitialState`/`getRehydratedState`) and `getStateForAction` returns
+ * `{ state, affectedRouteKey }`.
+ */
+export const extendTrueSheetRouter = (
+  extendRouter: ExtendRouter,
+  stackRouter: StackRouterFactory
+): TrueSheetRouterFactory =>
+  extendRouter(
+    stackRouter,
+    ({ baseRouter, options }) => {
+      if (__DEV__ && options.initialRouteName === undefined) {
+        console.warn(
+          "TrueSheet: this Sheet layout has no `unstable_settings.anchor`. On Expo Router 58+, a sheet route opened directly (deep link or push from another navigator) renders without its base screen. Export `unstable_settings = { anchor: '<base route>' }` from the layout."
+        );
+      }
+
+      return {
+        getStateForAction(
+          state: TrueSheetRouterState,
+          action: TrueSheetActionType,
+          config: object
+        ): ActionResult | null {
+          const result = getTrueSheetStateForAction(state, action);
+
+          if (result === undefined) {
+            return baseRouter.getStateForAction(state, action, config);
+          }
+
+          if (result === null) {
+            return null;
+          }
+
+          const affectedIndex =
+            action.type === 'RESIZE' ? getResizeRouteIndex(state, action) : result.index;
+
+          return { state: result, affectedRouteKey: result.routes[affectedIndex]?.key };
+        },
+        actionCreators: TrueSheetActions,
+      };
+    },
+    { type: 'true-sheet' }
+  );

package/src/navigation/expo-router/index.ts

@@ -1,8 +1,10 @@
+import * as ExpoRouter from 'expo-router';
 import { StackRouter, unstable_integrateWithRouter, useNavigation } from 'expo-router';
 
 import { createTrueSheetRouter } from '../createTrueSheetRouter';
 import { trueSheetNavigator } from '../navigator';
 import type { ParamListBase } from './base-types';
+import { extendTrueSheetRouter, type ExtendRouter } from './extendTrueSheetRouter';
 import type {
   StackRouterFactory,
   TrueSheetNavigationOptions,
@@ -15,12 +17,18 @@ import type {
   TrueSheetStandardEventMap,
 } from './types';
 
-// expo-router's vendored StackRouter is structurally identical to @react-navigation's.
-// Pinned to this entry's own router types: `createTrueSheetRouter` is shared and typed
-// against React Navigation, which resolves to `any` in apps that only install expo-router.
-const sheetRouter: TrueSheetRouterFactory = createTrueSheetRouter(
-  StackRouter as StackRouterFactory
-);
+// Expo Router 58+ replaced the React Navigation router contract and ships `extendRouter`
+// for it. Before that, the vendored StackRouter is structurally identical to
+// @react-navigation's. Pinned to this entry's own router types: `createTrueSheetRouter` is
+// shared and typed against React Navigation, which resolves to `any` in apps that only
+// install expo-router.
+const extendRouter = (ExpoRouter as Record<string, unknown>).extendRouter as
+  | ExtendRouter
+  | undefined;
+
+const sheetRouter: TrueSheetRouterFactory = extendRouter
+  ? extendTrueSheetRouter(extendRouter, StackRouter as StackRouterFactory)
+  : createTrueSheetRouter(StackRouter as StackRouterFactory);
 
 // `routes`/`dispatch` are injected by `createProps`, so they are declared as
 // CreateProps (last generic) and excluded from the public navigator props

package/src/navigation/expo-router/types.ts

@@ -50,7 +50,7 @@ export type TrueSheetRoute = TrueSheetNavigationState<ParamListBase>['routes'][n
 
 /**
  * Props injected into the navigator content by Expo Router's `createProps`.
- * Raw routes carry the custom fields (`closing`, `resizeIndex`, `resizeKey`)
+ * Raw routes carry the custom fields (`closing`, `dismissing`, `resizeIndex`, `resizeKey`)
  * that the standard state strips out.
  */
 export interface TrueSheetNavigatorContentExtraProps {

package/src/navigation/types.ts

@@ -96,6 +96,8 @@ export type TrueSheetStateOf<State extends { routes: readonly unknown[] }> = Omi
     resizeIndex?: number;
     resizeKey?: number;
     closing?: boolean;
+    // Stacked above a `closing` route and dismissed natively with it
+    dismissing?: boolean;
   })[];
 };
 
@@ -151,7 +153,7 @@ export type TrueSheetEmitFn = NavigatorArgs<
 /**
  * Props injected into the navigator content by each adapter
  * (React Navigation's `mapper` / Expo Router's `createProps`).
- * Raw routes carry the custom fields (`closing`, `resizeIndex`, `resizeKey`)
+ * Raw routes carry the custom fields (`closing`, `dismissing`, `resizeIndex`, `resizeKey`)
  * that the standard state strips out.
  */
 export interface TrueSheetNavigatorContentExtraProps {
@@ -216,6 +218,8 @@ export type TrueSheetNavigationSheetProps = Pick<
   | 'grabberOptions'
   | 'accessibilityOptions'
   | 'dimmed'
+  | 'dimColor'
+  | 'dimOpacity'
   | 'dimmedDetentIndex'
   | 'backgroundBlur'
   | 'maxContentHeight'

package/src/scrollable.ts

@@ -0,0 +1,25 @@
+const ACCESSORS = ['getScrollableNode', 'getNativeScrollRef'] as const;
+
+// Resolves a `scrollableRef` value to its scroll node: a native tag on native,
+// a DOM node on web. Imperative-handle lists (e.g. LegendList, FlashList) are
+// not host components, so they go through the accessors ScrollView/FlatList
+// also expose. A composite result is resolved again until it yields a tag or
+// host node. `getScrollResponder` is skipped: it returns the ScrollView class
+// instance, which findNodeHandle resolves to its first host child (the
+// SwipeRefreshLayout on Android when a refreshControl is set).
+export function resolveScrollable(scrollable: unknown): unknown {
+  if (!scrollable || typeof scrollable !== 'object') return scrollable;
+  for (const name of ACCESSORS) {
+    const accessor = (scrollable as Record<string, unknown>)[name];
+    if (typeof accessor !== 'function') continue;
+    let node: unknown;
+    try {
+      node = accessor.call(scrollable);
+    } catch {
+      // e.g. LegendList forwarding to a custom scroll component that lacks it
+      continue;
+    }
+    if (node != null && node !== scrollable) return resolveScrollable(node);
+  }
+  return scrollable;
+}