react-native-screen-transitions 3.8.0 → 3.9.0-alpha.1

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

@@ -1,15 +1,21 @@
+import type { TransformsStyle } from "react-native";
 import {
 	Extrapolation,
 	interpolate,
 	type MeasuredDimensions,
 	type StyleProps,
 } from "react-native-reanimated";
-import { VISIBLE_STYLE } from "../../../../constants";
+import { EPSILON } from "../../../../constants";
+import type { BoundsInterpolationProps } from "../../../../types/bounds.types";
 import type {
 	ContentTransformGeometry,
 	RelativeGeometry,
 } from "../../types/geometry";
-import type { BoundsAnchor, BoundsOptions } from "../../types/options";
+import type {
+	BoundsAnchor,
+	BoundsMotionTransform,
+	BoundsOptions,
+} from "../../types/options";
 
 /**
  * Element-level (relative) params shared by size/transform composers.
@@ -24,6 +30,7 @@ export type ElementComposeParams = {
 	progress: number;
 	ranges: readonly [number, number];
 	computeOptions: BoundsOptions;
+	interpolationProps: BoundsInterpolationProps;
 };
 
 /**
@@ -40,6 +47,7 @@ type ContentComposeParams = {
 	progress: number;
 	ranges: readonly [number, number];
 	computeOptions: BoundsOptions;
+	interpolationProps: BoundsInterpolationProps;
 };
 
 const getAnchorPoint = (
@@ -105,6 +113,124 @@ const getAnchorOffset = ({
 	}
 };
 
+const clampUnit = (value: number) => {
+	"worklet";
+	return Math.min(1, Math.max(0, value));
+};
+
+const normalizeRangeProgress = (
+	progress: number,
+	ranges: readonly [number, number],
+) => {
+	"worklet";
+	const distance = ranges[1] - ranges[0];
+
+	if (Math.abs(distance) <= EPSILON) {
+		return 1;
+	}
+
+	return clampUnit((progress - ranges[0]) / distance);
+};
+
+const getUniformScale = (scaleX: number, scaleY: number) => {
+	"worklet";
+	if (Math.abs(scaleX - scaleY) <= EPSILON) {
+		return scaleX;
+	}
+
+	return Math.sqrt(Math.abs(scaleX * scaleY));
+};
+
+const getScaleRatio = (resolvedScale: number, currentScale: number) => {
+	"worklet";
+	const safeCurrentScale = Math.abs(currentScale) > EPSILON ? currentScale : 1;
+
+	return resolvedScale / safeCurrentScale;
+};
+
+const resolveMotionTransform = ({
+	computeOptions,
+	interpolationProps,
+	progress,
+	ranges,
+	start,
+	end,
+	current,
+}: {
+	computeOptions: BoundsOptions;
+	interpolationProps: BoundsInterpolationProps;
+	progress: number;
+	ranges: readonly [number, number];
+	start: MeasuredDimensions;
+	end: MeasuredDimensions;
+	current: BoundsMotionTransform;
+}) => {
+	"worklet";
+
+	if (!computeOptions.motion) {
+		return current;
+	}
+
+	return computeOptions.motion({
+		progress: normalizeRangeProgress(progress, ranges),
+		current,
+		start,
+		end,
+		props: interpolationProps,
+	});
+};
+
+type MotionTransformEntry = Exclude<
+	TransformsStyle["transform"],
+	string | undefined
+>[number];
+
+/**
+ * Builds the rendered transform stack for a resolved motion: optional
+ * perspective first (so rotations project in 3D), translates, optional
+ * rotations, then the composer's scale entries — rotation happens in
+ * unscaled space around the element center.
+ */
+const composeMotionTransform = (
+	motion: BoundsMotionTransform,
+	scaleTransforms?: MotionTransformEntry[],
+) => {
+	"worklet";
+	const transform: MotionTransformEntry[] = [];
+	const rotate = motion.rotate ?? 0;
+	const rotateX = motion.rotateX ?? 0;
+	const rotateY = motion.rotateY ?? 0;
+
+	if (
+		rotate !== 0 ||
+		rotateX !== 0 ||
+		rotateY !== 0 ||
+		motion.perspective !== undefined
+	) {
+		transform.push({ perspective: motion.perspective ?? 1000 });
+	}
+
+	transform.push({ translateX: motion.x }, { translateY: motion.y });
+
+	if (rotateX !== 0) {
+		transform.push({ rotateX: `${rotateX}deg` });
+	}
+	if (rotateY !== 0) {
+		transform.push({ rotateY: `${rotateY}deg` });
+	}
+	if (rotate !== 0) {
+		transform.push({ rotate: `${rotate}deg` });
+	}
+
+	if (scaleTransforms) {
+		for (const entry of scaleTransforms) {
+			transform.push(entry);
+		}
+	}
+
+	return transform;
+};
+
 export function composeSizeAbsolute(params: ElementComposeParams): StyleProps {
 	"worklet";
 	const { start, end, progress, ranges, computeOptions } = params;
@@ -141,22 +267,40 @@ export function composeSizeAbsolute(params: ElementComposeParams): StyleProps {
 
 	const translateX = anchorX - anchorOffset.x;
 	const translateY = anchorY - anchorOffset.y;
+	const motion = resolveMotionTransform({
+		computeOptions,
+		interpolationProps: params.interpolationProps,
+		progress,
+		ranges,
+		start,
+		end,
+		current: {
+			x: translateX,
+			y: translateY,
+			scale: 1,
+		},
+	});
+	const resolvedWidth = width * motion.scale;
+	const resolvedHeight = height * motion.scale;
 
 	if (computeOptions.raw) {
 		return {
-			width,
-			height,
-			translateX,
-			translateY,
-			...VISIBLE_STYLE,
+			width: resolvedWidth,
+			height: resolvedHeight,
+			translateX: motion.x,
+			translateY: motion.y,
+			rotate: motion.rotate ?? 0,
+			rotateX: motion.rotateX ?? 0,
+			rotateY: motion.rotateY ?? 0,
+			transformOrigin: motion.transformOrigin,
 		};
 	}
 
 	return {
-		width,
-		height,
-		transform: [{ translateX }, { translateY }],
-		...VISIBLE_STYLE,
+		width: resolvedWidth,
+		height: resolvedHeight,
+		transform: composeMotionTransform(motion),
+		transformOrigin: motion.transformOrigin,
 	};
 }
 
@@ -197,22 +341,40 @@ export function composeSizeRelative(params: ElementComposeParams): StyleProps {
 
 	const translateX = anchorX - (baseX + anchorOffset.x);
 	const translateY = anchorY - (baseY + anchorOffset.y);
+	const motion = resolveMotionTransform({
+		computeOptions,
+		interpolationProps: params.interpolationProps,
+		progress,
+		ranges,
+		start,
+		end,
+		current: {
+			x: translateX,
+			y: translateY,
+			scale: 1,
+		},
+	});
+	const resolvedWidth = width * motion.scale;
+	const resolvedHeight = height * motion.scale;
 
 	if (computeOptions.raw) {
 		return {
-			translateX,
-			translateY,
-			width,
-			height,
-			...VISIBLE_STYLE,
+			translateX: motion.x,
+			translateY: motion.y,
+			rotate: motion.rotate ?? 0,
+			rotateX: motion.rotateX ?? 0,
+			rotateY: motion.rotateY ?? 0,
+			transformOrigin: motion.transformOrigin,
+			width: resolvedWidth,
+			height: resolvedHeight,
 		};
 	}
 
 	return {
-		transform: [{ translateX }, { translateY }],
-		width,
-		height,
-		...VISIBLE_STYLE,
+		transform: composeMotionTransform(motion),
+		transformOrigin: motion.transformOrigin,
+		width: resolvedWidth,
+		height: resolvedHeight,
 	};
 }
 
@@ -265,19 +427,43 @@ export function composeTransformAbsolute(
 				Extrapolation.CLAMP,
 			);
 
+	const currentScale = getUniformScale(scaleX, scaleY);
+	const motion = resolveMotionTransform({
+		computeOptions,
+		interpolationProps: params.interpolationProps,
+		progress,
+		ranges,
+		start,
+		end,
+		current: {
+			x: translateX,
+			y: translateY,
+			scale: currentScale,
+		},
+	});
+	const scaleRatio = getScaleRatio(motion.scale, currentScale);
+	const resolvedScaleX = scaleX * scaleRatio;
+	const resolvedScaleY = scaleY * scaleRatio;
+
 	if (computeOptions.raw) {
 		return {
-			translateX,
-			translateY,
-			scaleX,
-			scaleY,
-			...VISIBLE_STYLE,
+			translateX: motion.x,
+			translateY: motion.y,
+			rotate: motion.rotate ?? 0,
+			rotateX: motion.rotateX ?? 0,
+			rotateY: motion.rotateY ?? 0,
+			transformOrigin: motion.transformOrigin,
+			scaleX: resolvedScaleX,
+			scaleY: resolvedScaleY,
 		};
 	}
 
 	return {
-		transform: [{ translateX }, { translateY }, { scaleX }, { scaleY }],
-		...VISIBLE_STYLE,
+		transform: composeMotionTransform(motion, [
+			{ scaleX: resolvedScaleX },
+			{ scaleY: resolvedScaleY },
+		]),
+		transformOrigin: motion.transformOrigin,
 	};
 }
 
@@ -310,29 +496,49 @@ export function composeTransformRelative(
 				Extrapolation.CLAMP,
 			);
 
+	const offsetX = computeOptions.offset?.x ?? computeOptions.gestures?.x ?? 0;
+	const offsetY = computeOptions.offset?.y ?? computeOptions.gestures?.y ?? 0;
+	const currentScale = getUniformScale(scaleX, scaleY);
+	const motion = resolveMotionTransform({
+		computeOptions,
+		interpolationProps: params.interpolationProps,
+		progress,
+		ranges,
+		start: params.start,
+		end: params.end,
+		current: {
+			x: translateX,
+			y: translateY,
+			scale: currentScale,
+		},
+	});
+	const scaleRatio = getScaleRatio(motion.scale, currentScale);
+	const resolvedScaleX = scaleX * scaleRatio;
+	const resolvedScaleY = scaleY * scaleRatio;
+
 	if (computeOptions.raw) {
 		return {
-			translateX,
-			translateY,
-			scaleX,
-			scaleY,
-			...VISIBLE_STYLE,
+			translateX: motion.x,
+			translateY: motion.y,
+			rotate: motion.rotate ?? 0,
+			rotateX: motion.rotateX ?? 0,
+			rotateY: motion.rotateY ?? 0,
+			transformOrigin: motion.transformOrigin,
+			scaleX: resolvedScaleX,
+			scaleY: resolvedScaleY,
 		};
 	}
 
-	const offsetX = computeOptions.offset?.x ?? computeOptions.gestures?.x ?? 0;
-	const offsetY = computeOptions.offset?.y ?? computeOptions.gestures?.y ?? 0;
-
 	return {
 		transform: [
 			{ translateX: offsetX },
 			{ translateY: offsetY },
-			{ translateX },
-			{ translateY },
-			{ scaleX },
-			{ scaleY },
+			...composeMotionTransform(motion, [
+				{ scaleX: resolvedScaleX },
+				{ scaleY: resolvedScaleY },
+			]),
 		],
-		...VISIBLE_STYLE,
+		transformOrigin: motion.transformOrigin,
 	};
 }
 
@@ -356,17 +562,34 @@ export function composeContentStyle(params: ContentComposeParams): StyleProps {
 		? interpolate(progress, ranges, [s, 1], Extrapolation.CLAMP)
 		: interpolate(progress, ranges, [1, s], Extrapolation.CLAMP);
 
+	const motion = resolveMotionTransform({
+		computeOptions: params.computeOptions,
+		interpolationProps: params.interpolationProps,
+		progress,
+		ranges,
+		start: params.start,
+		end: params.end,
+		current: {
+			x: translateX,
+			y: translateY,
+			scale,
+		},
+	});
+
 	if (raw) {
 		return {
-			translateX,
-			translateY,
-			scale,
-			...VISIBLE_STYLE,
+			translateX: motion.x,
+			translateY: motion.y,
+			rotate: motion.rotate ?? 0,
+			rotateX: motion.rotateX ?? 0,
+			rotateY: motion.rotateY ?? 0,
+			transformOrigin: motion.transformOrigin,
+			scale: motion.scale,
 		};
 	}
 
 	return {
-		transform: [{ translateX }, { translateY }, { scale }],
-		...VISIBLE_STYLE,
+		transform: composeMotionTransform(motion, [{ scale: motion.scale }]),
+		transformOrigin: motion.transformOrigin,
 	};
 }

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

@@ -7,7 +7,9 @@ import {
 } from "../../../../constants";
 import { resolveTransitionPair } from "../../../../stores/bounds/internals/resolver";
 import type { ResolvedTransitionPair } from "../../../../stores/bounds/types";
+import { getClampedScrollAxisDelta } from "../../../../stores/scroll.store";
 import type { ScreenTransitionState } from "../../../../types/animation.types";
+import type { ScrollMetadataState } from "../../../../types/gesture.types";
 import type { Layout } from "../../../../types/screen.types";
 import type {
 	BoundId,
@@ -27,6 +29,49 @@ import {
 	type ElementComposeParams,
 } from "./composers";
 
+const getBoundsScrollSnapshot = (
+	bounds: MeasuredDimensions | null,
+): ScrollMetadataState | null => {
+	"worklet";
+	return (
+		(bounds as { scroll?: ScrollMetadataState | null } | null)?.scroll ?? null
+	);
+};
+
+const getScreenScrollMetadata = (
+	screenKey: string | null,
+	previous: ScreenTransitionState | undefined,
+	current: ScreenTransitionState | undefined,
+	next: ScreenTransitionState | undefined,
+): ScrollMetadataState | null => {
+	"worklet";
+	if (!screenKey) return null;
+	if (previous?.route.key === screenKey)
+		return previous.layouts?.scroll ?? null;
+	if (current?.route.key === screenKey) return current.layouts?.scroll ?? null;
+	if (next?.route.key === screenKey) return next.layouts?.scroll ?? null;
+	return null;
+};
+
+const shiftBounds = (
+	bounds: MeasuredDimensions,
+	dx: number,
+	dy: number,
+): MeasuredDimensions => {
+	"worklet";
+	if (dx === 0 && dy === 0) {
+		return bounds;
+	}
+
+	return {
+		...bounds,
+		x: bounds.x + dx,
+		y: bounds.y + dy,
+		pageX: bounds.pageX + dx,
+		pageY: bounds.pageY + dy,
+	};
+};
+
 const resolveStartEnd = (params: {
 	id: BoundId;
 	previous?: ScreenTransitionState;
@@ -87,7 +132,80 @@ const resolveStartEnd = (params: {
 		};
 	}
 
-	const start = sourceBounds;
+	/**
+	 * Teleport continuity: this screen's source content physically renders
+	 * inside the matched screen's portal host, which travels with that screen's
+	 * ScrollView. Screen-fixed rects (the source, fullscreen/custom targets)
+	 * must be expressed in the host's frame by the clamped scroll travel since
+	 * the destination capture. The destination rect rides with the host, so it
+	 * stays untouched. Classic two-component links never set a portal host and
+	 * skip this entirely.
+	 */
+	const isTeleportedSourceElement =
+		resolvedPair.sourcePortalAttachTarget === "matched-screen" &&
+		!!currentScreenKey &&
+		currentScreenKey === resolvedPair.sourceScreenKey &&
+		!!resolvedPair.destinationScreenKey &&
+		currentScreenKey !== resolvedPair.destinationScreenKey &&
+		params.computeOptions.method !== "content";
+
+	let teleportShiftX = 0;
+	let teleportShiftY = 0;
+	let sourceScrollShiftX = 0;
+	let sourceScrollShiftY = 0;
+
+	if (isTeleportedSourceElement) {
+		const capturedScroll = getBoundsScrollSnapshot(destinationBounds);
+		const liveScroll = getScreenScrollMetadata(
+			resolvedPair.destinationScreenKey,
+			params.previous,
+			params.current,
+			params.next,
+		);
+		teleportShiftX = getClampedScrollAxisDelta(
+			liveScroll,
+			capturedScroll,
+			"horizontal",
+		);
+		teleportShiftY = getClampedScrollAxisDelta(
+			liveScroll,
+			capturedScroll,
+			"vertical",
+		);
+
+		// A source that lives inside its own scroll host travels with that
+		// ScrollView in page space. Shifting the start rect by the clamped source
+		// scroll travel keeps it aligned with the live placeholder; the host
+		// placement applies the identical shift, so the shifts cancel at full
+		// progress and the open frame is untouched. Screen-fixed rects (the
+		// fullscreen/custom end targets below) are not inside the scroll content
+		// and keep only the destination shift.
+		if (resolvedPair.sourceHost?.capturesScroll) {
+			const capturedSourceScroll = getBoundsScrollSnapshot(sourceBounds);
+			const liveSourceScroll = getScreenScrollMetadata(
+				resolvedPair.sourceScreenKey,
+				params.previous,
+				params.current,
+				params.next,
+			);
+			sourceScrollShiftX = getClampedScrollAxisDelta(
+				liveSourceScroll,
+				capturedSourceScroll,
+				"horizontal",
+			);
+			sourceScrollShiftY = getClampedScrollAxisDelta(
+				liveSourceScroll,
+				capturedSourceScroll,
+				"vertical",
+			);
+		}
+	}
+
+	const start = shiftBounds(
+		sourceBounds,
+		teleportShiftX - sourceScrollShiftX,
+		teleportShiftY - sourceScrollShiftY,
+	);
 	let end = destinationBounds ?? fullscreen;
 
 	if (isFullscreenTarget) {
@@ -99,6 +217,10 @@ const resolveStartEnd = (params: {
 		end = customTarget;
 	}
 
+	if (hasTargetOverride) {
+		end = shiftBounds(end, teleportShiftX, teleportShiftY);
+	}
+
 	return {
 		start,
 		end,
@@ -111,7 +233,15 @@ const resolveStartEnd = (params: {
 };
 
 export const computeBoundStyles = (
-	{ id, previous, current, next, progress, dimensions }: BoundsComputeParams,
+	{
+		id,
+		previous,
+		current,
+		next,
+		progress,
+		dimensions,
+		interpolationProps,
+	}: BoundsComputeParams,
 	computeOptions: BoundsOptions = { id: "bound-id" },
 	resolvedPair?: ResolvedTransitionPair,
 ) => {
@@ -167,6 +297,7 @@ export const computeBoundStyles = (
 			end: contentEnd,
 			geometry,
 			computeOptions,
+			interpolationProps,
 		});
 	}
 
@@ -185,6 +316,7 @@ export const computeBoundStyles = (
 		ranges,
 		geometry,
 		computeOptions,
+		interpolationProps,
 	};
 
 	const isSize = computeOptions.method === "size";

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

@@ -79,10 +79,10 @@ export function buildRevealStyles({
 	const bounds = createBoundsAccessorCore({
 		getProps: () => props,
 	});
-	const scopedBounds = bounds({ id: tag });
-	const link = scopedBounds.getLink();
+	const scopedBounds = bounds(tag);
+	const link = scopedBounds.link();
 
-	if (!link?.source?.bounds || !link.destination?.bounds) {
+	if (link?.status !== "complete") {
 		return {};
 	}
 
@@ -133,16 +133,14 @@ export function buildRevealStyles({
 	/* ----------------------------- Focused Screen ----------------------------- */
 
 	if (focused) {
-		const contentRaw = link.compute({
-			raw: true,
+		const contentRaw = scopedBounds.math({
 			scaleMode: "uniform",
 			method: "content",
 			target: initialDestinationTarget,
 			progress: transitionProgress,
 		});
 
-		const maskRaw = link.compute({
-			raw: true,
+		const maskRaw = scopedBounds.math({
 			scaleMode: "uniform",
 			method: "size",
 			space: "absolute",

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

@@ -91,8 +91,8 @@ export function buildZoomStyles({
 	const bounds = createBoundsAccessorCore({
 		getProps: () => props,
 	});
-	const scopedBounds = bounds({ id: tag });
-	const link = scopedBounds.getLink();
+	const scopedBounds = bounds(tag);
+	const link = scopedBounds.link();
 
 	if (!link) return {};
 
@@ -223,18 +223,16 @@ export function buildZoomStyles({
 			link,
 		});
 
-		const contentRaw = link.compute({
+		const contentRaw = scopedBounds.math({
 			...baseRawOptions,
-			raw: true,
 			anchor: zoomAnchor,
 			method: "content",
 			target: focusedContentTarget,
 			progress: transitionProgress,
 		});
 
-		const maskRaw = link.compute({
+		const maskRaw = scopedBounds.math({
 			...baseRawOptions,
-			raw: true,
 			anchor: ZOOM_SHARED_OPTIONS.anchor,
 			method: "size",
 			space: "absolute",
@@ -368,9 +366,8 @@ export function buildZoomStyles({
 		link,
 	});
 
-	const elementRaw = link.compute({
+	const elementRaw = scopedBounds.math({
 		...baseRawOptions,
-		raw: true,
 		anchor: zoomAnchor,
 		method: "transform",
 		space: "relative",