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

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

@@ -1,19 +1,12 @@
 import type { Route } from "@react-navigation/native";
-import { useCallback, useMemo } from "react";
-import {
-	runOnUI,
-	type SharedValue,
-	useDerivedValue,
-} from "react-native-reanimated";
-import { DefaultSnapSpec } from "../../configs/specs";
+import { useMemo } from "react";
+import { useDerivedValue } from "react-native-reanimated";
 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";
 
@@ -54,21 +47,6 @@ 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;
-
-	/**
-	 * Animated value representing the current snap point index.
-	 * Interpolates between indices during gestures (e.g., 0.5 means halfway between snap 0 and 1).
-	 * Returns -1 if no snap points are defined.
-	 */
-	animatedSnapIndex: SharedValue<number>;
 }
 
 /**
@@ -99,84 +77,6 @@ export function useScreenState<
 		return scenes[focusedIndex] ?? scenes[scenes.length - 1];
 	}, [scenes, focusedIndex]);
 
-	const currentOptions = current.options;
-	const snapPoints = currentOptions?.snapPoints;
-	const animations = useMemo(
-		() => AnimationStore.getAll(current.route.key),
-		[current.route.key],
-	);
-
-	// Pre-sort snap points for the derived value (avoids sorting in worklet)
-	const sortedSnapPoints = useMemo(
-		() => (snapPoints ? [...snapPoints].sort((a, b) => a - b) : []),
-		[snapPoints],
-	);
-
-	const animatedSnapIndex = useDerivedValue(() => {
-		if (sortedSnapPoints.length === 0) {
-			return -1;
-		}
-
-		const progress = animations.progress.value;
-
-		// Below first snap point
-		if (progress <= sortedSnapPoints[0]) {
-			return 0;
-		}
-
-		// Above last snap point
-		if (progress >= sortedSnapPoints[sortedSnapPoints.length - 1]) {
-			return sortedSnapPoints.length - 1;
-		}
-
-		// Find segment and interpolate
-		for (let i = 0; i < sortedSnapPoints.length - 1; i++) {
-			if (progress <= sortedSnapPoints[i + 1]) {
-				const t =
-					(progress - sortedSnapPoints[i]) /
-					(sortedSnapPoints[i + 1] - sortedSnapPoints[i]);
-				return i + t;
-			}
-		}
-
-		return sortedSnapPoints.length - 1;
-	});
-
-	const snapTo = useCallback(
-		(targetIndex: number) => {
-			if (!sortedSnapPoints || sortedSnapPoints.length === 0) {
-				console.warn("snapTo called but no snapPoints defined");
-				return;
-			}
-
-			if (targetIndex < 0 || targetIndex >= sortedSnapPoints.length) {
-				console.warn(
-					`snapTo index ${targetIndex} out of bounds (0-${sortedSnapPoints.length - 1})`,
-				);
-				return;
-			}
-
-			const targetProgress = sortedSnapPoints[targetIndex];
-
-			runOnUI(() => {
-				"worklet";
-				animateToProgress({
-					target: targetProgress,
-					animations,
-					spec: {
-						open:
-							focusedScene.descriptor.options.transitionSpec?.expand ??
-							DefaultSnapSpec,
-						close:
-							focusedScene.descriptor.options.transitionSpec?.collapse ??
-							DefaultSnapSpec,
-					},
-				});
-			})();
-		},
-		[sortedSnapPoints, animations, focusedScene],
-	);
-
 	return useMemo(
 		() => ({
 			index,
@@ -186,8 +86,6 @@ export function useScreenState<
 			focusedIndex,
 			meta: focusedScene?.descriptor?.options?.meta,
 			navigation: current.navigation as TNavigation,
-			snapTo,
-			animatedSnapIndex,
 		}),
 		[
 			index,
@@ -196,8 +94,6 @@ export function useScreenState<
 			focusedIndex,
 			current.navigation,
 			current.route,
-			snapTo,
-			animatedSnapIndex,
 		],
 	);
 }

package/src/shared/index.ts

@@ -18,6 +18,7 @@ export default {
 	Specs,
 };
 
+export { snapTo } from "./animation/snap-to";
 export { useScreenAnimation } from "./hooks/animation/use-screen-animation";
 export { useScreenGesture } from "./hooks/gestures/use-screen-gesture";
 export { useHistory } from "./hooks/navigation/use-history";

package/src/shared/stores/animation.store.ts

@@ -6,6 +6,7 @@ export type AnimationStoreMap = {
 	animating: SharedValue<number>;
 	closing: SharedValue<number>;
 	entering: SharedValue<number>;
+	targetProgress: SharedValue<number>;
 };
 
 const store: Record<ScreenKey, AnimationStoreMap> = {};
@@ -18,6 +19,7 @@ const ensure = (key: ScreenKey) => {
 			closing: makeMutable(0),
 			animating: makeMutable(0),
 			entering: makeMutable(1),
+			targetProgress: makeMutable(1),
 		} satisfies AnimationStoreMap;
 		store[key] = bag;
 	}

package/src/shared/types/animation.types.ts

@@ -142,6 +142,16 @@ export interface ScreenInterpolationProps {
 	 */
 	stackProgress: number;
 
+	/**
+	 * Animated index of the current snap point.
+	 * Interpolates between indices during gestures/animations.
+	 * - Returns -1 if no snap points are defined
+	 * - Returns 0 when at or below first snap point
+	 * - Returns fractional values between snap points (e.g., 1.5 = halfway between snap 1 and 2)
+	 * - Returns length-1 when at or above last snap point
+	 */
+	snapIndex: number;
+
 	/**
 	 * Function that provides access to bounds builders for creating shared element transitions.
 	 */

package/src/shared/utils/animation/animate-to-progress.ts

@@ -44,7 +44,9 @@ export const animateToProgress = ({
 			? { ...config, velocity: initialVelocity }
 			: config;
 
-	const { progress, animating, closing, entering } = animations;
+	const { progress, animating, closing, entering, targetProgress } = animations;
+
+	targetProgress.set(value);
 
 	if (isClosing) {
 		closing.set(TRUE);
@@ -73,7 +75,10 @@ export const animateToProgress = ({
 				runOnJS(onAnimationFinish)(finished);
 			}
 
-			animating.set(FALSE);
+			// Delay setting animating=FALSE by one frame to ensure final frame is painted
+			requestAnimationFrame(() => {
+				animating.set(FALSE);
+			});
 		}),
 	);
 };

package/src/shared/utils/gesture/check-gesture-activation.ts

@@ -1,5 +1,6 @@
 import type { GestureStateManagerType } from "react-native-gesture-handler/lib/typescript/handlers/gestures/gestureStateManager";
 import type { SharedValue } from "react-native-reanimated";
+import type { ScrollConfig } from "../../providers/gestures.provider";
 import {
 	type ActivationArea,
 	type GestureActivationArea,
@@ -13,6 +14,7 @@ type Directions = {
 	verticalInverted: boolean;
 	horizontal: boolean;
 	horizontalInverted: boolean;
+	snapAxisInverted?: boolean;
 };
 
 interface CheckGestureActivationProps {
@@ -317,10 +319,7 @@ interface ScrollAwareActivationParams {
 		isSwipingLeft: boolean;
 	};
 	directions: Directions;
-	scrollX: number;
-	scrollY: number;
-	maxScrollX: number;
-	maxScrollY: number;
+	scrollConfig: ScrollConfig | null;
 	hasSnapPoints?: boolean;
 	canExpandMore?: boolean;
 }
@@ -338,10 +337,7 @@ type GestureDirection =
 export function checkScrollAwareActivation({
 	swipeInfo,
 	directions,
-	scrollX,
-	scrollY,
-	maxScrollX,
-	maxScrollY,
+	scrollConfig,
 	hasSnapPoints,
 	canExpandMore,
 }: ScrollAwareActivationParams): {
@@ -353,6 +349,76 @@ export function checkScrollAwareActivation({
 	const { isSwipingDown, isSwipingUp, isSwipingRight, isSwipingLeft } =
 		swipeInfo;
 
+	// Extract scroll values from config
+	const scrollX = scrollConfig?.x ?? 0;
+	const scrollY = scrollConfig?.y ?? 0;
+	const maxScrollX = scrollConfig
+		? scrollConfig.contentWidth - scrollConfig.layoutWidth
+		: 0;
+	const maxScrollY = scrollConfig
+		? scrollConfig.contentHeight - scrollConfig.layoutHeight
+		: 0;
+	const snapAxisInverted = directions.snapAxisInverted;
+
+	// With snap points, gestures should only activate based on the PRIMARY scroll edge
+	// (the edge where the sheet originates from), not the opposite edge.
+	// This prevents the auto-enabled opposite direction from hijacking scrolls.
+	if (hasSnapPoints) {
+		const isVerticalAxis = directions.vertical || directions.verticalInverted;
+		const isHorizontalAxis =
+			directions.horizontal || directions.horizontalInverted;
+
+		if (isVerticalAxis) {
+			if (snapAxisInverted) {
+				// Sheet from TOP (vertical-inverted): only activate at scroll BOTTOM
+				if (scrollY >= maxScrollY) {
+					if (isSwipingUp) {
+						return { shouldActivate: true, direction: "vertical-inverted" };
+					}
+					if (isSwipingDown && canExpandMore) {
+						return { shouldActivate: true, direction: "vertical" };
+					}
+				}
+			} else {
+				// Sheet from BOTTOM (vertical): only activate at scroll TOP
+				if (scrollY <= 0) {
+					if (isSwipingDown) {
+						return { shouldActivate: true, direction: "vertical" };
+					}
+					if (isSwipingUp && canExpandMore) {
+						return { shouldActivate: true, direction: "vertical-inverted" };
+					}
+				}
+			}
+		}
+
+		if (isHorizontalAxis) {
+			if (snapAxisInverted) {
+				// Sheet from LEFT (horizontal-inverted): only activate at scroll RIGHT
+				if (scrollX >= maxScrollX) {
+					if (isSwipingLeft) {
+						return { shouldActivate: true, direction: "horizontal-inverted" };
+					}
+					if (isSwipingRight && canExpandMore) {
+						return { shouldActivate: true, direction: "horizontal" };
+					}
+				}
+			} else {
+				// Sheet from RIGHT (horizontal): only activate at scroll LEFT
+				if (scrollX <= 0) {
+					if (isSwipingRight) {
+						return { shouldActivate: true, direction: "horizontal" };
+					}
+					if (isSwipingLeft && canExpandMore) {
+						return { shouldActivate: true, direction: "horizontal-inverted" };
+					}
+				}
+			}
+		}
+
+		return { shouldActivate: false, direction: null };
+	}
+
 	if (directions.vertical && isSwipingDown && scrollY <= 0) {
 		return { shouldActivate: true, direction: "vertical" };
 	}
@@ -369,20 +435,5 @@ export function checkScrollAwareActivation({
 		return { shouldActivate: true, direction: "horizontal-inverted" };
 	}
 
-	if (hasSnapPoints && canExpandMore) {
-		// Vertical sheet: swipe up at scroll top → expand
-		const enabledYAxis = directions.vertical || directions.verticalInverted;
-		const enabledXAxis = directions.horizontal || directions.horizontalInverted;
-
-		if (enabledYAxis && isSwipingUp && scrollY <= 0) {
-			return { shouldActivate: true, direction: "vertical-inverted" };
-		}
-
-		// Horizontal sheet: swipe left at scroll left → expand
-		if (enabledXAxis && isSwipingLeft && scrollX <= 0) {
-			return { shouldActivate: true, direction: "horizontal-inverted" };
-		}
-	}
-
 	return { shouldActivate: false, direction: null };
 }

package/src/shared/utils/logger.ts

@@ -0,0 +1,15 @@
+const LIBRARY_NAME = "react-native-screen-transitions";
+
+export const logger = {
+	error(message: string) {
+		"worklet";
+		console.error(`[${LIBRARY_NAME}] ${message}`);
+	},
+	warn(message: string) {
+		"worklet";
+		console.warn(`[${LIBRARY_NAME}] ${message}`);
+	},
+};
+
+export const error = (message: string) =>
+	new Error(`[${LIBRARY_NAME}] ${message}`);