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

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>

package/src/shared/components/screen-container.tsx

@@ -0,0 +1,65 @@
+import { StackActions } from "@react-navigation/native";
+import { memo, useCallback } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { NO_STYLES } from "../constants";
+import { useBackdropPointerEvents } from "../hooks/use-backdrop-pointer-events";
+import { useKeys } from "../providers/screen/keys.provider";
+import { useScreenStyles } from "../providers/screen/styles.provider";
+
+type Props = {
+	children: React.ReactNode;
+};
+
+export const ScreenContainer = memo(({ children }: Props) => {
+	const { stylesMap } = useScreenStyles();
+	const { current } = useKeys();
+	const { pointerEvents, backdropBehavior } = useBackdropPointerEvents();
+
+	const isDismissable = backdropBehavior === "dismiss";
+
+	const handleBackdropPress = useCallback(() => {
+		current.navigation.dispatch(StackActions.pop());
+	}, [current.navigation]);
+
+	const animatedContentStyle = useAnimatedStyle(() => {
+		"worklet";
+		return stylesMap.value.contentStyle || NO_STYLES;
+	});
+
+	const animatedBackdropStyle = useAnimatedStyle(() => {
+		"worklet";
+		return (
+			stylesMap.value.backdropStyle ?? stylesMap.value.overlayStyle ?? NO_STYLES
+		);
+	});
+
+	return (
+		<View style={styles.container} pointerEvents={pointerEvents}>
+			<Pressable
+				style={StyleSheet.absoluteFillObject}
+				pointerEvents={isDismissable ? "auto" : "none"}
+				onPress={isDismissable ? handleBackdropPress : undefined}
+			>
+				<Animated.View
+					style={[StyleSheet.absoluteFillObject, animatedBackdropStyle]}
+				/>
+			</Pressable>
+			<Animated.View
+				style={[styles.content, animatedContentStyle]}
+				pointerEvents={isDismissable ? "box-none" : pointerEvents}
+			>
+				{children}
+			</Animated.View>
+		</View>
+	);
+});
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+	},
+	content: {
+		flex: 1,
+	},
+});

package/src/shared/configs/presets.ts

@@ -208,7 +208,7 @@ export const ElasticCard = (
 				contentStyle: {
 					transform: [{ scale }, { translateX }, { translateY }],
 				},
-				overlayStyle: {
+				backdropStyle: {
 					backgroundColor: !next ? overlayColor : "rgba(0,0,0,0)",
 				},
 			};
@@ -281,7 +281,7 @@ export const SharedIGImage = ({
 				});
 
 				return {
-					overlayStyle: {
+					backdropStyle: {
 						backgroundColor: "black",
 						opacity: interpolate(progress, [0, 1], [0, 0.5]),
 					},
@@ -634,7 +634,7 @@ export const SharedXImage = ({
 					transform: [{ translateY: contentY }, { translateY: dragY }],
 					pointerEvents: current.animating ? "none" : "auto",
 				},
-				overlayStyle: {
+				backdropStyle: {
 					backgroundColor: overlayClr,
 				},
 			};

package/src/shared/configs/specs.ts

@@ -8,3 +8,9 @@ export const DefaultSpec: WithSpringConfig = {
 	// @ts-expect-error
 	restSpeedThreshold: 0.02,
 };
+
+export const DefaultSnapSpec: WithSpringConfig = {
+	stiffness: 500,
+	damping: 50,
+	mass: 1,
+};