@lodev09/react-native-true-sheet 3.1.0 → 3.2.0

package/src/navigation/screen/TrueSheetScreen.tsx

@@ -0,0 +1,37 @@
+import { TrueSheet } from '../../TrueSheet';
+import type { TrueSheetScreenProps } from './types';
+import { useSheetScreenState } from './useSheetScreenState';
+
+export const TrueSheetScreen = ({
+  detentIndex,
+  resizeKey,
+  navigation,
+  emit,
+  routeKey,
+  closing,
+  detents,
+  children,
+  ...sheetProps
+}: TrueSheetScreenProps) => {
+  const { ref, initialDetentIndex, eventHandlers } = useSheetScreenState({
+    detentIndex,
+    resizeKey,
+    closing,
+    navigation,
+    routeKey,
+    emit,
+  });
+
+  return (
+    <TrueSheet
+      ref={ref}
+      name={`navigation-sheet-${routeKey}`}
+      initialDetentIndex={initialDetentIndex}
+      detents={detents}
+      {...eventHandlers}
+      {...sheetProps}
+    >
+      {children}
+    </TrueSheet>
+  );
+};

package/src/navigation/screen/index.ts

@@ -0,0 +1,3 @@
+export { TrueSheetScreen } from './TrueSheetScreen';
+export { useSheetScreenState } from './useSheetScreenState';
+export type { TrueSheetScreenProps, ReanimatedTrueSheetScreenProps } from './types';

package/src/navigation/screen/types.ts

@@ -0,0 +1,20 @@
+import type { ParamListBase } from '@react-navigation/native';
+
+import type { TrueSheetProps } from '../../TrueSheet.types';
+import type { TrueSheetNavigationHelpers, TrueSheetNavigationProp } from '../types';
+
+export interface TrueSheetScreenProps {
+  detentIndex: number;
+  resizeKey?: number;
+  navigation: TrueSheetNavigationProp<ParamListBase>;
+  emit: TrueSheetNavigationHelpers['emit'];
+  routeKey: string;
+  closing?: boolean;
+  detents: TrueSheetProps['detents'];
+  children: React.ReactNode;
+  [key: string]: unknown;
+}
+
+export interface ReanimatedTrueSheetScreenProps extends TrueSheetScreenProps {
+  reanimatedPositionChangeHandler?: TrueSheetProps['onPositionChange'];
+}

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

@@ -12,6 +12,7 @@ import type {
 import type {
   DetentInfoEventPayload,
   PositionChangeEventPayload,
+  PositionChangeEvent,
   TrueSheetProps,
 } from '../TrueSheet.types';
 
@@ -147,6 +148,36 @@ export type TrueSheetNavigationOptions = Pick<
    * @default 0
    */
   detentIndex?: number;
+
+  /**
+   * Use ReanimatedTrueSheet for this screen.
+   * Enables worklet-based `onPositionChange` events.
+   *
+   * @default false
+   */
+  reanimated?: boolean;
+
+  /**
+   * A reanimated position change handler created by `useReanimatedPositionChangeHandler`.
+   * Only used when `reanimated` is enabled.
+   *
+   * @example
+   * ```tsx
+   * const positionHandler = useReanimatedPositionChangeHandler((payload) => {
+   *   'worklet';
+   *   animatedValue.value = payload.position;
+   * });
+   *
+   * <Navigator.Screen
+   *   name="Sheet"
+   *   options={{
+   *     reanimated: true,
+   *     reanimatedPositionChangeHandler: positionHandler,
+   *   }}
+   * />
+   * ```
+   */
+  reanimatedPositionChangeHandler?: (e: PositionChangeEvent) => void;
 };
 
 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>>();