react-native-screen-transitions 4.0.0-alpha.0 → 4.0.0-alpha.10

package/src/utils/animation/spring/spring.ts

@@ -3,7 +3,7 @@ import type {
 	AnimationCallback,
 	ReduceMotion,
 } from "react-native-reanimated";
-import type { AnimationStateCallback } from "../state";
+import type { AnimationProgressDriver, AnimationStateCallback } from "../state";
 import type { SpringConfig } from "./springConfigs";
 import type {
 	DefaultSpringConfig,
@@ -13,6 +13,7 @@ import type {
 } from "./springUtils";
 import {
 	calculateNewStiffnessToMatchDuration,
+	calculateSpringAnimationDuration,
 	checkIfConfigIsValid,
 	criticallyDampedSpringCalculations,
 	getEnergy,
@@ -30,6 +31,7 @@ const REACT_NATIVE_RUNTIME_KIND = 1;
 const REDUCE_MOTION_SYSTEM = "system";
 const REDUCE_MOTION_ALWAYS = "always";
 const DEFAULT_SPRING_SETTLE_DISTANCE = 0.001;
+const MAX_UNFINISHED_ANIMATION_PROGRESS = 1 - 1e-6;
 
 const DEFAULT_SPRING_CONFIG = {
 	damping: 120,
@@ -61,6 +63,7 @@ const getReduceMotionForAnimation = (config?: ReduceMotion) => {
 const defineSpringAnimation = <TAnimation extends Animation<TAnimation>>(
 	_starting: number,
 	factory: () => TAnimation,
+	onReducedMotion?: () => void,
 ): TAnimation => {
 	"worklet";
 	const create = (() => {
@@ -76,6 +79,7 @@ const defineSpringAnimation = <TAnimation extends Animation<TAnimation>>(
 		) => {
 			"worklet";
 			if (animation.reduceMotion) {
+				onReducedMotion?.();
 				animation.current = animation.toValue;
 				animation.onFrame = () => true;
 				return;
@@ -99,6 +103,7 @@ type withSpringType = (
 	toValue: number,
 	userConfig?: SpringConfig,
 	callback?: AnimationStateCallback,
+	animationProgress?: AnimationProgressDriver,
 ) => number;
 
 /**
@@ -123,9 +128,11 @@ export const withInternalSpring = ((
 	toValue: number,
 	userConfig?: SpringConfig,
 	callback?: AnimationStateCallback,
+	animationProgress?: AnimationProgressDriver,
 ): Animation<SpringAnimation> => {
 	"worklet";
 
+	// biome-ignore format: Keep this Reanimated fork aligned with its upstream layout.
 	return defineSpringAnimation<SpringAnimation>(toValue, () => {
 		"worklet";
 		const config: DefaultSpringConfig & SpringConfigInner = safeMergeConfigs<
@@ -175,6 +182,7 @@ export const withInternalSpring = ((
 
 			if (config.skipAnimation) {
 				animation.current = toValue;
+				animationProgress?.value.set(animationProgress.to);
 				animation.lastTimestamp = 0;
 				return true;
 			}
@@ -182,6 +190,7 @@ export const withInternalSpring = ((
 
 			const deltaTime = Math.min(Math.max(now - lastTimestamp, 0), 64);
 			animation.lastTimestamp = now;
+			animation.animationProgressElapsed += deltaTime;
 
 			const t = deltaTime / 1000;
 			const v0 = velocity as number;
@@ -212,6 +221,7 @@ export const withInternalSpring = ((
 			if (isAnimationTerminatingCalculation(animation, config)) {
 				animation.velocity = 0;
 				animation.current = toValue;
+				animationProgress?.value.set(animationProgress.to);
 				settled = true;
 				animation.settled = true;
 				// clear lastTimestamp to avoid using stale value by the next spring animation that starts after this one
@@ -221,6 +231,21 @@ export const withInternalSpring = ((
 
 			notifySettled(animation);
 
+			if (animationProgress) {
+				const elapsedFraction =
+					animation.animationProgressDuration <= 0
+						? MAX_UNFINISHED_ANIMATION_PROGRESS
+						: Math.min(
+								animation.animationProgressElapsed /
+									animation.animationProgressDuration,
+								MAX_UNFINISHED_ANIMATION_PROGRESS,
+							);
+				const nextAnimationProgress =
+					animationProgress.from +
+					(animationProgress.to - animationProgress.from) * elapsedFraction;
+				animationProgress.value.set(nextAnimationProgress);
+			}
+
 			return false;
 		}
 
@@ -307,6 +332,11 @@ export const withInternalSpring = ((
 				config.mass,
 			);
 			animation.initialEnergy = initialEnergy;
+			animation.animationProgressElapsed = 0;
+			animation.animationProgressDuration = config.skipAnimation
+				? 0
+				: calculateSpringAnimationDuration(animation, config);
+			animationProgress?.value.set(animationProgress.from);
 
 			animation.lastTimestamp = previousAnimation?.lastTimestamp || now;
 
@@ -339,9 +369,14 @@ export const withInternalSpring = ((
 			omega0: 0,
 			omega1: 0,
 			initialEnergy: 0,
+			animationProgressElapsed: 0,
+			animationProgressDuration: 0,
 			reduceMotion: getReduceMotionForAnimation(config.reduceMotion),
 		} as SpringAnimation;
 
 		return animation;
+	}, () => {
+		"worklet";
+		animationProgress?.value.set(animationProgress.to);
 	});
 }) as unknown as withSpringType;

package/src/utils/animation/spring/springUtils.ts

@@ -29,6 +29,8 @@ export interface SpringAnimation extends Animation<SpringAnimation> {
 	omega0: number;
 	omega1: number;
 	initialEnergy: number;
+	animationProgressElapsed: number;
+	animationProgressDuration: number;
 }
 
 export type InnerSpringAnimation = SpringAnimation;
@@ -362,6 +364,134 @@ export function underDampedSpringCalculations(
 	return { position: underDampedPosition, velocity: underDampedVelocity };
 }
 
+const MAX_SPRING_DURATION_SECONDS = 60;
+const SPRING_DURATION_PRECISION_SECONDS = 0.0001;
+const MAX_OVERSHOOT_DURATION_SAMPLES = 4096;
+
+export function calculateSpringAnimationDuration(
+	animation: InnerSpringAnimation,
+	config: DefaultSpringConfig & SpringConfigInner,
+): number {
+	"worklet";
+	const startPosition = animation.current;
+	const startVelocity = animation.velocity;
+	const x0 = startPosition - animation.toValue;
+
+	const stateAt = (time: number) => {
+		"worklet";
+		return animation.zeta < 1
+			? underDampedSpringCalculations(animation, {
+					zeta: animation.zeta,
+					v0: startVelocity,
+					x0,
+					omega0: animation.omega0,
+					omega1: animation.omega1,
+					t: time,
+				})
+			: criticallyDampedSpringCalculations(animation, {
+					v0: startVelocity,
+					x0,
+					omega0: animation.omega0,
+					t: time,
+				});
+	};
+
+	const terminatesByEnergyAt = (time: number) => {
+		"worklet";
+		if (animation.initialEnergy === 0) {
+			return true;
+		}
+
+		const state = stateAt(time);
+		const energy = getEnergy(
+			animation.toValue - state.position,
+			state.velocity,
+			config.stiffness,
+			config.mass,
+		);
+
+		return energy / animation.initialEnergy <= config.energyThreshold;
+	};
+
+	if (terminatesByEnergyAt(0)) {
+		return 0;
+	}
+
+	let lowerBound = 0;
+	let upperBound = 1 / 60;
+	while (
+		upperBound < MAX_SPRING_DURATION_SECONDS &&
+		!terminatesByEnergyAt(upperBound)
+	) {
+		lowerBound = upperBound;
+		upperBound *= 2;
+	}
+	upperBound = Math.min(upperBound, MAX_SPRING_DURATION_SECONDS);
+
+	if (terminatesByEnergyAt(upperBound)) {
+		while (upperBound - lowerBound > SPRING_DURATION_PRECISION_SECONDS) {
+			const midpoint = (lowerBound + upperBound) / 2;
+			if (terminatesByEnergyAt(midpoint)) {
+				upperBound = midpoint;
+			} else {
+				lowerBound = midpoint;
+			}
+		}
+	}
+
+	const energyDuration = upperBound;
+	if (!config.overshootClamping || energyDuration === 0) {
+		return energyDuration * 1000;
+	}
+
+	const leftBound =
+		animation.startValue >= 0
+			? animation.toValue
+			: animation.toValue + animation.startValue;
+	const rightBound = leftBound + Math.abs(animation.startValue);
+	const isOutsideBoundsAt = (time: number) => {
+		"worklet";
+		const { position } = stateAt(time);
+		return position < leftBound || position > rightBound;
+	};
+
+	const frequency = animation.zeta < 1 ? animation.omega1 : animation.omega0;
+	const sampleStep =
+		frequency > 0 ? Math.min(1 / 240, Math.PI / (frequency * 8)) : 1 / 240;
+	const sampleCount = Math.min(
+		MAX_OVERSHOOT_DURATION_SAMPLES,
+		Math.max(1, Math.ceil(energyDuration / sampleStep)),
+	);
+	const effectiveStep = energyDuration / sampleCount;
+	let previousTime = 0;
+
+	for (let index = 1; index <= sampleCount; index += 1) {
+		const time = effectiveStep * index;
+		if (!isOutsideBoundsAt(time)) {
+			previousTime = time;
+			continue;
+		}
+
+		let crossingLowerBound = previousTime;
+		let crossingUpperBound = time;
+		while (
+			crossingUpperBound - crossingLowerBound >
+			SPRING_DURATION_PRECISION_SECONDS
+		) {
+			const midpoint = (crossingLowerBound + crossingUpperBound) / 2;
+			if (isOutsideBoundsAt(midpoint)) {
+				crossingUpperBound = midpoint;
+			} else {
+				crossingLowerBound = midpoint;
+			}
+		}
+
+		return crossingUpperBound * 1000;
+	}
+
+	return energyDuration * 1000;
+}
+
 export function isAnimationTerminatingCalculation(
 	animation: InnerSpringAnimation,
 	config: DefaultSpringConfig & SpringConfigInner,

package/src/utils/animation/state.ts

@@ -1,6 +1,14 @@
+import type { SharedValue } from "react-native-reanimated";
+
 export type AnimationState = {
 	finished: boolean;
 	settled: boolean;
 };
 
 export type AnimationStateCallback = (state: AnimationState) => void;
+
+export type AnimationProgressDriver = {
+	value: SharedValue<number>;
+	from: number;
+	to: number;
+};

package/src/utils/bounds/constants.ts

@@ -1,4 +1,4 @@
-import type { BoundsOptions } from "./types/options";
+import type { BoundsInternalOptions } from "./types/options";
 
 export const DEFAULT_BOUNDS_OPTIONS = {
 	target: "bound",
@@ -7,4 +7,4 @@ export const DEFAULT_BOUNDS_OPTIONS = {
 	scaleMode: "match",
 	anchor: "center",
 	raw: false,
-} as const satisfies Omit<BoundsOptions, "id" | "group" | "gestures">;
+} as const satisfies Omit<BoundsInternalOptions, "id" | "group" | "gestures">;

package/src/utils/bounds/helpers/create-bounds-accessor-core.ts

@@ -1,3 +1,4 @@
+import { NO_STYLES } from "../../../constants";
 import type {
 	BoundsAccessor,
 	BoundsInterpolationProps,
@@ -64,6 +65,12 @@ const createBoundsAccessorParts = ({
 		const scoped: BoundsScopedAccessor = {
 			styles: (options?: BoundsComputeOptions): BoundsStyleResult => {
 				"worklet";
+				// Keep the component at its base layout for pre-animation refresh
+				// measurement, then remove generated styles again after settlement.
+				if (!props.active.animating) {
+					return NO_STYLES;
+				}
+
 				return prepareBoundStyles({
 					props,
 					options: {
@@ -74,12 +81,6 @@ const createBoundsAccessorParts = ({
 				}) as BoundsStyleResult;
 			},
 			values: getValues,
-			math: <T extends BoundsComputeOptions = BoundsComputeOptions>(
-				options?: T,
-			) => {
-				"worklet";
-				return getValues(options);
-			},
 			link: (id?: BoundsIdentityInput) => {
 				"worklet";
 				const linkIdentity =

package/src/utils/bounds/helpers/create-link-accessor.ts

@@ -1,10 +1,12 @@
-import { getResolvedLink } from "../../../stores/bounds/internals/links";
+import {
+	getPairKeyForDestination,
+	getResolvedLink,
+} from "../../../stores/bounds/internals/links";
 import type {
 	BoundsInterpolationProps,
 	BoundsLink,
 } from "../../../types/bounds.types";
 import type { BoundId } from "../types/options";
-import { resolveBoundsPairKey } from "./resolve-bounds-pair-key";
 
 type GetProps = () => BoundsInterpolationProps;
 
@@ -19,7 +21,11 @@ export const createLinkAccessor = (getProps: GetProps): LinkAccessor => {
 		"worklet";
 		const props = getProps();
 		const stringTag = String(tag);
-		const pairKey = resolveBoundsPairKey(props);
+		const destinationScreenKey =
+			props.next?.route.key ?? props.current?.route.key;
+		const pairKey = destinationScreenKey
+			? getPairKeyForDestination(stringTag, destinationScreenKey)
+			: null;
 		if (!pairKey) return null;
 
 		const resolved = getResolvedLink(pairKey, stringTag);

package/src/utils/bounds/helpers/prepare-bound-styles.ts

@@ -8,7 +8,7 @@ import type { BoundsInterpolationProps } from "../../../types/bounds.types";
 import { DEFAULT_BOUNDS_OPTIONS } from "../constants";
 import type {
 	BoundId,
-	BoundsOptions,
+	BoundsInternalOptions,
 	BoundsOptionsResult,
 } from "../types/options";
 import { createBoundTag } from "./create-bound-tag";
@@ -17,7 +17,7 @@ import { computeBoundStyles } from "./styles/compute";
 
 type BaseInterpolatorProps = BoundsInterpolationProps;
 
-type ComputeResolvedBoundsStylesParams<T extends BoundsOptions> = {
+type ComputeResolvedBoundsStylesParams<T extends BoundsInternalOptions> = {
 	props: BaseInterpolatorProps;
 	options: T;
 	resolvedPair?: ResolvedTransitionPair;
@@ -27,7 +27,7 @@ type BuildBoundsOptionsParams = {
 	props: BoundsInterpolationProps;
 	id?: BoundId;
 	group?: string;
-	overrides?: Partial<BoundsOptions>;
+	overrides?: Partial<BoundsInternalOptions>;
 };
 
 const buildBoundsOptions = ({
@@ -35,7 +35,7 @@ const buildBoundsOptions = ({
 	id,
 	group,
 	overrides,
-}: BuildBoundsOptionsParams): BoundsOptions => {
+}: BuildBoundsOptionsParams): BoundsInternalOptions => {
 	"worklet";
 
 	const tag = createBoundTag({ id, group });
@@ -75,7 +75,7 @@ export const syncActiveGroupId = (params: {
 	setActiveGroupId(pairKey, group, activeId);
 };
 
-export const prepareBoundStyles = <T extends BoundsOptions>({
+export const prepareBoundStyles = <T extends BoundsInternalOptions>({
 	props,
 	options,
 	resolvedPair,

package/src/utils/bounds/helpers/styles/composers.ts

@@ -13,8 +13,8 @@ import type {
 } from "../../types/geometry";
 import type {
 	BoundsAnchor,
+	BoundsInternalOptions,
 	BoundsMotionTransform,
-	BoundsOptions,
 } from "../../types/options";
 
 /**
@@ -29,7 +29,7 @@ export type ElementComposeParams = {
 	geometry: RelativeGeometry;
 	progress: number;
 	ranges: readonly [number, number];
-	computeOptions: BoundsOptions;
+	computeOptions: BoundsInternalOptions;
 	interpolationProps: BoundsInterpolationProps;
 };
 
@@ -46,7 +46,7 @@ type ContentComposeParams = {
 	geometry: ContentTransformGeometry;
 	progress: number;
 	ranges: readonly [number, number];
-	computeOptions: BoundsOptions;
+	computeOptions: BoundsInternalOptions;
 	interpolationProps: BoundsInterpolationProps;
 };
 
@@ -157,7 +157,7 @@ const resolveMotionTransform = ({
 	end,
 	current,
 }: {
-	computeOptions: BoundsOptions;
+	computeOptions: BoundsInternalOptions;
 	interpolationProps: BoundsInterpolationProps;
 	progress: number;
 	ranges: readonly [number, number];
@@ -496,8 +496,8 @@ export function composeTransformRelative(
 				Extrapolation.CLAMP,
 			);
 
-	const offsetX = computeOptions.offset?.x ?? computeOptions.gestures?.x ?? 0;
-	const offsetY = computeOptions.offset?.y ?? computeOptions.gestures?.y ?? 0;
+	const offsetX = computeOptions.offset?.x ?? 0;
+	const offsetY = computeOptions.offset?.y ?? 0;
 	const currentScale = getUniformScale(scaleX, scaleY);
 	const motion = resolveMotionTransform({
 		computeOptions,

package/src/utils/bounds/helpers/styles/compute.ts

@@ -14,7 +14,7 @@ import type { Layout } from "../../../../types/screen.types";
 import type {
 	BoundId,
 	BoundsComputeParams,
-	BoundsOptions,
+	BoundsInternalOptions,
 } from "../../types/options";
 import {
 	computeContentTransformGeometry,
@@ -37,7 +37,7 @@ const resolveStartEnd = (params: {
 	next?: ScreenTransitionState;
 	toRect?: Partial<MeasuredDimensions>;
 	dimensions: Layout;
-	computeOptions: BoundsOptions;
+	computeOptions: BoundsInternalOptions;
 	resolvedPair?: ResolvedTransitionPair;
 }) => {
 	"worklet";
@@ -133,7 +133,7 @@ export const computeBoundStyles = (
 		dimensions,
 		interpolationProps,
 	}: BoundsComputeParams,
-	computeOptions: BoundsOptions = { id: "bound-id" },
+	computeOptions: BoundsInternalOptions = { id: "bound-id" },
 	resolvedPair?: ResolvedTransitionPair,
 ) => {
 	"worklet";

package/src/utils/bounds/navigation/reveal/build.ts

@@ -92,7 +92,7 @@ export function buildRevealStyles({
 
 	const liveGesture = props.active.gesture;
 	const gestureHandoff = liveGesture.handoff;
-	const initialGesture = gestureHandoff.active ?? gestureHandoff.direction;
+	const initialGesture = gestureHandoff.active;
 
 	const isHorizontalDismiss =
 		initialGesture === "horizontal" || initialGesture === "horizontal-inverted";

package/src/utils/bounds/navigation/reveal/math.ts

@@ -2,6 +2,7 @@ import type { MeasuredDimensions } from "react-native-reanimated";
 import { EPSILON } from "../../../../constants";
 import type { Layout } from "../../../../types/screen.types";
 import { computeContentTransformGeometry } from "../../helpers/geometry";
+import type { ContentTransformGeometry } from "../../types/geometry";
 import type { BoundsAnchor } from "../../types/options";
 import {
 	DRAG_DIRECTIONAL_SCALE_EXPONENT,
@@ -185,6 +186,22 @@ function getBoundsCenterY(bounds: MeasuredDimensions) {
 	return bounds.pageY + bounds.height / 2;
 }
 
+export function resolveRevealContentBaseTransformFromGeometry({
+	progress,
+	geometry,
+}: {
+	progress: number;
+	geometry: ContentTransformGeometry;
+}) {
+	"worklet";
+
+	return {
+		translateX: mixUnit(geometry.tx, 0, progress),
+		translateY: mixUnit(geometry.ty, 0, progress),
+		scale: mixUnit(geometry.s, 1, progress),
+	};
+}
+
 export function resolveRevealContentBaseTransform({
 	progress,
 	sourceBounds,
@@ -209,11 +226,10 @@ export function resolveRevealContentBaseTransform({
 		scaleMode: "uniform",
 	});
 
-	return {
-		translateX: mixUnit(geometry.tx, 0, progress),
-		translateY: mixUnit(geometry.ty, 0, progress),
-		scale: mixUnit(geometry.s, 1, progress),
-	};
+	return resolveRevealContentBaseTransformFromGeometry({
+		geometry,
+		progress,
+	});
 }
 
 export function resolveTrackedSourceElementTransform({