react-native-screen-transitions 3.3.0-rc.3 → 3.4.0-alpha.0

package/src/shared/utils/bounds/helpers/interpolate.ts

@@ -0,0 +1,19 @@
+export function interpolateClamped(
+	value: number,
+	inputRange: readonly [number, number],
+	outputRange: readonly [number, number],
+): number {
+	"worklet";
+	const [inputStart, inputEnd] = inputRange;
+	const [outputStart, outputEnd] = outputRange;
+
+	const inputSpan = inputEnd - inputStart;
+	if (inputSpan === 0) {
+		return outputStart;
+	}
+
+	const normalized = (value - inputStart) / inputSpan;
+	const clamped = normalized < 0 ? 0 : normalized > 1 ? 1 : normalized;
+
+	return outputStart + (outputEnd - outputStart) * clamped;
+}

package/src/shared/utils/bounds/helpers/interpolators.ts

@@ -0,0 +1,108 @@
+import type { MeasuredDimensions } from "react-native-reanimated";
+import { ENTER_RANGE, EXIT_RANGE } from "../../../constants";
+import { BoundStore } from "../../../stores/bounds";
+import type { ScreenInterpolationProps } from "../../../types/animation.types";
+import { interpolateClamped } from "./interpolate";
+import { interpolateLinkStyle } from "./interpolate-style";
+import type { LinkAccessor } from "./link-accessor";
+
+type InterpolatorParams = {
+	getProps: () => Omit<ScreenInterpolationProps, "bounds">;
+	getLink: LinkAccessor["getLink"];
+};
+
+export const createInterpolators = ({
+	getProps,
+	getLink,
+}: InterpolatorParams) => {
+	"worklet";
+
+	const interpolateStyle = (
+		tag: string,
+		property: string,
+		fallback?: number,
+	): number => {
+		"worklet";
+		const props = getProps();
+		const link = getLink(tag);
+		const entering = !props.next;
+		return interpolateLinkStyle(link, property, props.progress, entering, {
+			fallback,
+		});
+	};
+
+	const interpolateBoundsFromSnapshot = (
+		tag: string,
+		property: keyof MeasuredDimensions,
+		targetKey: string,
+		fallback?: number,
+	): number => {
+		"worklet";
+
+		const props = getProps();
+		const entering = !props.next;
+		const range = entering ? ENTER_RANGE : EXIT_RANGE;
+		const currentKey = props.current?.route?.key;
+		const fb = fallback ?? 0;
+
+		const currentSnapshot = currentKey
+			? BoundStore.getSnapshot(tag, currentKey)
+			: null;
+		const targetSnapshot = BoundStore.getSnapshot(tag, targetKey);
+
+		const currentValue = currentSnapshot?.bounds?.[property] ?? fb;
+		const targetValue = targetSnapshot?.bounds?.[property] ?? fb;
+
+		return interpolateClamped(props.progress, range, [
+			targetValue,
+			currentValue,
+		]);
+	};
+
+	const interpolateBoundsFromLink = (
+		tag: string,
+		property: keyof MeasuredDimensions,
+		fallback?: number,
+	): number => {
+		"worklet";
+
+		const props = getProps();
+		const entering = !props.next;
+		const range = entering ? ENTER_RANGE : EXIT_RANGE;
+		const link = getLink(tag);
+		const fb = fallback ?? 0;
+
+		const sourceValue = link?.source?.bounds?.[property] ?? fb;
+		const destinationValue = link?.destination?.bounds?.[property] ?? fb;
+
+		return interpolateClamped(props.progress, range, [
+			sourceValue,
+			destinationValue,
+		]);
+	};
+
+	const interpolateBounds = (
+		tag: string,
+		property: keyof MeasuredDimensions,
+		fallbackOrTargetKey?: number | string,
+		fallback?: number,
+	): number => {
+		"worklet";
+
+		if (typeof fallbackOrTargetKey === "string") {
+			return interpolateBoundsFromSnapshot(
+				tag,
+				property,
+				fallbackOrTargetKey,
+				fallback,
+			);
+		}
+
+		return interpolateBoundsFromLink(tag, property, fallbackOrTargetKey);
+	};
+
+	return {
+		interpolateStyle,
+		interpolateBounds,
+	};
+};

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

@@ -0,0 +1,40 @@
+import { BoundStore, type Snapshot } from "../../../stores/bounds";
+import type { ScreenInterpolationProps } from "../../../types/animation.types";
+import type { BoundsLink } from "../../../types/bounds.types";
+
+type GetProps = () => Omit<ScreenInterpolationProps, "bounds">;
+
+export type LinkAccessor = {
+	getSnapshot: (tag: string, key?: string) => Snapshot | null;
+	getLink: (tag: string) => BoundsLink | null;
+};
+
+export const createLinkAccessor = (getProps: GetProps): LinkAccessor => {
+	"worklet";
+
+	const getSnapshot = (tag: string, key?: string): Snapshot | null => {
+		"worklet";
+		if (!key) return null;
+		return BoundStore.getSnapshot(tag, key);
+	};
+
+	const getLink = (tag: string): BoundsLink | null => {
+		"worklet";
+		const props = getProps();
+		const link = BoundStore.getActiveLink(tag, props.current?.route.key);
+		if (!link) return null;
+		return {
+			source: link.source
+				? { bounds: link.source.bounds, styles: link.source.styles }
+				: null,
+			destination: link.destination
+				? { bounds: link.destination.bounds, styles: link.destination.styles }
+				: null,
+		};
+	};
+
+	return {
+		getSnapshot,
+		getLink,
+	};
+};

package/src/shared/utils/bounds/helpers/math.ts

@@ -0,0 +1,161 @@
+type CombinedScaleMode = "multiply" | "average" | "max" | "min";
+
+export const clamp = (value: number, min: number, max: number): number => {
+	"worklet";
+	const lower = min < max ? min : max;
+	const upper = max > min ? max : min;
+
+	if (value < lower) return lower;
+	if (value > upper) return upper;
+
+	return value;
+};
+
+export const clamp01 = (value: number): number => {
+	"worklet";
+	return clamp(value, 0, 1);
+};
+
+export const lerp = (from: number, to: number, t: number): number => {
+	"worklet";
+	return from + (to - from) * t;
+};
+
+export const safeDivide = (
+	numerator: number,
+	denominator: number,
+	fallback = 0,
+): number => {
+	"worklet";
+	if (denominator === 0) return fallback;
+	return numerator / denominator;
+};
+
+export const inverseLerp = (
+	value: number,
+	inMin: number,
+	inMax: number,
+): number => {
+	"worklet";
+	return safeDivide(value - inMin, inMax - inMin, 0);
+};
+
+export const mapRangeClamped = (
+	value: number,
+	inMin: number,
+	inMax: number,
+	outMin: number,
+	outMax: number,
+): number => {
+	"worklet";
+	const t = clamp01(inverseLerp(value, inMin, inMax));
+	return lerp(outMin, outMax, t);
+};
+
+export const applyPowerCurve = (value: number, exponent: number): number => {
+	"worklet";
+	const safeExponent = exponent > 0 ? exponent : 1;
+	const magnitude = Math.abs(value) ** safeExponent;
+	return value < 0 ? -magnitude : magnitude;
+};
+
+export const normalizedToTranslation = ({
+	normalized,
+	dimension,
+	resistance,
+}: {
+	normalized: number;
+	dimension: number;
+	resistance: number;
+}): number => {
+	"worklet";
+	const distance = Math.max(0, dimension) * resistance;
+	return mapRangeClamped(normalized, -1, 1, -distance, distance);
+};
+
+export const normalizedToScale = ({
+	normalized,
+	outputRange,
+	exponent = 1,
+	positiveOnly = true,
+}: {
+	normalized: number;
+	outputRange: readonly [number, number];
+	exponent?: number;
+	positiveOnly?: boolean;
+}): number => {
+	"worklet";
+	const [outputStart, outputEnd] = outputRange;
+	const raw = positiveOnly
+		? mapRangeClamped(normalized, 0, 1, outputStart, outputEnd)
+		: mapRangeClamped(normalized, -1, 1, outputStart, outputEnd);
+
+	return applyPowerCurve(raw, exponent);
+};
+
+export const combineScales = (
+	scaleX: number,
+	scaleY: number,
+	mode: CombinedScaleMode = "multiply",
+): number => {
+	"worklet";
+
+	switch (mode) {
+		case "average":
+			return (scaleX + scaleY) / 2;
+		case "max":
+			return Math.max(scaleX, scaleY);
+		case "min":
+			return Math.min(scaleX, scaleY);
+		default:
+			return scaleX * scaleY;
+	}
+};
+
+export const computeCenterScaleShift = ({
+	center,
+	containerCenter,
+	scale,
+}: {
+	center: number;
+	containerCenter: number;
+	scale: number;
+}): number => {
+	"worklet";
+	return (center - containerCenter) * (scale - 1);
+};
+
+export const compensateTranslationForParentScale = ({
+	translation,
+	parentScale,
+	epsilon,
+}: {
+	translation: number;
+	parentScale: number;
+	epsilon: number;
+}): number => {
+	"worklet";
+	const safeParentScale = Math.max(parentScale, epsilon);
+	return safeDivide(translation, safeParentScale, translation);
+};
+
+export const composeCompensatedTranslation = ({
+	gesture,
+	parentScale,
+	centerShift = 0,
+	epsilon,
+}: {
+	gesture: number;
+	parentScale: number;
+	centerShift?: number;
+	epsilon: number;
+}): number => {
+	"worklet";
+	return (
+		compensateTranslationForParentScale({
+			translation: gesture,
+			parentScale,
+			epsilon,
+		}) + centerShift
+	);
+};

package/src/shared/utils/bounds/helpers/navigation-accessor.ts

@@ -0,0 +1,61 @@
+import type { ScreenInterpolationProps } from "../../../types/animation.types";
+import type { BoundsNavigationOptions } from "../../../types/bounds.types";
+import { buildNavigationStyles } from "../sugar/navigation";
+import type { BoundsOptions } from "../types/options";
+import type { ResolveBoundTagParams } from "./resolve-bound-tag";
+
+type NavigationAccessorParams = {
+	id?: string;
+	group?: string;
+	getProps: () => Omit<ScreenInterpolationProps, "bounds">;
+	resolveBoundTag: (params: ResolveBoundTagParams) => string | undefined;
+	computeRaw: (
+		overrides?: Partial<BoundsOptions>,
+		frameProps?: Omit<ScreenInterpolationProps, "bounds">,
+	) => Record<string, unknown>;
+	zoomBaseOptions?: Pick<BoundsOptions, "anchor" | "scaleMode" | "target">;
+};
+
+export const createNavigationAccessor = ({
+	id,
+	group,
+	getProps,
+	resolveBoundTag,
+	computeRaw,
+	zoomBaseOptions,
+}: NavigationAccessorParams) => {
+	"worklet";
+
+	const resolvedId = id ?? "";
+
+	const computeNavigationPresetStyles = (
+		preset: "zoom",
+		navigationOptions?: BoundsNavigationOptions,
+	) => {
+		"worklet";
+		const frameProps = getProps();
+		return buildNavigationStyles({
+			id: resolvedId,
+			group,
+			preset,
+			navigationOptions,
+			props: frameProps,
+			resolveTag: resolveBoundTag,
+			computeRaw: (overrides) =>
+				computeRaw(
+					{
+						...(overrides ?? {}),
+						raw: true,
+					},
+					frameProps,
+				),
+		});
+	};
+
+	return {
+		zoom: () => {
+			"worklet";
+			return computeNavigationPresetStyles("zoom", zoomBaseOptions);
+		},
+	};
+};

package/src/shared/utils/bounds/helpers/resolve-bound-tag.ts

@@ -0,0 +1,26 @@
+import { BoundStore } from "../../../stores/bounds";
+
+export type ResolveBoundTagParams = {
+	id?: string;
+	group?: string;
+};
+
+export const resolveBoundTag = ({
+	id,
+	group,
+}: ResolveBoundTagParams): string | undefined => {
+	"worklet";
+
+	if (!id) return id;
+
+	if (!group) {
+		return id;
+	}
+
+	const currentActiveId = BoundStore.getGroupActiveId(group);
+	if (currentActiveId !== id) {
+		BoundStore.setGroupActiveId(group, id);
+	}
+
+	return `${group}:${id}`;
+};

package/src/shared/utils/bounds/helpers/style-composers.ts

@@ -1,13 +1,10 @@
-import {
-	interpolate,
-	type MeasuredDimensions,
-	type StyleProps,
-} from "react-native-reanimated";
-import type { BoundsBuilderOptions } from "../types/builder";
+import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
 import type {
 	ContentTransformGeometry,
 	RelativeGeometry,
 } from "../types/geometry";
+import type { BoundsAnchor, BoundsOptions } from "../types/options";
+import { interpolateClamped } from "./interpolate";
 
 /**
  * Element-level (relative) params shared by size/transform composers.
@@ -21,7 +18,7 @@ export type ElementComposeParams = {
 	geometry: RelativeGeometry;
 	progress: number;
 	ranges: readonly [number, number];
-	computeOptions: BoundsBuilderOptions;
+	computeOptions: BoundsOptions;
 };
 
 /**
@@ -36,26 +33,97 @@ type ContentComposeParams = {
 	geometry: ContentTransformGeometry;
 	progress: number;
 	ranges: readonly [number, number];
-	computeOptions: BoundsBuilderOptions;
+	computeOptions: BoundsOptions;
+};
+
+const getAnchorPoint = (
+	bounds: MeasuredDimensions,
+	anchor: BoundsAnchor = "center",
+): { x: number; y: number } => {
+	"worklet";
+
+	const { pageX, pageY, width, height } = bounds;
+
+	switch (anchor) {
+		case "topLeading":
+			return { x: pageX, y: pageY };
+		case "top":
+			return { x: pageX + width / 2, y: pageY };
+		case "topTrailing":
+			return { x: pageX + width, y: pageY };
+		case "leading":
+			return { x: pageX, y: pageY + height / 2 };
+		case "center":
+			return { x: pageX + width / 2, y: pageY + height / 2 };
+		case "trailing":
+			return { x: pageX + width, y: pageY + height / 2 };
+		case "bottomLeading":
+			return { x: pageX, y: pageY + height };
+		case "bottom":
+			return { x: pageX + width / 2, y: pageY + height };
+		case "bottomTrailing":
+			return { x: pageX + width, y: pageY + height };
+	}
+};
+
+const getAnchorOffset = ({
+	width,
+	height,
+	anchor,
+}: {
+	width: number;
+	height: number;
+	anchor: BoundsAnchor;
+}): { x: number; y: number } => {
+	"worklet";
+
+	switch (anchor) {
+		case "topLeading":
+			return { x: 0, y: 0 };
+		case "top":
+			return { x: width / 2, y: 0 };
+		case "topTrailing":
+			return { x: width, y: 0 };
+		case "leading":
+			return { x: 0, y: height / 2 };
+		case "center":
+			return { x: width / 2, y: height / 2 };
+		case "trailing":
+			return { x: width, y: height / 2 };
+		case "bottomLeading":
+			return { x: 0, y: height };
+		case "bottom":
+			return { x: width / 2, y: height };
+		case "bottomTrailing":
+			return { x: width, y: height };
+	}
 };
 
 export function composeSizeAbsolute(params: ElementComposeParams): StyleProps {
 	"worklet";
-	const { start, end, geometry, progress, ranges, computeOptions } = params;
+	const { start, end, progress, ranges, computeOptions } = params;
+	const anchor = computeOptions.anchor ?? "center";
+	const startAnchor = getAnchorPoint(start, anchor);
+	const endAnchor = getAnchorPoint(end, anchor);
 
-	const width = geometry.entering
-		? interpolate(progress, ranges, [start.width, end.width])
-		: interpolate(progress, ranges, [end.width, start.width]);
-	const height = geometry.entering
-		? interpolate(progress, ranges, [start.height, end.height])
-		: interpolate(progress, ranges, [end.height, start.height]);
+	const width = interpolateClamped(progress, ranges, [start.width, end.width]);
+	const height = interpolateClamped(progress, ranges, [
+		start.height,
+		end.height,
+	]);
 
-	const translateX = geometry.entering
-		? interpolate(progress, ranges, [start.pageX, end.pageX])
-		: interpolate(progress, ranges, [end.pageX, start.pageX]);
-	const translateY = geometry.entering
-		? interpolate(progress, ranges, [start.pageY, end.pageY])
-		: interpolate(progress, ranges, [end.pageY, start.pageY]);
+	const anchorX = interpolateClamped(progress, ranges, [
+		startAnchor.x,
+		endAnchor.x,
+	]);
+	const anchorY = interpolateClamped(progress, ranges, [
+		startAnchor.y,
+		endAnchor.y,
+	]);
+	const anchorOffset = getAnchorOffset({ width, height, anchor });
+
+	const translateX = anchorX - anchorOffset.x;
+	const translateY = anchorY - anchorOffset.y;
 
 	if (computeOptions.raw) {
 		return {
@@ -76,22 +144,29 @@ export function composeSizeAbsolute(params: ElementComposeParams): StyleProps {
 export function composeSizeRelative(params: ElementComposeParams): StyleProps {
 	"worklet";
 	const { start, end, geometry, progress, ranges, computeOptions } = params;
+	const anchor = computeOptions.anchor ?? "center";
+	const startAnchor = getAnchorPoint(start, anchor);
+	const endAnchor = getAnchorPoint(end, anchor);
+	const baseX = geometry.entering ? end.pageX : start.pageX;
+	const baseY = geometry.entering ? end.pageY : start.pageY;
 
-	const translateX = geometry.entering
-		? interpolate(progress, ranges, [geometry.dx, 0])
-		: interpolate(progress, ranges, [0, -geometry.dx]);
-
-	const translateY = geometry.entering
-		? interpolate(progress, ranges, [geometry.dy, 0])
-		: interpolate(progress, ranges, [0, -geometry.dy]);
-
-	const width = geometry.entering
-		? interpolate(progress, ranges, [start.width, end.width])
-		: interpolate(progress, ranges, [end.width, start.width]);
+	const width = interpolateClamped(progress, ranges, [start.width, end.width]);
+	const height = interpolateClamped(progress, ranges, [
+		start.height,
+		end.height,
+	]);
+	const anchorX = interpolateClamped(progress, ranges, [
+		startAnchor.x,
+		endAnchor.x,
+	]);
+	const anchorY = interpolateClamped(progress, ranges, [
+		startAnchor.y,
+		endAnchor.y,
+	]);
+	const anchorOffset = getAnchorOffset({ width, height, anchor });
 
-	const height = geometry.entering
-		? interpolate(progress, ranges, [start.height, end.height])
-		: interpolate(progress, ranges, [end.height, start.height]);
+	const translateX = anchorX - (baseX + anchorOffset.x);
+	const translateY = anchorY - (baseY + anchorOffset.y);
 
 	if (computeOptions.raw) {
 		return {
@@ -116,17 +191,17 @@ export function composeTransformAbsolute(
 	const { start, end, geometry, progress, ranges, computeOptions } = params;
 
 	const translateX = geometry.entering
-		? interpolate(progress, ranges, [start.pageX, end.pageX])
-		: interpolate(progress, ranges, [end.pageX, start.pageX]);
+		? interpolateClamped(progress, ranges, [start.pageX, end.pageX])
+		: interpolateClamped(progress, ranges, [end.pageX, start.pageX]);
 	const translateY = geometry.entering
-		? interpolate(progress, ranges, [start.pageY, end.pageY])
-		: interpolate(progress, ranges, [end.pageY, start.pageY]);
+		? interpolateClamped(progress, ranges, [start.pageY, end.pageY])
+		: interpolateClamped(progress, ranges, [end.pageY, start.pageY]);
 	const scaleX = geometry.entering
-		? interpolate(progress, ranges, [geometry.scaleX, 1])
-		: interpolate(progress, ranges, [1, 1 / geometry.scaleX]);
+		? interpolateClamped(progress, ranges, [geometry.scaleX, 1])
+		: interpolateClamped(progress, ranges, [1, 1 / geometry.scaleX]);
 	const scaleY = geometry.entering
-		? interpolate(progress, ranges, [geometry.scaleY, 1])
-		: interpolate(progress, ranges, [1, 1 / geometry.scaleY]);
+		? interpolateClamped(progress, ranges, [geometry.scaleY, 1])
+		: interpolateClamped(progress, ranges, [1, 1 / geometry.scaleY]);
 
 	if (computeOptions.raw) {
 		return {
@@ -149,17 +224,17 @@ export function composeTransformRelative(
 	const { geometry, computeOptions, progress, ranges } = params;
 
 	const translateX = geometry.entering
-		? interpolate(progress, ranges, [geometry.dx, 0])
-		: interpolate(progress, ranges, [0, -geometry.dx]);
+		? interpolateClamped(progress, ranges, [geometry.dx, 0])
+		: interpolateClamped(progress, ranges, [0, -geometry.dx]);
 	const translateY = geometry.entering
-		? interpolate(progress, ranges, [geometry.dy, 0])
-		: interpolate(progress, ranges, [0, -geometry.dy]);
+		? interpolateClamped(progress, ranges, [geometry.dy, 0])
+		: interpolateClamped(progress, ranges, [0, -geometry.dy]);
 	const scaleX = geometry.entering
-		? interpolate(progress, ranges, [geometry.scaleX, 1])
-		: interpolate(progress, ranges, [1, 1 / geometry.scaleX]);
+		? interpolateClamped(progress, ranges, [geometry.scaleX, 1])
+		: interpolateClamped(progress, ranges, [1, 1 / geometry.scaleX]);
 	const scaleY = geometry.entering
-		? interpolate(progress, ranges, [geometry.scaleY, 1])
-		: interpolate(progress, ranges, [1, 1 / geometry.scaleY]);
+		? interpolateClamped(progress, ranges, [geometry.scaleY, 1])
+		: interpolateClamped(progress, ranges, [1, 1 / geometry.scaleY]);
 
 	if (computeOptions.raw) {
 		return {
@@ -193,14 +268,14 @@ export function composeContentStyle(params: ContentComposeParams): StyleProps {
 	const { s, tx, ty, entering } = geometry;
 
 	const translateX = entering
-		? interpolate(progress, ranges, [tx, 0])
-		: interpolate(progress, ranges, [0, tx]);
+		? interpolateClamped(progress, ranges, [tx, 0])
+		: interpolateClamped(progress, ranges, [0, tx]);
 	const translateY = entering
-		? interpolate(progress, ranges, [ty, 0])
-		: interpolate(progress, ranges, [0, ty]);
+		? interpolateClamped(progress, ranges, [ty, 0])
+		: interpolateClamped(progress, ranges, [0, ty]);
 	const scale = entering
-		? interpolate(progress, ranges, [s, 1])
-		: interpolate(progress, ranges, [1, s]);
+		? interpolateClamped(progress, ranges, [s, 1])
+		: interpolateClamped(progress, ranges, [1, s]);
 
 	if (raw) {
 		return {