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

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

@@ -1,282 +1,143 @@
-import { interpolate, type MeasuredDimensions } from "react-native-reanimated";
-import {
-	EMPTY_BOUND_HELPER_RESULT,
-	EMPTY_BOUND_HELPER_RESULT_RAW,
-	ENTER_RANGE,
-	EXIT_RANGE,
-	FULLSCREEN_DIMENSIONS,
-} from "../../constants";
-import { BoundStore, type Snapshot } from "../../stores/bounds.store";
-import type {
-	ScreenInterpolationProps,
-	ScreenTransitionState,
-} from "../../types/animation.types";
-import type { BoundsAccessor, BoundsLink } from "../../types/bounds.types";
-import type { Layout } from "../../types/screen.types";
-import {
-	computeContentTransformGeometry,
-	computeRelativeGeometry,
-} from "./helpers/geometry";
-import { interpolateLinkStyle } from "./helpers/interpolate-style";
-import {
-	composeContentStyle,
-	composeSizeAbsolute,
-	composeSizeRelative,
-	composeTransformAbsolute,
-	composeTransformRelative,
-	type ElementComposeParams,
-} from "./helpers/style-composers";
-import type {
-	BoundsBuilderOptions,
-	BoundsComputeParams,
-} from "./types/builder";
-
-const resolveBounds = (props: {
-	id: string;
-	previous?: ScreenTransitionState;
-	current?: ScreenTransitionState;
-	next?: ScreenTransitionState;
-	toRect?: Partial<MeasuredDimensions>;
-	dimensions: Layout;
-	computeOptions: BoundsBuilderOptions;
-}) => {
-	"worklet";
-	const entering = !props.next;
-	const fullscreen = FULLSCREEN_DIMENSIONS(props.dimensions);
-
-	const isFullscreenTarget = props.computeOptions.target === "fullscreen";
-	const hasCustomTarget = typeof props.computeOptions.target === "object";
-	const hasTargetOverride = isFullscreenTarget || hasCustomTarget;
-
-	// Try exact match first (strict matching for nested stacks)
-	let link = BoundStore.getActiveLink(props.id, props.current?.route.key);
-
-	// For target overrides, fall back to most recent link for this tag
-	// (destination screen might not have a matching element)
-	if (!link && hasTargetOverride) {
-		link = BoundStore.getActiveLink(props.id); // No screenKey = get most recent
-	}
-
-	if (!link || !link.source) {
-		return {
-			start: null,
-			end: null,
-			entering,
-		};
-	}
-
-	// When target is overridden, destination element is not required
-	if (!hasTargetOverride && !link.destination) {
-		return {
-			start: null,
-			end: null,
-			entering,
-		};
-	}
-
-	const { destination, source } = link;
-
-	const start = source.bounds;
-	let end = destination?.bounds ?? fullscreen;
-
-	if (isFullscreenTarget) {
-		end = fullscreen;
-	}
-
-	const customTarget = props.computeOptions.target;
-
-	if (typeof customTarget === "object") {
-		end = customTarget;
-	}
-
-	return {
-		start,
-		end,
-		entering,
-	};
-};
-
-const computeBoundStyles = (
-	{ id, previous, current, next, progress, dimensions }: BoundsComputeParams,
-	computeOptions: BoundsBuilderOptions = { id: "bound-id" },
-) => {
-	"worklet";
-	if (!id) {
-		if (computeOptions.raw) {
-			return EMPTY_BOUND_HELPER_RESULT_RAW;
-		}
-		return EMPTY_BOUND_HELPER_RESULT;
-	}
-
-	const { start, end, entering } = resolveBounds({
-		id,
-		previous,
-		current,
-		next,
-		computeOptions,
-		dimensions,
-	});
-
-	if (!start || !end) {
-		if (computeOptions.raw) {
-			return EMPTY_BOUND_HELPER_RESULT_RAW;
-		}
-		return EMPTY_BOUND_HELPER_RESULT;
-	}
-
-	const ranges: readonly [number, number] = entering ? ENTER_RANGE : EXIT_RANGE;
-
-	if (computeOptions.method === "content") {
-		const geometry = computeContentTransformGeometry({
-			start,
-			end,
-			entering,
-			dimensions,
-			anchor: computeOptions.anchor,
-			scaleMode: computeOptions.scaleMode,
-		});
-
-		return composeContentStyle({
-			start,
-			progress,
-			ranges,
-			end,
-			geometry,
-			computeOptions,
-		});
-	}
-
-	const geometry = computeRelativeGeometry({
-		start,
-		end,
-		entering,
-		anchor: computeOptions.anchor,
-		scaleMode: computeOptions.scaleMode,
-	});
-
-	const common: ElementComposeParams = {
-		start,
-		end,
-		progress,
-		ranges,
-		geometry,
-		computeOptions,
-	};
-
-	const isSize = computeOptions.method === "size";
-	const isAbs = computeOptions.space === "absolute";
-
-	return isSize
-		? isAbs
-			? composeSizeAbsolute(common)
-			: composeSizeRelative(common)
-		: isAbs
-			? composeTransformAbsolute(common)
-			: composeTransformRelative(common);
-};
-
-export const createBounds = (
-	props: Omit<ScreenInterpolationProps, "bounds">,
+import { BoundStore, type ResolvedTransitionPair } from "../../stores/bounds";
+import type { ScreenInterpolationProps } from "../../types/animation.types";
+import type { BoundsAccessor } 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 { createNavigationAccessor } from "./helpers/navigation-accessor";
+import { resolveBoundTag } from "./helpers/resolve-bound-tag";
+import type { BoundsOptions } from "./types/options";
+
+export const createBoundsAccessor = (
+	getProps: () => Omit<ScreenInterpolationProps, "bounds">,
 ): BoundsAccessor => {
 	"worklet";
 
-	const boundsFunction = (params?: BoundsBuilderOptions) => {
+	const computeForResolvedOptions = (
+		resolvedOptions: BoundsOptions,
+		props: Omit<ScreenInterpolationProps, "bounds">,
+		resolvedPair?: ResolvedTransitionPair,
+	) => {
 		"worklet";
-		const id = params?.id;
-
 		return computeBoundStyles(
 			{
-				id,
+				id: resolvedOptions.id,
 				previous: props.previous,
 				current: props.current,
 				next: props.next,
 				progress: props.progress,
 				dimensions: props.layouts.screen,
 			},
-			params,
+			resolvedOptions,
+			resolvedPair,
 		);
 	};
 
-	const getSnapshot = (tag: string, key: string): Snapshot | null => {
+	const computeElementBoundsStyles = (params?: BoundsOptions) => {
 		"worklet";
-		return BoundStore.getSnapshot(tag, key);
-	};
+		const props = getProps();
+
+		const resolved = buildBoundsOptions({
+			props,
+			id: params?.id,
+			group: params?.group,
+			overrides: params,
+			mode: "style",
+			resolveBoundTag,
+		});
 
-	const getLink = (tag: string): BoundsLink | null => {
-		"worklet";
-		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,
+		const computed = computeForResolvedOptions(resolved, props) as Record<
+			string,
+			unknown
+		>;
+		const zoomBaseOptions = {
+			anchor: params?.anchor,
+			scaleMode: params?.scaleMode,
+			target: params?.target,
+		};
+		let cachedNavigationPairProps:
+			| Omit<ScreenInterpolationProps, "bounds">
+			| undefined;
+		let cachedNavigationPairTag = "";
+		let cachedNavigationPair: ResolvedTransitionPair | undefined;
+
+		const resolveNavigationPair = (
+			tag: string,
+			frameProps: Omit<ScreenInterpolationProps, "bounds">,
+		): ResolvedTransitionPair | undefined => {
+			"worklet";
+			if (!tag) return undefined;
+
+			if (
+				cachedNavigationPairProps === frameProps &&
+				cachedNavigationPairTag === tag
+			) {
+				return cachedNavigationPair;
+			}
+
+			const nextPair = BoundStore.resolveTransitionPair(tag, {
+				currentScreenKey: frameProps.current?.route.key,
+				previousScreenKey: frameProps.previous?.route.key,
+				nextScreenKey: frameProps.next?.route.key,
+				entering: !frameProps.next,
+			});
+
+			cachedNavigationPairProps = frameProps;
+			cachedNavigationPairTag = tag;
+			cachedNavigationPair = nextPair;
+
+			return nextPair;
 		};
-	};
 
-	const interpolateStyle = (
-		tag: string,
-		property: string,
-		fallback?: number,
-	): number => {
-		"worklet";
-		const link = getLink(tag);
-		const entering = !props.next;
-		return interpolateLinkStyle(link, property, props.progress, entering, {
-			fallback,
+		const navigation = createNavigationAccessor({
+			id: params?.id,
+			group: params?.group,
+			getProps,
+			resolveBoundTag,
+			zoomBaseOptions,
+			computeRaw: (overrides, frameProps) =>
+				(() => {
+					const currentProps = frameProps ?? getProps();
+					const resolvedNavigationOptions = buildBoundsOptions({
+						props: currentProps,
+						id: params?.id,
+						group: params?.group,
+						overrides,
+						mode: "navigation",
+						resolveBoundTag,
+					});
+					const resolvedPair = resolveNavigationPair(
+						resolvedNavigationOptions.id,
+						currentProps,
+					);
+
+					return computeForResolvedOptions(
+						resolvedNavigationOptions,
+						currentProps,
+						resolvedPair,
+					) as Record<string, unknown>;
+				})(),
 		});
-	};
-
-	const interpolateBounds = (
-		tag: string,
-		property: keyof MeasuredDimensions,
-		fallbackOrTargetKey?: number | string,
-		fallback?: number,
-	): number => {
-		"worklet";
-		const entering = !props.next;
-		const range = entering ? ENTER_RANGE : EXIT_RANGE;
-
-		// If third param is a string, it's a targetKey (snapshot approach)
-		if (typeof fallbackOrTargetKey === "string") {
-			const targetKey = fallbackOrTargetKey;
-			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 interpolate(
-				props.progress,
-				range,
-				[targetValue, currentValue],
-				"clamp",
-			);
-		}
+		const target = Object.isExtensible(computed) ? computed : { ...computed };
 
-		// Otherwise, use link approach (existing behavior)
-		const link = getLink(tag);
-		const fb = fallbackOrTargetKey ?? 0;
-
-		const sourceValue = link?.source?.bounds?.[property] ?? fb;
-		const destValue = link?.destination?.bounds?.[property] ?? fb;
+		Object.defineProperty(target, "navigation", {
+			value: navigation,
+			enumerable: false,
+			configurable: true,
+		});
 
-		return interpolate(
-			props.progress,
-			range,
-			[sourceValue, destValue],
-			"clamp",
-		);
+		return target as typeof computed & { navigation: typeof navigation };
 	};
 
-	return Object.assign(boundsFunction, {
+	const { getSnapshot, getLink } = createLinkAccessor(getProps);
+	const { interpolateStyle, interpolateBounds } = createInterpolators({
+		getProps,
+		getLink,
+	});
+
+	return Object.assign(computeElementBoundsStyles, {
 		getSnapshot,
 		getLink,
 		interpolateStyle,

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

@@ -0,0 +1,74 @@
+import { BoundStore } from "../../../../stores/bounds";
+import type { BoundsNavigationOptions } from "../../../../types/bounds.types";
+import type { BoundsOptions } from "../../types/options";
+import type { ResolveTag } from "./types";
+
+export const toNumber = (value: unknown, fallback = 0): number => {
+	"worklet";
+	return typeof value === "number" ? value : fallback;
+};
+
+export const resolveNavigationConfig = ({
+	id,
+	group,
+	navigationOptions,
+	currentRouteKey,
+	resolveTag,
+	defaultAnchor,
+}: {
+	id: string;
+	group?: string;
+	navigationOptions?: BoundsNavigationOptions;
+	currentRouteKey?: string;
+	resolveTag: ResolveTag;
+	defaultAnchor: BoundsOptions["anchor"] | undefined;
+}): {
+	resolvedTag: string;
+	sharedOptions: Partial<BoundsOptions>;
+	explicitTarget: BoundsOptions["target"] | undefined;
+} | null => {
+	"worklet";
+	const resolvedTag = resolveTag({ id, group });
+	if (!resolvedTag) return null;
+
+	// Try direct boundary config for the current screen first.
+	const boundaryConfig = currentRouteKey
+		? BoundStore.getBoundaryConfig(resolvedTag, currentRouteKey)
+		: null;
+
+	// Fallback: when the current screen has no Boundary (e.g. a zoom detail
+	// screen without a destination element), inherit config from the link's
+	// source screen so that props like scaleMode propagate to both sides.
+	let effectiveConfig = boundaryConfig;
+	if (!effectiveConfig) {
+		// For no-destination navigation zoom, the focused route won't appear in
+		// a completed link yet. Fall back to the latest unscoped link so source
+		// boundary defaults (anchor/scaleMode/target) still propagate.
+		const scopedLink = currentRouteKey
+			? BoundStore.getActiveLink(resolvedTag, currentRouteKey)
+			: null;
+		const link = scopedLink ?? BoundStore.getActiveLink(resolvedTag);
+		if (link?.source) {
+			effectiveConfig = BoundStore.getBoundaryConfig(
+				resolvedTag,
+				link.source.screenKey,
+			);
+		}
+	}
+
+	const sharedOptions: Partial<BoundsOptions> = {
+		...(navigationOptions ?? {}),
+		anchor:
+			navigationOptions?.anchor ?? effectiveConfig?.anchor ?? defaultAnchor,
+		scaleMode:
+			navigationOptions?.scaleMode ?? effectiveConfig?.scaleMode ?? "uniform",
+	};
+
+	const explicitTarget = navigationOptions?.target ?? effectiveConfig?.target;
+
+	return {
+		resolvedTag,
+		sharedOptions,
+		explicitTarget,
+	};
+};

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

@@ -0,0 +1,14 @@
+import { NO_STYLES } from "../../../../constants";
+import type { BuildNavigationStylesParams } from "./types";
+import { buildZoomNavigationStyles } from "./zoom";
+
+export const buildNavigationStyles = (params: BuildNavigationStylesParams) => {
+	"worklet";
+
+	switch (params.preset) {
+		case "zoom":
+			return buildZoomNavigationStyles(params);
+		default:
+			return NO_STYLES;
+	}
+};

package/src/shared/utils/bounds/sugar/navigation/types.ts

@@ -0,0 +1,26 @@
+import type { ScreenInterpolationProps } from "../../../../types/animation.types";
+import type {
+	BoundsNavigationOptions,
+	BoundsNavigationPreset,
+} from "../../../../types/bounds.types";
+import type { BoundsOptions } from "../../types/options";
+
+export type ResolveTag = (params: {
+	id?: string;
+	group?: string;
+}) => string | undefined;
+
+export type ComputeRaw = (
+	overrides: Partial<BoundsOptions>,
+	frameProps?: Omit<ScreenInterpolationProps, "bounds">,
+) => Record<string, unknown>;
+
+export type BuildNavigationStylesParams = {
+	id: string;
+	group?: string;
+	preset: BoundsNavigationPreset;
+	navigationOptions?: BoundsNavigationOptions;
+	props: Omit<ScreenInterpolationProps, "bounds">;
+	resolveTag: ResolveTag;
+	computeRaw: ComputeRaw;
+};