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

package/src/mocks/navigation.ts

@@ -0,0 +1,72 @@
+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 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>() =>
+    ({
+      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 type { TrueSheetActionType } from '../navigation/TrueSheetRouter';
+export type { DetentInfoEventPayload, PositionChangeEventPayload } from '../TrueSheet.types';
+export type {
+  TrueSheetNavigationEventMap,
+  TrueSheetNavigationHelpers,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationProp,
+  TrueSheetNavigationState,
+  TrueSheetScreenProps,
+} from '../navigation/types';

package/src/mocks/reanimated.ts

@@ -0,0 +1,101 @@
+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: () => {},
+  }) as unknown as SharedValue<T>;
+
+/**
+ * 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/TrueSheetRouter.ts

@@ -0,0 +1,234 @@
+import { nanoid } from 'nanoid/non-secure';
+import {
+  type CommonActions,
+  type ParamListBase,
+  type Router,
+  StackRouter,
+  type StackActionType,
+  StackActions,
+  type StackRouterOptions,
+} from '@react-navigation/core';
+
+import type { TrueSheetNavigationState } from './types';
+
+export type TrueSheetRouterOptions = StackRouterOptions;
+
+export type TrueSheetActionType =
+  | StackActionType
+  | ReturnType<typeof CommonActions.goBack>
+  | {
+      type: 'RESIZE';
+      index: number;
+      source?: string;
+      target?: string;
+    }
+  | {
+      type: 'DISMISS';
+      source?: string;
+      target?: string;
+    }
+  | {
+      type: 'REMOVE';
+      source?: string;
+      target?: string;
+    };
+
+export const TrueSheetActions = {
+  ...StackActions,
+  resize: (index: number): TrueSheetActionType => ({ type: 'RESIZE', index }),
+  dismiss: (): TrueSheetActionType => ({ type: 'DISMISS' }),
+  remove: (): TrueSheetActionType => ({ type: 'REMOVE' }),
+};
+
+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}-${nanoid()}`,
+      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 TrueSheetRouter = (
+  routerOptions: StackRouterOptions
+): Router<TrueSheetNavigationState<ParamListBase>, TrueSheetActionType> => {
+  const baseRouter = StackRouter(routerOptions) as unknown as Router<
+    TrueSheetNavigationState<ParamListBase>,
+    TrueSheetActionType
+  >;
+
+  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-${nanoid()}`,
+      };
+    },
+
+    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, StackActions.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, StackActions.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, StackActions.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-${nanoid()}`,
+      };
+    },
+
+    actionCreators: TrueSheetActions,
+  };
+};

package/src/navigation/TrueSheetView.tsx

@@ -0,0 +1,99 @@
+import type { ParamListBase } from '@react-navigation/core';
+
+import type {
+  TrueSheetDescriptorMap,
+  TrueSheetNavigationHelpers,
+  TrueSheetNavigationState,
+} 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));
+
+interface TrueSheetViewProps {
+  state: TrueSheetNavigationState<ParamListBase>;
+  navigation: TrueSheetNavigationHelpers;
+  descriptors: TrueSheetDescriptorMap;
+}
+
+export const TrueSheetView = ({ state, navigation, descriptors }: TrueSheetViewProps) => {
+  // First route is the base screen, rest are sheets
+  const [baseRoute, ...sheetRoutes] = state.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, navigation: screenNavigation, 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}
+              navigation={screenNavigation}
+              emit={navigation.emit}
+              positionChangeHandler={positionChangeHandler}
+              {...sheetProps}
+            >
+              {render()}
+            </ReanimatedScreen>
+          );
+        }
+
+        return (
+          <TrueSheetScreen
+            key={route.key}
+            routeKey={route.key}
+            closing={route.closing}
+            detentIndex={resolvedIndex}
+            resizeKey={route.resizeKey}
+            detents={detents}
+            navigation={screenNavigation}
+            emit={navigation.emit}
+            positionChangeHandler={positionChangeHandler}
+            {...sheetProps}
+          >
+            {render()}
+          </TrueSheetScreen>
+        );
+      })}
+    </>
+  );
+};

package/src/navigation/createTrueSheetNavigator.tsx

@@ -0,0 +1,93 @@
+import {
+  createNavigatorFactory,
+  type NavigatorTypeBagBase,
+  type ParamListBase,
+  type StaticConfig,
+  type TypedNavigator,
+  useNavigationBuilder,
+} from '@react-navigation/core';
+
+import { TrueSheetRouter, type TrueSheetRouterOptions } from './TrueSheetRouter';
+import { TrueSheetView } from './TrueSheetView';
+import type {
+  TrueSheetActionHelpers,
+  TrueSheetNavigationEventMap,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationProp,
+  TrueSheetNavigationState,
+  TrueSheetNavigatorProps,
+} from './types';
+
+const TrueSheetNavigator = ({
+  id,
+  initialRouteName,
+  children,
+  layout,
+  screenListeners,
+  screenOptions,
+  screenLayout,
+}: TrueSheetNavigatorProps) => {
+  const { state, descriptors, navigation, NavigationContent } = useNavigationBuilder<
+    TrueSheetNavigationState<ParamListBase>,
+    TrueSheetRouterOptions,
+    TrueSheetActionHelpers<ParamListBase>,
+    TrueSheetNavigationOptions,
+    TrueSheetNavigationEventMap
+  >(TrueSheetRouter, {
+    id,
+    initialRouteName,
+    children,
+    layout,
+    screenListeners,
+    screenOptions,
+    screenLayout,
+  });
+
+  return (
+    <NavigationContent>
+      <TrueSheetView state={state} navigation={navigation} descriptors={descriptors} />
+    </NavigationContent>
+  );
+};
+
+/**
+ * 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 = <
+  const ParamList extends ParamListBase,
+  const NavigatorID extends string | undefined = undefined,
+  const TypeBag extends NavigatorTypeBagBase = {
+    ParamList: ParamList;
+    NavigatorID: NavigatorID;
+    State: TrueSheetNavigationState<ParamList>;
+    ScreenOptions: TrueSheetNavigationOptions;
+    EventMap: TrueSheetNavigationEventMap;
+    NavigationList: {
+      [RouteName in keyof ParamList]: TrueSheetNavigationProp<ParamList, RouteName, NavigatorID>;
+    };
+    Navigator: typeof TrueSheetNavigator;
+  },
+  const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
+>(
+  config?: Config
+): TypedNavigator<TypeBag, Config> => {
+  return createNavigatorFactory(TrueSheetNavigator)(config);
+};

package/src/navigation/index.ts

@@ -0,0 +1,14 @@
+export { createTrueSheetNavigator } from './createTrueSheetNavigator';
+export { TrueSheetActions, type TrueSheetActionType } from './TrueSheetRouter';
+export { useTrueSheetNavigation } from './useTrueSheetNavigation';
+
+export type { DetentInfoEventPayload, PositionChangeEventPayload } from '../TrueSheet.types';
+
+export type {
+  TrueSheetNavigationEventMap,
+  TrueSheetNavigationHelpers,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationProp,
+  TrueSheetNavigationState,
+  TrueSheetScreenProps,
+} from './types';

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,
+  navigation,
+  emit,
+  routeKey,
+  closing,
+  detents,
+  children,
+  positionChangeHandler,
+  ...sheetProps
+}: TrueSheetScreenProps) => {
+  const {
+    ref,
+    initialDetentIndex,
+    eventHandlers: { onPositionChange, ...eventHandlers },
+  } = useSheetScreenState({
+    detentIndex,
+    resizeKey,
+    closing,
+    navigation,
+    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>
+  );
+};