@lodev09/react-native-true-sheet 4.0.0-beta.0 → 4.0.0-beta.10

package/src/navigation/createTrueSheetRouter.ts

@@ -0,0 +1,194 @@
+import { TrueSheetActions } from './actions';
+import type { TrueSheetRouter, TrueSheetRouterFactory, TrueSheetRouterOptions } from './types';
+
+const uid = () => Math.random().toString(36).slice(2, 10);
+
+const ensureBaseRoute = <T extends { routes: { name: string }[] }>(
+  state: T,
+  baseRouteName: string | undefined,
+  routeParamList: Record<string, object | undefined> | undefined
+): T & { index: number; routes: T['routes'] } => {
+  if (!baseRouteName) {
+    return state as T & { index: number; routes: T['routes'] };
+  }
+
+  const hasBaseRoute = state.routes.some((r) => r.name === baseRouteName);
+
+  if (!hasBaseRoute) {
+    const baseRoute = {
+      key: `${baseRouteName}-${uid()}`,
+      name: baseRouteName,
+      params: routeParamList?.[baseRouteName],
+    };
+
+    return {
+      ...state,
+      index: state.routes.length,
+      routes: [baseRoute, ...state.routes],
+    } as T & { index: number; routes: T['routes'] };
+  }
+
+  return state as T & { index: number; routes: T['routes'] };
+};
+
+export const createTrueSheetRouter =
+  (stackRouter: TrueSheetRouterFactory) =>
+  (routerOptions: TrueSheetRouterOptions): TrueSheetRouter => {
+    const baseRouter = stackRouter(routerOptions);
+
+    return {
+      ...baseRouter,
+      type: 'true-sheet',
+
+      getInitialState(options) {
+        const state = baseRouter.getInitialState(options);
+        const baseRouteName = routerOptions.initialRouteName ?? options.routeNames[0];
+        const stateWithBaseRoute = ensureBaseRoute(state, baseRouteName, options.routeParamList);
+
+        return {
+          ...stateWithBaseRoute,
+          stale: false,
+          type: 'true-sheet',
+          key: `true-sheet-${uid()}`,
+        };
+      },
+
+      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);
+        }
+      },
+
+      getRehydratedState(partialState, { routeNames, routeParamList, routeGetIdList }) {
+        if (partialState.stale === false) {
+          return partialState;
+        }
+
+        const state = baseRouter.getRehydratedState(partialState, {
+          routeNames,
+          routeParamList,
+          routeGetIdList,
+        });
+
+        const baseRouteName = routerOptions.initialRouteName ?? routeNames[0];
+        const stateWithBaseRoute = ensureBaseRoute(state, baseRouteName, routeParamList);
+
+        return {
+          ...stateWithBaseRoute,
+          type: 'true-sheet',
+          key: `true-sheet-${uid()}`,
+        };
+      },
+
+      actionCreators: TrueSheetActions,
+    };
+  };

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/index.ts

@@ -0,0 +1,90 @@
+import { StackRouter, unstable_integrateWithRouter, useNavigation } from 'expo-router';
+
+import { createTrueSheetRouter } from '../createTrueSheetRouter';
+import { trueSheetNavigator } from '../navigator';
+import type { ParamListBase } from './base-types';
+import type {
+  StackRouterFactory,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationProp,
+  TrueSheetNavigationState,
+  TrueSheetNavigatorContentExtraProps,
+  TrueSheetNavigatorProps,
+  TrueSheetRouterFactory,
+  TrueSheetRouterOptions,
+  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
+);
+
+const SheetNavigator = unstable_integrateWithRouter<
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationState<ParamListBase>,
+  TrueSheetStandardEventMap,
+  TrueSheetNavigatorContentExtraProps,
+  TrueSheetRouterOptions
+>(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'>> &
+  Pick<TrueSheetNavigatorProps, 'screenListeners'>;
+
+/**
+ * TrueSheet navigator layout for Expo Router.
+ *
+ * @example
+ * ```tsx
+ * // app/sheet/_layout.tsx
+ * import { Sheet } from '@lodev09/react-native-true-sheet/navigation/expo-router';
+ *
+ * export default function SheetLayout() {
+ *   return (
+ *     <Sheet initialRouteName="(home)">
+ *       <Sheet.Screen name="details" options={{ detents: [0.5, 1] }} />
+ *     </Sheet>
+ *   );
+ * }
+ * ```
+ */
+export const Sheet = SheetNavigator as React.ComponentType<SheetProps> & {
+  Screen: typeof SheetNavigator.Screen;
+  Protected: typeof SheetNavigator.Protected;
+};
+
+/**
+ * Hook to access TrueSheet navigation with the resize helper.
+ * Built on expo-router's `useNavigation`.
+ */
+export const useTrueSheetNavigation = <
+  T extends ParamListBase = ParamListBase,
+>(): TrueSheetNavigationProp<T> => useNavigation<TrueSheetNavigationProp<T>>();
+
+export { TrueSheetActions, type TrueSheetActionType } from '../actions';
+
+export type { DetentInfoEventPayload, PositionChangeEventPayload } from '../../TrueSheet.types';
+
+export type {
+  TrueSheetNavigationEventMap,
+  TrueSheetNavigationHelpers,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationProp,
+  TrueSheetNavigationState,
+  TrueSheetScreenProps,
+} from './types';

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

@@ -0,0 +1,116 @@
+/**
+ * Expo Router flavour of `../types`: same shapes, but bound to Expo Router's
+ * vendored React Navigation types so apps that only install `expo-router` still
+ * get real types instead of `any` — see `./base-types`.
+ */
+import type { TrueSheetActionType } from '../actions';
+import type {
+  TrueSheetActionHelpersOf,
+  TrueSheetDispatch,
+  TrueSheetNavigationEventMap,
+  TrueSheetNavigationOptions,
+  TrueSheetStateOf,
+} from '../types';
+import type {
+  DefaultNavigatorOptions,
+  NavigationAction,
+  NavigationHelpers,
+  NavigationProp,
+  NavigationState,
+  ParamListBase,
+  RouteProp,
+  Router,
+  StackActionHelpers,
+  StackRouterOptions,
+} from './base-types';
+
+export type TrueSheetRouterOptions = StackRouterOptions;
+
+export type TrueSheetNavigationState<ParamList extends ParamListBase> = TrueSheetStateOf<
+  NavigationState<ParamList>
+>;
+
+export type TrueSheetRouterState = TrueSheetNavigationState<ParamListBase>;
+
+export type TrueSheetRouter = Router<TrueSheetRouterState, TrueSheetActionType>;
+
+export type TrueSheetRouterFactory = (options: TrueSheetRouterOptions) => TrueSheetRouter;
+
+/**
+ * The base `StackRouter` factory to wrap — see `../types` for the shared contract.
+ */
+export type StackRouterFactory = <
+  State extends NavigationState<ParamListBase>,
+  Action extends NavigationAction,
+>(
+  options: TrueSheetRouterOptions
+) => Router<State, Action>;
+
+export type TrueSheetRoute = TrueSheetNavigationState<ParamListBase>['routes'][number];
+
+/**
+ * Props injected into the navigator content by Expo Router's `createProps`.
+ * Raw routes carry the custom fields (`closing`, `resizeIndex`, `resizeKey`)
+ * that the standard state strips out.
+ */
+export interface TrueSheetNavigatorContentExtraProps {
+  routes: TrueSheetRoute[];
+  dispatch: TrueSheetDispatch;
+}
+
+export type TrueSheetActionHelpers<ParamList extends ParamListBase> = TrueSheetActionHelpersOf<
+  StackActionHelpers<ParamList>
+>;
+
+export type TrueSheetNavigationProp<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = string,
+  NavigatorID extends string | undefined = undefined,
+> = NavigationProp<
+  ParamList,
+  RouteName,
+  NavigatorID,
+  TrueSheetNavigationState<ParamList>,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationEventMap
+> &
+  TrueSheetActionHelpers<ParamList>;
+
+export type TrueSheetScreenProps<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = string,
+  NavigatorID extends string | undefined = undefined,
+> = {
+  navigation: TrueSheetNavigationProp<ParamList, RouteName, NavigatorID>;
+  route: RouteProp<ParamList, RouteName>;
+};
+
+export type TrueSheetNavigationHelpers = NavigationHelpers<
+  ParamListBase,
+  TrueSheetNavigationEventMap
+>;
+
+export type TrueSheetNavigatorProps = DefaultNavigatorOptions<
+  ParamListBase,
+  string | undefined,
+  TrueSheetNavigationState<ParamListBase>,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationEventMap,
+  unknown
+> & {
+  /**
+   * The name of the route to use as the base screen.
+   * This screen will be rendered as a regular screen, while other screens are presented as sheets.
+   * Defaults to the first screen defined in the navigator.
+   */
+  initialRouteName?: string;
+};
+
+export type {
+  PositionChangeHandler,
+  TrueSheetDispatch,
+  TrueSheetNavigationEventMap,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationSheetProps,
+  TrueSheetStandardEventMap,
+} from '../types';

package/src/navigation/index.ts

@@ -0,0 +1,80 @@
+import {
+  createStandardNavigationFactories,
+  StackRouter,
+  type StandardNavigationTypeBagBase,
+} from '@react-navigation/native';
+
+import { createTrueSheetRouter } from './createTrueSheetRouter';
+import { trueSheetNavigator } from './navigator';
+import type {
+  StackRouterFactory,
+  TrueSheetActionHelpers,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationEventMap,
+  TrueSheetNavigationState,
+  TrueSheetNavigatorContentExtraProps,
+  TrueSheetRouterOptions,
+} from './types';
+
+export interface TrueSheetNavigationTypeBag extends StandardNavigationTypeBagBase {
+  State: TrueSheetNavigationState<this['ParamList']>;
+  ActionHelpers: TrueSheetActionHelpers<this['ParamList']>;
+  ScreenOptions: TrueSheetNavigationOptions;
+  EventMap: TrueSheetNavigationEventMap;
+  RouterOptions: TrueSheetRouterOptions;
+}
+
+const { createNavigator, createScreen } = createStandardNavigationFactories<
+  TrueSheetNavigationTypeBag,
+  {},
+  TrueSheetNavigatorContentExtraProps
+>(
+  trueSheetNavigator,
+  createTrueSheetRouter(StackRouter as StackRouterFactory),
+  ({ state, navigation }) => ({ routes: state.routes, dispatch: navigation.dispatch })
+);
+
+/**
+ * Creates a TrueSheet navigator.
+ *
+ * @example
+ * ```tsx
+ * const Sheet = createTrueSheetNavigator();
+ *
+ * function App() {
+ *   return (
+ *     <Sheet.Navigator>
+ *       <Sheet.Screen name="Home" component={HomeScreen} />
+ *       <Sheet.Screen
+ *         name="Details"
+ *         component={DetailsSheet}
+ *         options={{ detents: [0.5, 1] }}
+ *       />
+ *     </Sheet.Navigator>
+ *   );
+ * }
+ * ```
+ */
+export const createTrueSheetNavigator = createNavigator;
+
+/**
+ * Creates a screen configuration for the static API.
+ */
+export const createTrueSheetScreen = createScreen;
+
+export { TrueSheetActions, type TrueSheetActionType } from './actions';
+export { createTrueSheetRouter } from './createTrueSheetRouter';
+export { useTrueSheetNavigation } from './useTrueSheetNavigation';
+
+export type { DetentInfoEventPayload, PositionChangeEventPayload } from '../TrueSheet.types';
+
+export type {
+  StackRouterFactory,
+  TrueSheetNavigationEventMap,
+  TrueSheetNavigationHelpers,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationProp,
+  TrueSheetNavigationState,
+  TrueSheetRouterOptions,
+  TrueSheetScreenProps,
+} from './types';

package/src/navigation/navigator.ts

@@ -0,0 +1,18 @@
+import { createStandardNavigator } from 'standard-navigation';
+
+import { TrueSheetNavigatorContent } from './TrueSheetNavigatorContent';
+import type {
+  TrueSheetNavigationOptions,
+  TrueSheetNavigatorContentExtraProps,
+  TrueSheetStandardEventMap,
+} from './types';
+
+/**
+ * Framework-agnostic TrueSheet navigator.
+ * Wired into React Navigation via `./index` and Expo Router via `./expo-router`.
+ */
+export const trueSheetNavigator = createStandardNavigator<
+  TrueSheetNavigationOptions,
+  TrueSheetStandardEventMap,
+  TrueSheetNavigatorContentExtraProps
+>(TrueSheetNavigatorContent);

package/src/navigation/screen/ReanimatedTrueSheetScreen.tsx

@@ -0,0 +1,61 @@
+import Animated from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+
+import { useReanimatedPositionChangeHandler } from '../../reanimated';
+import { TrueSheet } from '../../TrueSheet';
+import type { PositionChangeEvent } from '../../TrueSheet.types';
+import type { TrueSheetScreenProps } from './types';
+import { useSheetScreenState } from './useSheetScreenState';
+
+const AnimatedTrueSheet = Animated.createAnimatedComponent(TrueSheet);
+
+export const ReanimatedTrueSheetScreen = ({
+  detentIndex,
+  resizeKey,
+  dispatch,
+  emit,
+  routeKey,
+  closing,
+  detents,
+  children,
+  positionChangeHandler,
+  ...sheetProps
+}: TrueSheetScreenProps) => {
+  const {
+    ref,
+    initialDetentIndex,
+    eventHandlers: { onPositionChange, ...eventHandlers },
+  } = useSheetScreenState({
+    detentIndex,
+    resizeKey,
+    closing,
+    dispatch,
+    routeKey,
+    emit,
+  });
+
+  const reanimatedPositionChangeHandler = useReanimatedPositionChangeHandler(
+    (payload) => {
+      'worklet';
+      positionChangeHandler?.(payload);
+      scheduleOnRN(onPositionChange, {
+        nativeEvent: payload,
+      } as PositionChangeEvent);
+    },
+    [onPositionChange, positionChangeHandler]
+  );
+
+  return (
+    <AnimatedTrueSheet
+      ref={ref}
+      name={`navigation-sheet-${routeKey}`}
+      initialDetentIndex={initialDetentIndex}
+      detents={detents}
+      onPositionChange={reanimatedPositionChangeHandler}
+      {...sheetProps}
+      {...eventHandlers}
+    >
+      {children}
+    </AnimatedTrueSheet>
+  );
+};

package/src/navigation/screen/TrueSheetScreen.tsx

@@ -0,0 +1,54 @@
+import { useCallback } from 'react';
+
+import { TrueSheet } from '../../TrueSheet';
+import type { PositionChangeEvent } from '../../TrueSheet.types';
+import type { TrueSheetScreenProps } from './types';
+import { useSheetScreenState } from './useSheetScreenState';
+
+export const TrueSheetScreen = ({
+  detentIndex,
+  resizeKey,
+  dispatch,
+  emit,
+  routeKey,
+  closing,
+  detents,
+  children,
+  positionChangeHandler,
+  ...sheetProps
+}: TrueSheetScreenProps) => {
+  const {
+    ref,
+    initialDetentIndex,
+    eventHandlers: { onPositionChange, ...eventHandlers },
+  } = useSheetScreenState({
+    detentIndex,
+    resizeKey,
+    closing,
+    dispatch,
+    routeKey,
+    emit,
+  });
+
+  const handlePositionChange = useCallback(
+    (e: PositionChangeEvent) => {
+      onPositionChange(e);
+      positionChangeHandler?.(e.nativeEvent);
+    },
+    [onPositionChange, positionChangeHandler]
+  );
+
+  return (
+    <TrueSheet
+      ref={ref}
+      name={`navigation-sheet-${routeKey}`}
+      initialDetentIndex={initialDetentIndex}
+      detents={detents}
+      onPositionChange={handlePositionChange}
+      {...sheetProps}
+      {...eventHandlers}
+    >
+      {children}
+    </TrueSheet>
+  );
+};

package/src/navigation/screen/index.ts

@@ -0,0 +1,3 @@
+export { TrueSheetScreen } from './TrueSheetScreen';
+export { useSheetScreenState } from './useSheetScreenState';
+export type { TrueSheetScreenProps } from './types';

package/src/navigation/screen/types.ts

@@ -0,0 +1,19 @@
+import type { TrueSheetProps } from '../../TrueSheet.types';
+import type {
+  PositionChangeHandler,
+  TrueSheetDispatch,
+  TrueSheetEmitFn,
+  TrueSheetNavigationSheetProps,
+} from '../types';
+
+export interface TrueSheetScreenProps extends TrueSheetNavigationSheetProps {
+  detentIndex: number;
+  resizeKey?: number;
+  dispatch: TrueSheetDispatch;
+  emit: TrueSheetEmitFn;
+  routeKey: string;
+  closing?: boolean;
+  detents: TrueSheetProps['detents'];
+  children: React.ReactNode;
+  positionChangeHandler?: PositionChangeHandler;
+}