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

package/src/navigation/createTrueSheetRouter.ts

@@ -1,29 +1,10 @@
-import type {
-  NavigationAction,
-  NavigationState,
-  ParamListBase,
-  Router,
-  StackRouterOptions,
-} from '@react-navigation/core';
-
 import { TrueSheetActions, type TrueSheetActionType } from './actions';
-import type { TrueSheetNavigationState } from './types';
-
-export type TrueSheetRouterOptions = StackRouterOptions;
-
-/**
- * The base `StackRouter` factory to wrap, typed generically over the state and
- * action types the wrapper threads through — `StackRouter` is structural and
- * never touches the sheet-specific fields.
- * Injected by each entry point so the shared router never imports
- * `@react-navigation/*` at runtime (Expo Router apps don't install it).
- */
-export type StackRouterFactory = <
-  State extends NavigationState<ParamListBase>,
-  Action extends NavigationAction,
->(
-  options: TrueSheetRouterOptions
-) => Router<State, Action>;
+import type {
+  TrueSheetRouter,
+  TrueSheetRouterFactory,
+  TrueSheetRouterOptions,
+  TrueSheetRouterState,
+} from './types';
 
 const uid = () => Math.random().toString(36).slice(2, 10);
 
@@ -55,14 +36,211 @@ 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.
+      // The index stays on the top sheet until REMOVE: Expo Router 58 treats the routes
+      // after `index` as preloaded.
+      return {
+        ...state,
+        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;
+  }
+};
+
+const BASE_ROUTE_ACTIONS = new Set([
+  'NAVIGATE',
+  'NAVIGATE_DEPRECATED',
+  'PUSH',
+  'REPLACE',
+  'POP_TO',
+]);
+
+/**
+ * Reduces an action that targets the base route by name. React Navigation 7 adds another base
+ * route for a `PUSH`, a `REPLACE` or a `NAVIGATE` without `pop`, which presents the base screen
+ * as a sheet, and this router's `POP_TO` drops the params and nested state. This goes back to it
+ * instead: `getPoppedState` reduces the action as a `NAVIGATE` with `pop` (a `PUSH` ignores
+ * `pop`) to update the base route (params, nested state), then the sheets above it are dismissed.
+ * Returns `undefined` for other actions, a `REPLACE` with no sheet (it swaps the base route), or
+ * when the base router doesn't land on the base route.
+ */
+export const getStateForNavigateToBase = <State extends SheetState>(
+  state: State,
+  action: TrueSheetActionType,
+  getPoppedState: (action: TrueSheetActionType) => State | null | undefined
+): State | undefined => {
+  const { type, payload } = action as { type: string; payload?: { name?: string } };
+  const baseRoute = state.routes[0]!;
+  const hasSheets = state.routes.length > 1;
+
+  if (
+    !BASE_ROUTE_ACTIONS.has(type) ||
+    payload?.name !== baseRoute.name ||
+    (type === 'REPLACE' && !hasSheets)
+  ) {
+    return undefined;
+  }
+
+  const popped = getPoppedState({
+    ...action,
+    type: 'NAVIGATE',
+    payload: { ...payload, pop: true },
+  } as unknown as TrueSheetActionType);
+  const base = popped?.routes[popped.index];
+
+  if (base?.key !== baseRoute.key) {
+    return undefined;
+  }
+
+  if (!hasSheets) {
+    return popped!;
+  }
+
+  return getTrueSheetStateForAction(
+    { ...state, routes: [base, ...state.routes.slice(1)] },
+    TrueSheetActions.pop(state.routes.length - 1)
+  )!;
+};
+
 export const createTrueSheetRouter =
-  (stackRouter: StackRouterFactory) =>
-  (
-    routerOptions: TrueSheetRouterOptions
-  ): Router<TrueSheetNavigationState<ParamListBase>, TrueSheetActionType> => {
-    const baseRouter = stackRouter<TrueSheetNavigationState<ParamListBase>, TrueSheetActionType>(
-      routerOptions
-    );
+  (stackRouter: TrueSheetRouterFactory) =>
+  (routerOptions: TrueSheetRouterOptions): TrueSheetRouter => {
+    const baseRouter = stackRouter(routerOptions);
 
     return {
       ...baseRouter,
@@ -82,118 +260,16 @@ 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 =
+          getStateForNavigateToBase(
+            state,
+            action,
+            // NAVIGATE never returns a partial state
+            (popAction) =>
+              baseRouter.getStateForAction(state, popAction, options) as TrueSheetRouterState | null
+          ) ?? getTrueSheetStateForAction(state, action);
+
+        return result === undefined ? baseRouter.getStateForAction(state, action, options) : result;
       },
 
       getRehydratedState(partialState, { routeNames, routeParamList, routeGetIdList }) {

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

@@ -0,0 +1,18 @@
+/**
+ * Base navigation types for the Expo Router entry point.
+ *
+ * Sourced from Expo Router's vendored React Navigation so apps that only install
+ * `expo-router` still get real types — see `../base-types` for the React Navigation copy.
+ */
+export type {
+  DefaultNavigatorOptions,
+  NavigationAction,
+  NavigationHelpers,
+  NavigationProp,
+  NavigationState,
+  ParamListBase,
+  RouteProp,
+  Router,
+  StackActionHelpers,
+  StackRouterOptions,
+} from 'expo-router/react-navigation';

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

@@ -0,0 +1,99 @@
+import { TrueSheetActions, type TrueSheetActionType } from '../actions';
+import {
+  getResizeRouteIndex,
+  getStateForNavigateToBase,
+  getTrueSheetStateForAction,
+} from '../createTrueSheetRouter';
+import type { StackRouterFactory, TrueSheetRouterFactory, TrueSheetRouterState } from './types';
+
+type ActionResult = { state: TrueSheetRouterState; affectedRouteKey?: string };
+
+/**
+ * `RouterActionHandling.Unhandled` from Expo Router 58+, which deprecates `null`.
+ */
+export type Unhandled = 'UNHANDLED';
+
+type RouterExtension = (context: {
+  baseRouter: {
+    getStateForAction(
+      state: TrueSheetRouterState,
+      action: TrueSheetActionType,
+      options: object
+    ): ActionResult | Unhandled;
+  };
+  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,
+  unhandled: Unhandled
+): 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 | Unhandled {
+          const { type, payload } = action as { type: string; payload?: { name?: string } };
+
+          // Expo Router keeps preloaded routes in `routes`, and the navigator presents every
+          // route there as a sheet. A parent navigator's route bubbles up to it, as in a `Stack`.
+          if (type === 'PRELOAD') {
+            return payload?.name && state.routeNames.includes(payload.name) ? { state } : unhandled;
+          }
+
+          const navigated = getStateForNavigateToBase(state, action, (popAction) => {
+            const popped = baseRouter.getStateForAction(state, popAction, config);
+            return popped === unhandled ? undefined : popped.state;
+          });
+
+          // Expo Router resolves the destination's nested state in the affected route
+          if (navigated) {
+            return { state: navigated, affectedRouteKey: navigated.routes[0]?.key };
+          }
+
+          const result = getTrueSheetStateForAction(state, action);
+
+          if (result === undefined) {
+            return baseRouter.getStateForAction(state, action, config);
+          }
+
+          if (result === null) {
+            return unhandled;
+          }
+
+          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,48 +1,59 @@
-import type { ParamListBase } from '@react-navigation/core';
+import * as ExpoRouter from 'expo-router';
 import { StackRouter, unstable_integrateWithRouter, useNavigation } from 'expo-router';
 
-import {
-  createTrueSheetRouter,
-  type StackRouterFactory,
-  type TrueSheetRouterOptions,
-} from '../createTrueSheetRouter';
+import { createTrueSheetRouter } from '../createTrueSheetRouter';
 import { trueSheetNavigator } from '../navigator';
+import type { ParamListBase } from './base-types';
+import { extendTrueSheetRouter, type ExtendRouter, type Unhandled } from './extendTrueSheetRouter';
 import type {
+  StackRouterFactory,
   TrueSheetNavigationOptions,
   TrueSheetNavigationProp,
   TrueSheetNavigationState,
   TrueSheetNavigatorContentExtraProps,
   TrueSheetNavigatorProps,
+  TrueSheetRouterFactory,
+  TrueSheetRouterOptions,
   TrueSheetStandardEventMap,
-} from '../types';
+} from './types';
 
+// Expo Router 58+ replaced the React Navigation router contract and ships `extendRouter`
+// and `RouterActionHandling` 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, RouterActionHandling } = ExpoRouter as {
+  extendRouter?: ExtendRouter;
+  RouterActionHandling?: { Unhandled: Unhandled };
+};
+
+const sheetRouter: TrueSheetRouterFactory = extendRouter
+  ? extendTrueSheetRouter(
+      extendRouter,
+      StackRouter as StackRouterFactory,
+      RouterActionHandling!.Unhandled
+    )
+  : 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
 const SheetNavigator = unstable_integrateWithRouter<
   TrueSheetNavigationOptions,
   TrueSheetNavigationState<ParamListBase>,
   TrueSheetStandardEventMap,
-  TrueSheetNavigatorContentExtraProps,
-  TrueSheetRouterOptions
->(
-  trueSheetNavigator,
-  // expo-router's vendored StackRouter is structurally identical to @react-navigation's
-  createTrueSheetRouter(StackRouter as StackRouterFactory),
-  {
-    createProps: ({ state, dispatch }) => ({
-      routes: state.routes,
-      dispatch,
-    }),
-  }
-);
+  object,
+  TrueSheetRouterOptions,
+  TrueSheetNavigatorContentExtraProps
+>(trueSheetNavigator, sheetRouter, {
+  createProps: ({ state, dispatch }) => ({
+    routes: state.routes,
+    dispatch,
+  }),
+});
 
-// Public props: `routes`/`dispatch` are injected by `createProps` (optional here
-// so the navigator type stays comparable), and expo-router intersects the event
-// map with an index signature which breaks precisely typed `screenListeners`
-// callbacks - replace it with the exact map
-type SheetProps = Omit<
-  React.ComponentProps<typeof SheetNavigator>,
-  'screenListeners' | 'routes' | 'dispatch'
-> &
-  Partial<Pick<React.ComponentProps<typeof SheetNavigator>, 'routes' | 'dispatch'>> &
+// expo-router intersects the event map with an index signature which breaks
+// precisely typed `screenListeners` callbacks - replace it with the exact map
+type SheetProps = Omit<React.ComponentProps<typeof SheetNavigator>, 'screenListeners'> &
   Pick<TrueSheetNavigatorProps, 'screenListeners'>;
 
 /**
@@ -86,4 +97,4 @@ export type {
   TrueSheetNavigationProp,
   TrueSheetNavigationState,
   TrueSheetScreenProps,
-} from '../types';
+} from './types';