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

package/src/shared/__tests__/gesture-activation.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from "bun:test";
+import type { ScrollConfig } from "../providers/gestures.provider";
 import {
 	normalizeSides,
 	computeEdgeConstraints,
@@ -7,6 +8,20 @@ import {
 	checkScrollAwareActivation,
 } from "../utils/gesture/check-gesture-activation";
 
+/** Helper to create ScrollConfig with sensible defaults */
+const createScrollConfig = (
+	overrides: Partial<ScrollConfig> = {},
+): ScrollConfig => ({
+	x: 0,
+	y: 0,
+	contentWidth: 0,
+	contentHeight: 0,
+	layoutWidth: 0,
+	layoutHeight: 0,
+	isTouched: true,
+	...overrides,
+});
+
 describe("normalizeSides", () => {
 	it("returns all sides as 'screen' when no area provided", () => {
 		const result = normalizeSides();
@@ -271,10 +286,7 @@ describe("checkScrollAwareActivation", () => {
 			const result = checkScrollAwareActivation({
 				swipeInfo: { ...noSwipe, isSwipingDown: true },
 				directions: baseDirections,
-				scrollX: 0,
-				scrollY: 0,
-				maxScrollX: 0,
-				maxScrollY: 500,
+				scrollConfig: createScrollConfig({ contentHeight: 500, layoutHeight: 0 }),
 			});
 			expect(result.shouldActivate).toBe(true);
 			expect(result.direction).toBe("vertical");
@@ -284,10 +296,7 @@ describe("checkScrollAwareActivation", () => {
 			const result = checkScrollAwareActivation({
 				swipeInfo: { ...noSwipe, isSwipingDown: true },
 				directions: baseDirections,
-				scrollX: 0,
-				scrollY: 100,
-				maxScrollX: 0,
-				maxScrollY: 500,
+				scrollConfig: createScrollConfig({ y: 100, contentHeight: 500, layoutHeight: 0 }),
 			});
 			expect(result.shouldActivate).toBe(false);
 		});
@@ -296,10 +305,7 @@ describe("checkScrollAwareActivation", () => {
 			const result = checkScrollAwareActivation({
 				swipeInfo: { ...noSwipe, isSwipingUp: true },
 				directions: baseDirections,
-				scrollX: 0,
-				scrollY: 0,
-				maxScrollX: 0,
-				maxScrollY: 500,
+				scrollConfig: createScrollConfig({ contentHeight: 500, layoutHeight: 0 }),
 			});
 			expect(result.shouldActivate).toBe(false);
 		});
@@ -317,10 +323,7 @@ describe("checkScrollAwareActivation", () => {
 			const result = checkScrollAwareActivation({
 				swipeInfo: { ...noSwipe, isSwipingUp: true },
 				directions: invertedDirections,
-				scrollX: 0,
-				scrollY: 500,
-				maxScrollX: 0,
-				maxScrollY: 500,
+				scrollConfig: createScrollConfig({ y: 500, contentHeight: 500, layoutHeight: 0 }),
 			});
 			expect(result.shouldActivate).toBe(true);
 			expect(result.direction).toBe("vertical-inverted");
@@ -330,10 +333,7 @@ describe("checkScrollAwareActivation", () => {
 			const result = checkScrollAwareActivation({
 				swipeInfo: { ...noSwipe, isSwipingUp: true },
 				directions: invertedDirections,
-				scrollX: 0,
-				scrollY: 200,
-				maxScrollX: 0,
-				maxScrollY: 500,
+				scrollConfig: createScrollConfig({ y: 200, contentHeight: 500, layoutHeight: 0 }),
 			});
 			expect(result.shouldActivate).toBe(false);
 		});
@@ -351,10 +351,7 @@ describe("checkScrollAwareActivation", () => {
 			const result = checkScrollAwareActivation({
 				swipeInfo: { ...noSwipe, isSwipingRight: true },
 				directions: horizontalDirections,
-				scrollX: 0,
-				scrollY: 0,
-				maxScrollX: 500,
-				maxScrollY: 0,
+				scrollConfig: createScrollConfig({ contentWidth: 500, layoutWidth: 0 }),
 			});
 			expect(result.shouldActivate).toBe(true);
 			expect(result.direction).toBe("horizontal");
@@ -364,10 +361,7 @@ describe("checkScrollAwareActivation", () => {
 			const result = checkScrollAwareActivation({
 				swipeInfo: { ...noSwipe, isSwipingRight: true },
 				directions: horizontalDirections,
-				scrollX: 100,
-				scrollY: 0,
-				maxScrollX: 500,
-				maxScrollY: 0,
+				scrollConfig: createScrollConfig({ x: 100, contentWidth: 500, layoutWidth: 0 }),
 			});
 			expect(result.shouldActivate).toBe(false);
 		});
@@ -385,10 +379,7 @@ describe("checkScrollAwareActivation", () => {
 			const result = checkScrollAwareActivation({
 				swipeInfo: { ...noSwipe, isSwipingLeft: true },
 				directions: invertedHorizontalDirections,
-				scrollX: 500,
-				scrollY: 0,
-				maxScrollX: 500,
-				maxScrollY: 0,
+				scrollConfig: createScrollConfig({ x: 500, contentWidth: 500, layoutWidth: 0 }),
 			});
 			expect(result.shouldActivate).toBe(true);
 			expect(result.direction).toBe("horizontal-inverted");
@@ -400,10 +391,7 @@ describe("checkScrollAwareActivation", () => {
 			const result = checkScrollAwareActivation({
 				swipeInfo: { ...noSwipe, isSwipingUp: true },
 				directions: baseDirections,
-				scrollX: 0,
-				scrollY: 0,
-				maxScrollX: 0,
-				maxScrollY: 500,
+				scrollConfig: createScrollConfig({ contentHeight: 500, layoutHeight: 0 }),
 				hasSnapPoints: true,
 				canExpandMore: true,
 			});
@@ -415,10 +403,7 @@ describe("checkScrollAwareActivation", () => {
 			const result = checkScrollAwareActivation({
 				swipeInfo: { ...noSwipe, isSwipingUp: true },
 				directions: baseDirections,
-				scrollX: 0,
-				scrollY: 0,
-				maxScrollX: 0,
-				maxScrollY: 500,
+				scrollConfig: createScrollConfig({ contentHeight: 500, layoutHeight: 0 }),
 				hasSnapPoints: true,
 				canExpandMore: false,
 			});
@@ -429,10 +414,7 @@ describe("checkScrollAwareActivation", () => {
 			const result = checkScrollAwareActivation({
 				swipeInfo: { ...noSwipe, isSwipingUp: true },
 				directions: baseDirections,
-				scrollX: 0,
-				scrollY: 100,
-				maxScrollX: 0,
-				maxScrollY: 500,
+				scrollConfig: createScrollConfig({ y: 100, contentHeight: 500, layoutHeight: 0 }),
 				hasSnapPoints: true,
 				canExpandMore: true,
 			});
@@ -450,10 +432,7 @@ describe("checkScrollAwareActivation", () => {
 			const result = checkScrollAwareActivation({
 				swipeInfo: { ...noSwipe, isSwipingLeft: true },
 				directions: horizontalDirections,
-				scrollX: 0,
-				scrollY: 0,
-				maxScrollX: 500,
-				maxScrollY: 0,
+				scrollConfig: createScrollConfig({ contentWidth: 500, layoutWidth: 0 }),
 				hasSnapPoints: true,
 				canExpandMore: true,
 			});
@@ -467,10 +446,7 @@ describe("checkScrollAwareActivation", () => {
 			const result = checkScrollAwareActivation({
 				swipeInfo: noSwipe,
 				directions: baseDirections,
-				scrollX: 0,
-				scrollY: 0,
-				maxScrollX: 0,
-				maxScrollY: 500,
+				scrollConfig: createScrollConfig({ contentHeight: 500, layoutHeight: 0 }),
 			});
 			expect(result.shouldActivate).toBe(false);
 			expect(result.direction).toBe(null);
@@ -487,10 +463,7 @@ describe("checkScrollAwareActivation", () => {
 			const result = checkScrollAwareActivation({
 				swipeInfo: { ...noSwipe, isSwipingDown: true },
 				directions: disabledDirections,
-				scrollX: 0,
-				scrollY: 0,
-				maxScrollX: 0,
-				maxScrollY: 500,
+				scrollConfig: createScrollConfig({ contentHeight: 500, layoutHeight: 0 }),
 			});
 			expect(result.shouldActivate).toBe(false);
 		});

package/src/shared/constants.ts

@@ -4,6 +4,7 @@ import type { MeasuredDimensions } from "react-native-reanimated";
 import type { ScreenTransitionState } from "./types/animation.types";
 import type { ActivationArea } from "./types/gesture.types";
 import type { Layout } from "./types/screen.types";
+import type { BaseStackRoute } from "./types/stack.types";
 
 /**
  * Masked view integration
@@ -16,6 +17,35 @@ export const CONTAINER_STYLE_ID = "_ROOT_CONTAINER";
  */
 export const NO_STYLES = Object.freeze({});
 
+/**
+ * Default gesture values
+ */
+const DEFAULT_GESTURE_VALUES = {
+	x: 0,
+	y: 0,
+	normalizedX: 0,
+	normalizedY: 0,
+	isDismissing: 0,
+	isDragging: 0,
+	direction: null,
+} as const;
+
+/**
+ * Creates a new screen transition state object
+ */
+export const createScreenTransitionState = (
+	route: BaseStackRoute,
+	meta?: Record<string, unknown>,
+): ScreenTransitionState => ({
+	progress: 0,
+	closing: 0,
+	animating: 0,
+	entering: 1,
+	gesture: { ...DEFAULT_GESTURE_VALUES },
+	route,
+	meta,
+});
+
 /**
  * Default screen transition state
  */
@@ -25,15 +55,7 @@ export const DEFAULT_SCREEN_TRANSITION_STATE: ScreenTransitionState =
 		closing: 0,
 		animating: 0,
 		entering: 1,
-		gesture: {
-			x: 0,
-			y: 0,
-			normalizedX: 0,
-			normalizedY: 0,
-			isDismissing: 0,
-			isDragging: 0,
-			direction: null,
-		},
+		gesture: DEFAULT_GESTURE_VALUES,
 		route: {} as RouteProp<ParamListBase>,
 	});
 
@@ -79,3 +101,8 @@ export const IS_WEB = Platform.OS === "web";
 
 export const TRUE = 1;
 export const FALSE = 0;
+
+/**
+ * Small value for floating-point comparisons to handle animation/interpolation imprecision
+ */
+export const EPSILON = 1e-5;

package/src/shared/hooks/animation/use-screen-animation.tsx

@@ -3,7 +3,10 @@ import { useWindowDimensions } from "react-native";
 import { type SharedValue, useDerivedValue } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import type { NativeStackScreenTransitionConfig } from "../../../native-stack/types";
-import { DEFAULT_SCREEN_TRANSITION_STATE } from "../../constants";
+import {
+	createScreenTransitionState,
+	DEFAULT_SCREEN_TRANSITION_STATE,
+} from "../../constants";
 import {
 	type BaseDescriptor,
 	useKeys,
@@ -31,26 +34,26 @@ type BuiltState = {
 	unwrapped: ScreenTransitionState;
 };
 
-const createScreenTransitionState = (
-	route: BaseStackRoute,
-	meta?: Record<string, unknown>,
-): ScreenTransitionState => ({
-	progress: 0,
-	closing: 0,
-	animating: 0,
-	entering: 1,
-	gesture: {
-		x: 0,
-		y: 0,
-		normalizedX: 0,
-		normalizedY: 0,
-		isDismissing: 0,
-		isDragging: 0,
-		direction: null,
-	},
-	route,
-	meta,
-});
+/**
+ * Computes the animated snap index based on progress and snap points.
+ * Returns -1 if no snap points, otherwise interpolates between indices.
+ */
+const computeSnapIndex = (progress: number, snapPoints: number[]): number => {
+	"worklet";
+	if (snapPoints.length === 0) return -1;
+	if (progress <= snapPoints[0]) return 0;
+	if (progress >= snapPoints[snapPoints.length - 1])
+		return snapPoints.length - 1;
+
+	for (let i = 0; i < snapPoints.length - 1; i++) {
+		if (progress <= snapPoints[i + 1]) {
+			const t =
+				(progress - snapPoints[i]) / (snapPoints[i + 1] - snapPoints[i]);
+			return i + t;
+		}
+	}
+	return snapPoints.length - 1;
+};
 
 const unwrapInto = (s: BuiltState): ScreenTransitionState => {
 	"worklet";
@@ -123,6 +126,11 @@ export function _useScreenAnimation() {
 	const currentRouteKey = currentDescriptor?.route?.key;
 	const currentIndex = routeKeys.indexOf(currentRouteKey);
 
+	const sortedSnapPoints = useMemo(() => {
+		const points = currentDescriptor?.options?.snapPoints;
+		return points ? [...points].sort((a, b) => a - b) : [];
+	}, [currentDescriptor?.options?.snapPoints]);
+
 	const screenInterpolatorProps = useDerivedValue<
 		Omit<ScreenInterpolationProps, "bounds">
 	>(() => {
@@ -152,6 +160,8 @@ export function _useScreenAnimation() {
 		const stackProgress =
 			currentIndex >= 0 ? rootStackProgress.value - currentIndex : progress;
 
+		const snapIndex = computeSnapIndex(current.progress, sortedSnapPoints);
+
 		return {
 			layouts: { screen: dimensions },
 			insets,
@@ -160,6 +170,7 @@ export function _useScreenAnimation() {
 			next,
 			progress,
 			stackProgress,
+			snapIndex,
 			...helpers,
 		};
 	});

package/src/shared/hooks/gestures/use-build-gestures.tsx

@@ -1,20 +1,12 @@
 import { StackActions } from "@react-navigation/native";
 import { useCallback, useMemo, useRef } from "react";
-import { useWindowDimensions } from "react-native";
 import { Gesture, type GestureType } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
-import {
-	DEFAULT_GESTURE_ACTIVATION_AREA,
-	DEFAULT_GESTURE_DIRECTION,
-	DEFAULT_GESTURE_DRIVES_PROGRESS,
-	GESTURE_VELOCITY_IMPACT,
-} from "../../constants";
 import type {
 	GestureContextType,
 	ScrollConfig,
 } from "../../providers/gestures.provider";
 import { useKeys } from "../../providers/screen/keys.provider";
-import { AnimationStore } from "../../stores/animation.store";
 import { GestureStore, type GestureStoreMap } from "../../stores/gesture.store";
 import { useScreenGestureHandlers } from "./use-screen-gesture-handlers";
 
@@ -32,8 +24,6 @@ export const useBuildGestures = ({
 	nativeGesture: GestureType;
 	gestureAnimationValues: GestureStoreMap;
 } => {
-	const dimensions = useWindowDimensions();
-
 	const { current } = useKeys();
 
 	const navState = current.navigation.getState();
@@ -48,17 +38,8 @@ export const useBuildGestures = ({
 	const gestureAnimationValues = GestureStore.getRouteGestures(
 		current.route.key,
 	);
-	const animations = AnimationStore.getAll(current.route.key);
-
-	const {
-		gestureDirection = DEFAULT_GESTURE_DIRECTION,
-		gestureVelocityImpact = GESTURE_VELOCITY_IMPACT,
-		gestureDrivesProgress = DEFAULT_GESTURE_DRIVES_PROGRESS,
-		gestureActivationArea = DEFAULT_GESTURE_ACTIVATION_AREA,
-		gestureResponseDistance,
-		transitionSpec,
-		snapPoints,
-	} = current.options;
+
+	const { snapPoints } = current.options;
 
 	// Dismiss gesture is controlled by gestureEnabled (disabled for first screen)
 	const canDismiss = Boolean(
@@ -97,26 +78,13 @@ export const useBuildGestures = ({
 
 	const { onTouchesDown, onTouchesMove, onStart, onUpdate, onEnd } =
 		useScreenGestureHandlers({
-			dimensions,
-			animations,
-			gestureAnimationValues,
-			gestureDirection,
-			gestureDrivesProgress,
-			gestureVelocityImpact,
 			scrollConfig,
-			gestureActivationArea,
-			gestureResponseDistance,
-			snapPoints,
 			canDismiss,
-			transitionSpec,
 			handleDismiss,
 			ancestorIsDismissing:
 				ancestorContext?.gestureAnimationValues.isDismissing,
 		});
 
-	// Memoize gestures to keep stable references - critical for RNGH
-	// Child gestures reference ancestor's pan via requireExternalGestureToFail,
-	// so the pan gesture MUST be stable or children will reference stale objects
 	return useMemo(() => {
 		const panGesture = Gesture.Pan()
 			.withRef(panGestureRef)