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

package/src/fabric/TrueSheetViewNativeComponent.ts

@@ -35,7 +35,9 @@ type BlurOptionsType = Readonly<{
 type ScrollEdgeEffect = 'automatic' | 'hard' | 'soft' | 'hidden';
 
 type ScrollableOptionsType = Readonly<{
+  contentInsetAdjustmentBehavior?: WithDefault<boolean, true>;
   keyboardScrollOffset?: WithDefault<Double, 0>;
+  keyboardOffset?: WithDefault<Double, 0>;
   scrollingExpandsSheet?: WithDefault<boolean, true>;
   topScrollEdgeEffect?: WithDefault<ScrollEdgeEffect, 'hidden'>;
   bottomScrollEdgeEffect?: WithDefault<ScrollEdgeEffect, 'hidden'>;
@@ -122,6 +124,8 @@ export interface NativeProps extends ViewProps {
   draggable?: WithDefault<boolean, true>;
   dimmed?: WithDefault<boolean, true>;
   initialDetentAnimated?: WithDefault<boolean, true>;
+  // React tag of the scrollable component within the content (see scrollableRef)
+  scrollableHandle?: WithDefault<Int32, -1>;
   scrollableOptions?: ScrollableOptionsType;
   headerOptions?: HeaderOptionsType;
   footerOptions?: FooterOptionsType;
@@ -133,6 +137,7 @@ export interface NativeProps extends ViewProps {
   onDidPresent?: DirectEventHandler<DetentInfoEventPayload>;
   onWillDismiss?: DirectEventHandler<null>;
   onDidDismiss?: DirectEventHandler<null>;
+  onDismissAttempt?: DirectEventHandler<null>;
   onDetentChange?: DirectEventHandler<DetentInfoEventPayload>;
   onDragBegin?: DirectEventHandler<DetentInfoEventPayload>;
   onDragChange?: DirectEventHandler<DetentInfoEventPayload>;

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './TrueSheet';
 export * from './TrueSheet.types';
 export { TrueSheetPeek } from './TrueSheetPeek';
+export { TrueSheetOverlay } from './TrueSheetOverlay';
 export { TrueSheetProvider, useTrueSheet } from './TrueSheetProvider';

package/src/mocks/index.ts

@@ -66,6 +66,13 @@ export function TrueSheetPeek({ children, ...rest }: ViewProps) {
   return React.createElement(View, rest, children);
 }
 
+/**
+ * Mock TrueSheetOverlay component for testing.
+ */
+export function TrueSheetOverlay({ children, ...rest }: ViewProps) {
+  return React.createElement(View, rest, children);
+}
+
 /**
  * Mock TrueSheetProvider for testing.
  */

package/src/mocks/navigation.ts

@@ -12,6 +12,11 @@ export const createTrueSheetNavigator = jest.fn(() => ({
   Group: jest.fn(() => null),
 }));
 
+/**
+ * Mock createTrueSheetScreen for testing the static API.
+ */
+export const createTrueSheetScreen = jest.fn((config: object) => config);
+
 /**
  * Mock TrueSheetActions for testing.
  */
@@ -35,32 +40,34 @@ export const TrueSheetActions = {
 /**
  * Mock useTrueSheetNavigation hook for testing.
  */
-export const useTrueSheetNavigation = jest.fn(
-  <T extends ParamListBase = ParamListBase>() =>
-    ({
-      navigate: jest.fn(),
-      goBack: jest.fn(),
-      reset: jest.fn(),
-      setParams: jest.fn(),
-      dispatch: jest.fn(),
-      isFocused: jest.fn(() => true),
-      canGoBack: jest.fn(() => true),
-      getId: jest.fn(),
-      getParent: jest.fn(),
-      getState: jest.fn(),
-      addListener: jest.fn(() => jest.fn()),
-      removeListener: jest.fn(),
-      setOptions: jest.fn(),
-      push: jest.fn(),
-      pop: jest.fn(),
-      popTo: jest.fn(),
-      popToTop: jest.fn(),
-      replace: jest.fn(),
-      resize: jest.fn(),
-    }) as unknown as TrueSheetNavigationProp<T>
-);
+export const useTrueSheetNavigation = jest.fn(<T extends ParamListBase = ParamListBase>() => {
+  // Partial drops react-navigation's private-brand member (PrivateValueStore),
+  // which no mock can implement — the members themselves stay type-checked.
+  const navigation: Partial<TrueSheetNavigationProp<T>> = {
+    navigate: jest.fn(),
+    goBack: jest.fn(),
+    reset: jest.fn(),
+    setParams: jest.fn(),
+    dispatch: jest.fn(),
+    isFocused: jest.fn(() => true),
+    canGoBack: jest.fn(() => true),
+    getId: jest.fn(),
+    getParent: jest.fn(),
+    getState: jest.fn(),
+    addListener: jest.fn(() => jest.fn()),
+    removeListener: jest.fn(),
+    setOptions: jest.fn(),
+    push: jest.fn(),
+    pop: jest.fn(),
+    popTo: jest.fn(),
+    popToTop: jest.fn(),
+    replace: jest.fn(),
+    resize: jest.fn(),
+  };
+  return navigation as TrueSheetNavigationProp<T>;
+});
 
-export type { TrueSheetActionType } from '../navigation/TrueSheetRouter';
+export type { TrueSheetActionType } from '../navigation/actions';
 export type { DetentInfoEventPayload, PositionChangeEventPayload } from '../TrueSheet.types';
 export type {
   TrueSheetNavigationEventMap,

package/src/mocks/navigationExpoRouter.ts

@@ -0,0 +1,41 @@
+import type { ParamListBase } from '../navigation/expo-router/base-types';
+import type { TrueSheetNavigationProp } from '../navigation/expo-router/types';
+import {
+  TrueSheetActions,
+  useTrueSheetNavigation as useTrueSheetNavigationMock,
+} from './navigation';
+
+/**
+ * Mock Sheet layout for testing.
+ * Import from '@lodev09/react-native-true-sheet/navigation/expo-router/mock' in your test setup.
+ */
+export const Sheet = Object.assign(
+  jest.fn(({ children }: { children: React.ReactNode }) => children),
+  {
+    Screen: jest.fn(() => null),
+    Protected: jest.fn(() => null),
+  }
+);
+
+/**
+ * Mock useTrueSheetNavigation hook for testing.
+ */
+export const useTrueSheetNavigation = jest.fn(
+  // Double cast: the shared mock is typed against React Navigation, this entry
+  // against Expo Router's vendored copy — identical shapes, unrelated declarations
+  <T extends ParamListBase = ParamListBase>(): TrueSheetNavigationProp<T> =>
+    useTrueSheetNavigationMock() as unknown as TrueSheetNavigationProp<T>
+);
+
+export { TrueSheetActions };
+
+export type { TrueSheetActionType } from '../navigation/actions';
+export type { DetentInfoEventPayload, PositionChangeEventPayload } from '../TrueSheet.types';
+export type {
+  TrueSheetNavigationEventMap,
+  TrueSheetNavigationHelpers,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationProp,
+  TrueSheetNavigationState,
+  TrueSheetScreenProps,
+} from '../navigation/expo-router/types';

package/src/mocks/reanimated.ts

@@ -14,15 +14,14 @@ interface MockReanimatedTrueSheetContextValue {
   animatedDetent: SharedValue<number>;
 }
 
-const createMockSharedValue = <T>(initialValue: T): SharedValue<T> =>
-  ({
-    value: initialValue,
-    get: () => initialValue,
-    set: () => {},
-    addListener: () => () => {},
-    removeListener: () => {},
-    modify: () => {},
-  }) as unknown as SharedValue<T>;
+const createMockSharedValue = <T>(initialValue: T): SharedValue<T> => ({
+  value: initialValue,
+  get: () => initialValue,
+  set: () => {},
+  addListener: () => {},
+  removeListener: () => {},
+  modify: () => {},
+});
 
 /**
  * Mock ReanimatedTrueSheet component for testing.

package/src/navigation/{TrueSheetView.tsx → TrueSheetNavigatorContent.tsx}

@@ -1,9 +1,9 @@
-import type { ParamListBase } from '@react-navigation/core';
+import type { NavigatorArgs } from 'standard-navigation';
 
 import type {
-  TrueSheetDescriptorMap,
-  TrueSheetNavigationHelpers,
-  TrueSheetNavigationState,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigatorContentExtraProps,
+  TrueSheetStandardEventMap,
 } from './types';
 import { TrueSheetScreen, type TrueSheetScreenProps } from './screen';
 
@@ -22,15 +22,22 @@ const DEFAULT_DETENTS: ('auto' | number)[] = ['auto'];
 const clampDetentIndex = (index: number, detentsLength: number): number =>
   Math.min(index, Math.max(detentsLength - 1, 0));
 
-interface TrueSheetViewProps {
-  state: TrueSheetNavigationState<ParamListBase>;
-  navigation: TrueSheetNavigationHelpers;
-  descriptors: TrueSheetDescriptorMap;
-}
+export type TrueSheetNavigatorContentProps = NavigatorArgs<
+  TrueSheetNavigationOptions,
+  TrueSheetStandardEventMap
+> &
+  TrueSheetNavigatorContentExtraProps;
 
-export const TrueSheetView = ({ state, navigation, descriptors }: TrueSheetViewProps) => {
-  // First route is the base screen, rest are sheets
-  const [baseRoute, ...sheetRoutes] = state.routes;
+export const TrueSheetNavigatorContent = ({
+  routes,
+  dispatch,
+  descriptors,
+  emitter,
+}: TrueSheetNavigatorContentProps) => {
+  // First route is the base screen, rest are sheets.
+  // Rendered from the raw routes (not the standard state) so custom fields are
+  // available and preloaded routes never present as sheets.
+  const [baseRoute, ...sheetRoutes] = routes;
 
   const baseDescriptor = baseRoute ? descriptors[baseRoute.key] : null;
 
@@ -47,7 +54,7 @@ export const TrueSheetView = ({ state, navigation, descriptors }: TrueSheetViewP
           return null;
         }
 
-        const { options, navigation: screenNavigation, render } = descriptor;
+        const { options, render } = descriptor;
         const {
           detentIndex = 0,
           detents = DEFAULT_DETENTS,
@@ -67,8 +74,8 @@ export const TrueSheetView = ({ state, navigation, descriptors }: TrueSheetViewP
               detentIndex={resolvedIndex}
               resizeKey={route.resizeKey}
               detents={detents}
-              navigation={screenNavigation}
-              emit={navigation.emit}
+              dispatch={dispatch}
+              emit={emitter.emit}
               positionChangeHandler={positionChangeHandler}
               {...sheetProps}
             >
@@ -85,8 +92,8 @@ export const TrueSheetView = ({ state, navigation, descriptors }: TrueSheetViewP
             detentIndex={resolvedIndex}
             resizeKey={route.resizeKey}
             detents={detents}
-            navigation={screenNavigation}
-            emit={navigation.emit}
+            dispatch={dispatch}
+            emit={emitter.emit}
             positionChangeHandler={positionChangeHandler}
             {...sheetProps}
           >

package/src/navigation/actions.ts

@@ -0,0 +1,78 @@
+export type TrueSheetActionType =
+  | {
+      type: 'PUSH';
+      payload: { name: string; params?: object };
+      source?: string;
+      target?: string;
+    }
+  | {
+      type: 'POP';
+      payload: { count: number };
+      source?: string;
+      target?: string;
+    }
+  | {
+      type: 'POP_TO';
+      payload: { name: string; params?: object; merge?: boolean };
+      source?: string;
+      target?: string;
+    }
+  | {
+      type: 'POP_TO_TOP';
+      source?: string;
+      target?: string;
+    }
+  | {
+      type: 'REPLACE';
+      payload: { name: string; params?: object };
+      source?: string;
+      target?: string;
+    }
+  | {
+      type: 'GO_BACK';
+      source?: string;
+      target?: string;
+    }
+  | {
+      type: 'RESIZE';
+      index: number;
+      source?: string;
+      target?: string;
+    }
+  | {
+      type: 'DISMISS';
+      source?: string;
+      target?: string;
+    }
+  | {
+      type: 'REMOVE';
+      source?: string;
+      target?: string;
+    };
+
+/**
+ * Action creators for the TrueSheet navigator.
+ * Plain objects matching `StackActions` shapes, plus sheet-specific actions.
+ */
+export const TrueSheetActions = {
+  push: (name: string, params?: object): TrueSheetActionType => ({
+    type: 'PUSH',
+    payload: { name, params },
+  }),
+  pop: (count: number = 1): TrueSheetActionType => ({
+    type: 'POP',
+    payload: { count },
+  }),
+  popTo: (name: string, params?: object, options?: { merge?: boolean }): TrueSheetActionType => ({
+    type: 'POP_TO',
+    payload: { name, params, merge: options?.merge },
+  }),
+  popToTop: (): TrueSheetActionType => ({ type: 'POP_TO_TOP' }),
+  replace: (name: string, params?: object): TrueSheetActionType => ({
+    type: 'REPLACE',
+    payload: { name, params },
+  }),
+  resize: (index: number): TrueSheetActionType => ({ type: 'RESIZE', index }),
+  dismiss: (): TrueSheetActionType => ({ type: 'DISMISS' }),
+  remove: (): TrueSheetActionType => ({ type: 'REMOVE' }),
+};

package/src/navigation/base-types.ts

@@ -0,0 +1,20 @@
+/**
+ * Base navigation types for the React Navigation entry point.
+ *
+ * The Expo Router entry has its own copy sourced from `expo-router/react-navigation`
+ * (see `./expo-router/base-types`) because Expo Router apps never install
+ * `@react-navigation/*` — importing it there would silently resolve to `any`.
+ */
+export type {
+  DefaultNavigatorOptions,
+  Descriptor,
+  NavigationAction,
+  NavigationHelpers,
+  NavigationProp,
+  NavigationState,
+  ParamListBase,
+  RouteProp,
+  Router,
+  StackActionHelpers,
+  StackRouterOptions,
+} from '@react-navigation/core';

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';