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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lodev09/react-native-true-sheet",
-  "version": "4.0.0-beta.22",
+  "version": "4.0.0-beta.24",
   "description": "The true native bottom sheet experience for your React Native Apps.",
   "source": "./src/index.ts",
   "main": "./lib/module/index.js",
@@ -53,6 +53,7 @@
   "scripts": {
     "bare": "yarn workspace @example/bare",
     "expo": "yarn workspace @example/expo",
+    "expo-58": "yarn workspace @example/expo-58",
     "docs": "yarn workspace docs",
     "test": "jest",
     "typecheck": "tsc",
@@ -128,9 +129,7 @@
   },
   "resolutions": {
     "@types/react": "~19.2.14",
-    "react-native-reanimated": "4.5.1",
-    "react-native-worklets": "0.10.1",
-    "react-native-screens": "patch:react-native-screens@npm%3A4.26.2#~/.yarn/patches/react-native-screens-npm-4.26.2.patch"
+    "react-native-screens@npm:^4.26.0": "patch:react-native-screens@npm%3A4.26.2#~/.yarn/patches/react-native-screens-npm-4.26.2.patch"
   },
   "peerDependencies": {
     "@radix-ui/react-dialog": ">=1",
@@ -173,6 +172,7 @@
   "workspaces": [
     "example/bare",
     "example/expo",
+    "example/expo-58",
     "example/shared",
     "docs"
   ],
@@ -188,6 +188,7 @@
     "modulePathIgnorePatterns": [
       "<rootDir>/example/bare/node_modules",
       "<rootDir>/example/expo/node_modules",
+      "<rootDir>/example/expo-58/node_modules",
       "<rootDir>/example/shared/node_modules",
       "<rootDir>/lib/",
       "<rootDir>/docs/node_modules",

package/src/TrueSheet.tsx

@@ -197,7 +197,9 @@ export class TrueSheet
     let scrollableHandle: number | null = null;
     if (scrollableRef?.current) {
       try {
-        scrollableHandle = findNodeHandle(scrollableRef.current);
+        scrollableHandle = findNodeHandle(
+          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.

package/src/TrueSheet.types.ts

@@ -1,6 +1,7 @@
 import type { Component, ComponentType, ReactElement, ReactNode, RefObject } from 'react';
 import type {
   ColorValue,
+  HostInstance,
   NativeSyntheticEvent,
   StyleProp,
   ViewProps,
@@ -689,7 +690,7 @@ export interface TrueSheetProps extends ViewProps {
    * </TrueSheet>
    * ```
    */
-  scrollableRef?: RefObject<Component<unknown> | null>;
+  scrollableRef?: RefObject<Component<unknown> | HostInstance | null>;
 
   /**
    * Options for scrollable behavior.

package/src/fabric/TrueSheetFooterViewNativeComponent.ts

@@ -1,12 +1,11 @@
-import type { ViewProps } from 'react-native';
-import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+import type { CodegenTypes, ViewProps } from 'react-native';
 import { codegenNativeComponent } from 'react-native';
 
 export interface NativeProps extends ViewProps {
   // Seeds the footer's first layout with the sheet's bottom safe-area inset
   // (insetAdjustment: 'automatic') so a late-set footer doesn't need a second
   // layout pass — and a visible sheet resize — once native pushes the inset
-  autoBottomInset?: WithDefault<boolean, false>;
+  autoBottomInset?: CodegenTypes.WithDefault<boolean, false>;
 }
 
 // interfaceOnly: shadow node/state/descriptor are custom (common/cpp) so the

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,18 @@ 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>;
+  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 +111,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' }
+  );