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

package/src/mocks/index.ts

@@ -0,0 +1,96 @@
+import React, { createElement, isValidElement, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+
+import type { TrueSheetProps, TrueSheetStaticMethods } from '../TrueSheet.types';
+
+interface TrueSheetState {
+  shouldRenderNativeView: boolean;
+}
+
+/**
+ * Mock TrueSheet component for testing.
+ * Import from '@lodev09/react-native-true-sheet/mock' in your test setup.
+ */
+export class TrueSheet extends React.Component<TrueSheetProps, TrueSheetState> {
+  static instances: Record<string, TrueSheet> = {};
+
+  static dismiss = jest.fn((_name: string, _animated?: boolean) => Promise.resolve());
+  static dismissStack = jest.fn((_name: string, _animated?: boolean) => Promise.resolve());
+  static present = jest.fn((_name: string, _index?: number, _animated?: boolean) =>
+    Promise.resolve()
+  );
+  static resize = jest.fn((_name: string, _index: number) => Promise.resolve());
+  static dismissAll = jest.fn((_animated?: boolean) => Promise.resolve());
+
+  dismiss = jest.fn((_animated?: boolean) => Promise.resolve());
+  dismissStack = jest.fn((_animated?: boolean) => Promise.resolve());
+  present = jest.fn((_index?: number, _animated?: boolean) => Promise.resolve());
+  resize = jest.fn((_index: number) => Promise.resolve());
+
+  componentDidMount() {
+    const { name } = this.props;
+    if (name) {
+      TrueSheet.instances[name] = this;
+    }
+  }
+
+  componentWillUnmount() {
+    const { name } = this.props;
+    if (name) {
+      delete TrueSheet.instances[name];
+    }
+  }
+
+  private renderHeader(): ReactNode {
+    const { header } = this.props;
+    if (!header) return null;
+    return isValidElement(header) ? header : createElement(header);
+  }
+
+  private renderFooter(): ReactNode {
+    const { footer } = this.props;
+    if (!footer) return null;
+    return isValidElement(footer) ? footer : createElement(footer);
+  }
+
+  render() {
+    const { children, style } = this.props;
+    return React.createElement(View, { style }, this.renderHeader(), children, this.renderFooter());
+  }
+}
+
+/**
+ * Mock TrueSheetPeek component for testing.
+ */
+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.
+ */
+export function TrueSheetProvider({ children }: { children: React.ReactNode }) {
+  return children;
+}
+
+/**
+ * Mock useTrueSheet hook for testing.
+ */
+export function useTrueSheet(): TrueSheetStaticMethods {
+  return {
+    present: TrueSheet.present,
+    dismiss: TrueSheet.dismiss,
+    dismissStack: TrueSheet.dismissStack,
+    resize: TrueSheet.resize,
+    dismissAll: TrueSheet.dismissAll,
+  };
+}
+
+export * from '../TrueSheet.types';

package/src/mocks/navigation.ts

@@ -0,0 +1,79 @@
+import type { ParamListBase } from '@react-navigation/native';
+
+import type { TrueSheetNavigationProp } from '../navigation/types';
+
+/**
+ * Mock createTrueSheetNavigator for testing.
+ * Import from '@lodev09/react-native-true-sheet/navigation/mock' in your test setup.
+ */
+export const createTrueSheetNavigator = jest.fn(() => ({
+  Navigator: jest.fn(({ children }: { children: React.ReactNode }) => children),
+  Screen: jest.fn(() => null),
+  Group: jest.fn(() => null),
+}));
+
+/**
+ * Mock createTrueSheetScreen for testing the static API.
+ */
+export const createTrueSheetScreen = jest.fn((config: object) => config);
+
+/**
+ * Mock TrueSheetActions for testing.
+ */
+export const TrueSheetActions = {
+  push: jest.fn((name: string, params?: object) => ({ type: 'PUSH', payload: { name, params } })),
+  pop: jest.fn((count?: number) => ({ type: 'POP', payload: { count } })),
+  popTo: jest.fn((name: string, params?: object) => ({
+    type: 'POP_TO',
+    payload: { name, params },
+  })),
+  popToTop: jest.fn(() => ({ type: 'POP_TO_TOP' })),
+  replace: jest.fn((name: string, params?: object) => ({
+    type: 'REPLACE',
+    payload: { name, params },
+  })),
+  resize: jest.fn((index: number) => ({ type: 'RESIZE', index })),
+  dismiss: jest.fn(() => ({ type: 'DISMISS' })),
+  remove: jest.fn(() => ({ type: 'REMOVE' })),
+};
+
+/**
+ * Mock useTrueSheetNavigation hook for testing.
+ */
+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/actions';
+export type { DetentInfoEventPayload, PositionChangeEventPayload } from '../TrueSheet.types';
+export type {
+  TrueSheetNavigationEventMap,
+  TrueSheetNavigationHelpers,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationProp,
+  TrueSheetNavigationState,
+  TrueSheetScreenProps,
+} from '../navigation/types';

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

@@ -0,0 +1,100 @@
+import React, { createElement, isValidElement, type ReactNode } from 'react';
+import { View } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+
+import type { TrueSheetProps, PositionChangeEventPayload } from '../TrueSheet.types';
+
+interface TrueSheetState {
+  shouldRenderNativeView: boolean;
+}
+
+interface MockReanimatedTrueSheetContextValue {
+  animatedPosition: SharedValue<number>;
+  animatedIndex: SharedValue<number>;
+  animatedDetent: SharedValue<number>;
+}
+
+const createMockSharedValue = <T>(initialValue: T): SharedValue<T> => ({
+  value: initialValue,
+  get: () => initialValue,
+  set: () => {},
+  addListener: () => {},
+  removeListener: () => {},
+  modify: () => {},
+});
+
+/**
+ * Mock ReanimatedTrueSheet component for testing.
+ * Import from '@lodev09/react-native-true-sheet/reanimated/mock' in your test setup.
+ */
+export class ReanimatedTrueSheet extends React.Component<TrueSheetProps, TrueSheetState> {
+  static instances: Record<string, ReanimatedTrueSheet> = {};
+
+  static dismiss = jest.fn((_name: string, _animated?: boolean) => Promise.resolve());
+  static dismissStack = jest.fn((_name: string, _animated?: boolean) => Promise.resolve());
+  static present = jest.fn((_name: string, _index?: number, _animated?: boolean) =>
+    Promise.resolve()
+  );
+  static resize = jest.fn((_name: string, _index: number) => Promise.resolve());
+
+  dismiss = jest.fn((_animated?: boolean) => Promise.resolve());
+  dismissStack = jest.fn((_animated?: boolean) => Promise.resolve());
+  present = jest.fn((_index?: number, _animated?: boolean) => Promise.resolve());
+  resize = jest.fn((_index: number) => Promise.resolve());
+
+  componentDidMount() {
+    const { name } = this.props;
+    if (name) {
+      ReanimatedTrueSheet.instances[name] = this;
+    }
+  }
+
+  componentWillUnmount() {
+    const { name } = this.props;
+    if (name) {
+      delete ReanimatedTrueSheet.instances[name];
+    }
+  }
+
+  private renderHeader(): ReactNode {
+    const { header } = this.props;
+    if (!header) return null;
+    return isValidElement(header) ? header : createElement(header);
+  }
+
+  private renderFooter(): ReactNode {
+    const { footer } = this.props;
+    if (!footer) return null;
+    return isValidElement(footer) ? footer : createElement(footer);
+  }
+
+  render() {
+    const { children, style } = this.props;
+    return React.createElement(View, { style }, this.renderHeader(), children, this.renderFooter());
+  }
+}
+
+/**
+ * Mock ReanimatedTrueSheetProvider for testing.
+ */
+export function ReanimatedTrueSheetProvider({ children }: { children: React.ReactNode }) {
+  return children;
+}
+
+/**
+ * Mock useReanimatedTrueSheet hook for testing.
+ */
+export const useReanimatedTrueSheet = jest.fn(
+  (): MockReanimatedTrueSheetContextValue => ({
+    animatedPosition: createMockSharedValue(0),
+    animatedIndex: createMockSharedValue(-1),
+    animatedDetent: createMockSharedValue(0),
+  })
+);
+
+/**
+ * Mock useReanimatedPositionChangeHandler hook for testing.
+ */
+export const useReanimatedPositionChangeHandler = jest.fn(
+  (_handler: (payload: PositionChangeEventPayload) => void, _dependencies?: unknown[]) => jest.fn()
+);

package/src/navigation/TrueSheetNavigatorContent.tsx

@@ -0,0 +1,106 @@
+import type { NavigatorArgs } from 'standard-navigation';
+
+import type {
+  TrueSheetNavigationOptions,
+  TrueSheetNavigatorContentExtraProps,
+  TrueSheetStandardEventMap,
+} from './types';
+import { TrueSheetScreen, type TrueSheetScreenProps } from './screen';
+
+let ReanimatedTrueSheetScreen: React.ComponentType<TrueSheetScreenProps> | null = null;
+
+const getReanimatedScreen = (): React.ComponentType<TrueSheetScreenProps> => {
+  if (!ReanimatedTrueSheetScreen) {
+    ReanimatedTrueSheetScreen =
+      require('./screen/ReanimatedTrueSheetScreen').ReanimatedTrueSheetScreen;
+  }
+  return ReanimatedTrueSheetScreen!;
+};
+
+const DEFAULT_DETENTS: ('auto' | number)[] = ['auto'];
+
+const clampDetentIndex = (index: number, detentsLength: number): number =>
+  Math.min(index, Math.max(detentsLength - 1, 0));
+
+export type TrueSheetNavigatorContentProps = NavigatorArgs<
+  TrueSheetNavigationOptions,
+  TrueSheetStandardEventMap
+> &
+  TrueSheetNavigatorContentExtraProps;
+
+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;
+
+  return (
+    <>
+      {/* Render base screen */}
+      {baseDescriptor?.render()}
+
+      {/* Render sheet screens */}
+      {sheetRoutes.map((route) => {
+        const descriptor = descriptors[route.key];
+
+        if (!descriptor) {
+          return null;
+        }
+
+        const { options, render } = descriptor;
+        const {
+          detentIndex = 0,
+          detents = DEFAULT_DETENTS,
+          reanimated,
+          positionChangeHandler,
+          ...sheetProps
+        } = options;
+        const resolvedIndex = clampDetentIndex(route.resizeIndex ?? detentIndex, detents.length);
+
+        if (reanimated) {
+          const ReanimatedScreen = getReanimatedScreen();
+          return (
+            <ReanimatedScreen
+              key={route.key}
+              routeKey={route.key}
+              closing={route.closing}
+              detentIndex={resolvedIndex}
+              resizeKey={route.resizeKey}
+              detents={detents}
+              dispatch={dispatch}
+              emit={emitter.emit}
+              positionChangeHandler={positionChangeHandler}
+              {...sheetProps}
+            >
+              {render()}
+            </ReanimatedScreen>
+          );
+        }
+
+        return (
+          <TrueSheetScreen
+            key={route.key}
+            routeKey={route.key}
+            closing={route.closing}
+            detentIndex={resolvedIndex}
+            resizeKey={route.resizeKey}
+            detents={detents}
+            dispatch={dispatch}
+            emit={emitter.emit}
+            positionChangeHandler={positionChangeHandler}
+            {...sheetProps}
+          >
+            {render()}
+          </TrueSheetScreen>
+        );
+      })}
+    </>
+  );
+};

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