react-native-screen-transitions 3.4.0-alpha.3 → 3.4.0-alpha.5

package/src/shared/providers/gestures/handlers/use-handlers.ts

@@ -25,6 +25,7 @@ import {
 import useStableCallbackValue from "../../../hooks/use-stable-callback-value";
 import { AnimationStore } from "../../../stores/animation.store";
 import { GestureStore } from "../../../stores/gesture.store";
+import { SystemStore } from "../../../stores/system.store";
 import { GestureOffsetState } from "../../../types/gesture.types";
 import type {
 	ClaimedDirections,
@@ -154,8 +155,9 @@ export const useHandlers = ({
 
 	const dimensions = useWindowDimensions();
 	const routeKey = current.route.key;
-	const animations = AnimationStore.getRouteAnimations(routeKey);
-	const gestureAnimationValues = GestureStore.getRouteGestures(routeKey);
+	const animations = AnimationStore.getBag(routeKey);
+	const gestureAnimationValues = GestureStore.getBag(routeKey);
+	const targetProgressValue = SystemStore.getValue(routeKey, "targetProgress");
 	const {
 		hasSnapPoints,
 		hasAutoSnapPoint,
@@ -165,9 +167,9 @@ export const useHandlers = ({
 	} = effectiveSnapPoints;
 
 	// Read the measured "auto" snap point reactively inside worklets.
-	const autoSnapPointValue = AnimationStore.getAnimation(
+	const resolvedAutoSnapPointValue = SystemStore.getValue(
 		routeKey,
-		"autoSnapPoint",
+		"resolvedAutoSnapPoint",
 	);
 
 	const directions = useMemo(() => {
@@ -307,7 +309,7 @@ export const useHandlers = ({
 						const { resolvedMaxSnapPoint } = resolveRuntimeSnapPoints({
 							snapPoints,
 							hasAutoSnapPoint,
-							autoSnapPoint: autoSnapPointValue.value,
+							resolvedAutoSnapPoint: resolvedAutoSnapPointValue.value,
 							minSnapPoint,
 							maxSnapPoint,
 							canDismiss,
@@ -318,7 +320,7 @@ export const useHandlers = ({
 
 						const canExpandMore =
 							animations.progress.value < effectiveMaxSnapPoint - EPSILON &&
-							animations.targetProgress.value < effectiveMaxSnapPoint - EPSILON;
+							targetProgressValue.value < effectiveMaxSnapPoint - EPSILON;
 
 						if (!canExpandMore) {
 							manager.fail();
@@ -339,7 +341,7 @@ export const useHandlers = ({
 			resolveRuntimeSnapPoints({
 				snapPoints,
 				hasAutoSnapPoint,
-				autoSnapPoint: autoSnapPointValue.value,
+				resolvedAutoSnapPoint: resolvedAutoSnapPointValue.value,
 				minSnapPoint,
 				maxSnapPoint,
 				canDismiss,
@@ -357,7 +359,6 @@ export const useHandlers = ({
 		gestureAnimationValues.dragging.value = TRUE;
 		gestureAnimationValues.dismissing.value = FALSE;
 		gestureStartProgress.value = animations.progress.value;
-		animations.animating.value = TRUE;
 	});
 
 	const onUpdate = useStableCallbackValue(
@@ -392,7 +393,7 @@ export const useHandlers = ({
 					resolveRuntimeSnapPoints({
 						snapPoints,
 						hasAutoSnapPoint,
-						autoSnapPoint: autoSnapPointValue.value,
+						resolvedAutoSnapPoint: resolvedAutoSnapPointValue.value,
 						minSnapPoint,
 						maxSnapPoint,
 						canDismiss,
@@ -468,7 +469,7 @@ export const useHandlers = ({
 				const { resolvedSnapPoints } = resolveRuntimeSnapPoints({
 					snapPoints,
 					hasAutoSnapPoint,
-					autoSnapPoint: autoSnapPointValue.value,
+					resolvedAutoSnapPoint: resolvedAutoSnapPointValue.value,
 					minSnapPoint,
 					maxSnapPoint,
 					canDismiss,
@@ -535,6 +536,7 @@ export const useHandlers = ({
 					onAnimationFinish: shouldDismiss ? handleDismiss : undefined,
 					spec: effectiveSpec,
 					animations,
+					targetProgress: targetProgressValue,
 					initialVelocity,
 				});
 			} else {
@@ -576,6 +578,7 @@ export const useHandlers = ({
 					onAnimationFinish: shouldDismiss ? handleDismiss : undefined,
 					spec: transitionSpec,
 					animations,
+					targetProgress: targetProgressValue,
 					initialVelocity: scaledInitialVelocity,
 				});
 			}

package/src/shared/providers/gestures/helpers/gesture-physics.ts

@@ -31,10 +31,12 @@ type GestureAxisCandidate = {
 export const normalizeVelocity = (
 	velocityPixelsPerSecond: number,
 	screenSize: number,
-	maxMagnitude: number = DEFAULT_GESTURE_RELEASE_VELOCITY_MAX,
+	maxMagnitude?: number,
 ) => {
 	"worklet";
-	const max = Math.max(0, Math.abs(maxMagnitude));
+	const resolvedMaxMagnitude =
+		maxMagnitude ?? DEFAULT_GESTURE_RELEASE_VELOCITY_MAX;
+	const max = Math.max(0, Math.abs(resolvedMaxMagnitude));
 	return clamp(velocityPixelsPerSecond / Math.max(1, screenSize), -max, max);
 };
 

package/src/shared/providers/gestures/helpers/gesture-reset.ts

@@ -32,14 +32,18 @@ export const resetGestureValues = ({
 	shouldDismiss,
 	event,
 	dimensions,
-	gestureReleaseVelocityScale = DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE,
-	gestureReleaseVelocityMax = DEFAULT_GESTURE_RELEASE_VELOCITY_MAX,
+	gestureReleaseVelocityScale,
+	gestureReleaseVelocityMax,
 }: ResetGestureValuesProps) => {
 	"worklet";
+	const resolvedGestureReleaseVelocityScale =
+		gestureReleaseVelocityScale ?? DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE;
+	const resolvedGestureReleaseVelocityMax =
+		gestureReleaseVelocityMax ?? DEFAULT_GESTURE_RELEASE_VELOCITY_MAX;
 
 	const effectiveReleaseVelocityMax = Math.max(
 		0,
-		Math.abs(gestureReleaseVelocityMax),
+		Math.abs(resolvedGestureReleaseVelocityMax),
 	);
 
 	const vxNorm = normalizeVelocity(
@@ -67,11 +71,11 @@ export const resetGestureValues = ({
 	// so the spring carries the gesture's momentum. The spec controls the
 	// spring character — use an underdamped spec (e.g. FlingSpec) for orbit/fling.
 	const resetVX = shouldDismiss
-		? vxNorm * gestureReleaseVelocityScale
+		? vxNorm * resolvedGestureReleaseVelocityScale
 		: vxTowardZero;
 
 	const resetVY = shouldDismiss
-		? vyNorm * gestureReleaseVelocityScale
+		? vyNorm * resolvedGestureReleaseVelocityScale
 		: vyTowardZero;
 
 	animateMany({

package/src/shared/providers/gestures/helpers/gesture-snap-points.ts

@@ -1,7 +1,7 @@
 interface ResolveRuntimeSnapPointsProps {
 	snapPoints: number[];
 	hasAutoSnapPoint: boolean;
-	autoSnapPoint: number;
+	resolvedAutoSnapPoint: number;
 	minSnapPoint: number;
 	maxSnapPoint: number;
 	canDismiss: boolean;
@@ -17,31 +17,33 @@ interface ResolvedRuntimeSnapPointsResult {
 export const resolveRuntimeSnapPoints = ({
 	snapPoints,
 	hasAutoSnapPoint,
-	autoSnapPoint,
+	resolvedAutoSnapPoint,
 	minSnapPoint,
 	maxSnapPoint,
 	canDismiss,
 }: ResolveRuntimeSnapPointsProps): ResolvedRuntimeSnapPointsResult => {
 	"worklet";
 
-	const resolvedAutoSnapPoint =
-		hasAutoSnapPoint && autoSnapPoint > 0 ? autoSnapPoint : null;
+	const nextResolvedAutoSnapPoint =
+		hasAutoSnapPoint && resolvedAutoSnapPoint > 0
+			? resolvedAutoSnapPoint
+			: null;
 
 	const resolvedSnapPoints =
-		resolvedAutoSnapPoint === null
+		nextResolvedAutoSnapPoint === null
 			? snapPoints
-			: [...snapPoints, resolvedAutoSnapPoint].sort((a, b) => a - b);
+			: [...snapPoints, nextResolvedAutoSnapPoint].sort((a, b) => a - b);
 
 	const resolvedMinSnapPoint =
-		resolvedAutoSnapPoint !== null && !canDismiss
+		nextResolvedAutoSnapPoint !== null && !canDismiss
 			? Math.min(
-					minSnapPoint === -1 ? resolvedAutoSnapPoint : minSnapPoint,
-					resolvedAutoSnapPoint,
+					minSnapPoint === -1 ? nextResolvedAutoSnapPoint : minSnapPoint,
+					nextResolvedAutoSnapPoint,
 				)
 			: minSnapPoint;
 
 	return {
-		resolvedAutoSnapPoint,
+		resolvedAutoSnapPoint: nextResolvedAutoSnapPoint,
 		resolvedSnapPoints,
 		resolvedMinSnapPoint,
 		resolvedMaxSnapPoint:

package/src/shared/providers/gestures/helpers/gesture-targets.ts

@@ -111,22 +111,30 @@ export function determineSnapTarget({
 	snapPoints,
 	velocity,
 	dimension,
-	velocityFactor = DEFAULT_GESTURE_SNAP_VELOCITY_IMPACT,
-	canDismiss = true,
+	velocityFactor,
+	canDismiss,
 }: DetermineSnapTargetProps): DetermineSnapTargetResult {
 	"worklet";
+	const resolvedVelocityFactor =
+		velocityFactor ?? DEFAULT_GESTURE_SNAP_VELOCITY_IMPACT;
+	const resolvedCanDismiss = canDismiss ?? true;
 
 	// Convert velocity to progress units (positive = toward dismiss = decreasing progress)
-	const velocityInProgress = (velocity / dimension) * velocityFactor;
+	const velocityInProgress = (velocity / dimension) * resolvedVelocityFactor;
 
 	// Project where we'd end up with velocity
 	const projectedProgress = currentProgress - velocityInProgress;
 
-	const sanitizedSnapPoints = sanitizeSnapPoints(snapPoints, canDismiss);
+	const sanitizedSnapPoints = sanitizeSnapPoints(
+		snapPoints,
+		resolvedCanDismiss,
+	);
 
 	// Build all possible targets: dismiss (0) only if allowed, plus all snap points
 	const allTargets = Array.from(
-		new Set(canDismiss ? [0, ...sanitizedSnapPoints] : sanitizedSnapPoints),
+		new Set(
+			resolvedCanDismiss ? [0, ...sanitizedSnapPoints] : sanitizedSnapPoints,
+		),
 	).sort((a, b) => a - b);
 
 	if (allTargets.length === 0) {
@@ -162,6 +170,6 @@ export function determineSnapTarget({
 
 	return {
 		targetProgress,
-		shouldDismiss: canDismiss && targetProgress === 0,
+		shouldDismiss: resolvedCanDismiss && targetProgress === 0,
 	};
 }

package/src/shared/providers/gestures/helpers/register-direction-claims.ts

@@ -25,7 +25,7 @@ export function useRegisterDirectionClaims(
 			return;
 		}
 
-		const gestureValues = GestureStore.getRouteGestures(routeKey);
+		const gestureValues = GestureStore.getBag(routeKey);
 		const isDismissing = gestureValues.dismissing;
 
 		const claimedAncestors: Array<{

package/src/shared/providers/gestures/use-build-gestures.ts

@@ -83,9 +83,7 @@ export const useBuildGestures = ({
 	const { dismissScreen } = useNavigationHelpers();
 
 	const panGestureRef = useRef<GestureType | undefined>(undefined);
-	const gestureAnimationValues = GestureStore.getRouteGestures(
-		current.route.key,
-	);
+	const gestureAnimationValues = GestureStore.getBag(current.route.key);
 
 	const { snapPoints: rawSnapPoints } = current.options;
 	const canDismiss = Boolean(

package/src/shared/providers/register-bounds.provider.tsx

@@ -83,14 +83,11 @@ const useInitialLayoutHandler = (params: {
 		maybeMeasureAndStore,
 	} = params;
 
-	const isAnimating = AnimationStore.getRouteAnimation(
-		currentScreenKey,
-		"animating",
-	);
+	const isAnimating = AnimationStore.getValue(currentScreenKey, "animating");
 
 	// Check if any ancestor is animating
 	const ancestorAnimations = ancestorKeys.map((key) =>
-		AnimationStore.getRouteAnimation(key, "animating"),
+		AnimationStore.getValue(key, "animating"),
 	);
 
 	const hasMeasuredOnLayout = useSharedValue(false);
@@ -147,7 +144,7 @@ const useBlurMeasurement = (params: {
 	const hasCapturedSource = useRef(false);
 
 	const ancestorClosing = [current.route.key, ...ancestorKeys].map((key) =>
-		AnimationStore.getRouteAnimation(key, "closing"),
+		AnimationStore.getValue(key, "closing"),
 	);
 
 	const maybeMeasureOnBlur = useStableCallbackValue(() => {
@@ -258,10 +255,7 @@ const registerBoundsBundle = createProvider("RegisterBounds", {
 		const updateSignal: SharedValue<number> =
 			parentContext?.updateSignal ?? ownSignal;
 
-		const isAnimating = AnimationStore.getRouteAnimation(
-			currentScreenKey,
-			"animating",
-		);
+		const isAnimating = AnimationStore.getValue(currentScreenKey, "animating");
 		const preparedStyles = useMemo(() => prepareStyleForBounds(style), [style]);
 
 		const emitUpdate = useStableCallbackValue(() => {
@@ -390,7 +384,7 @@ const registerBoundsBundle = createProvider("RegisterBounds", {
 		// from state).
 		const nextScreenKey = next?.route.key;
 		const nextClosing = nextScreenKey
-			? AnimationStore.getRouteAnimation(nextScreenKey, "closing")
+			? AnimationStore.getValue(nextScreenKey, "closing")
 			: null;
 
 		useParentSyncReaction({ parentContext, maybeMeasureAndStore });

package/src/shared/providers/screen/animation/helpers/has-transitions-enabled.ts

@@ -0,0 +1,14 @@
+import type { ScreenTransitionConfig } from "../../../../types";
+
+/**
+ * Helper for compatibility with NativeStack. Native stack integration requires
+ * the `enableTransitions` prop for creating custom animations, however, blank
+ * stack animations are always on.
+ */
+export const hasTransitionsEnabled = (
+	options: ScreenTransitionConfig | undefined,
+	alwaysOn: boolean,
+) => {
+	if (alwaysOn) return true;
+	return !!(options as any)?.enableTransitions;
+};

package/src/shared/providers/screen/animation/helpers/hydrate-transition-state.ts

@@ -0,0 +1,108 @@
+import type { SharedValue } from "react-native-reanimated";
+import { EPSILON } from "../../../../constants";
+import type { GestureStoreMap } from "../../../../stores/gesture.store";
+import type { ScreenTransitionState } from "../../../../types/animation.types";
+import type { Layout } from "../../../../types/screen.types";
+import type { BaseStackRoute } from "../../../../types/stack.types";
+
+type BuiltState = {
+	progress: SharedValue<number>;
+	closing: SharedValue<number>;
+	animating: SharedValue<number>;
+	entering: SharedValue<number>;
+	gesture: GestureStoreMap;
+	route: BaseStackRoute;
+	meta?: Record<string, unknown>;
+	resolvedAutoSnapPoint: SharedValue<number>;
+	measuredContentLayout: SharedValue<Layout | null>;
+	hasAutoSnapPoint: boolean;
+	sortedNumericSnapPoints: number[];
+	unwrapped: ScreenTransitionState;
+};
+
+/**
+ * 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;
+};
+
+export const hydrateTransitionState = (
+	s: BuiltState,
+	dimensions: Layout,
+): ScreenTransitionState => {
+	"worklet";
+	const out = s.unwrapped;
+	out.progress = s.progress.value;
+	out.closing = s.closing.value;
+	out.entering = s.entering.value;
+	out.gesture.x = s.gesture.x.value;
+	out.gesture.y = s.gesture.y.value;
+	out.gesture.normX = s.gesture.normX.value;
+	out.gesture.normY = s.gesture.normY.value;
+	out.gesture.dismissing = s.gesture.dismissing.value;
+	out.gesture.dragging = s.gesture.dragging.value;
+	out.gesture.direction = s.gesture.direction.value;
+
+	const isGestureSettling =
+		Math.abs(out.gesture.normX) > EPSILON ||
+		Math.abs(out.gesture.normY) > EPSILON;
+
+	out.animating =
+		s.animating.value || out.gesture.dragging || isGestureSettling ? 1 : 0;
+
+	// Deprecated aliases (kept for backwards compatibility)
+	out.gesture.normalizedX = out.gesture.normX;
+	out.gesture.normalizedY = out.gesture.normY;
+	out.gesture.isDismissing = out.gesture.dismissing;
+	out.gesture.isDragging = out.gesture.dragging;
+
+	out.settled = out.animating || out.gesture.dismissing || out.closing ? 0 : 1;
+
+	out.meta = s.meta;
+	out.layouts.screen.width = dimensions.width;
+	out.layouts.screen.height = dimensions.height;
+
+	const content = s.measuredContentLayout.value;
+	if (content) {
+		if (!out.layouts.content) {
+			out.layouts.content = {
+				width: content.width,
+				height: content.height,
+			};
+		} else {
+			out.layouts.content.width = content.width;
+			out.layouts.content.height = content.height;
+		}
+	} else {
+		out.layouts.content = undefined;
+	}
+
+	const resolvedAutoSnap =
+		s.hasAutoSnapPoint && s.resolvedAutoSnapPoint.value > 0
+			? s.resolvedAutoSnapPoint.value
+			: null;
+
+	const resolvedSnapPoints =
+		resolvedAutoSnap !== null
+			? [...s.sortedNumericSnapPoints, resolvedAutoSnap].sort((a, b) => a - b)
+			: s.sortedNumericSnapPoints;
+
+	out.snapIndex = computeSnapIndex(out.progress, resolvedSnapPoints);
+
+	return out;
+};