@lodev09/react-native-true-sheet 3.1.1 → 3.2.1

package/src/navigation/screen/useSheetScreenState.ts

@@ -0,0 +1,106 @@
+import { 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 {
+  TrueSheetNavigationEventMap,
+  TrueSheetNavigationHelpers,
+  TrueSheetNavigationProp,
+} from '../types';
+import { TrueSheetActions } from '../TrueSheetRouter';
+import type { ParamListBase } from '@react-navigation/native';
+
+type EmitFn = TrueSheetNavigationHelpers['emit'];
+
+interface UseSheetScreenStateProps {
+  detentIndex: number;
+  resizeKey?: number;
+  closing?: boolean;
+  navigation: TrueSheetNavigationProp<ParamListBase>;
+  routeKey: string;
+  emit: EmitFn;
+}
+
+export const useSheetScreenState = (props: UseSheetScreenStateProps) => {
+  const { detentIndex, resizeKey, closing, navigation, routeKey, emit } = props;
+
+  const ref = useRef<TrueSheet>(null);
+  const isDismissedRef = useRef(false);
+  const isFirstRenderRef = useRef(true);
+  const initialDetentIndexRef = useRef(detentIndex);
+
+  useEffect(() => {
+    if (closing && !isDismissedRef.current) {
+      isDismissedRef.current = true;
+      (async () => {
+        await ref.current?.dismiss();
+        navigation.dispatch({ ...TrueSheetActions.remove(), source: routeKey });
+      })();
+    } else if (closing && isDismissedRef.current) {
+      navigation.dispatch({ ...TrueSheetActions.remove(), source: routeKey });
+    }
+  }, [closing, navigation, routeKey]);
+
+  useEffect(() => {
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      return;
+    }
+    ref.current?.resize(detentIndex);
+  }, [detentIndex, resizeKey]);
+
+  const emitEvent = (
+    type: keyof TrueSheetNavigationEventMap,
+    data: DetentInfoEventPayload | PositionChangeEventPayload | undefined
+  ) => {
+    emit({
+      type,
+      target: routeKey,
+      data,
+    } as Parameters<EmitFn>[0]);
+  };
+
+  const onDidDismiss = () => {
+    emitEvent('sheetDidDismiss', undefined);
+    if (!isDismissedRef.current) {
+      isDismissedRef.current = true;
+      navigation.goBack();
+    }
+  };
+
+  return {
+    ref,
+    initialDetentIndex: initialDetentIndexRef.current,
+    emitEvent,
+    eventHandlers: {
+      onWillPresent: (e: WillPresentEvent) => emitEvent('sheetWillPresent', e.nativeEvent),
+      onDidPresent: (e: DidPresentEvent) => emitEvent('sheetDidPresent', e.nativeEvent),
+      onWillDismiss: (_e: WillDismissEvent) => emitEvent('sheetWillDismiss', undefined),
+      onDidDismiss,
+      onDetentChange: (e: DetentChangeEvent) => emitEvent('sheetDetentChange', e.nativeEvent),
+      onDragBegin: (e: DragBeginEvent) => emitEvent('sheetDragBegin', e.nativeEvent),
+      onDragChange: (e: DragChangeEvent) => emitEvent('sheetDragChange', e.nativeEvent),
+      onDragEnd: (e: DragEndEvent) => emitEvent('sheetDragEnd', e.nativeEvent),
+      onPositionChange: (e: PositionChangeEvent) => emitEvent('sheetPositionChange', e.nativeEvent),
+      onWillFocus: (_e: WillFocusEvent) => emitEvent('sheetWillFocus', undefined),
+      onDidFocus: (_e: DidFocusEvent) => emitEvent('sheetDidFocus', undefined),
+      onWillBlur: (_e: WillBlurEvent) => emitEvent('sheetWillBlur', undefined),
+      onDidBlur: (_e: DidBlurEvent) => emitEvent('sheetDidBlur', undefined),
+    },
+  };
+};

package/src/navigation/types.ts

@@ -14,6 +14,7 @@ import type {
   PositionChangeEventPayload,
   TrueSheetProps,
 } from '../TrueSheet.types';
+import type { PositionChangeHandler } from './screen/types';
 
 export type TrueSheetNavigationEventMap = {
   /**
@@ -147,6 +148,34 @@ export type TrueSheetNavigationOptions = Pick<
    * @default 0
    */
   detentIndex?: number;
+
+  /**
+   * Use ReanimatedTrueSheet for this screen.
+   * Enables worklet-based `onPositionChange` events.
+   *
+   * @default false
+   */
+  reanimated?: boolean;
+
+  /**
+   * A callback that receives position change events.
+   * When `reanimated` is enabled, this must be a worklet function.
+   *
+   * @example
+   * ```tsx
+   * <Navigator.Screen
+   *   name="Sheet"
+   *   options={{
+   *     reanimated: true,
+   *     positionChangeHandler: (payload) => {
+   *       'worklet';
+   *       animatedValue.value = payload.position;
+   *     },
+   *   }}
+   * />
+   * ```
+   */
+  positionChangeHandler?: PositionChangeHandler;
 };
 
 export type TrueSheetNavigatorProps = DefaultNavigatorOptions<

package/src/navigation/useTrueSheetNavigation.ts

@@ -21,8 +21,6 @@ import type { TrueSheetNavigationProp } from './types';
  * }
  * ```
  */
-export function useTrueSheetNavigation<
+export const useTrueSheetNavigation = <
   T extends ParamListBase = ParamListBase,
->(): TrueSheetNavigationProp<T> {
-  return useNavigation<TrueSheetNavigationProp<T>>();
-}
+>(): TrueSheetNavigationProp<T> => useNavigation<TrueSheetNavigationProp<T>>();