react-native-screen-transitions 3.5.2 → 3.6.0-alpha.1

package/src/shared/utils/bounds/{zoom → navigation/zoom}/build.ts

@@ -4,24 +4,22 @@ import {
 	NAVIGATION_MASK_CONTAINER_STYLE_ID,
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,
 	VISIBLE_STYLE,
-} from "../../../constants";
-import { getGroupActiveId } from "../../../stores/bounds/internals/groups";
-import { resolveTransitionPair } from "../../../stores/bounds/internals/resolver";
-import type { ResolvedTransitionPair } from "../../../stores/bounds/types";
-import type { TransitionInterpolatedStyle } from "../../../types/animation.types";
-import type { Layout } from "../../../types/screen.types";
-import { prepareBoundStyles } from "../helpers/prepare-bound-styles";
-import type { BoundsOptions } from "../types/options";
+} from "../../../../constants";
+import type {
+	ScreenTransitionOptions,
+	TransitionInterpolatedStyle,
+} from "../../../../types/animation.types";
+import { createLinkAccessor } from "../../helpers/create-link-accessor";
+import { getSourceBorderRadius, toNumber } from "../helpers";
 import {
-	toNumber,
-	ZOOM_BACKGROUND_SCALE,
-	ZOOM_DRAG_DIRECTIONAL_SCALE_EXPONENT,
-	ZOOM_DRAG_DIRECTIONAL_SCALE_MAX,
-	ZOOM_DRAG_DIRECTIONAL_SCALE_MIN,
-	ZOOM_DRAG_RESISTANCE,
-	ZOOM_DRAG_TRANSLATION_EXPONENT,
-	ZOOM_DRAG_TRANSLATION_NEGATIVE_MAX,
-	ZOOM_DRAG_TRANSLATION_POSITIVE_MAX,
+	combineScales,
+	composeCompensatedTranslation,
+	computeCenterScaleShift,
+	resolveDirectionalDragScale,
+	resolveOpacityRangeTuple,
+} from "../math";
+import {
+	ZOOM_DISMISS_SCALE_ORBIT_DEPTH,
 	ZOOM_FOCUSED_ELEMENT_CLOSE_OPACITY_RANGE,
 	ZOOM_FOCUSED_ELEMENT_OPEN_OPACITY_RANGE,
 	ZOOM_MASK_OUTSET,
@@ -30,130 +28,80 @@ import {
 	ZOOM_UNFOCUSED_ELEMENT_OPEN_OPACITY_RANGE,
 } from "./config";
 import {
-	combineScales,
-	composeCompensatedTranslation,
-	computeCenterScaleShift,
-	resolveDirectionalDragScale,
-	resolveDirectionalDragTranslation,
-	resolveOpacityRangeTuple,
-} from "./math";
+	getZoomContentTarget,
+	interpolateOpacityRange,
+	resolveBackgroundScale,
+	resolveDragScaleTuple,
+	resolveDragTranslationTuple,
+} from "./helpers";
+import { resolveDirectionalDragTranslation } from "./math";
 import type { BuildZoomStylesParams, ZoomInterpolatedStyle } from "./types";
 
 const IDENTITY_DRAG_SCALE_OUTPUT = [1, 1] as const;
 
-/* -------------------------------------------------------------------------- */
-/*                               LOCAL HELPERS                                */
-/* -------------------------------------------------------------------------- */
-
-function getSourceBorderRadius(resolvedPair: ResolvedTransitionPair): number {
+function resolveZoomGestureHandoff(rawDrag: number) {
 	"worklet";
 
-	return typeof resolvedPair.sourceStyles?.borderRadius === "number"
-		? resolvedPair.sourceStyles.borderRadius
-		: 0;
-}
-
-function getZoomContentTarget({
-	explicitTarget,
-	screenLayout,
-	anchor,
-	resolvedPair,
-}: {
-	explicitTarget: BoundsOptions["target"] | undefined;
-	screenLayout: Layout;
-	anchor: BoundsOptions["anchor"] | undefined;
-	resolvedPair: ResolvedTransitionPair;
-}) {
-	"worklet";
-
-	if (explicitTarget) return explicitTarget;
-
-	const sourceBounds = resolvedPair.sourceBounds;
-	const screenWidth = screenLayout.width;
-
-	if (!sourceBounds || sourceBounds.width <= 0 || screenWidth <= 0) {
-		return "fullscreen" as const;
-	}
-
-	const height = (sourceBounds.height / sourceBounds.width) * screenWidth;
-	const verticalAnchor =
-		anchor === "bottomLeading" ||
-		anchor === "bottom" ||
-		anchor === "bottomTrailing"
-			? "bottom"
-			: anchor === "center" || anchor === "leading" || anchor === "trailing"
-				? "center"
-				: "top";
-	const y =
-		verticalAnchor === "top"
-			? 0
-			: verticalAnchor === "bottom"
-				? screenLayout.height - height
-				: (screenLayout.height - height) / 2;
+	const gestureSensitivity = interpolate(rawDrag, [0, 1], [0.7, 0.1], "clamp");
+	const releaseBoost = interpolate(rawDrag, [0, 1], [1, 1.4], "clamp");
+	const releaseSensitivity = interpolate(
+		gestureSensitivity,
+		[0.28, 0.9],
+		[0.7, 1],
+		"clamp",
+	);
 
 	return {
-		x: 0,
-		y,
-		pageX: 0,
-		pageY: y,
-		width: screenWidth,
-		height,
+		gestureSensitivity,
+		gestureReleaseVelocityScale: releaseBoost * releaseSensitivity,
 	};
 }
 
-function resolveDragScaleTuple(
-	value:
-		| readonly [shrinkMin: number, growMax: number, exponent?: number]
-		| undefined,
-) {
+function resolveZoomGestureOptions({
+	rawDrag,
+	activeOptions,
+}: {
+	rawDrag: number;
+	activeOptions: ScreenTransitionOptions;
+}) {
 	"worklet";
 
-	return {
-		shrinkMin: value?.[0] ?? ZOOM_DRAG_DIRECTIONAL_SCALE_MIN,
-		growMax: value?.[1] ?? ZOOM_DRAG_DIRECTIONAL_SCALE_MAX,
-		exponent: value?.[2] ?? ZOOM_DRAG_DIRECTIONAL_SCALE_EXPONENT,
-	};
-}
-
-function resolveDragTranslationTuple(
-	value:
-		| readonly [negativeMax: number, positiveMax: number, exponent?: number]
-		| undefined,
-) {
-	"worklet";
+	const { gestureSensitivity, gestureReleaseVelocityScale } =
+		resolveZoomGestureHandoff(rawDrag);
 
 	return {
-		negativeMax: value?.[0] ?? ZOOM_DRAG_TRANSLATION_NEGATIVE_MAX,
-		positiveMax: value?.[1] ?? ZOOM_DRAG_TRANSLATION_POSITIVE_MAX,
-		exponent: value?.[2] ?? ZOOM_DRAG_TRANSLATION_EXPONENT,
+		gestureProgressMode: activeOptions.gestureProgressMode ?? "freeform",
+		gestureSensitivity: activeOptions.gestureSensitivity ?? gestureSensitivity,
+		gestureReleaseVelocityScale:
+			activeOptions.gestureReleaseVelocityScale ?? gestureReleaseVelocityScale,
 	};
 }
 
-function resolveBackgroundScale(value: number | undefined) {
-	"worklet";
-
-	return value ?? ZOOM_BACKGROUND_SCALE;
-}
-
-function interpolateOpacityRange(params: {
+function resolveZoomDismissScaleHandoff({
+	progress,
+	releaseScale,
+	targetScale,
+	rawDrag,
+}: {
 	progress: number;
-	range: {
-		inputStart: number;
-		inputEnd: number;
-		outputStart: number;
-		outputEnd: number;
-	};
+	releaseScale: number;
+	targetScale: number;
+	rawDrag: number;
 }) {
 	"worklet";
 
-	const { progress, range } = params;
-
-	return interpolate(
-		progress,
-		[range.inputStart, range.inputEnd],
-		[range.outputStart, range.outputEnd],
+	const closeProgress = 1 - progress;
+	const scaleProgress = Math.sin((Math.PI / 2) * closeProgress);
+	const baseScale = releaseScale + (targetScale - releaseScale) * scaleProgress;
+	const orbitDepth = interpolate(
+		rawDrag,
+		[0, 1],
+		[0, ZOOM_DISMISS_SCALE_ORBIT_DEPTH],
 		"clamp",
 	);
+	const orbitScale = 1 - orbitDepth * Math.sin(Math.PI * closeProgress);
+
+	return baseScale * orbitScale;
 }
 
 /* -------------------------------------------------------------------------- */
@@ -171,14 +119,6 @@ export function buildZoomStyles({
 		return {};
 	}
 
-	const isGroup = tag.includes(":");
-	let buildEffectiveTag = tag;
-	if (isGroup) {
-		const group = tag.split(":")[0];
-		const groupActiveTag = getGroupActiveId(group)?.split(":")[0];
-		buildEffectiveTag = `${group}:${groupActiveTag ?? tag.split(":")[1]}`;
-	}
-
 	/* ------------------------------ Shared Setup ------------------------------ */
 
 	const target = zoomOptions?.target;
@@ -187,27 +127,21 @@ export function buildZoomStyles({
 		progress,
 		layouts: { screen: screenLayout },
 	} = props;
-	const isEnteringTransition = !props.next;
-	const currentRouteKey = props.current?.route.key;
-	const previousRouteKey = props.previous?.route.key;
-	const nextRouteKey = props.next?.route.key;
 
 	const zoomAnchor = target === "bound" ? "center" : ZOOM_SHARED_OPTIONS.anchor;
 
+	const boundsAccessor = createLinkAccessor(() => props);
+	const link = boundsAccessor.getLink(tag);
+
+	if (!link) return {};
+
 	const baseRawOptions = {
-		id: buildEffectiveTag,
 		raw: true,
 		scaleMode: ZOOM_SHARED_OPTIONS.scaleMode,
 	} as const;
 
-	const linkPair = resolveTransitionPair(buildEffectiveTag, {
-		currentScreenKey: currentRouteKey,
-		previousScreenKey: previousRouteKey,
-		nextScreenKey: nextRouteKey,
-		entering: isEnteringTransition,
-	});
-
-	const sourceBorderRadius = getSourceBorderRadius(linkPair);
+	const buildEffectiveTag = link.id;
+	const sourceBorderRadius = getSourceBorderRadius(link);
 	const targetBorderRadius = zoomOptions?.borderRadius ?? sourceBorderRadius;
 	const focusedElementOpacity = {
 		open: resolveOpacityRangeTuple({
@@ -238,33 +172,21 @@ export function buildZoomStyles({
 		? NAVIGATION_MASK_CONTAINER_STYLE_ID
 		: "content";
 
-	/**
-	 * Local bounds compute helper for navigation zoom.
-	 *
-	 * If you're building a custom transition, prefer the public `bounds()` helper.
-	 * We keep a local version here so zoom can share the same low-level compute path
-	 * without re-entering the decorated public accessor.
-	 */
-	const bounds = <T extends BoundsOptions>(options: T) => {
-		"worklet";
-
-		return prepareBoundStyles({
-			props,
-			options,
-			resolvedPair: linkPair,
-		});
-	};
-
 	/* --------------------------- Gesture / Drag Values ------------------------- */
 
 	const normX = props.active.gesture.normX;
 	const normY = props.active.gesture.normY;
-	const initialDirection = props.active.gesture.direction;
+	const initialGesture =
+		props.active.gesture.active ?? props.active.gesture.direction;
 	const isHorizontalDismiss =
-		initialDirection === "horizontal" ||
-		initialDirection === "horizontal-inverted";
+		initialGesture === "horizontal" || initialGesture === "horizontal-inverted";
 	const isVerticalDismiss =
-		initialDirection === "vertical" || initialDirection === "vertical-inverted";
+		initialGesture === "vertical" || initialGesture === "vertical-inverted";
+	const rawDrag = isHorizontalDismiss
+		? Math.abs(props.active.gesture.raw.normX)
+		: isVerticalDismiss
+			? Math.abs(props.active.gesture.raw.normY)
+			: 0;
 
 	const horizontalDragTranslation = resolveDragTranslationTuple(
 		zoomOptions?.horizontalDragTranslation,
@@ -273,17 +195,15 @@ export function buildZoomStyles({
 		zoomOptions?.verticalDragTranslation,
 	);
 	const dragX = resolveDirectionalDragTranslation({
-		normalized: normX,
+		translation: props.active.gesture.x,
 		dimension: screenLayout.width,
-		resistance: ZOOM_DRAG_RESISTANCE,
 		negativeMax: horizontalDragTranslation.negativeMax,
 		positiveMax: horizontalDragTranslation.positiveMax,
 		exponent: horizontalDragTranslation.exponent,
 	});
 	const dragY = resolveDirectionalDragTranslation({
-		normalized: normY,
+		translation: props.active.gesture.y,
 		dimension: screenLayout.height,
-		resistance: ZOOM_DRAG_RESISTANCE,
 		negativeMax: verticalDragTranslation.negativeMax,
 		positiveMax: verticalDragTranslation.positiveMax,
 		exponent: verticalDragTranslation.exponent,
@@ -300,7 +220,7 @@ export function buildZoomStyles({
 		? resolveDirectionalDragScale({
 				normalized: normX,
 				dismissDirection:
-					initialDirection === "horizontal-inverted" ? "negative" : "positive",
+					initialGesture === "horizontal-inverted" ? "negative" : "positive",
 				shrinkMin: horizontalDragScale.shrinkMin,
 				growMax: horizontalDragScale.growMax,
 				exponent: horizontalDragScale.exponent,
@@ -310,13 +230,25 @@ export function buildZoomStyles({
 		? resolveDirectionalDragScale({
 				normalized: normY,
 				dismissDirection:
-					initialDirection === "vertical-inverted" ? "negative" : "positive",
+					initialGesture === "vertical-inverted" ? "negative" : "positive",
 				shrinkMin: verticalDragScale.shrinkMin,
 				growMax: verticalDragScale.growMax,
 				exponent: verticalDragScale.exponent,
 			})
 		: IDENTITY_DRAG_SCALE_OUTPUT[1];
 	const dragScale = combineScales(dragXScale, dragYScale);
+	const handoffDragScale = props.active.gesture.dismissing
+		? resolveZoomDismissScaleHandoff({
+				progress: props.active.progress,
+				releaseScale: dragScale,
+				targetScale: 1,
+				rawDrag,
+			})
+		: dragScale;
+	const zoomGestureOptions = resolveZoomGestureOptions({
+		rawDrag,
+		activeOptions: props.active.options,
+	});
 
 	/* ----------------------------- Focused Screen ----------------------------- */
 
@@ -325,17 +257,17 @@ export function buildZoomStyles({
 			explicitTarget: target,
 			screenLayout,
 			anchor: ZOOM_SHARED_OPTIONS.anchor,
-			resolvedPair: linkPair,
+			link,
 		});
 
-		const contentRaw = bounds({
+		const contentRaw = link.compute({
 			...baseRawOptions,
 			anchor: zoomAnchor,
 			method: "content",
 			target: focusedContentTarget,
 		} as const);
 
-		const maskRaw = bounds({
+		const maskRaw = link.compute({
 			...baseRawOptions,
 			anchor: ZOOM_SHARED_OPTIONS.anchor,
 			method: "size",
@@ -371,9 +303,9 @@ export function buildZoomStyles({
 
 		const contentTranslateX = toNumber(contentRaw.translateX) + dragX;
 		const contentTranslateY = toNumber(contentRaw.translateY) + dragY;
-		const contentScale = toNumber(contentRaw.scale, 1) * dragScale;
-		const maskTranslateX = toNumber(maskRaw.translateX) + dragX - left;
-		const maskTranslateY = toNumber(maskRaw.translateY) + dragY - top;
+		const contentScale = contentRaw.scale * handoffDragScale;
+		const maskTranslateX = maskRaw.translateX + dragX - left;
+		const maskTranslateY = maskRaw.translateY + dragY - top;
 
 		const focusedContentStyle = {
 			opacity: zoomOptions?.debug ? 0.5 : focusedFade,
@@ -402,13 +334,16 @@ export function buildZoomStyles({
 					transform: [
 						{ translateX: maskTranslateX },
 						{ translateY: maskTranslateY },
-						{ scale: dragScale },
+						{ scale: handoffDragScale },
 					],
 				},
 			};
 		}
 
-		return focusedStyles;
+		return {
+			options: zoomGestureOptions,
+			...focusedStyles,
+		};
 	}
 
 	/* ---------------------------- Unfocused Screen ---------------------------- */
@@ -431,17 +366,17 @@ export function buildZoomStyles({
 	const didSourceComponentVisiblyHide =
 		!props.active.closing && unfocusedFade <= EPSILON;
 
-	const shouldResetUnfocusedElement =
+	const shouldHideUnfocusedElement =
 		!props.active.closing && didSourceComponentVisiblyHide;
 
 	const unfocusedElementTarget = getZoomContentTarget({
 		explicitTarget: target,
 		screenLayout,
 		anchor: ZOOM_SHARED_OPTIONS.anchor,
-		resolvedPair: linkPair,
+		link,
 	});
 
-	const elementRaw = bounds({
+	const elementRaw = link.compute({
 		...baseRawOptions,
 		anchor: zoomAnchor,
 		method: "transform",
@@ -450,12 +385,12 @@ export function buildZoomStyles({
 	} as const);
 
 	const boundTargetCenterX =
-		target === "bound" && linkPair.destinationBounds
-			? linkPair.destinationBounds.pageX + linkPair.destinationBounds.width / 2
+		target === "bound" && link.destination?.bounds
+			? link.destination.bounds.pageX + link.destination.bounds.width / 2
 			: undefined;
 	const boundTargetCenterY =
-		target === "bound" && linkPair.destinationBounds
-			? linkPair.destinationBounds.pageY + linkPair.destinationBounds.height / 2
+		target === "bound" && link.destination?.bounds
+			? link.destination.bounds.pageY + link.destination.bounds.height / 2
 			: undefined;
 
 	const elementCenterX =
@@ -469,26 +404,39 @@ export function buildZoomStyles({
 			? unfocusedElementTarget.pageY + unfocusedElementTarget.height / 2
 			: screenLayout.height / 2);
 
+	const unfocusedContentScale = props.active.logicallySettled
+		? 1
+		: unfocusedScale;
+	const shouldTrackGestureTranslation = !props.active.logicallySettled;
+	const shouldTrackGestureScale = !props.active.logicallySettled;
+	const elementGestureScale = shouldTrackGestureScale ? handoffDragScale : 1;
+	const elementGestureX = shouldTrackGestureTranslation ? dragX : 0;
+	const elementGestureY = shouldTrackGestureTranslation ? dragY : 0;
+	const safeUnfocusedContentScale = Math.max(
+		Math.abs(unfocusedContentScale),
+		EPSILON,
+	);
+
 	const scaleShiftX = computeCenterScaleShift({
 		center: elementCenterX,
 		containerCenter: screenLayout.width / 2,
-		scale: dragScale,
+		scale: elementGestureScale,
 	});
 	const scaleShiftY = computeCenterScaleShift({
 		center: elementCenterY,
 		containerCenter: screenLayout.height / 2,
-		scale: dragScale,
+		scale: elementGestureScale,
 	});
 
 	const compensatedGestureX = composeCompensatedTranslation({
-		gesture: dragX,
-		parentScale: unfocusedScale,
+		gesture: elementGestureX,
+		parentScale: unfocusedContentScale,
 		centerShift: scaleShiftX,
 		epsilon: EPSILON,
 	});
 	const compensatedGestureY = composeCompensatedTranslation({
-		gesture: dragY,
-		parentScale: unfocusedScale,
+		gesture: elementGestureY,
+		parentScale: unfocusedContentScale,
 		centerShift: scaleShiftY,
 		epsilon: EPSILON,
 	});
@@ -497,10 +445,14 @@ export function buildZoomStyles({
 		toNumber(elementRaw.translateX) + compensatedGestureX;
 	const elementTranslateY =
 		toNumber(elementRaw.translateY) + compensatedGestureY;
-	const elementScaleX = toNumber(elementRaw.scaleX, 1) * dragScale;
-	const elementScaleY = toNumber(elementRaw.scaleY, 1) * dragScale;
-
-	const resolvedElementStyle = shouldResetUnfocusedElement
+	const elementScaleX =
+		(toNumber(elementRaw.scaleX, 1) * elementGestureScale) /
+		safeUnfocusedContentScale;
+	const elementScaleY =
+		(toNumber(elementRaw.scaleY, 1) * elementGestureScale) /
+		safeUnfocusedContentScale;
+
+	const resolvedElementStyle = shouldHideUnfocusedElement
 		? {
 				transform: [
 					{ translateX: 0 },
@@ -533,9 +485,10 @@ export function buildZoomStyles({
 			};
 
 	return {
+		options: zoomGestureOptions,
 		content: {
 			style: {
-				transform: [{ scale: unfocusedScale }],
+				transform: [{ scale: unfocusedContentScale }],
 			},
 		},
 		[buildEffectiveTag]: {

package/src/shared/utils/bounds/{zoom → navigation/zoom}/config.ts

@@ -1,17 +1,15 @@
-import type { BoundsOptions } from "../types/options";
-
 export const ZOOM_SHARED_OPTIONS = Object.freeze({
 	anchor: "top" as const,
 	scaleMode: "uniform" as const,
 });
 
-export const ZOOM_DRAG_RESISTANCE = 0.4;
 export const ZOOM_DRAG_DIRECTIONAL_SCALE_MIN = 0.25;
 export const ZOOM_DRAG_DIRECTIONAL_SCALE_MAX = 1.06;
 export const ZOOM_DRAG_DIRECTIONAL_SCALE_EXPONENT = 2;
 export const ZOOM_DRAG_TRANSLATION_NEGATIVE_MAX = 1;
 export const ZOOM_DRAG_TRANSLATION_POSITIVE_MAX = 1;
 export const ZOOM_DRAG_TRANSLATION_EXPONENT = 1;
+export const ZOOM_DISMISS_SCALE_ORBIT_DEPTH = 0.8;
 export const ZOOM_BACKGROUND_SCALE = 0.9375;
 export const ZOOM_FOCUSED_ELEMENT_OPEN_OPACITY_RANGE = [0, 0.5, 0, 1] as const;
 export const ZOOM_FOCUSED_ELEMENT_CLOSE_OPACITY_RANGE = [0.6, 1, 0, 1] as const;
@@ -26,15 +24,3 @@ export const ZOOM_MASK_OUTSET = Object.freeze({
 	bottom: 0,
 	left: 0,
 });
-
-export const getZoomAnchor = (
-	target: BoundsOptions["target"] | undefined,
-): BoundsOptions["anchor"] => {
-	"worklet";
-	return target === "bound" ? "center" : ZOOM_SHARED_OPTIONS.anchor;
-};
-
-export const toNumber = (value: unknown, fallback = 0): number => {
-	"worklet";
-	return typeof value === "number" ? value : fallback;
-};

package/src/shared/utils/bounds/navigation/zoom/helpers.ts

@@ -0,0 +1,116 @@
+import { interpolate } from "react-native-reanimated";
+import type { BoundsLink } from "../../../../types/bounds.types";
+import type { Layout } from "../../../../types/screen.types";
+import type { BoundsOptions } from "../../types/options";
+import {
+	ZOOM_BACKGROUND_SCALE,
+	ZOOM_DRAG_DIRECTIONAL_SCALE_EXPONENT,
+	ZOOM_DRAG_DIRECTIONAL_SCALE_MAX,
+	ZOOM_DRAG_DIRECTIONAL_SCALE_MIN,
+	ZOOM_DRAG_TRANSLATION_EXPONENT,
+	ZOOM_DRAG_TRANSLATION_NEGATIVE_MAX,
+	ZOOM_DRAG_TRANSLATION_POSITIVE_MAX,
+} from "./config";
+
+export function getZoomContentTarget({
+	explicitTarget,
+	screenLayout,
+	anchor,
+	link,
+}: {
+	explicitTarget: BoundsOptions["target"] | undefined;
+	screenLayout: Layout;
+	anchor: BoundsOptions["anchor"] | undefined;
+	link: BoundsLink;
+}) {
+	"worklet";
+
+	if (explicitTarget) return explicitTarget;
+
+	const sourceBounds = link.source?.bounds;
+	const screenWidth = screenLayout.width;
+
+	if (!sourceBounds || sourceBounds.width <= 0 || screenWidth <= 0) {
+		return "fullscreen" as const;
+	}
+
+	const height = (sourceBounds.height / sourceBounds.width) * screenWidth;
+	const verticalAnchor =
+		anchor === "bottomLeading" ||
+		anchor === "bottom" ||
+		anchor === "bottomTrailing"
+			? "bottom"
+			: anchor === "center" || anchor === "leading" || anchor === "trailing"
+				? "center"
+				: "top";
+	const y =
+		verticalAnchor === "top"
+			? 0
+			: verticalAnchor === "bottom"
+				? screenLayout.height - height
+				: (screenLayout.height - height) / 2;
+
+	return {
+		x: 0,
+		y,
+		pageX: 0,
+		pageY: y,
+		width: screenWidth,
+		height,
+	};
+}
+
+export function resolveDragScaleTuple(
+	value:
+		| readonly [shrinkMin: number, growMax: number, exponent?: number]
+		| undefined,
+) {
+	"worklet";
+
+	return {
+		shrinkMin: value?.[0] ?? ZOOM_DRAG_DIRECTIONAL_SCALE_MIN,
+		growMax: value?.[1] ?? ZOOM_DRAG_DIRECTIONAL_SCALE_MAX,
+		exponent: value?.[2] ?? ZOOM_DRAG_DIRECTIONAL_SCALE_EXPONENT,
+	};
+}
+
+export function resolveDragTranslationTuple(
+	value:
+		| readonly [negativeMax: number, positiveMax: number, exponent?: number]
+		| undefined,
+) {
+	"worklet";
+
+	return {
+		negativeMax: value?.[0] ?? ZOOM_DRAG_TRANSLATION_NEGATIVE_MAX,
+		positiveMax: value?.[1] ?? ZOOM_DRAG_TRANSLATION_POSITIVE_MAX,
+		exponent: value?.[2] ?? ZOOM_DRAG_TRANSLATION_EXPONENT,
+	};
+}
+
+export function resolveBackgroundScale(value: number | undefined) {
+	"worklet";
+
+	return value ?? ZOOM_BACKGROUND_SCALE;
+}
+
+export function interpolateOpacityRange(params: {
+	progress: number;
+	range: {
+		inputStart: number;
+		inputEnd: number;
+		outputStart: number;
+		outputEnd: number;
+	};
+}) {
+	"worklet";
+
+	const { progress, range } = params;
+
+	return interpolate(
+		progress,
+		[range.inputStart, range.inputEnd],
+		[range.outputStart, range.outputEnd],
+		"clamp",
+	);
+}