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

package/src/shared/__tests__/determine-snap-target.test.ts

@@ -0,0 +1,268 @@
+import { describe, expect, it } from "bun:test";
+import { determineSnapTarget } from "../utils/gesture/determine-snap-target";
+
+describe("determineSnapTarget", () => {
+	const dimension = 800; // screen height
+	const snapPoints = [0.3, 0.6, 1]; // 3 snap points
+
+	describe("basic snapping without velocity", () => {
+		it("snaps to nearest snap point when exactly at a snap point", () => {
+			const result = determineSnapTarget({
+				currentProgress: 0.6,
+				snapPoints,
+				velocity: 0,
+				dimension,
+			});
+			expect(result.targetProgress).toBe(0.6);
+			expect(result.shouldDismiss).toBe(false);
+		});
+
+		it("snaps to lower snap point when below midpoint", () => {
+			// Midpoint between 0.3 and 0.6 is 0.45
+			const result = determineSnapTarget({
+				currentProgress: 0.4,
+				snapPoints,
+				velocity: 0,
+				dimension,
+			});
+			expect(result.targetProgress).toBe(0.3);
+		});
+
+		it("snaps to higher snap point when above midpoint", () => {
+			// Midpoint between 0.3 and 0.6 is 0.45
+			const result = determineSnapTarget({
+				currentProgress: 0.5,
+				snapPoints,
+				velocity: 0,
+				dimension,
+			});
+			expect(result.targetProgress).toBe(0.6);
+		});
+
+		it("snaps to highest point when above all snap points", () => {
+			const result = determineSnapTarget({
+				currentProgress: 1.2,
+				snapPoints,
+				velocity: 0,
+				dimension,
+			});
+			expect(result.targetProgress).toBe(1);
+		});
+	});
+
+	describe("velocity influence", () => {
+		it("velocity toward dismiss pushes toward lower snap point", () => {
+			// At 0.5 (above midpoint 0.45), normally would snap to 0.6
+			// But positive velocity (toward dismiss) should push toward 0.3
+			const result = determineSnapTarget({
+				currentProgress: 0.5,
+				snapPoints,
+				velocity: 800, // Strong velocity toward dismiss
+				dimension,
+				velocityFactor: 0.15,
+			});
+			expect(result.targetProgress).toBe(0.3);
+		});
+
+		it("velocity toward expand pushes toward higher snap point", () => {
+			// At 0.4 (below midpoint 0.45), normally would snap to 0.3
+			// But negative velocity (toward expand) should push toward 0.6
+			const result = determineSnapTarget({
+				currentProgress: 0.4,
+				snapPoints,
+				velocity: -800, // Strong velocity toward expand
+				dimension,
+				velocityFactor: 0.15,
+			});
+			expect(result.targetProgress).toBe(0.6);
+		});
+
+		it("weak velocity does not override position", () => {
+			// At 0.55 (above midpoint), weak velocity shouldn't change target
+			const result = determineSnapTarget({
+				currentProgress: 0.55,
+				snapPoints,
+				velocity: 100, // Weak velocity
+				dimension,
+				velocityFactor: 0.15,
+			});
+			expect(result.targetProgress).toBe(0.6);
+		});
+
+		it("respects custom velocityFactor", () => {
+			// Higher velocityFactor = velocity has more influence
+			const result = determineSnapTarget({
+				currentProgress: 0.5,
+				snapPoints,
+				velocity: 400,
+				dimension,
+				velocityFactor: 0.5, // High factor
+			});
+			expect(result.targetProgress).toBe(0.3);
+		});
+	});
+
+	describe("dismiss behavior", () => {
+		it("allows dismiss when canDismiss is true and near 0", () => {
+			const result = determineSnapTarget({
+				currentProgress: 0.1,
+				snapPoints,
+				velocity: 500,
+				dimension,
+				canDismiss: true,
+			});
+			expect(result.targetProgress).toBe(0);
+			expect(result.shouldDismiss).toBe(true);
+		});
+
+		it("prevents dismiss when canDismiss is false", () => {
+			const result = determineSnapTarget({
+				currentProgress: 0.1,
+				snapPoints,
+				velocity: 1000, // Strong dismiss velocity
+				dimension,
+				canDismiss: false,
+			});
+			expect(result.targetProgress).toBe(0.3); // First snap point
+			expect(result.shouldDismiss).toBe(false);
+		});
+
+		it("defaults canDismiss to true", () => {
+			const result = determineSnapTarget({
+				currentProgress: 0.1,
+				snapPoints,
+				velocity: 500,
+				dimension,
+			});
+			expect(result.shouldDismiss).toBe(true);
+		});
+
+		it("shouldDismiss is false when snapping to any snap point", () => {
+			const result = determineSnapTarget({
+				currentProgress: 0.5,
+				snapPoints,
+				velocity: 0,
+				dimension,
+			});
+			expect(result.shouldDismiss).toBe(false);
+		});
+	});
+
+	describe("edge cases", () => {
+		it("handles single snap point", () => {
+			const result = determineSnapTarget({
+				currentProgress: 0.3,
+				snapPoints: [0.5],
+				velocity: 0,
+				dimension,
+			});
+			expect(result.targetProgress).toBe(0.5);
+		});
+
+		it("handles unsorted snap points", () => {
+			const result = determineSnapTarget({
+				currentProgress: 0.5,
+				snapPoints: [1, 0.3, 0.6], // Unsorted
+				velocity: 0,
+				dimension,
+			});
+			// After sorting: [0.3, 0.6, 1], midpoint 0.3-0.6 is 0.45
+			expect(result.targetProgress).toBe(0.6);
+		});
+
+		it("handles progress at exactly 0", () => {
+			const result = determineSnapTarget({
+				currentProgress: 0,
+				snapPoints,
+				velocity: 0,
+				dimension,
+				canDismiss: true,
+			});
+			expect(result.targetProgress).toBe(0);
+			expect(result.shouldDismiss).toBe(true);
+		});
+
+		it("handles negative progress", () => {
+			const result = determineSnapTarget({
+				currentProgress: -0.1,
+				snapPoints,
+				velocity: 0,
+				dimension,
+				canDismiss: true,
+			});
+			expect(result.targetProgress).toBe(0);
+		});
+
+		it("handles very high velocity", () => {
+			const result = determineSnapTarget({
+				currentProgress: 0.9,
+				snapPoints,
+				velocity: 5000, // Very high velocity
+				dimension,
+				canDismiss: true,
+			});
+			expect(result.targetProgress).toBe(0);
+			expect(result.shouldDismiss).toBe(true);
+		});
+
+		it("handles snap points not starting at typical values", () => {
+			const result = determineSnapTarget({
+				currentProgress: 0.7,
+				snapPoints: [0.5, 0.75, 1],
+				velocity: 0,
+				dimension,
+			});
+			// Midpoint between 0.5 and 0.75 is 0.625
+			// 0.7 is above 0.625, so should snap to 0.75
+			expect(result.targetProgress).toBe(0.75);
+		});
+
+		it("handles two snap points", () => {
+			const result = determineSnapTarget({
+				currentProgress: 0.4,
+				snapPoints: [0.3, 1],
+				velocity: 0,
+				dimension,
+			});
+			// Midpoint is 0.65, 0.4 is below, so snap to 0.3
+			expect(result.targetProgress).toBe(0.3);
+		});
+	});
+
+	describe("zone boundaries", () => {
+		it("snaps to higher at exact midpoint (uses < not <=)", () => {
+			// Midpoint between 0 and 0.3 is 0.15
+			// The algorithm uses `<` so at exact midpoint, it snaps to higher
+			const result = determineSnapTarget({
+				currentProgress: 0.15,
+				snapPoints,
+				velocity: 0,
+				dimension,
+				canDismiss: true,
+			});
+			expect(result.targetProgress).toBe(0.3);
+		});
+
+		it("snaps to lower just below midpoint", () => {
+			const result = determineSnapTarget({
+				currentProgress: 0.149,
+				snapPoints,
+				velocity: 0,
+				dimension,
+				canDismiss: true,
+			});
+			expect(result.targetProgress).toBe(0);
+		});
+
+		it("snaps to higher just above midpoint", () => {
+			const result = determineSnapTarget({
+				currentProgress: 0.151,
+				snapPoints,
+				velocity: 0,
+				dimension,
+				canDismiss: true,
+			});
+			expect(result.targetProgress).toBe(0.3);
+		});
+	});
+});

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

@@ -4,6 +4,7 @@ import {
 	computeEdgeConstraints,
 	calculateSwipeDirs,
 	shouldActivateOrFail,
+	checkScrollAwareActivation,
 } from "../utils/gesture/check-gesture-activation";
 
 describe("normalizeSides", () => {
@@ -249,3 +250,249 @@ describe("shouldActivateOrFail", () => {
 		expect(result.shouldActivate).toBe(true);
 	});
 });
+
+describe("checkScrollAwareActivation", () => {
+	const baseDirections = {
+		vertical: true,
+		verticalInverted: false,
+		horizontal: false,
+		horizontalInverted: false,
+	};
+
+	const noSwipe = {
+		isSwipingDown: false,
+		isSwipingUp: false,
+		isSwipingRight: false,
+		isSwipingLeft: false,
+	};
+
+	describe("vertical sheet (dismiss down)", () => {
+		it("activates when swiping down at scroll top", () => {
+			const result = checkScrollAwareActivation({
+				swipeInfo: { ...noSwipe, isSwipingDown: true },
+				directions: baseDirections,
+				scrollX: 0,
+				scrollY: 0,
+				maxScrollX: 0,
+				maxScrollY: 500,
+			});
+			expect(result.shouldActivate).toBe(true);
+			expect(result.direction).toBe("vertical");
+		});
+
+		it("does not activate when swiping down but scroll is not at top", () => {
+			const result = checkScrollAwareActivation({
+				swipeInfo: { ...noSwipe, isSwipingDown: true },
+				directions: baseDirections,
+				scrollX: 0,
+				scrollY: 100,
+				maxScrollX: 0,
+				maxScrollY: 500,
+			});
+			expect(result.shouldActivate).toBe(false);
+		});
+
+		it("does not activate when swiping up without snap points", () => {
+			const result = checkScrollAwareActivation({
+				swipeInfo: { ...noSwipe, isSwipingUp: true },
+				directions: baseDirections,
+				scrollX: 0,
+				scrollY: 0,
+				maxScrollX: 0,
+				maxScrollY: 500,
+			});
+			expect(result.shouldActivate).toBe(false);
+		});
+	});
+
+	describe("vertical inverted sheet (dismiss up)", () => {
+		const invertedDirections = {
+			vertical: false,
+			verticalInverted: true,
+			horizontal: false,
+			horizontalInverted: false,
+		};
+
+		it("activates when swiping up at scroll bottom", () => {
+			const result = checkScrollAwareActivation({
+				swipeInfo: { ...noSwipe, isSwipingUp: true },
+				directions: invertedDirections,
+				scrollX: 0,
+				scrollY: 500,
+				maxScrollX: 0,
+				maxScrollY: 500,
+			});
+			expect(result.shouldActivate).toBe(true);
+			expect(result.direction).toBe("vertical-inverted");
+		});
+
+		it("does not activate when swiping up but scroll is not at bottom", () => {
+			const result = checkScrollAwareActivation({
+				swipeInfo: { ...noSwipe, isSwipingUp: true },
+				directions: invertedDirections,
+				scrollX: 0,
+				scrollY: 200,
+				maxScrollX: 0,
+				maxScrollY: 500,
+			});
+			expect(result.shouldActivate).toBe(false);
+		});
+	});
+
+	describe("horizontal sheet (dismiss right)", () => {
+		const horizontalDirections = {
+			vertical: false,
+			verticalInverted: false,
+			horizontal: true,
+			horizontalInverted: false,
+		};
+
+		it("activates when swiping right at scroll left edge", () => {
+			const result = checkScrollAwareActivation({
+				swipeInfo: { ...noSwipe, isSwipingRight: true },
+				directions: horizontalDirections,
+				scrollX: 0,
+				scrollY: 0,
+				maxScrollX: 500,
+				maxScrollY: 0,
+			});
+			expect(result.shouldActivate).toBe(true);
+			expect(result.direction).toBe("horizontal");
+		});
+
+		it("does not activate when scroll is not at left edge", () => {
+			const result = checkScrollAwareActivation({
+				swipeInfo: { ...noSwipe, isSwipingRight: true },
+				directions: horizontalDirections,
+				scrollX: 100,
+				scrollY: 0,
+				maxScrollX: 500,
+				maxScrollY: 0,
+			});
+			expect(result.shouldActivate).toBe(false);
+		});
+	});
+
+	describe("horizontal inverted sheet (dismiss left)", () => {
+		const invertedHorizontalDirections = {
+			vertical: false,
+			verticalInverted: false,
+			horizontal: false,
+			horizontalInverted: true,
+		};
+
+		it("activates when swiping left at scroll right edge", () => {
+			const result = checkScrollAwareActivation({
+				swipeInfo: { ...noSwipe, isSwipingLeft: true },
+				directions: invertedHorizontalDirections,
+				scrollX: 500,
+				scrollY: 0,
+				maxScrollX: 500,
+				maxScrollY: 0,
+			});
+			expect(result.shouldActivate).toBe(true);
+			expect(result.direction).toBe("horizontal-inverted");
+		});
+	});
+
+	describe("snap points behavior", () => {
+		it("activates for swipe up (expand) at scroll top when hasSnapPoints and canExpandMore", () => {
+			const result = checkScrollAwareActivation({
+				swipeInfo: { ...noSwipe, isSwipingUp: true },
+				directions: baseDirections,
+				scrollX: 0,
+				scrollY: 0,
+				maxScrollX: 0,
+				maxScrollY: 500,
+				hasSnapPoints: true,
+				canExpandMore: true,
+			});
+			expect(result.shouldActivate).toBe(true);
+			expect(result.direction).toBe("vertical-inverted");
+		});
+
+		it("does not activate for swipe up when canExpandMore is false", () => {
+			const result = checkScrollAwareActivation({
+				swipeInfo: { ...noSwipe, isSwipingUp: true },
+				directions: baseDirections,
+				scrollX: 0,
+				scrollY: 0,
+				maxScrollX: 0,
+				maxScrollY: 500,
+				hasSnapPoints: true,
+				canExpandMore: false,
+			});
+			expect(result.shouldActivate).toBe(false);
+		});
+
+		it("does not activate for swipe up when scroll is not at top", () => {
+			const result = checkScrollAwareActivation({
+				swipeInfo: { ...noSwipe, isSwipingUp: true },
+				directions: baseDirections,
+				scrollX: 0,
+				scrollY: 100,
+				maxScrollX: 0,
+				maxScrollY: 500,
+				hasSnapPoints: true,
+				canExpandMore: true,
+			});
+			expect(result.shouldActivate).toBe(false);
+		});
+
+		it("activates for swipe left (expand) on horizontal sheet with snap points", () => {
+			const horizontalDirections = {
+				vertical: false,
+				verticalInverted: false,
+				horizontal: true,
+				horizontalInverted: false,
+			};
+
+			const result = checkScrollAwareActivation({
+				swipeInfo: { ...noSwipe, isSwipingLeft: true },
+				directions: horizontalDirections,
+				scrollX: 0,
+				scrollY: 0,
+				maxScrollX: 500,
+				maxScrollY: 0,
+				hasSnapPoints: true,
+				canExpandMore: true,
+			});
+			expect(result.shouldActivate).toBe(true);
+			expect(result.direction).toBe("horizontal-inverted");
+		});
+	});
+
+	describe("no activation cases", () => {
+		it("returns false when no swipe is detected", () => {
+			const result = checkScrollAwareActivation({
+				swipeInfo: noSwipe,
+				directions: baseDirections,
+				scrollX: 0,
+				scrollY: 0,
+				maxScrollX: 0,
+				maxScrollY: 500,
+			});
+			expect(result.shouldActivate).toBe(false);
+			expect(result.direction).toBe(null);
+		});
+
+		it("returns false when direction is disabled", () => {
+			const disabledDirections = {
+				vertical: false,
+				verticalInverted: false,
+				horizontal: false,
+				horizontalInverted: false,
+			};
+
+			const result = checkScrollAwareActivation({
+				swipeInfo: { ...noSwipe, isSwipingDown: true },
+				directions: disabledDirections,
+				scrollX: 0,
+				scrollY: 0,
+				maxScrollX: 0,
+				maxScrollY: 500,
+			});
+			expect(result.shouldActivate).toBe(false);
+		});
+	});
+});

package/src/shared/__tests__/validate-snap-points.test.ts

@@ -0,0 +1,125 @@
+import { describe, expect, it } from "bun:test";
+import { validateSnapPoints } from "../utils/gesture/validate-snap-points";
+
+describe("validateSnapPoints", () => {
+	describe("when no snap points provided", () => {
+		it("returns hasSnapPoints false", () => {
+			const result = validateSnapPoints({});
+			expect(result.hasSnapPoints).toBe(false);
+		});
+
+		it("returns empty snapPoints array", () => {
+			const result = validateSnapPoints({});
+			expect(result.snapPoints).toEqual([]);
+		});
+
+		it("returns -1 for min and max", () => {
+			const result = validateSnapPoints({});
+			expect(result.minSnapPoint).toBe(-1);
+			expect(result.maxSnapPoint).toBe(-1);
+		});
+
+		it("handles undefined snapPoints", () => {
+			const result = validateSnapPoints({ snapPoints: undefined });
+			expect(result.hasSnapPoints).toBe(false);
+		});
+	});
+
+	describe("when snap points provided", () => {
+		it("returns hasSnapPoints true", () => {
+			const result = validateSnapPoints({ snapPoints: [0.3, 0.6, 1] });
+			expect(result.hasSnapPoints).toBe(true);
+		});
+
+		it("sorts snap points in ascending order", () => {
+			const result = validateSnapPoints({ snapPoints: [1, 0.3, 0.6] });
+			expect(result.snapPoints).toEqual([0.3, 0.6, 1]);
+		});
+
+		it("returns correct max snap point", () => {
+			const result = validateSnapPoints({ snapPoints: [0.3, 0.6, 1] });
+			expect(result.maxSnapPoint).toBe(1);
+		});
+
+		it("handles single snap point", () => {
+			const result = validateSnapPoints({ snapPoints: [0.5] });
+			expect(result.hasSnapPoints).toBe(true);
+			expect(result.snapPoints).toEqual([0.5]);
+			expect(result.minSnapPoint).toBe(0.5);
+			expect(result.maxSnapPoint).toBe(0.5);
+		});
+
+		it("does not mutate original array", () => {
+			const original = [1, 0.3, 0.6];
+			validateSnapPoints({ snapPoints: original });
+			expect(original).toEqual([1, 0.3, 0.6]);
+		});
+	});
+
+	describe("canDismiss behavior", () => {
+		it("sets minSnapPoint to 0 when canDismiss is true", () => {
+			const result = validateSnapPoints({
+				snapPoints: [0.3, 0.6, 1],
+				canDismiss: true,
+			});
+			expect(result.minSnapPoint).toBe(0);
+		});
+
+		it("sets minSnapPoint to first snap point when canDismiss is false", () => {
+			const result = validateSnapPoints({
+				snapPoints: [0.3, 0.6, 1],
+				canDismiss: false,
+			});
+			expect(result.minSnapPoint).toBe(0.3);
+		});
+
+		it("defaults canDismiss to falsy (minSnapPoint = first snap)", () => {
+			const result = validateSnapPoints({ snapPoints: [0.3, 0.6, 1] });
+			expect(result.minSnapPoint).toBe(0.3);
+		});
+
+		it("handles canDismiss with unsorted snap points", () => {
+			const result = validateSnapPoints({
+				snapPoints: [1, 0.5, 0.25],
+				canDismiss: false,
+			});
+			// After sorting: [0.25, 0.5, 1]
+			expect(result.minSnapPoint).toBe(0.25);
+			expect(result.maxSnapPoint).toBe(1);
+		});
+	});
+
+	describe("edge cases", () => {
+		it("handles empty array", () => {
+			const result = validateSnapPoints({ snapPoints: [] });
+			// Empty array is falsy for snap points
+			expect(result.hasSnapPoints).toBe(true); // Array exists but is empty
+			expect(result.snapPoints).toEqual([]);
+		});
+
+		it("handles snap points at 0", () => {
+			const result = validateSnapPoints({
+				snapPoints: [0, 0.5, 1],
+				canDismiss: true,
+			});
+			expect(result.minSnapPoint).toBe(0);
+			expect(result.snapPoints).toEqual([0, 0.5, 1]);
+		});
+
+		it("handles duplicate snap points", () => {
+			const result = validateSnapPoints({ snapPoints: [0.5, 0.5, 1] });
+			expect(result.snapPoints).toEqual([0.5, 0.5, 1]);
+		});
+
+		it("handles very small snap point values", () => {
+			const result = validateSnapPoints({ snapPoints: [0.01, 0.1, 0.5] });
+			expect(result.minSnapPoint).toBe(0.01);
+			expect(result.maxSnapPoint).toBe(0.5);
+		});
+
+		it("handles snap points greater than 1", () => {
+			const result = validateSnapPoints({ snapPoints: [0.5, 1, 1.5] });
+			expect(result.maxSnapPoint).toBe(1.5);
+		});
+	});
+});

package/src/shared/components/create-transition-aware-component.tsx

@@ -27,10 +27,18 @@ export function createTransitionAwareComponent<P extends object>(
 		TransitionAwareProps<P>
 	>((props: any, ref) => {
 		const { nativeGesture } = useGestureContext()!;
-		const { scrollHandler, onContentSizeChange, onLayout } = useScrollRegistry({
+		const {
+			scrollHandler,
+			onContentSizeChange,
+			onLayout,
+			onTouchStart,
+			onTouchEnd,
+		} = useScrollRegistry({
 			onScroll: props.onScroll,
 			onContentSizeChange: props.onContentSizeChange,
 			onLayout: props.onLayout,
+			onTouchStart: props.onTouchStart,
+			onTouchEnd: props.onTouchEnd,
 		});
 
 		return (
@@ -41,6 +49,8 @@ export function createTransitionAwareComponent<P extends object>(
 					onScroll={scrollHandler}
 					onContentSizeChange={onContentSizeChange}
 					onLayout={onLayout}
+					onTouchStart={onTouchStart}
+					onTouchEnd={onTouchEnd}
 					scrollEventThrottle={props.scrollEventThrottle || 16}
 				/>
 			</GestureDetector>