@lodev09/react-native-true-sheet 3.1.0-beta.8 → 3.1.0

package/src/navigation/TrueSheetView.tsx

@@ -0,0 +1,271 @@
+import type { ParamListBase } from '@react-navigation/native';
+import React, { useCallback, useEffect, useRef } from 'react';
+
+import { TrueSheet } from '../TrueSheet';
+import type {
+  DetentChangeEvent,
+  DetentInfoEventPayload,
+  DidBlurEvent,
+  DidFocusEvent,
+  DidPresentEvent,
+  DragBeginEvent,
+  DragChangeEvent,
+  DragEndEvent,
+  PositionChangeEvent,
+  PositionChangeEventPayload,
+  WillBlurEvent,
+  WillDismissEvent,
+  WillFocusEvent,
+  WillPresentEvent,
+} from '../TrueSheet.types';
+import type {
+  TrueSheetDescriptorMap,
+  TrueSheetNavigationEventMap,
+  TrueSheetNavigationHelpers,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationProp,
+  TrueSheetNavigationState,
+} from './types';
+import { TrueSheetActions } from './TrueSheetRouter';
+
+type EmitFn = TrueSheetNavigationHelpers['emit'];
+
+type TrueSheetScreenProps = Omit<TrueSheetNavigationOptions, 'detentIndex'> & {
+  detentIndex: number;
+  resizeKey?: number;
+  navigation: TrueSheetNavigationProp<ParamListBase>;
+  emit: EmitFn;
+  routeKey: string;
+  closing?: boolean;
+  children: React.ReactNode;
+};
+
+function TrueSheetScreen({
+  detentIndex,
+  resizeKey,
+  navigation,
+  emit,
+  routeKey,
+  closing,
+  detents,
+  children,
+  ...sheetProps
+}: TrueSheetScreenProps) {
+  const ref = useRef<TrueSheet>(null);
+  const isDismissedRef = useRef(false);
+  const isFirstRenderRef = useRef(true);
+  // Capture initial detent index only once
+  const initialDetentIndexRef = useRef(detentIndex);
+
+  // Handle closing state change - dismiss the sheet and wait for animation
+  useEffect(() => {
+    if (closing && !isDismissedRef.current) {
+      isDismissedRef.current = true;
+      (async () => {
+        await ref.current?.dismiss();
+        navigation.dispatch({ ...TrueSheetActions.remove(), source: routeKey });
+      })();
+    } else if (closing && isDismissedRef.current) {
+      // Sheet was already dismissed by user swipe, just remove
+      navigation.dispatch({ ...TrueSheetActions.remove(), source: routeKey });
+    }
+  }, [closing, navigation, routeKey]);
+
+  // Handle resize - resizeKey ensures effect runs even when resizing to same index
+  useEffect(() => {
+    // Skip first render - initialDetentIndex handles initial presentation
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      return;
+    }
+
+    ref.current?.resize(detentIndex);
+  }, [detentIndex, resizeKey]);
+
+  const emitEvent = useCallback(
+    (
+      type: keyof TrueSheetNavigationEventMap,
+      data: DetentInfoEventPayload | PositionChangeEventPayload | undefined
+    ) => {
+      emit({
+        type,
+        target: routeKey,
+        data,
+      } as Parameters<EmitFn>[0]);
+    },
+    [emit, routeKey]
+  );
+
+  const onWillPresent = useCallback(
+    (e: WillPresentEvent) => {
+      emitEvent('sheetWillPresent', e.nativeEvent);
+    },
+    [emitEvent]
+  );
+
+  const onDidPresent = useCallback(
+    (e: DidPresentEvent) => {
+      emitEvent('sheetDidPresent', e.nativeEvent);
+    },
+    [emitEvent]
+  );
+
+  const onWillDismiss = useCallback(
+    (_e: WillDismissEvent) => {
+      emitEvent('sheetWillDismiss', undefined);
+    },
+    [emitEvent]
+  );
+
+  const onDidDismiss = useCallback(() => {
+    emitEvent('sheetDidDismiss', undefined);
+    // User dismissed the sheet by swiping down
+    if (!isDismissedRef.current) {
+      isDismissedRef.current = true;
+      navigation.goBack();
+    }
+  }, [emitEvent, navigation]);
+
+  const onDetentChange = useCallback(
+    (e: DetentChangeEvent) => {
+      emitEvent('sheetDetentChange', e.nativeEvent);
+    },
+    [emitEvent]
+  );
+
+  const onDragBegin = useCallback(
+    (e: DragBeginEvent) => {
+      emitEvent('sheetDragBegin', e.nativeEvent);
+    },
+    [emitEvent]
+  );
+
+  const onDragChange = useCallback(
+    (e: DragChangeEvent) => {
+      emitEvent('sheetDragChange', e.nativeEvent);
+    },
+    [emitEvent]
+  );
+
+  const onDragEnd = useCallback(
+    (e: DragEndEvent) => {
+      emitEvent('sheetDragEnd', e.nativeEvent);
+    },
+    [emitEvent]
+  );
+
+  const onPositionChange = useCallback(
+    (e: PositionChangeEvent) => {
+      emitEvent('sheetPositionChange', e.nativeEvent);
+    },
+    [emitEvent]
+  );
+
+  const onWillFocus = useCallback(
+    (_e: WillFocusEvent) => {
+      emitEvent('sheetWillFocus', undefined);
+    },
+    [emitEvent]
+  );
+
+  const onDidFocus = useCallback(
+    (_e: DidFocusEvent) => {
+      emitEvent('sheetDidFocus', undefined);
+    },
+    [emitEvent]
+  );
+
+  const onWillBlur = useCallback(
+    (_e: WillBlurEvent) => {
+      emitEvent('sheetWillBlur', undefined);
+    },
+    [emitEvent]
+  );
+
+  const onDidBlur = useCallback(
+    (_e: DidBlurEvent) => {
+      emitEvent('sheetDidBlur', undefined);
+    },
+    [emitEvent]
+  );
+
+  return (
+    <TrueSheet
+      ref={ref}
+      name={`navigation-sheet-${routeKey}`}
+      initialDetentIndex={initialDetentIndexRef.current}
+      detents={detents}
+      onWillPresent={onWillPresent}
+      onDidPresent={onDidPresent}
+      onWillDismiss={onWillDismiss}
+      onDidDismiss={onDidDismiss}
+      onDetentChange={onDetentChange}
+      onDragBegin={onDragBegin}
+      onDragChange={onDragChange}
+      onDragEnd={onDragEnd}
+      onPositionChange={onPositionChange}
+      onWillFocus={onWillFocus}
+      onDidFocus={onDidFocus}
+      onWillBlur={onWillBlur}
+      onDidBlur={onDidBlur}
+      {...sheetProps}
+    >
+      {children}
+    </TrueSheet>
+  );
+}
+
+const DEFAULT_DETENTS: ('auto' | number)[] = ['auto'];
+
+function clampDetentIndex(index: number, detentsLength: number): number {
+  return Math.min(index, Math.max(detentsLength - 1, 0));
+}
+
+interface TrueSheetViewProps {
+  state: TrueSheetNavigationState<ParamListBase>;
+  navigation: TrueSheetNavigationHelpers;
+  descriptors: TrueSheetDescriptorMap;
+}
+
+export function 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, ...sheetProps } = options;
+        const resolvedIndex = clampDetentIndex(route.resizeIndex ?? detentIndex, detents.length);
+
+        return (
+          <TrueSheetScreen
+            key={route.key}
+            routeKey={route.key}
+            closing={route.closing}
+            detentIndex={resolvedIndex}
+            resizeKey={route.resizeKey}
+            detents={detents}
+            navigation={screenNavigation}
+            emit={navigation.emit}
+            {...sheetProps}
+          >
+            {render()}
+          </TrueSheetScreen>
+        );
+      })}
+    </>
+  );
+}

package/src/navigation/createTrueSheetNavigator.tsx

@@ -0,0 +1,89 @@
+import {
+  createNavigatorFactory,
+  type NavigatorTypeBagBase,
+  type ParamListBase,
+  type StaticConfig,
+  type TypedNavigator,
+  useNavigationBuilder,
+} from '@react-navigation/native';
+
+import { TrueSheetRouter, type TrueSheetRouterOptions } from './TrueSheetRouter';
+import { TrueSheetView } from './TrueSheetView';
+import type {
+  TrueSheetActionHelpers,
+  TrueSheetNavigationEventMap,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationProp,
+  TrueSheetNavigationState,
+  TrueSheetNavigatorProps,
+} from './types';
+
+function TrueSheetNavigator({
+  id,
+  initialRouteName,
+  children,
+  screenListeners,
+  screenOptions,
+}: TrueSheetNavigatorProps) {
+  const { state, descriptors, navigation, NavigationContent } = useNavigationBuilder<
+    TrueSheetNavigationState<ParamListBase>,
+    TrueSheetRouterOptions,
+    TrueSheetActionHelpers<ParamListBase>,
+    TrueSheetNavigationOptions,
+    TrueSheetNavigationEventMap
+  >(TrueSheetRouter, {
+    id,
+    initialRouteName,
+    children,
+    screenListeners,
+    screenOptions,
+  });
+
+  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/types.ts

@@ -0,0 +1,176 @@
+import type {
+  DefaultNavigatorOptions,
+  Descriptor,
+  NavigationHelpers,
+  NavigationProp,
+  NavigationState,
+  ParamListBase,
+  RouteProp,
+  StackActionHelpers,
+} from '@react-navigation/native';
+
+import type {
+  DetentInfoEventPayload,
+  PositionChangeEventPayload,
+  TrueSheetProps,
+} from '../TrueSheet.types';
+
+export type TrueSheetNavigationEventMap = {
+  /**
+   * Event fired when the sheet is about to be presented.
+   */
+  sheetWillPresent: { data: DetentInfoEventPayload };
+  /**
+   * Event fired when the sheet has been presented.
+   */
+  sheetDidPresent: { data: DetentInfoEventPayload };
+  /**
+   * Event fired when the sheet is about to be dismissed.
+   */
+  sheetWillDismiss: { data: undefined };
+  /**
+   * Event fired when the sheet has been dismissed.
+   */
+  sheetDidDismiss: { data: undefined };
+  /**
+   * Event fired when the sheet's detent changes.
+   */
+  sheetDetentChange: { data: DetentInfoEventPayload };
+  /**
+   * Event fired when the user starts dragging the sheet.
+   */
+  sheetDragBegin: { data: DetentInfoEventPayload };
+  /**
+   * Event fired while the user is dragging the sheet.
+   */
+  sheetDragChange: { data: DetentInfoEventPayload };
+  /**
+   * Event fired when the user stops dragging the sheet.
+   */
+  sheetDragEnd: { data: DetentInfoEventPayload };
+  /**
+   * Event fired when the sheet's position changes.
+   */
+  sheetPositionChange: { data: PositionChangeEventPayload };
+  /**
+   * Event fired when the sheet is about to regain focus.
+   */
+  sheetWillFocus: { data: undefined };
+  /**
+   * Event fired when the sheet regains focus.
+   */
+  sheetDidFocus: { data: undefined };
+  /**
+   * Event fired when the sheet is about to lose focus.
+   */
+  sheetWillBlur: { data: undefined };
+  /**
+   * Event fired when the sheet loses focus.
+   */
+  sheetDidBlur: { data: undefined };
+};
+
+export type TrueSheetNavigationState<ParamList extends ParamListBase> = Omit<
+  NavigationState<ParamList>,
+  'routes'
+> & {
+  type: 'true-sheet';
+  routes: (NavigationState<ParamList>['routes'][number] & {
+    resizeIndex?: number;
+    resizeKey?: number;
+    closing?: boolean;
+  })[];
+};
+
+export type TrueSheetActionHelpers<ParamList extends ParamListBase> =
+  StackActionHelpers<ParamList> & {
+    /**
+     * Resize the sheet to a specific detent index.
+     */
+    resize(index?: number): void;
+  };
+
+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
+>;
+
+/**
+ * Screen options for TrueSheet navigator screens.
+ */
+export type TrueSheetNavigationOptions = Pick<
+  TrueSheetProps,
+  | 'detents'
+  | 'backgroundColor'
+  | 'cornerRadius'
+  | 'dismissible'
+  | 'draggable'
+  | 'grabber'
+  | 'grabberOptions'
+  | 'dimmed'
+  | 'dimmedDetentIndex'
+  | 'blurTint'
+  | 'blurOptions'
+  | 'maxHeight'
+  | 'edgeToEdgeFullScreen'
+  | 'scrollable'
+  | 'keyboardMode'
+  | 'pageSizing'
+  | 'header'
+  | 'footer'
+> & {
+  /**
+   * The detent index to present at.
+   * @default 0
+   */
+  detentIndex?: number;
+};
+
+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 TrueSheetDescriptor = Descriptor<
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationProp<ParamListBase>,
+  RouteProp<ParamListBase>
+>;
+
+export type TrueSheetDescriptorMap = {
+  [key: string]: TrueSheetDescriptor;
+};

package/src/navigation/useTrueSheetNavigation.ts

@@ -0,0 +1,28 @@
+import { useNavigation, type ParamListBase } from '@react-navigation/native';
+
+import type { TrueSheetNavigationProp } from './types';
+
+/**
+ * Hook to access TrueSheet navigation with the resize helper.
+ *
+ * @example
+ * ```tsx
+ * function MySheet() {
+ *   const navigation = useTrueSheetNavigation();
+ *
+ *   // Resize to a specific detent
+ *   const handleExpand = () => {
+ *     navigation.resize(1); // Resize to second detent
+ *   };
+ *
+ *   return (
+ *     <Button title="Expand" onPress={handleExpand} />
+ *   );
+ * }
+ * ```
+ */
+export function useTrueSheetNavigation<
+  T extends ParamListBase = ParamListBase,
+>(): TrueSheetNavigationProp<T> {
+  return useNavigation<TrueSheetNavigationProp<T>>();
+}