react-native-screen-transitions 3.2.1 → 3.3.0-beta.1

package/src/shared/hooks/gestures/use-screen-gesture-handlers.ts

@@ -0,0 +1,434 @@
+import { useMemo } from "react";
+import { useWindowDimensions } from "react-native";
+import type {
+	GestureStateChangeEvent,
+	GestureTouchEvent,
+	GestureUpdateEvent,
+	PanGestureHandlerEventPayload,
+} from "react-native-gesture-handler";
+import type { GestureStateManagerType } from "react-native-gesture-handler/lib/typescript/handlers/gestures/gestureStateManager";
+import { type SharedValue, useSharedValue } from "react-native-reanimated";
+import { DefaultSnapSpec } from "../../configs/specs";
+import {
+	DEFAULT_GESTURE_ACTIVATION_AREA,
+	DEFAULT_GESTURE_DIRECTION,
+	DEFAULT_GESTURE_DRIVES_PROGRESS,
+	EPSILON,
+	FALSE,
+	GESTURE_VELOCITY_IMPACT,
+	TRUE,
+} from "../../constants";
+import type { ScrollConfig } from "../../providers/gestures.provider";
+import { useKeys } from "../../providers/screen/keys.provider";
+import { AnimationStore } from "../../stores/animation.store";
+import { GestureStore } from "../../stores/gesture.store";
+import { GestureOffsetState } from "../../types/gesture.types";
+import { animateToProgress } from "../../utils/animation/animate-to-progress";
+import {
+	applyOffsetRules,
+	checkScrollAwareActivation,
+} from "../../utils/gesture/check-gesture-activation";
+import { determineDismissal } from "../../utils/gesture/determine-dismissal";
+import { determineSnapTarget } from "../../utils/gesture/determine-snap-target";
+import { mapGestureToProgress } from "../../utils/gesture/map-gesture-to-progress";
+import { resetGestureValues } from "../../utils/gesture/reset-gesture-values";
+import { validateSnapPoints } from "../../utils/gesture/validate-snap-points";
+import { velocity } from "../../utils/gesture/velocity";
+import { logger } from "../../utils/logger";
+import useStableCallbackValue from "../use-stable-callback-value";
+
+interface UseScreenGestureHandlersProps {
+	scrollConfig: SharedValue<ScrollConfig | null>;
+	ancestorIsDismissing?: SharedValue<number> | null;
+	canDismiss: boolean;
+	handleDismiss: () => void;
+}
+
+export const useScreenGestureHandlers = ({
+	scrollConfig,
+	ancestorIsDismissing,
+	canDismiss,
+	handleDismiss,
+}: UseScreenGestureHandlersProps) => {
+	const dimensions = useWindowDimensions();
+	const { current } = useKeys();
+
+	const animations = AnimationStore.getAll(current.route.key);
+	const gestureAnimationValues = GestureStore.getRouteGestures(
+		current.route.key,
+	);
+
+	const {
+		gestureDirection = DEFAULT_GESTURE_DIRECTION,
+		gestureDrivesProgress = DEFAULT_GESTURE_DRIVES_PROGRESS,
+		gestureVelocityImpact = GESTURE_VELOCITY_IMPACT,
+		gestureActivationArea = DEFAULT_GESTURE_ACTIVATION_AREA,
+		gestureResponseDistance,
+		transitionSpec,
+		snapPoints: rawSnapPoints,
+	} = current.options;
+
+	const { hasSnapPoints, snapPoints, minSnapPoint, maxSnapPoint } = useMemo(
+		() => validateSnapPoints({ snapPoints: rawSnapPoints, canDismiss }),
+		[rawSnapPoints, canDismiss],
+	);
+
+	const directions = useMemo(() => {
+		if (hasSnapPoints && Array.isArray(gestureDirection)) {
+			/**
+			 * Unsure if this behavior will change in the future, as I cannot find a use case as to why
+			 * you would want multiple gesture dismisals for a sheet.
+			 *
+			 * e.g. When defining a snap point with a gesture of vertical ( default ), the system
+			 * assumes that the inverse ( vertical-inverted ), will grow the sheet.
+			 */
+			logger.warn(
+				`gestureDirection array is not supported with snapPoints. ` +
+					`Only the first direction "${gestureDirection[0]}" will be used. ` +
+					`Snap points define a single axis of movement, so only one gesture direction is needed.`,
+			);
+		}
+
+		// When snap points are defined, use only the first direction from the array
+		const effectiveDirection = hasSnapPoints
+			? Array.isArray(gestureDirection)
+				? gestureDirection[0]
+				: gestureDirection
+			: gestureDirection;
+
+		const directionsArray = Array.isArray(effectiveDirection)
+			? effectiveDirection
+			: [effectiveDirection];
+
+		const isBidirectional = directionsArray.includes("bidirectional");
+
+		const hasHorizontalDirection =
+			directionsArray.includes("horizontal") ||
+			directionsArray.includes("horizontal-inverted");
+
+		const isSnapAxisInverted = hasHorizontalDirection
+			? directionsArray.includes("horizontal-inverted") &&
+				!directionsArray.includes("horizontal")
+			: directionsArray.includes("vertical-inverted") &&
+				!directionsArray.includes("vertical");
+
+		const enableBothVertical =
+			isBidirectional || (hasSnapPoints && !hasHorizontalDirection);
+		const enableBothHorizontal =
+			isBidirectional || (hasSnapPoints && hasHorizontalDirection);
+
+		return {
+			vertical: directionsArray.includes("vertical") || enableBothVertical,
+			verticalInverted:
+				directionsArray.includes("vertical-inverted") || enableBothVertical,
+			horizontal:
+				directionsArray.includes("horizontal") || enableBothHorizontal,
+			horizontalInverted:
+				directionsArray.includes("horizontal-inverted") || enableBothHorizontal,
+			snapAxisInverted: hasSnapPoints && isSnapAxisInverted,
+		};
+	}, [gestureDirection, hasSnapPoints]);
+
+	const snapAxis =
+		directions.horizontal || directions.horizontalInverted
+			? "horizontal"
+			: "vertical";
+
+	const initialTouch = useSharedValue({ x: 0, y: 0 });
+	const gestureOffsetState = useSharedValue<GestureOffsetState>(
+		GestureOffsetState.PENDING,
+	);
+	const gestureStartProgress = useSharedValue(1);
+
+	const onTouchesDown = useStableCallbackValue((e: GestureTouchEvent) => {
+		"worklet";
+		const firstTouch = e.changedTouches[0];
+		initialTouch.value = { x: firstTouch.x, y: firstTouch.y };
+		gestureOffsetState.value = GestureOffsetState.PENDING;
+	});
+
+	const onTouchesMove = useStableCallbackValue(
+		(e: GestureTouchEvent, manager: GestureStateManagerType) => {
+			"worklet";
+
+			// If an ancestor navigator is already dismissing via gesture, block new gestures here.
+			if (ancestorIsDismissing?.value) {
+				gestureOffsetState.value = GestureOffsetState.FAILED;
+				manager.fail();
+				return;
+			}
+
+			const touch = e.changedTouches[0];
+
+			const { isSwipingDown, isSwipingUp, isSwipingRight, isSwipingLeft } =
+				applyOffsetRules({
+					touch,
+					directions,
+					manager,
+					dimensions,
+					gestureOffsetState,
+					initialTouch: initialTouch.value,
+					activationArea: gestureActivationArea,
+					responseDistance: gestureResponseDistance,
+				});
+
+			if (gestureOffsetState.value === GestureOffsetState.FAILED) {
+				manager.fail();
+				return;
+			}
+
+			// Keep pending until thresholds are met; no eager activation.
+			if (gestureAnimationValues.isDragging?.value) {
+				manager.activate();
+				return;
+			}
+
+			const recognizedDirection =
+				isSwipingDown || isSwipingUp || isSwipingRight || isSwipingLeft;
+
+			const scrollCfg = scrollConfig.value;
+			const isTouchingScrollView = scrollCfg?.isTouched ?? false;
+
+			if (!isTouchingScrollView) {
+				// Early return if gesture hasn't met activation criteria
+				const canActivate =
+					recognizedDirection &&
+					gestureOffsetState.value === GestureOffsetState.PASSED &&
+					!gestureAnimationValues.isDismissing?.value;
+
+				if (!canActivate) {
+					return;
+				}
+
+				if (isSwipingDown) {
+					gestureAnimationValues.direction.value = "vertical";
+				} else if (isSwipingUp) {
+					gestureAnimationValues.direction.value = "vertical-inverted";
+				} else if (isSwipingRight) {
+					gestureAnimationValues.direction.value = "horizontal";
+				} else if (isSwipingLeft) {
+					gestureAnimationValues.direction.value = "horizontal-inverted";
+				}
+
+				manager.activate();
+				return;
+			}
+
+			// Touch IS on ScrollView - apply scroll-aware rules
+			// Snap mode: determine if sheet can still expand
+			const canExpandMore =
+				hasSnapPoints && animations.progress.value < maxSnapPoint - EPSILON;
+
+			const { shouldActivate, direction: activatedDirection } =
+				checkScrollAwareActivation({
+					swipeInfo: {
+						isSwipingDown,
+						isSwipingUp,
+						isSwipingRight,
+						isSwipingLeft,
+					},
+					directions,
+					scrollConfig: scrollCfg,
+					hasSnapPoints,
+					canExpandMore,
+				});
+
+			if (recognizedDirection && !shouldActivate) {
+				manager.fail();
+				return;
+			}
+
+			if (
+				shouldActivate &&
+				gestureOffsetState.value === GestureOffsetState.PASSED &&
+				!gestureAnimationValues.isDismissing?.value
+			) {
+				gestureAnimationValues.direction.value = activatedDirection;
+				manager.activate();
+				return;
+			}
+		},
+	);
+
+	const onStart = useStableCallbackValue(() => {
+		"worklet";
+		gestureAnimationValues.isDragging.value = TRUE;
+		gestureAnimationValues.isDismissing.value = FALSE;
+		gestureStartProgress.value = animations.progress.value;
+		animations.animating.value = TRUE;
+	});
+
+	const onUpdate = useStableCallbackValue(
+		(event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
+			"worklet";
+
+			const { translationX, translationY } = event;
+			const { width, height } = dimensions;
+
+			gestureAnimationValues.x.value = translationX;
+			gestureAnimationValues.y.value = translationY;
+			gestureAnimationValues.normalizedX.value = velocity.normalizeTranslation(
+				translationX,
+				width,
+			);
+			gestureAnimationValues.normalizedY.value = velocity.normalizeTranslation(
+				translationY,
+				height,
+			);
+
+			if (hasSnapPoints && gestureDrivesProgress) {
+				const isHorizontal = snapAxis === "horizontal";
+				const translation = isHorizontal ? translationX : translationY;
+				const dimension = isHorizontal ? width : height;
+
+				// Map translation to progress delta:
+				// - Positive translation (down/right) = decrease progress (dismiss)
+				// - Negative translation (up/left) = increase progress (expand)
+				// Inverted directions flip this behavior
+				const baseSign = -1;
+				const sign = directions.snapAxisInverted ? -baseSign : baseSign;
+				const progressDelta = (sign * translation) / dimension;
+
+				// Use pre-computed bounds (minSnapPoint already accounts for canDismiss)
+				animations.progress.value = Math.max(
+					minSnapPoint,
+					Math.min(maxSnapPoint, gestureStartProgress.value + progressDelta),
+				);
+			} else if (gestureDrivesProgress) {
+				let maxProgress = 0;
+
+				// Horizontal swipe right (positive X)
+				if (directions.horizontal && translationX > 0) {
+					const progress = mapGestureToProgress(translationX, width);
+					maxProgress = Math.max(maxProgress, progress);
+				}
+
+				// Horizontal inverted swipe left (negative X)
+				if (directions.horizontalInverted && translationX < 0) {
+					const progress = mapGestureToProgress(-translationX, width);
+					maxProgress = Math.max(maxProgress, progress);
+				}
+
+				// Vertical swipe down (positive Y)
+				if (directions.vertical && translationY > 0) {
+					const progress = mapGestureToProgress(translationY, height);
+					maxProgress = Math.max(maxProgress, progress);
+				}
+
+				// Vertical inverted swipe up (negative Y)
+				if (directions.verticalInverted && translationY < 0) {
+					const progress = mapGestureToProgress(-translationY, height);
+					maxProgress = Math.max(maxProgress, progress);
+				}
+
+				animations.progress.value = Math.max(
+					0,
+					Math.min(1, gestureStartProgress.value - maxProgress),
+				);
+			}
+		},
+	);
+
+	const onEnd = useStableCallbackValue(
+		(event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+			"worklet";
+
+			if (hasSnapPoints) {
+				const isHorizontal = snapAxis === "horizontal";
+				const axisVelocity = isHorizontal ? event.velocityX : event.velocityY;
+				const axisDimension = isHorizontal
+					? dimensions.width
+					: dimensions.height;
+
+				// determineSnapTarget expects positive velocity = toward dismiss (decreasing progress)
+				// Positive velocity (down/right) = dismiss for non-inverted
+				// Inverted directions need velocity flipped
+				const snapVelocity = directions.snapAxisInverted
+					? -axisVelocity
+					: axisVelocity;
+
+				const result = determineSnapTarget({
+					currentProgress: animations.progress.value,
+					snapPoints,
+					velocity: snapVelocity,
+					dimension: axisDimension,
+					canDismiss: canDismiss,
+				});
+
+				const shouldDismiss = result.shouldDismiss;
+				const targetProgress = result.targetProgress;
+				const isSnapping = !shouldDismiss;
+
+				const spec = shouldDismiss
+					? transitionSpec?.close
+					: transitionSpec?.open;
+
+				const effectiveSpec = isSnapping
+					? {
+							open: transitionSpec?.expand ?? DefaultSnapSpec,
+							close: transitionSpec?.collapse ?? DefaultSnapSpec,
+						}
+					: transitionSpec;
+
+				resetGestureValues({
+					spec,
+					gestures: gestureAnimationValues,
+					shouldDismiss,
+					event,
+					dimensions,
+				});
+
+				// For snap transitions, velocity should match gesture direction
+				// Positive gesture velocity (down/right) = collapsing (negative progress velocity)
+				// Inverted directions flip this
+				const velocitySign = directions.snapAxisInverted ? 1 : -1;
+				const initialVelocity =
+					velocitySign * velocity.normalize(axisVelocity, axisDimension);
+
+				animateToProgress({
+					target: targetProgress,
+					onAnimationFinish: shouldDismiss ? handleDismiss : undefined,
+					spec: effectiveSpec,
+					animations,
+					initialVelocity,
+				});
+			} else {
+				const result = determineDismissal({
+					event,
+					directions,
+					dimensions,
+					gestureVelocityImpact,
+				});
+
+				const shouldDismiss = result.shouldDismiss;
+				const targetProgress = shouldDismiss ? 0 : gestureStartProgress.value;
+
+				resetGestureValues({
+					spec: shouldDismiss ? transitionSpec?.close : transitionSpec?.open,
+					gestures: gestureAnimationValues,
+					shouldDismiss,
+					event,
+					dimensions,
+				});
+
+				const initialVelocity = velocity.calculateProgressVelocity({
+					animations,
+					shouldDismiss,
+					event,
+					dimensions,
+					directions,
+				});
+
+				animateToProgress({
+					target: targetProgress,
+					onAnimationFinish: shouldDismiss ? handleDismiss : undefined,
+					spec: transitionSpec,
+					animations,
+					initialVelocity,
+				});
+			}
+		},
+	);
+
+	return { onTouchesDown, onTouchesMove, onStart, onUpdate, onEnd };
+};

package/src/shared/hooks/gestures/use-scroll-registry.tsx

@@ -1,7 +1,7 @@
 /** biome-ignore-all lint/style/noNonNullAssertion: <Will always consume context from GestureProvider> */
 
 import { useMemo } from "react";
-import type { LayoutChangeEvent } from "react-native";
+import type { GestureResponderEvent, LayoutChangeEvent } from "react-native";
 import { useAnimatedScrollHandler } from "react-native-reanimated";
 import type { ReanimatedScrollEvent } from "react-native-reanimated/lib/typescript/hook/commonTypes";
 import { useGestureContext } from "../../providers/gestures.provider";
@@ -11,6 +11,8 @@ interface ScrollProgressHookProps {
 	onScroll?: (event: ReanimatedScrollEvent) => void;
 	onContentSizeChange?: (width: number, height: number) => void;
 	onLayout?: (event: LayoutChangeEvent) => void;
+	onTouchStart?: (event: GestureResponderEvent) => void;
+	onTouchEnd?: (event: GestureResponderEvent) => void;
 }
 
 export const useScrollRegistry = (props: ScrollProgressHookProps) => {
@@ -43,6 +45,7 @@ export const useScrollRegistry = (props: ScrollProgressHookProps) => {
 						contentWidth: 0,
 						layoutHeight: 0,
 						layoutWidth: 0,
+						isTouched: true,
 					};
 				}
 				v.x = event.contentOffset.x;
@@ -73,6 +76,7 @@ export const useScrollRegistry = (props: ScrollProgressHookProps) => {
 						layoutWidth: 0,
 						contentWidth: width,
 						contentHeight: height,
+						isTouched: false,
 					};
 				}
 				v.contentWidth = width;
@@ -102,6 +106,7 @@ export const useScrollRegistry = (props: ScrollProgressHookProps) => {
 					contentWidth: 0,
 					layoutHeight: height,
 					layoutWidth: width,
+					isTouched: false,
 				};
 			}
 			v.layoutHeight = height;
@@ -116,9 +121,55 @@ export const useScrollRegistry = (props: ScrollProgressHookProps) => {
 		}
 	});
 
+	const onTouchStart = useStableCallback((event: GestureResponderEvent) => {
+		props.onTouchStart?.(event);
+
+		const setTouched = (v: any) => {
+			"worklet";
+			if (v === null) {
+				return {
+					x: 0,
+					y: 0,
+					contentHeight: 0,
+					contentWidth: 0,
+					layoutHeight: 0,
+					layoutWidth: 0,
+					isTouched: true,
+				};
+			}
+			v.isTouched = true;
+			return v;
+		};
+
+		scrollConfig.modify(setTouched);
+
+		for (const ancestorConfig of ancestorScrollConfigs) {
+			ancestorConfig.modify(setTouched);
+		}
+	});
+
+	const onTouchEnd = useStableCallback((event: GestureResponderEvent) => {
+		props.onTouchEnd?.(event);
+
+		const clearTouched = (v: any) => {
+			"worklet";
+			if (v === null) return v;
+			v.isTouched = false;
+			return v;
+		};
+
+		scrollConfig.modify(clearTouched);
+
+		for (const ancestorConfig of ancestorScrollConfigs) {
+			ancestorConfig.modify(clearTouched);
+		}
+	});
+
 	return {
 		scrollHandler,
 		onContentSizeChange,
 		onLayout,
+		onTouchStart,
+		onTouchEnd,
 	};
 };

package/src/shared/hooks/lifecycle/use-close-transition.ts

@@ -10,7 +10,7 @@ import { useStackCoreContext } from "../../providers/stack/core.provider";
 import { useManagedStackContext } from "../../providers/stack/managed.provider";
 import type { AnimationStoreMap } from "../../stores/animation.store";
 import { StackType } from "../../types/stack.types";
-import { startScreenTransition } from "../../utils/animation/start-screen-transition";
+import { animateToProgress } from "../../utils/animation/animate-to-progress";
 import { resetStoresForScreen } from "../../utils/reset-stores-for-screen";
 import { useSharedValueState } from "../reanimated/use-shared-value-state";
 import useStableCallback from "../use-stable-callback";
@@ -49,7 +49,7 @@ const useManagedClose = ({
 			if (!keys?.includes(current.route.key)) return;
 
 			runOnJS(activate)();
-			startScreenTransition({
+			animateToProgress({
 				target: "close",
 				spec: current.options.transitionSpec,
 				animations,
@@ -96,7 +96,7 @@ const useNativeStackClose = ({
 		e.preventDefault();
 		activate();
 
-		startScreenTransition({
+		animateToProgress({
 			target: "close",
 			spec: current.options.transitionSpec,
 			animations,

package/src/shared/hooks/lifecycle/use-open-transition.ts

@@ -1,9 +1,30 @@
 import { useLayoutEffect } from "react";
 import type { BaseDescriptor } from "../../providers/screen/keys.provider";
 import type { AnimationStoreMap } from "../../stores/animation.store";
-import { startScreenTransition } from "../../utils/animation/start-screen-transition";
+import { animateToProgress } from "../../utils/animation/animate-to-progress";
 import { useHighRefreshRate } from "../animation/use-high-refresh-rate";
 
+/**
+ * Calculates the initial progress value based on snap points configuration.
+ */
+function getInitialProgress({
+	snapPoints,
+	initialSnapIndex,
+}: {
+	snapPoints?: number[];
+	initialSnapIndex: number;
+}): number | undefined {
+	if (!snapPoints) {
+		return undefined;
+	}
+
+	const clampedIndex = Math.min(
+		Math.max(0, initialSnapIndex),
+		snapPoints.length - 1,
+	);
+	return snapPoints[clampedIndex];
+}
+
 /**
  * Handles opening animation on mount.
  * Returns activate/deactivate functions for high refresh rate.
@@ -17,9 +38,12 @@ export function useOpenTransition(
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: Must only run once on mount
 	useLayoutEffect(() => {
+		const { snapPoints, initialSnapIndex = 0 } = current.options;
+		const targetProgress = getInitialProgress({ snapPoints, initialSnapIndex });
+
 		activateHighRefreshRate();
-		startScreenTransition({
-			target: "open",
+		animateToProgress({
+			target: targetProgress ?? "open",
 			spec: current.options.transitionSpec,
 			animations,
 			onAnimationFinish: deactivateHighRefreshRate,

package/src/shared/hooks/navigation/use-screen-state.tsx

@@ -1,12 +1,15 @@
 import type { Route } from "@react-navigation/native";
-import { useMemo } from "react";
-import { useDerivedValue } from "react-native-reanimated";
+import { useCallback, useMemo } from "react";
+import { runOnUI, useDerivedValue } from "react-native-reanimated";
+import { DefaultSnapSpec } from "../../configs/specs";
 import {
 	type BaseDescriptor,
 	useKeys,
 } from "../../providers/screen/keys.provider";
+import { AnimationStore } from "../../stores/animation.store";
 import type { ScreenTransitionConfig } from "../../types/screen.types";
 import type { BaseStackNavigation } from "../../types/stack.types";
+import { animateToProgress } from "../../utils/animation/animate-to-progress";
 import { useSharedValueState } from "../reanimated/use-shared-value-state";
 import { type StackContextValue, useStack } from "./use-stack";
 
@@ -47,6 +50,14 @@ export interface ScreenState<
 	 * Navigation object for this screen.
 	 */
 	navigation: TNavigation;
+
+	/**
+	 * Programmatically snap to a specific snap point by index.
+	 * Only works if the screen has snapPoints defined.
+	 *
+	 * @param index - The index of the snap point to snap to (0-based)
+	 */
+	snapTo: (index: number) => void;
 }
 
 /**
@@ -77,6 +88,50 @@ export function useScreenState<
 		return scenes[focusedIndex] ?? scenes[scenes.length - 1];
 	}, [scenes, focusedIndex]);
 
+	const currentOptions = current.options;
+	const animations = useMemo(
+		() => AnimationStore.getAll(current.route.key),
+		[current.route.key],
+	);
+
+	const snapTo = useCallback(
+		(targetIndex: number) => {
+			const points = currentOptions?.snapPoints;
+			if (!points || points.length === 0) {
+				console.warn("snapTo called but no snapPoints defined");
+				return;
+			}
+
+			const sorted = [...points].sort((a, b) => a - b);
+
+			if (targetIndex < 0 || targetIndex >= sorted.length) {
+				console.warn(
+					`snapTo index ${targetIndex} out of bounds (0-${sorted.length - 1})`,
+				);
+				return;
+			}
+
+			const targetProgress = sorted[targetIndex];
+
+			runOnUI(() => {
+				"worklet";
+				animateToProgress({
+					target: targetProgress,
+					animations,
+					spec: {
+						open:
+							focusedScene.descriptor.options.transitionSpec?.expand ??
+							DefaultSnapSpec,
+						close:
+							focusedScene.descriptor.options.transitionSpec?.collapse ??
+							DefaultSnapSpec,
+					},
+				});
+			})();
+		},
+		[currentOptions?.snapPoints, animations, focusedScene],
+	);
+
 	return useMemo(
 		() => ({
 			index,
@@ -86,6 +141,7 @@ export function useScreenState<
 			focusedIndex,
 			meta: focusedScene?.descriptor?.options?.meta,
 			navigation: current.navigation as TNavigation,
+			snapTo,
 		}),
 		[
 			index,
@@ -94,6 +150,7 @@ export function useScreenState<
 			focusedIndex,
 			current.navigation,
 			current.route,
+			snapTo,
 		],
 	);
 }