react-native-screen-transitions 3.8.0-beta.0 → 3.8.0-beta.1

package/src/shared/components/create-boundary-component/hooks/use-initial-destination-measurement.ts

@@ -34,7 +34,10 @@ export const useInitialDestinationMeasurement = ({
 	ancestorScreenKeys,
 	measureBoundary,
 }: UseInitialDestinationMeasurementParams) => {
-	const progress = AnimationStore.getValue(currentScreenKey, "progress");
+	const transitionProgress = AnimationStore.getValue(
+		currentScreenKey,
+		"transitionProgress",
+	);
 	const system = SystemStore.getBag(currentScreenKey);
 	const { pendingLifecycleRequestKind } = system;
 	const { blockLifecycleStart, unblockLifecycleStart } = system.actions;
@@ -83,7 +86,7 @@ export const useInitialDestinationMeasurement = ({
 				pendingLifecycleRequestKind.get() ===
 				LifecycleTransitionRequestKind.Open;
 
-			const isWaitingForOpenToStart = progress.get() <= 0;
+			const isWaitingForOpenToStart = transitionProgress.get() <= 0;
 
 			if (!hasPendingOpenRequest || !isWaitingForOpenToStart) {
 				return [0, retryTick] as const;

package/src/shared/components/create-boundary-component/hooks/use-refresh-boundary.ts

@@ -38,7 +38,10 @@ export const useRefreshBoundary = ({
 		refreshScreenKey,
 		"progressAnimating",
 	);
-	const refreshProgress = AnimationStore.getValue(refreshScreenKey, "progress");
+	const refreshProgress = AnimationStore.getValue(
+		refreshScreenKey,
+		"transitionProgress",
+	);
 
 	useAnimatedReaction(
 		() => {

package/src/shared/components/overlay/variations/float-overlay.tsx

@@ -4,6 +4,7 @@ import { useStack } from "../../../hooks/navigation/use-stack";
 import { ScreenAnimationProvider } from "../../../providers/screen/animation";
 import type { BaseDescriptor } from "../../../providers/screen/descriptors";
 import { DescriptorsProvider } from "../../../providers/screen/descriptors";
+import { ScreenOptionsProvider } from "../../../providers/screen/options";
 import { ScreenStylesProvider } from "../../../providers/screen/styles";
 import type { OverlayScreenState } from "../../../types/overlay.types";
 
@@ -64,11 +65,16 @@ export function FloatOverlay() {
 
 	return (
 		<DescriptorsProvider current={current} previous={previous} next={next}>
-			<ScreenAnimationProvider>
-				<ScreenStylesProvider isFloatingOverlay>
-					<OverlayHost scene={scene} overlayScreenState={overlayScreenState} />
-				</ScreenStylesProvider>
-			</ScreenAnimationProvider>
+			<ScreenOptionsProvider>
+				<ScreenAnimationProvider>
+					<ScreenStylesProvider isFloatingOverlay>
+						<OverlayHost
+							scene={scene}
+							overlayScreenState={overlayScreenState}
+						/>
+					</ScreenStylesProvider>
+				</ScreenAnimationProvider>
+			</ScreenOptionsProvider>
 		</DescriptorsProvider>
 	);
 }

package/src/shared/components/screen-container/hooks/use-content-layout.ts

@@ -45,7 +45,7 @@ export function useContentLayout() {
 
 				if (
 					!isFirstMeasurement ||
-					animations.progress.get() !== 0 ||
+					animations.transitionProgress.get() !== 0 ||
 					animations.progressAnimating.get() !== 0
 				) {
 					return;
@@ -53,7 +53,7 @@ export function useContentLayout() {
 
 				if (isFirstKey && !experimental_animateOnInitialMount) {
 					targetProgress.set(nextFraction);
-					animations.progress.set(nextFraction);
+					animations.transitionProgress.set(nextFraction);
 					return;
 				}
 

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

@@ -76,7 +76,7 @@ export const BackdropLayer = memo(function BackdropLayer({
 				}
 
 				const { target, shouldDismiss } = findCollapseTarget(
-					animations.progress.get(),
+					animations.transitionProgress.get(),
 					resolvedSnaps,
 					canDismiss,
 				);

package/src/shared/components/screen-lifecycle/hooks/use-open-transition-intent.ts

@@ -60,11 +60,11 @@ export function useOpenTransitionIntent(
 		if (isFirstKey && !experimental_animateOnInitialMount) {
 			if (initialProgress === "auto") {
 				system.targetProgress.set(0);
-				animations.progress.set(0);
+				animations.transitionProgress.set(0);
 			} else {
 				const target = initialProgress ?? 1;
 				system.targetProgress.set(target);
-				animations.progress.set(target);
+				animations.transitionProgress.set(target);
 			}
 			animations.progressAnimating.set(0);
 			animations.closing.set(0);

package/src/shared/configs/presets.ts

@@ -246,7 +246,6 @@ export const SharedIGImage = ({
 		gestureEnabled: true,
 		gestureDirection: ["vertical", "horizontal"],
 		enableTransitions: true,
-		gestureProgressMode: "freeform",
 		screenStyleInterpolator: ({
 			current,
 			layouts: {
@@ -259,8 +258,8 @@ export const SharedIGImage = ({
 		}) => {
 			"worklet";
 
-			const normX = active.gesture.normX;
-			const normY = active.gesture.normY;
+			const normX = active.gesture.handoff.normX;
+			const normY = active.gesture.handoff.normY;
 
 			const dragX = interpolate(
 				normX,
@@ -394,7 +393,6 @@ export const SharedAppleMusic = ({
 		enableTransitions: true,
 		gestureEnabled: true,
 		gestureDirection: ["vertical", "horizontal"],
-		gestureProgressMode: "freeform",
 		screenStyleInterpolator: ({
 			bounds,
 			focused,
@@ -405,9 +403,10 @@ export const SharedAppleMusic = ({
 		}) => {
 			"worklet";
 
-			const normX = active.gesture.normX;
-			const normY = active.gesture.normY;
-			const initialGesture = active.gesture.active ?? active.gesture.direction;
+			const normX = active.gesture.handoff.normX;
+			const normY = active.gesture.handoff.normY;
+			const initialGesture =
+				active.gesture.handoff.active ?? active.gesture.handoff.direction;
 
 			/**
 			 * ===============================
@@ -608,7 +607,6 @@ export const SharedXImage = ({
 		enableTransitions: true,
 		gestureEnabled: true,
 		gestureDirection: ["vertical", "vertical-inverted"],
-		gestureProgressMode: "freeform",
 		screenStyleInterpolator: ({
 			focused,
 			bounds,

package/src/shared/constants.ts

@@ -5,10 +5,7 @@ import type {
 	ScreenTransitionOptions,
 	ScreenTransitionState,
 } from "./types/animation.types";
-import type {
-	ActivationArea,
-	GestureProgressMode,
-} from "./types/gesture.types";
+import type { ActivationArea } from "./types/gesture.types";
 import type {
 	GestureTracking,
 	Layout,
@@ -57,6 +54,15 @@ const DEFAULT_GESTURE_VALUES = {
 	focalX: 0,
 	focalY: 0,
 	raw: DEFAULT_RAW_GESTURE_VALUES,
+	handoff: {
+		...DEFAULT_RAW_GESTURE_VALUES,
+		velocity: 0,
+		focalX: 0,
+		focalY: 0,
+		raw: DEFAULT_RAW_GESTURE_VALUES,
+		active: null,
+		direction: null,
+	},
 	dismissing: 0,
 	dragging: 0,
 	settling: 0,
@@ -73,6 +79,10 @@ const DEFAULT_GESTURE_VALUES = {
 const createDefaultGestureValues = () => ({
 	...DEFAULT_GESTURE_VALUES,
 	raw: { ...DEFAULT_RAW_GESTURE_VALUES },
+	handoff: {
+		...DEFAULT_GESTURE_VALUES.handoff,
+		raw: { ...DEFAULT_RAW_GESTURE_VALUES },
+	},
 });
 
 export const DEFAULT_SCREEN_TRANSITION_OPTIONS: ScreenTransitionOptions =
@@ -87,6 +97,7 @@ export const createScreenTransitionState = (
 	options: ScreenTransitionOptions = DEFAULT_SCREEN_TRANSITION_OPTIONS,
 ): ScreenTransitionState => ({
 	progress: 0,
+	transitionProgress: 0,
 	closing: 0,
 	animating: 0,
 	willAnimate: 0,
@@ -113,6 +124,7 @@ export const createScreenTransitionState = (
 export const DEFAULT_SCREEN_TRANSITION_STATE: ScreenTransitionState =
 	Object.freeze({
 		progress: 0,
+		transitionProgress: 0,
 		closing: 0,
 		animating: 0,
 		willAnimate: 0,
@@ -167,8 +179,6 @@ export const DEFAULT_GESTURE_SENSITIVITY = 1;
 export const DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE = 1;
 export const DEFAULT_GESTURE_DIRECTION = "horizontal";
 export const DEFAULT_GESTURE_TRACKING: GestureTracking = "auto";
-export const DEFAULT_GESTURE_PROGRESS_MODE: GestureProgressMode =
-	"progress-driven";
 export const DEFAULT_GESTURE_SNAP_LOCKED = false;
 export const DEFAULT_GESTURE_ACTIVATION_AREA: ActivationArea = "screen";
 export const DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR: SheetScrollGestureBehavior =

package/src/shared/index.ts

@@ -57,8 +57,10 @@ export type {
 	BoundsNavigationZoomOpacityRanges,
 	BoundsNavigationZoomOptions,
 	BoundsNavigationZoomStyle,
+	GestureHandoffValues,
 	InactiveBehavior,
 	OverlayProps,
+	RawGestureValues,
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,
 	ScreenTransitionAccessor,

package/src/shared/providers/screen/animation/helpers/build-screen-transition-options.ts

@@ -2,10 +2,6 @@ import type {
 	ScreenTransitionConfig,
 	ScreenTransitionOptions,
 } from "../../../../types";
-import {
-	gestureProgressModeDrivesProgress,
-	resolveGestureProgressMode,
-} from "../../../../utils/gesture-progress-mode";
 import { resolveSheetScrollGestureBehavior } from "../../../../utils/resolve-screen-transition-options";
 
 export const buildScreenTransitionOptions = (
@@ -14,15 +10,6 @@ export const buildScreenTransitionOptions = (
 	const hasSheetScrollGestureBehavior =
 		options.sheetScrollGestureBehavior !== undefined ||
 		options.expandViaScrollView !== undefined;
-	const hasGestureProgressMode =
-		options.gestureProgressMode !== undefined ||
-		options.gestureDrivesProgress !== undefined;
-	const gestureProgressMode = hasGestureProgressMode
-		? resolveGestureProgressMode({
-				gestureProgressMode: options.gestureProgressMode,
-				gestureDrivesProgress: options.gestureDrivesProgress,
-			})
-		: undefined;
 
 	return {
 		navigationMaskEnabled: options.navigationMaskEnabled,
@@ -34,10 +21,8 @@ export const buildScreenTransitionOptions = (
 		gestureSnapVelocityImpact: options.gestureSnapVelocityImpact,
 		gestureReleaseVelocityScale: options.gestureReleaseVelocityScale,
 		gestureResponseDistance: options.gestureResponseDistance,
-		gestureProgressMode,
-		gestureDrivesProgress: gestureProgressMode
-			? gestureProgressModeDrivesProgress(gestureProgressMode)
-			: undefined,
+		gestureProgressMode: options.gestureProgressMode,
+		gestureDrivesProgress: options.gestureDrivesProgress,
 		gestureActivationArea: options.gestureActivationArea,
 		gestureSnapLocked: options.gestureSnapLocked,
 		sheetScrollGestureBehavior: hasSheetScrollGestureBehavior

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

@@ -1,15 +1,9 @@
 import { clamp } from "react-native-reanimated";
-import {
-	DEFAULT_GESTURE_DIRECTION,
-	DEFAULT_GESTURE_PROGRESS_MODE,
-	EPSILON,
-} from "../../../../../constants";
-import type { ScreenTransitionOptions } from "../../../../../types/animation.types";
+import { DEFAULT_GESTURE_DIRECTION, EPSILON } from "../../../../../constants";
 import type {
 	GestureDirectionOption,
 	GestureValues,
 } from "../../../../../types/gesture.types";
-import { resolveGestureProgressModeFromOptions } from "../../../../../utils/gesture-progress-mode";
 import {
 	getPanActivationDirections,
 	getPanSnapAxisConfigForDirection,
@@ -20,9 +14,15 @@ import {
 } from "../../../gestures/shared/directions";
 import type { SnapBounds } from "./types";
 
-const resolvePanGestureDrivenProgress = (
-	baseProgress: number,
+type PanProgressDelta = {
+	x: number;
+	y: number;
+};
+
+const resolvePanGestureAffectedProgress = (
+	transitionProgress: number,
 	gesture: GestureValues,
+	progressDelta: PanProgressDelta,
 	gestureDirection: GestureDirectionOption,
 	hasSnapPoints: boolean,
 	snapBounds: SnapBounds | null,
@@ -39,14 +39,18 @@ const resolvePanGestureDrivenProgress = (
 			: null;
 
 		if (!activeAxis || !snapBounds) {
-			return baseProgress;
+			return transitionProgress;
 		}
 
 		const axisValue =
-			activeAxis.axis === "horizontal" ? gesture.normX : gesture.normY;
-		const progressDelta = activeAxis.config.progressSign * axisValue;
+			activeAxis.axis === "horizontal" ? progressDelta.x : progressDelta.y;
+		const signedProgressDelta = activeAxis.config.progressSign * axisValue;
 
-		return clamp(baseProgress + progressDelta, snapBounds.min, snapBounds.max);
+		return clamp(
+			transitionProgress + signedProgressDelta,
+			snapBounds.min,
+			snapBounds.max,
+		);
 	}
 
 	const directions = getPanActivationDirections({
@@ -55,27 +59,27 @@ const resolvePanGestureDrivenProgress = (
 	});
 	let progressOffset = 0;
 
-	if (directions.horizontal && gesture.normX > 0) {
-		progressOffset = Math.max(progressOffset, gesture.normX);
+	if (directions.horizontal && progressDelta.x > 0) {
+		progressOffset = Math.max(progressOffset, progressDelta.x);
 	}
 
-	if (directions.horizontalInverted && gesture.normX < 0) {
-		progressOffset = Math.max(progressOffset, -gesture.normX);
+	if (directions.horizontalInverted && progressDelta.x < 0) {
+		progressOffset = Math.max(progressOffset, -progressDelta.x);
 	}
 
-	if (directions.vertical && gesture.normY > 0) {
-		progressOffset = Math.max(progressOffset, gesture.normY);
+	if (directions.vertical && progressDelta.y > 0) {
+		progressOffset = Math.max(progressOffset, progressDelta.y);
 	}
 
-	if (directions.verticalInverted && gesture.normY < 0) {
-		progressOffset = Math.max(progressOffset, -gesture.normY);
+	if (directions.verticalInverted && progressDelta.y < 0) {
+		progressOffset = Math.max(progressOffset, -progressDelta.y);
 	}
 
-	return clamp(baseProgress - progressOffset, 0, baseProgress);
+	return clamp(transitionProgress - progressOffset, 0, transitionProgress);
 };
 
-const resolvePinchGestureDrivenProgress = (
-	baseProgress: number,
+const resolvePinchGestureAffectedProgress = (
+	transitionProgress: number,
 	gesture: GestureValues,
 	gestureDirection: GestureDirectionOption,
 	hasSnapPoints: boolean,
@@ -90,13 +94,13 @@ const resolvePinchGestureDrivenProgress = (
 				: null;
 
 	if (!pinchDirection) {
-		return baseProgress;
+		return transitionProgress;
 	}
 
 	if (hasSnapPoints) {
 		const snapDirections = getSnapPinchDirectionConfig(gestureDirection);
 		if (!snapDirections || !snapBounds) {
-			return baseProgress;
+			return transitionProgress;
 		}
 
 		const progressDelta =
@@ -104,39 +108,35 @@ const resolvePinchGestureDrivenProgress = (
 				? -Math.abs(gesture.normScale)
 				: Math.abs(gesture.normScale);
 
-		return clamp(baseProgress + progressDelta, snapBounds.min, snapBounds.max);
+		return clamp(
+			transitionProgress + progressDelta,
+			snapBounds.min,
+			snapBounds.max,
+		);
 	}
 
 	const pinchDirections = getPinchGestureDirections(gestureDirection);
 	if (!pinchDirections.includes(pinchDirection)) {
-		return baseProgress;
+		return transitionProgress;
 	}
 
-	return clamp(baseProgress - Math.abs(gesture.normScale), 0, baseProgress);
+	return clamp(
+		transitionProgress - Math.abs(gesture.normScale),
+		0,
+		transitionProgress,
+	);
 };
 
-export const resolveGestureDrivenProgress = (
-	baseProgress: number,
+export const resolveGestureAffectedProgress = (
+	transitionProgress: number,
 	gesture: GestureValues,
-	options: ScreenTransitionOptions,
-	effectiveOptions: ScreenTransitionOptions | undefined,
+	panProgressDelta: PanProgressDelta,
+	gestureDirection: GestureDirectionOption | undefined,
 	snapBounds: SnapBounds | null,
 ) => {
 	"worklet";
-	const gestureProgressMode = resolveGestureProgressModeFromOptions(
-		effectiveOptions,
-		options,
-		DEFAULT_GESTURE_PROGRESS_MODE,
-	);
-
-	if (gestureProgressMode === "freeform") {
-		return baseProgress;
-	}
-
-	const gestureDirection =
-		effectiveOptions?.gestureDirection ??
-		options.gestureDirection ??
-		DEFAULT_GESTURE_DIRECTION;
+	const resolvedGestureDirection =
+		gestureDirection ?? DEFAULT_GESTURE_DIRECTION;
 
 	const hasSnapPoints = snapBounds !== null;
 
@@ -145,19 +145,20 @@ export const resolveGestureDrivenProgress = (
 		gesture.active === "pinch-out" ||
 		Math.abs(gesture.normScale) > EPSILON
 	) {
-		return resolvePinchGestureDrivenProgress(
-			baseProgress,
+		return resolvePinchGestureAffectedProgress(
+			transitionProgress,
 			gesture,
-			gestureDirection,
+			resolvedGestureDirection,
 			hasSnapPoints,
 			snapBounds,
 		);
 	}
 
-	return resolvePanGestureDrivenProgress(
-		baseProgress,
+	return resolvePanGestureAffectedProgress(
+		transitionProgress,
 		gesture,
-		gestureDirection,
+		panProgressDelta,
+		resolvedGestureDirection,
 		hasSnapPoints,
 		snapBounds,
 	);

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

@@ -4,7 +4,7 @@ import type {
 	TransitionInterpolatorOptions,
 } from "../../../../../types/animation.types";
 import type { Layout } from "../../../../../types/screen.types";
-import { resolveGestureDrivenProgress } from "./gesture-progress";
+import { resolveGestureAffectedProgress } from "./gesture-progress";
 import {
 	computeAnimatedSnapIndex,
 	computeTargetSnapIndex,
@@ -58,13 +58,14 @@ export const hydrateTransitionState = (
 ) => {
 	"worklet";
 	const out = s.unwrapped;
-	const baseProgress = s.progress.get();
+	const transitionProgress = s.transitionProgress.get();
 	const options = mergeTransitionOptions(
 		s.options,
 		effectiveOptions,
 		s.optionsSlot,
 	);
 	const canDismiss = options.gestureEnabled !== false;
+	out.transitionProgress = transitionProgress;
 	out.willAnimate = s.willAnimate.get();
 	out.closing = s.closing.get();
 	out.entering = s.entering.get();
@@ -90,11 +91,74 @@ export const hydrateTransitionState = (
 	out.gesture.settling = s.gesture.settling.get();
 	out.gesture.active = s.gesture.active.get();
 	out.gesture.direction = s.gesture.direction.get();
-	out.progress = resolveGestureDrivenProgress(
-		baseProgress,
+	const handoff = out.gesture.handoff;
+	const useHandoffSnapshot = out.gesture.dismissing;
+
+	handoff.x = useHandoffSnapshot
+		? s.gesture.internal.snapshot.x.get()
+		: out.gesture.x;
+	handoff.y = useHandoffSnapshot
+		? s.gesture.internal.snapshot.y.get()
+		: out.gesture.y;
+	handoff.normX = useHandoffSnapshot
+		? s.gesture.internal.snapshot.normX.get()
+		: out.gesture.normX;
+	handoff.normY = useHandoffSnapshot
+		? s.gesture.internal.snapshot.normY.get()
+		: out.gesture.normY;
+	handoff.velocity = useHandoffSnapshot
+		? s.gesture.internal.snapshot.velocity.get()
+		: out.gesture.velocity;
+	handoff.scale = useHandoffSnapshot
+		? s.gesture.internal.snapshot.scale.get()
+		: out.gesture.scale;
+	handoff.normScale = useHandoffSnapshot
+		? s.gesture.internal.snapshot.normScale.get()
+		: out.gesture.normScale;
+	handoff.focalX = useHandoffSnapshot
+		? s.gesture.internal.snapshot.focalX.get()
+		: out.gesture.focalX;
+	handoff.focalY = useHandoffSnapshot
+		? s.gesture.internal.snapshot.focalY.get()
+		: out.gesture.focalY;
+	handoff.rotation = useHandoffSnapshot
+		? s.gesture.internal.snapshot.rotation.get()
+		: out.gesture.rotation;
+	handoff.raw.x = useHandoffSnapshot
+		? s.gesture.internal.snapshot.raw.x.get()
+		: out.gesture.raw.x;
+	handoff.raw.y = useHandoffSnapshot
+		? s.gesture.internal.snapshot.raw.y.get()
+		: out.gesture.raw.y;
+	handoff.raw.normX = useHandoffSnapshot
+		? s.gesture.internal.snapshot.raw.normX.get()
+		: out.gesture.raw.normX;
+	handoff.raw.normY = useHandoffSnapshot
+		? s.gesture.internal.snapshot.raw.normY.get()
+		: out.gesture.raw.normY;
+	handoff.raw.scale = useHandoffSnapshot
+		? s.gesture.internal.snapshot.raw.scale.get()
+		: out.gesture.raw.scale;
+	handoff.raw.normScale = useHandoffSnapshot
+		? s.gesture.internal.snapshot.raw.normScale.get()
+		: out.gesture.raw.normScale;
+	handoff.raw.rotation = useHandoffSnapshot
+		? s.gesture.internal.snapshot.raw.rotation.get()
+		: out.gesture.raw.rotation;
+	handoff.active = useHandoffSnapshot
+		? s.gesture.internal.snapshot.active.get()
+		: out.gesture.active;
+	handoff.direction = useHandoffSnapshot
+		? s.gesture.internal.snapshot.direction.get()
+		: out.gesture.direction;
+	out.progress = resolveGestureAffectedProgress(
+		transitionProgress,
 		out.gesture,
-		s.options,
-		effectiveOptions,
+		{
+			x: s.gesture.internal.progressDeltaX.get(),
+			y: s.gesture.internal.progressDeltaY.get(),
+		},
+		effectiveOptions?.gestureDirection ?? s.options.gestureDirection,
 		getResolvedSnapBounds(
 			s.sortedNumericSnapPoints,
 			s.hasAutoSnapPoint ? s.resolvedAutoSnapPoint.get() : null,
@@ -104,8 +168,8 @@ export const hydrateTransitionState = (
 
 	// Unsure where else to place this if im being honest.
 	// I think for here is fine
-	if (s.effectiveProgress.get() !== out.progress) {
-		s.effectiveProgress.set(out.progress);
+	if (s.visualProgress.get() !== out.progress) {
+		s.visualProgress.set(out.progress);
 	}
 
 	const hasResidualGestureValues =

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

@@ -9,8 +9,8 @@ import type { Layout } from "../../../../../types/screen.types";
 import type { BaseStackRoute } from "../../../../../types/stack.types";
 
 export type BuiltState = {
-	progress: SharedValue<number>;
-	effectiveProgress: SharedValue<number>;
+	transitionProgress: SharedValue<number>;
+	visualProgress: SharedValue<number>;
 	willAnimate: SharedValue<number>;
 	closing: SharedValue<number>;
 	progressAnimating: SharedValue<number>;

package/src/shared/providers/screen/animation/helpers/pipeline.ts

@@ -78,9 +78,9 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 
 	const currentRouteKey = currDescriptor?.route?.key;
 	const currentIndex = routeKeys.indexOf(currentRouteKey);
-	const effectiveProgressValues = useMemo(() => {
+	const visualProgressValues = useMemo(() => {
 		return routeKeys.map((routeKey) =>
-			AnimationStore.getValue(routeKey, "effectiveProgress"),
+			AnimationStore.getValue(routeKey, "visualProgress"),
 		);
 	}, [routeKeys]);
 
@@ -143,7 +143,7 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 
 			frame.stackProgress = deriveStackProgress(
 				routeKeys,
-				effectiveProgressValues,
+				visualProgressValues,
 				currentIndex,
 				frame.progress,
 				currentRouteKey,

package/src/shared/providers/screen/animation/helpers/stack-progress.ts

@@ -2,7 +2,7 @@ import type { SharedValue } from "react-native-reanimated";
 
 export const deriveStackProgress = (
 	routeKeys: string[],
-	effectiveProgressValues: SharedValue<number>[],
+	visualProgressValues: SharedValue<number>[],
 	currentIndex: number,
 	fallbackProgress: number,
 	currentRouteKey: string | undefined,
@@ -14,14 +14,14 @@ export const deriveStackProgress = (
 	if (currentIndex < 0) return fallbackProgress;
 
 	let total = 0;
-	for (let i = currentIndex; i < effectiveProgressValues.length; i++) {
+	for (let i = currentIndex; i < visualProgressValues.length; i++) {
 		const routeKey = routeKeys[i];
 		if (routeKey === currentRouteKey) {
 			total += currentProgress;
 		} else if (routeKey === nextRouteKey && nextProgress !== undefined) {
 			total += nextProgress;
 		} else {
-			total += effectiveProgressValues[i].get();
+			total += visualProgressValues[i].get();
 		}
 	}
 

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

@@ -20,8 +20,8 @@ import { buildScreenTransitionOptions } from "./build-screen-transition-options"
 import { toPlainRoute, toPlainValue } from "./worklet";
 
 type BuiltState = {
-	progress: SharedValue<number>;
-	effectiveProgress: SharedValue<number>;
+	transitionProgress: SharedValue<number>;
+	visualProgress: SharedValue<number>;
 	willAnimate: SharedValue<number>;
 	closing: SharedValue<number>;
 	progressAnimating: SharedValue<number>;
@@ -65,8 +65,8 @@ export const useBuildTransitionState = (
 		const transitionOptions = buildScreenTransitionOptions(descriptor.options);
 
 		return {
-			progress: AnimationStore.getValue(key, "progress"),
-			effectiveProgress: AnimationStore.getValue(key, "effectiveProgress"),
+			transitionProgress: AnimationStore.getValue(key, "transitionProgress"),
+			visualProgress: AnimationStore.getValue(key, "visualProgress"),
 			willAnimate: AnimationStore.getValue(key, "willAnimate"),
 			closing: AnimationStore.getValue(key, "closing"),
 			entering: AnimationStore.getValue(key, "entering"),