react-native-screen-transitions 3.4.0-beta.0 → 3.4.0-beta.2

package/src/shared/utils/bounds/helpers/{interpolators.ts → create-interpolators.ts}

@@ -1,11 +1,14 @@
-import type { MeasuredDimensions } from "react-native-reanimated";
+import {
+	Extrapolation,
+	interpolate,
+	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 type { BoundId } from "../types/options";
-import { interpolateClamped } from "./interpolate";
-import { interpolateLinkStyle } from "./interpolate-style";
-import type { LinkAccessor } from "./link-accessor";
+import type { LinkAccessor } from "./create-link-accessor";
+import { interpolateLinkStyle } from "./styles/interpolate-link-style";
 
 type InterpolatorParams = {
 	getProps: () => Omit<ScreenInterpolationProps, "bounds">;
@@ -55,10 +58,12 @@ export const createInterpolators = ({
 		const currentValue = currentSnapshot?.bounds?.[property] ?? fb;
 		const targetValue = targetSnapshot?.bounds?.[property] ?? fb;
 
-		return interpolateClamped(props.progress, range, [
-			targetValue,
-			currentValue,
-		]);
+		return interpolate(
+			props.progress,
+			range,
+			[targetValue, currentValue],
+			Extrapolation.CLAMP,
+		);
 	};
 
 	const interpolateBoundsFromLink = (
@@ -77,10 +82,12 @@ export const createInterpolators = ({
 		const sourceValue = link?.source?.bounds?.[property] ?? fb;
 		const destinationValue = link?.destination?.bounds?.[property] ?? fb;
 
-		return interpolateClamped(props.progress, range, [
-			sourceValue,
-			destinationValue,
-		]);
+		return interpolate(
+			props.progress,
+			range,
+			[sourceValue, destinationValue],
+			Extrapolation.CLAMP,
+		);
 	};
 
 	const interpolateBounds = (

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

@@ -0,0 +1,100 @@
+import {
+	BoundStore,
+	type ResolvedTransitionPair,
+} from "../../../stores/bounds";
+import type { ScreenInterpolationProps } from "../../../types/animation.types";
+import { DEFAULT_BOUNDS_OPTIONS } from "../constants";
+import type {
+	BoundId,
+	BoundsOptions,
+	BoundsOptionsResult,
+} from "../types/options";
+import { createBoundTag } from "./create-bound-tag";
+import { computeBoundStyles } from "./styles/compute";
+
+type BaseInterpolatorProps = Omit<ScreenInterpolationProps, "bounds">;
+
+type ComputeResolvedBoundsStylesParams<T extends BoundsOptions> = {
+	props: BaseInterpolatorProps;
+	options: T;
+	resolvedPair?: ResolvedTransitionPair;
+	syncGroupActiveId?: boolean;
+};
+
+type BuildBoundsOptionsParams = {
+	props: Omit<ScreenInterpolationProps, "bounds">;
+	id?: BoundId;
+	group?: string;
+	overrides?: Partial<BoundsOptions>;
+};
+
+export const buildBoundsOptions = ({
+	props,
+	id,
+	group,
+	overrides,
+}: BuildBoundsOptionsParams): BoundsOptions => {
+	"worklet";
+
+	const tag = createBoundTag({ id, group });
+	const currentScreenKey = props.current?.route.key;
+
+	const boundaryConfig =
+		tag && currentScreenKey
+			? BoundStore.getBoundaryConfig(tag, currentScreenKey)
+			: null;
+
+	const resolved = {
+		...DEFAULT_BOUNDS_OPTIONS,
+		...(boundaryConfig ?? {}),
+		...(overrides ?? {}),
+		id: tag ?? "",
+		group,
+	};
+
+	return resolved;
+};
+
+const syncGroupActiveMember = (group?: string, id?: BoundId) => {
+	"worklet";
+	if (!group || id == null || id === "") return;
+
+	const normalizedId = String(id);
+
+	if (BoundStore.getGroupActiveId(group) === normalizedId) return;
+
+	BoundStore.setGroupActiveId(group, normalizedId);
+};
+
+export const prepareBoundStyles = <T extends BoundsOptions>({
+	props,
+	options,
+	resolvedPair,
+	syncGroupActiveId = true,
+}: ComputeResolvedBoundsStylesParams<T>): BoundsOptionsResult<T> => {
+	"worklet";
+
+	if (syncGroupActiveId) {
+		syncGroupActiveMember(options.group, options.id);
+	}
+
+	const resolved = buildBoundsOptions({
+		props,
+		id: options.id,
+		group: options.group,
+		overrides: options,
+	});
+
+	return computeBoundStyles(
+		{
+			id: resolved.id,
+			previous: props.previous,
+			current: props.current,
+			next: props.next,
+			progress: props.progress,
+			dimensions: props.layouts.screen,
+		},
+		resolved,
+		resolvedPair,
+	) as BoundsOptionsResult<T>;
+};

package/src/shared/utils/bounds/helpers/{style-composers.ts → styles/composers.ts}

@@ -1,11 +1,15 @@
-import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
-import { VISIBLE_STYLE } from "../../../constants";
+import {
+	Extrapolation,
+	interpolate,
+	type MeasuredDimensions,
+	type StyleProps,
+} from "react-native-reanimated";
+import { VISIBLE_STYLE } from "../../../../constants";
 import type {
 	ContentTransformGeometry,
 	RelativeGeometry,
-} from "../types/geometry";
-import type { BoundsAnchor, BoundsOptions } from "../types/options";
-import { interpolateClamped } from "./interpolate";
+} from "../../types/geometry";
+import type { BoundsAnchor, BoundsOptions } from "../../types/options";
 
 /**
  * Element-level (relative) params shared by size/transform composers.
@@ -108,20 +112,31 @@ export function composeSizeAbsolute(params: ElementComposeParams): StyleProps {
 	const startAnchor = getAnchorPoint(start, anchor);
 	const endAnchor = getAnchorPoint(end, anchor);
 
-	const width = interpolateClamped(progress, ranges, [start.width, end.width]);
-	const height = interpolateClamped(progress, ranges, [
-		start.height,
-		end.height,
-	]);
+	const width = interpolate(
+		progress,
+		ranges,
+		[start.width, end.width],
+		Extrapolation.CLAMP,
+	);
+	const height = interpolate(
+		progress,
+		ranges,
+		[start.height, end.height],
+		Extrapolation.CLAMP,
+	);
 
-	const anchorX = interpolateClamped(progress, ranges, [
-		startAnchor.x,
-		endAnchor.x,
-	]);
-	const anchorY = interpolateClamped(progress, ranges, [
-		startAnchor.y,
-		endAnchor.y,
-	]);
+	const anchorX = interpolate(
+		progress,
+		ranges,
+		[startAnchor.x, endAnchor.x],
+		Extrapolation.CLAMP,
+	);
+	const anchorY = interpolate(
+		progress,
+		ranges,
+		[startAnchor.y, endAnchor.y],
+		Extrapolation.CLAMP,
+	);
 	const anchorOffset = getAnchorOffset({ width, height, anchor });
 
 	const translateX = anchorX - anchorOffset.x;
@@ -154,19 +169,30 @@ export function composeSizeRelative(params: ElementComposeParams): StyleProps {
 	const baseX = geometry.entering ? end.pageX : start.pageX;
 	const baseY = geometry.entering ? end.pageY : start.pageY;
 
-	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 width = interpolate(
+		progress,
+		ranges,
+		[start.width, end.width],
+		Extrapolation.CLAMP,
+	);
+	const height = interpolate(
+		progress,
+		ranges,
+		[start.height, end.height],
+		Extrapolation.CLAMP,
+	);
+	const anchorX = interpolate(
+		progress,
+		ranges,
+		[startAnchor.x, endAnchor.x],
+		Extrapolation.CLAMP,
+	);
+	const anchorY = interpolate(
+		progress,
+		ranges,
+		[startAnchor.y, endAnchor.y],
+		Extrapolation.CLAMP,
+	);
 	const anchorOffset = getAnchorOffset({ width, height, anchor });
 
 	const translateX = anchorX - (baseX + anchorOffset.x);
@@ -197,17 +223,47 @@ export function composeTransformAbsolute(
 	const { start, end, geometry, progress, ranges, computeOptions } = params;
 
 	const translateX = geometry.entering
-		? interpolateClamped(progress, ranges, [start.pageX, end.pageX])
-		: interpolateClamped(progress, ranges, [end.pageX, start.pageX]);
+		? interpolate(
+				progress,
+				ranges,
+				[start.pageX, end.pageX],
+				Extrapolation.CLAMP,
+			)
+		: interpolate(
+				progress,
+				ranges,
+				[end.pageX, start.pageX],
+				Extrapolation.CLAMP,
+			);
 	const translateY = geometry.entering
-		? interpolateClamped(progress, ranges, [start.pageY, end.pageY])
-		: interpolateClamped(progress, ranges, [end.pageY, start.pageY]);
+		? interpolate(
+				progress,
+				ranges,
+				[start.pageY, end.pageY],
+				Extrapolation.CLAMP,
+			)
+		: interpolate(
+				progress,
+				ranges,
+				[end.pageY, start.pageY],
+				Extrapolation.CLAMP,
+			);
 	const scaleX = geometry.entering
-		? interpolateClamped(progress, ranges, [geometry.scaleX, 1])
-		: interpolateClamped(progress, ranges, [1, 1 / geometry.scaleX]);
+		? interpolate(progress, ranges, [geometry.scaleX, 1], Extrapolation.CLAMP)
+		: interpolate(
+				progress,
+				ranges,
+				[1, 1 / geometry.scaleX],
+				Extrapolation.CLAMP,
+			);
 	const scaleY = geometry.entering
-		? interpolateClamped(progress, ranges, [geometry.scaleY, 1])
-		: interpolateClamped(progress, ranges, [1, 1 / geometry.scaleY]);
+		? interpolate(progress, ranges, [geometry.scaleY, 1], Extrapolation.CLAMP)
+		: interpolate(
+				progress,
+				ranges,
+				[1, 1 / geometry.scaleY],
+				Extrapolation.CLAMP,
+			);
 
 	if (computeOptions.raw) {
 		return {
@@ -232,17 +288,27 @@ export function composeTransformRelative(
 	const { geometry, computeOptions, progress, ranges } = params;
 
 	const translateX = geometry.entering
-		? interpolateClamped(progress, ranges, [geometry.dx, 0])
-		: interpolateClamped(progress, ranges, [0, -geometry.dx]);
+		? interpolate(progress, ranges, [geometry.dx, 0], Extrapolation.CLAMP)
+		: interpolate(progress, ranges, [0, -geometry.dx], Extrapolation.CLAMP);
 	const translateY = geometry.entering
-		? interpolateClamped(progress, ranges, [geometry.dy, 0])
-		: interpolateClamped(progress, ranges, [0, -geometry.dy]);
+		? interpolate(progress, ranges, [geometry.dy, 0], Extrapolation.CLAMP)
+		: interpolate(progress, ranges, [0, -geometry.dy], Extrapolation.CLAMP);
 	const scaleX = geometry.entering
-		? interpolateClamped(progress, ranges, [geometry.scaleX, 1])
-		: interpolateClamped(progress, ranges, [1, 1 / geometry.scaleX]);
+		? interpolate(progress, ranges, [geometry.scaleX, 1], Extrapolation.CLAMP)
+		: interpolate(
+				progress,
+				ranges,
+				[1, 1 / geometry.scaleX],
+				Extrapolation.CLAMP,
+			);
 	const scaleY = geometry.entering
-		? interpolateClamped(progress, ranges, [geometry.scaleY, 1])
-		: interpolateClamped(progress, ranges, [1, 1 / geometry.scaleY]);
+		? interpolate(progress, ranges, [geometry.scaleY, 1], Extrapolation.CLAMP)
+		: interpolate(
+				progress,
+				ranges,
+				[1, 1 / geometry.scaleY],
+				Extrapolation.CLAMP,
+			);
 
 	if (computeOptions.raw) {
 		return {
@@ -278,14 +344,14 @@ export function composeContentStyle(params: ContentComposeParams): StyleProps {
 	const { s, tx, ty, entering } = geometry;
 
 	const translateX = entering
-		? interpolateClamped(progress, ranges, [tx, 0])
-		: interpolateClamped(progress, ranges, [0, tx]);
+		? interpolate(progress, ranges, [tx, 0], Extrapolation.CLAMP)
+		: interpolate(progress, ranges, [0, tx], Extrapolation.CLAMP);
 	const translateY = entering
-		? interpolateClamped(progress, ranges, [ty, 0])
-		: interpolateClamped(progress, ranges, [0, ty]);
+		? interpolate(progress, ranges, [ty, 0], Extrapolation.CLAMP)
+		: interpolate(progress, ranges, [0, ty], Extrapolation.CLAMP);
 	const scale = entering
-		? interpolateClamped(progress, ranges, [s, 1])
-		: interpolateClamped(progress, ranges, [1, s]);
+		? interpolate(progress, ranges, [s, 1], Extrapolation.CLAMP)
+		: interpolate(progress, ranges, [1, s], Extrapolation.CLAMP);
 
 	if (raw) {
 		return {

package/src/shared/utils/bounds/helpers/{compute-bounds-styles.ts → styles/compute.ts}

@@ -6,22 +6,22 @@ import {
 	FULLSCREEN_DIMENSIONS,
 	HIDDEN_STYLE,
 	NO_STYLES,
-} from "../../../constants";
+} from "../../../../constants";
 import {
 	BoundStore,
 	type ResolvedTransitionPair,
-} from "../../../stores/bounds";
-import type { ScreenTransitionState } from "../../../types/animation.types";
-import type { Layout } from "../../../types/screen.types";
+} from "../../../../stores/bounds";
+import type { ScreenTransitionState } from "../../../../types/animation.types";
+import type { Layout } from "../../../../types/screen.types";
 import type {
 	BoundId,
 	BoundsComputeParams,
 	BoundsOptions,
-} from "../types/options";
+} from "../../types/options";
 import {
 	computeContentTransformGeometry,
 	computeRelativeGeometry,
-} from "./geometry";
+} from "../geometry";
 import {
 	composeContentStyle,
 	composeSizeAbsolute,
@@ -29,9 +29,9 @@ import {
 	composeTransformAbsolute,
 	composeTransformRelative,
 	type ElementComposeParams,
-} from "./style-composers";
+} from "./composers";
 
-const resolveBounds = (params: {
+const resolveStartEnd = (params: {
 	id: BoundId;
 	previous?: ScreenTransitionState;
 	current?: ScreenTransitionState;
@@ -135,7 +135,7 @@ export const computeBoundStyles = (
 		currentScreenKey,
 		sourceScreenKey,
 		destinationScreenKey,
-	} = resolveBounds({
+	} = resolveStartEnd({
 		id,
 		previous,
 		current,

package/src/shared/utils/bounds/helpers/{interpolate-style.ts → styles/interpolate-link-style.ts}

@@ -1,6 +1,6 @@
-import { ENTER_RANGE, EXIT_RANGE } from "../../../constants";
-import type { BoundsLink } from "../../../types/bounds.types";
-import { interpolateClamped } from "./interpolate";
+import { Extrapolation, interpolate } from "react-native-reanimated";
+import { ENTER_RANGE, EXIT_RANGE } from "../../../../constants";
+import type { BoundsLink } from "../../../../types/bounds.types";
 
 type InterpolateStyleOptions = {
 	fallback?: number;
@@ -34,5 +34,10 @@ export function interpolateLinkStyle(
 
 	const range = entering ? ENTER_RANGE : EXIT_RANGE;
 
-	return interpolateClamped(progress, range, [sourceValue, destValue]);
+	return interpolate(
+		progress,
+		range,
+		[sourceValue, destValue],
+		Extrapolation.CLAMP,
+	);
 }

package/src/shared/utils/bounds/index.ts

@@ -1,75 +1,35 @@
-import { BoundStore, type ResolvedTransitionPair } from "../../stores/bounds";
-import type { ScreenInterpolationProps } from "../../types/animation.types";
 import type {
 	BoundsAccessor,
 	BoundsInterpolationProps,
 	BoundsNavigationZoomOptions,
 } from "../../types/bounds.types";
-import { buildBoundsOptions } from "./helpers/build-bounds-options";
-import { computeBoundStyles } from "./helpers/compute-bounds-styles";
-import { createInterpolators } from "./helpers/interpolators";
-import { createLinkAccessor } from "./helpers/link-accessor";
-import { resolveBoundTag } from "./helpers/resolve-bound-tag";
+import { createBoundTag } from "./helpers/create-bound-tag";
+import { createInterpolators } from "./helpers/create-interpolators";
+import { createLinkAccessor } from "./helpers/create-link-accessor";
+import { prepareBoundStyles } from "./helpers/prepare-bound-styles";
 import type { BoundsOptions } from "./types/options";
 import { buildZoomStyles } from "./zoom/build";
 
-const syncGroupActiveMember = (group?: string, id?: string | number) => {
-	"worklet";
-	if (!group) return;
-	if (id === undefined || id === null || id === "") return;
-
-	const normalizedId = String(id);
-	if (BoundStore.getGroupActiveId(group) === normalizedId) return;
-
-	BoundStore.setGroupActiveId(group, normalizedId);
-};
-
 export const createBoundsAccessor = (
 	getProps: () => BoundsInterpolationProps,
 ): BoundsAccessor => {
 	"worklet";
 
-	const computeForResolvedOptions = (
-		resolvedOptions: BoundsOptions,
-		props: Omit<ScreenInterpolationProps, "bounds">,
-		resolvedPair?: ResolvedTransitionPair,
-	) => {
-		"worklet";
-		return computeBoundStyles(
-			{
-				id: resolvedOptions.id,
-				previous: props.previous,
-				current: props.current,
-				next: props.next,
-				progress: props.progress,
-				dimensions: props.layouts.screen,
-			},
-			resolvedOptions,
-			resolvedPair,
-		);
-	};
-
-	const computeElementBoundsStyles = (params?: BoundsOptions) => {
+	const computeBounds = (params?: BoundsOptions) => {
 		"worklet";
 		const props = getProps();
-		const id = params?.id;
-		const group = params?.group;
-		syncGroupActiveMember(group, id);
-
-		const resolved = buildBoundsOptions({
+		const options = (params ?? { id: "" }) as BoundsOptions;
+		const computed = prepareBoundStyles({
 			props,
-			id,
-			group,
-			overrides: params,
-			mode: "style",
-			resolveBoundTag,
+			options,
 		});
-
-		const computed = computeForResolvedOptions(resolved, props);
 		// Navigation helpers are intentionally opinionated. Only the resolved
 		// tag from `id`/`group` is allowed to flow into `navigation.zoom()`;
 		// base bounds overrides like `target`, `anchor`, or `scaleMode` must not.
-		const navigationTag = resolveBoundTag({ id, group });
+		const navigationTag = createBoundTag({
+			id: options.id,
+			group: options.group,
+		});
 
 		const target = Object.isExtensible(computed) ? computed : { ...computed };
 
@@ -97,7 +57,7 @@ export const createBoundsAccessor = (
 		getLink,
 	});
 
-	return Object.assign(computeElementBoundsStyles, {
+	return Object.assign(computeBounds, {
 		getSnapshot,
 		getLink,
 		interpolateStyle,

package/src/shared/utils/bounds/types/options.ts

@@ -112,8 +112,9 @@ export type BoundsOptions = {
 	/**
 	 * Coordinate space selection.
 	 *
-	 * For `bounds({ ... })` element styles, space is normalized to `"relative"`.
-	 * `"absolute"` is reserved for internal navigation helpers (e.g. mask geometry).
+	 * - `"relative"` composes movement relative to the current element's layout box
+	 * - `"absolute"` composes movement in screen/window coordinates
+	 *
 	 * @default "relative"
 	 */
 	space?: BoundsSpace;