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

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

@@ -1,13 +1,17 @@
-import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
+import type { MeasuredDimensions } from "react-native-reanimated";
 import {
 	NAVIGATION_MASK_CONTAINER_STYLE_ID,
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,
 } from "../constants";
-import type { MeasuredEntry } from "../stores/bounds";
+import type { BoundsLink } from "../stores/bounds/types";
 import type {
-	BoundId,
-	BoundsOptions,
-	BoundsOptionsResult,
+	BoundsComputeOptions,
+	BoundsIdentityInput,
+	BoundsMathResult,
+	BoundsMotion,
+	BoundsMotionFrame,
+	BoundsMotionTransform,
+	BoundsStyleResult,
 } from "../utils/bounds/types/options";
 import type {
 	ScreenInterpolationProps,
@@ -16,6 +20,8 @@ import type {
 } from "./animation.types";
 import type { GestureProgressMode } from "./gesture.types";
 
+export type { BoundsLink, BoundsLinkStatus } from "../stores/bounds/types";
+
 /**
  * Target style computation.
  * - "transform": translates and scales (scaleX/scaleY), no width/height size
@@ -25,24 +31,6 @@ import type { GestureProgressMode } from "./gesture.types";
  */
 export type BoundsMethod = "transform" | "size" | "content";
 
-export type BoundEntry = {
-	bounds: MeasuredDimensions;
-	styles: StyleProps;
-};
-
-export type BoundsLink = {
-	id: string;
-	source: BoundEntry | null;
-	destination: BoundEntry | null;
-	initialSource: BoundEntry | null;
-	initialDestination: BoundEntry | null;
-	compute: <T extends BoundsLinkComputeOptions>(
-		options: T,
-	) => BoundsOptionsResult<T & { id: string }>;
-};
-
-export type BoundsLinkComputeOptions = Omit<BoundsOptions, "id" | "group">;
-
 export type BoundsNavigationZoomOptions = {
 	target?: "bound" | "fullscreen" | MeasuredDimensions;
 	debug?: boolean;
@@ -293,47 +281,21 @@ type BoundsBoundNavigationAccessor = {
 	navigation: BoundsNavigationAccessor;
 };
 
-export type BoundsScopedAccessors = {
-	getMeasured: (key?: string) => MeasuredEntry | null;
-	/**
-	 * @deprecated Use `getMeasured` instead. `getSnapshot` will be removed in the next major version.
-	 */
-	getSnapshot: (key?: string) => MeasuredEntry | null;
-	getLink: () => BoundsLink | null;
-	interpolateStyle: (property: keyof StyleProps, fallback?: number) => number;
-	interpolateBounds: (
-		property: keyof MeasuredDimensions,
-		fallbackOrTargetKey?: number | string,
-		fallback?: number,
-	) => number;
+export type BoundsScopedAccessor = BoundsBoundNavigationAccessor & {
+	styles: (options?: BoundsComputeOptions) => BoundsStyleResult;
+	math: <T extends BoundsComputeOptions = BoundsComputeOptions>(
+		options?: T,
+	) => BoundsMathResult<T>;
+	link: (id?: BoundsIdentityInput) => BoundsLink | null;
 };
 
-type BoundsCallResult<T extends BoundsOptions> = BoundsOptionsResult<T> &
-	BoundsBoundNavigationAccessor &
-	BoundsScopedAccessors;
-
-export type BoundsAccessor = {
-	<T extends BoundsOptions>(options: T): BoundsCallResult<T>;
-	getMeasured: (id: BoundId, key?: string) => MeasuredEntry | null;
-	/**
-	 * @deprecated Use `getMeasured` instead. `getSnapshot` will be removed in the next major version.
-	 */
-	getSnapshot: (id: BoundId, key?: string) => MeasuredEntry | null;
-	getLink: (id: BoundId) => BoundsLink | null;
-	interpolateStyle: (
-		id: BoundId,
-		property: keyof StyleProps,
-		fallback?: number,
-	) => number;
-	interpolateBounds: (
-		id: BoundId,
-		property: keyof MeasuredDimensions,
-		fallbackOrTargetKey?: number | string,
-		fallback?: number,
-	) => number;
-};
+export type BoundsAccessor = (
+	options: BoundsIdentityInput,
+) => BoundsScopedAccessor;
 
 export type BoundsInterpolationProps = Omit<
 	ScreenInterpolationProps,
 	"bounds" | "transition"
 >;
+
+export type { BoundsMotion, BoundsMotionFrame, BoundsMotionTransform };

package/src/shared/types/index.ts

@@ -2,6 +2,7 @@ export { FALSE, TRUE } from "../constants";
 export type {
 	AnimatedViewStyle,
 	AnimationConfig,
+	BoundaryTeleportControl,
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,
 	ScreenTransitionAccessor,
@@ -11,12 +12,16 @@ export type {
 	ScreenTransitionTarget,
 	TransitionInterpolatedStyle,
 	TransitionInterpolatorOptions,
+	TransitionSlotProps,
 	TransitionSlotStyle,
 	TransitionSpec,
 } from "./animation.types";
 export type {
 	BoundsAccessor,
 	BoundsMethod,
+	BoundsMotion,
+	BoundsMotionFrame,
+	BoundsMotionTransform,
 	BoundsNavigationAccessor,
 	BoundsNavigationRevealOptions,
 	BoundsNavigationRevealStyle,

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

@@ -1,10 +1,51 @@
-import type { BoundId } from "../types/options";
+import type {
+	BoundId,
+	BoundsIdentity,
+	BoundsIdentityInput,
+} from "../types/options";
 
 type CreateBoundTagParams = {
 	id?: BoundId;
 	group?: string;
 };
 
+const splitBoundTag = (id: BoundId): BoundsIdentity => {
+	"worklet";
+
+	const normalizedId = String(id);
+	const separatorIndex = normalizedId.indexOf(":");
+
+	if (separatorIndex <= 0 || separatorIndex >= normalizedId.length - 1) {
+		return { id };
+	}
+
+	return {
+		group: normalizedId.slice(0, separatorIndex),
+		id: normalizedId.slice(separatorIndex + 1),
+	};
+};
+
+export const normalizeBoundIdentity = (
+	identity: BoundsIdentityInput,
+	fallbackGroup?: string,
+): BoundsIdentity => {
+	"worklet";
+
+	const source =
+		typeof identity === "object"
+			? identity
+			: ({
+					id: identity,
+				} satisfies BoundsIdentity);
+	const parsed = splitBoundTag(source.id);
+	const group = source.group || parsed.group || fallbackGroup;
+
+	return {
+		id: parsed.id,
+		group,
+	};
+};
+
 /**
  * Creates a bound tag by formatting the given id and optional group
  * into a `group:id` string. If no group is provided, returns just the id.
@@ -17,11 +58,12 @@ export const createBoundTag = ({
 
 	if (id == null || id === "") return undefined;
 
-	const normalizedId = String(id);
+	const identity = normalizeBoundIdentity({ id, group });
+	const normalizedId = String(identity.id);
 
-	if (!group) {
+	if (!identity.group) {
 		return normalizedId;
 	}
 
-	return `${group}:${normalizedId}`;
+	return `${identity.group}:${normalizedId}`;
 };

package/src/shared/utils/bounds/helpers/create-bounds-accessor-core.ts

@@ -1,35 +1,29 @@
 import type {
+	BoundsAccessor,
 	BoundsInterpolationProps,
-	BoundsScopedAccessors,
+	BoundsScopedAccessor,
 } from "../../../types/bounds.types";
-import type { BoundsOptions, BoundsOptionsResult } from "../types/options";
-import { createBoundTag } from "./create-bound-tag";
-import { createInterpolators } from "./create-interpolators";
+import type {
+	BoundsComputeOptions,
+	BoundsIdentity,
+	BoundsIdentityInput,
+	BoundsMathResult,
+	BoundsStyleResult,
+} from "../types/options";
+import { createBoundTag, normalizeBoundIdentity } from "./create-bound-tag";
 import { createLinkAccessor } from "./create-link-accessor";
-import { prepareBoundStyles } from "./prepare-bound-styles";
-
-type BoundsComputeResult<T extends BoundsOptions> = BoundsOptionsResult<T> &
-	BoundsScopedAccessors;
-
-type BoundsCompute = <T extends BoundsOptions>(
-	options: T,
-) => BoundsComputeResult<T>;
+import { prepareBoundStyles, syncActiveGroupId } from "./prepare-bound-styles";
 
-type BoundsAccessorCore = BoundsCompute &
-	ReturnType<typeof createLinkAccessor> &
-	ReturnType<typeof createInterpolators>;
-
-type ExtendBoundsResultParams<T extends BoundsOptions> = {
-	target: BoundsComputeResult<T>;
+type ExtendBoundsResultParams = {
+	target: BoundsScopedAccessor;
+	identity: BoundsIdentity;
 	props: BoundsInterpolationProps;
 	tag: string | undefined;
 };
 
 type CreateBoundsAccessorCoreParams = {
 	getProps: () => BoundsInterpolationProps;
-	extendResult?: <T extends BoundsOptions>(
-		params: ExtendBoundsResultParams<T>,
-	) => void;
+	extendResult?: (params: ExtendBoundsResultParams) => void;
 };
 
 const createBoundsAccessorParts = ({
@@ -38,124 +32,79 @@ const createBoundsAccessorParts = ({
 }: CreateBoundsAccessorCoreParams) => {
 	"worklet";
 
-	const { getMeasured, getSnapshot, getLink } = createLinkAccessor(getProps);
-	const { interpolateStyle, interpolateBounds } = createInterpolators({
-		getProps,
-		getLink,
-	});
+	const { getLink } = createLinkAccessor(getProps);
 
-	const computeBounds = (<T extends BoundsOptions>(
-		params?: T,
-	): BoundsComputeResult<T> => {
+	const createScopedBounds = ((
+		identity: BoundsIdentityInput,
+	): BoundsScopedAccessor => {
 		"worklet";
 		const props = getProps();
-		const options = (params ?? { id: "" }) as T;
-		const tag = createBoundTag({
-			id: options.id,
-			group: options.group,
-		});
-
-		const computed = prepareBoundStyles({
+		const normalizedIdentity = normalizeBoundIdentity(identity);
+		const tag = createBoundTag(normalizedIdentity);
+		syncActiveGroupId({
 			props,
-			options,
-			syncGroupActiveId: true,
+			id: normalizedIdentity.id,
+			group: normalizedIdentity.group,
 		});
-		const scopedTag = tag ?? "";
-		const target = Object.isExtensible(computed) ? computed : { ...computed };
 
-		Object.defineProperties(target, {
-			getMeasured: {
-				value: (key?: string) => {
-					"worklet";
-					return getMeasured(scopedTag, key);
-				},
-				enumerable: false,
-				configurable: true,
-			},
-			getSnapshot: {
-				value: (key?: string) => {
-					"worklet";
-					return getSnapshot(scopedTag, key);
-				},
-				enumerable: false,
-				configurable: true,
+		const scoped: BoundsScopedAccessor = {
+			styles: (options?: BoundsComputeOptions): BoundsStyleResult => {
+				"worklet";
+				return prepareBoundStyles({
+					props,
+					options: {
+						...options,
+						id: normalizedIdentity.id,
+						group: normalizedIdentity.group,
+					},
+				}) as BoundsStyleResult;
 			},
-			getLink: {
-				value: () => {
-					"worklet";
-					return getLink(scopedTag);
-				},
-				enumerable: false,
-				configurable: true,
+			math: <T extends BoundsComputeOptions = BoundsComputeOptions>(
+				options?: T,
+			): BoundsMathResult<T> => {
+				"worklet";
+				return prepareBoundStyles({
+					props,
+					options: {
+						...options,
+						id: normalizedIdentity.id,
+						group: normalizedIdentity.group,
+						raw: true,
+					},
+				}) as BoundsMathResult<T>;
 			},
-			interpolateStyle: {
-				value: (
-					property: Parameters<typeof interpolateStyle>[1],
-					fallback?: number,
-				) => {
-					"worklet";
-					return interpolateStyle(scopedTag, property, fallback);
-				},
-				enumerable: false,
-				configurable: true,
+			link: (id?: BoundsIdentityInput) => {
+				"worklet";
+				const linkIdentity =
+					id == null
+						? normalizedIdentity
+						: normalizeBoundIdentity(id, normalizedIdentity.group);
+				const linkTag = createBoundTag(linkIdentity);
+				return getLink(linkTag ?? "");
 			},
-			interpolateBounds: {
-				value: (
-					property: Parameters<typeof interpolateBounds>[1],
-					fallbackOrTargetKey?: Parameters<typeof interpolateBounds>[2],
-					fallback?: number,
-				) => {
-					"worklet";
-					return interpolateBounds(
-						scopedTag,
-						property,
-						fallbackOrTargetKey,
-						fallback,
-					);
-				},
-				enumerable: false,
-				configurable: true,
-			},
-		});
+		} as BoundsScopedAccessor;
 
 		extendResult?.({
-			target: target as BoundsComputeResult<T>,
+			target: scoped,
+			identity: normalizedIdentity,
 			props,
 			tag,
 		});
 
-		return target as BoundsComputeResult<T>;
-	}) as BoundsCompute;
+		return scoped;
+	}) as BoundsAccessor;
 
 	return {
-		computeBounds,
-		getMeasured,
-		getSnapshot,
-		getLink,
-		interpolateStyle,
-		interpolateBounds,
+		createScopedBounds,
 	};
 };
 
 export const createBoundsAccessorCore = (
 	params: CreateBoundsAccessorCoreParams,
-): BoundsAccessorCore => {
+): BoundsAccessor => {
 	"worklet";
 
-	const {
-		computeBounds,
-		getMeasured,
-		getSnapshot,
-		getLink,
-		interpolateStyle,
-		interpolateBounds,
-	} = createBoundsAccessorParts(params);
+	const { createScopedBounds } = createBoundsAccessorParts(params);
 
-	return Object.assign(computeBounds, {
-		getMeasured,
-		getSnapshot,
-		getLink,
-		interpolateStyle,
-		interpolateBounds,
-	}) as BoundsAccessorCore;
+	return createScopedBounds;
 };

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

@@ -1,107 +1,37 @@
-import { getEntry } from "../../../stores/bounds/internals/entries";
 import { getResolvedLink } from "../../../stores/bounds/internals/links";
-import type {
-	MeasuredEntry,
-	ResolvedTransitionPair,
-	TagLink,
-} from "../../../stores/bounds/types";
 import type {
 	BoundsInterpolationProps,
 	BoundsLink,
-	BoundsLinkComputeOptions,
 } from "../../../types/bounds.types";
-import type { BoundId, BoundsOptionsResult } from "../types/options";
-import { prepareBoundStyles } from "./prepare-bound-styles";
+import type { BoundId } from "../types/options";
 import { resolveBoundsPairKey } from "./resolve-bounds-pair-key";
 
 type GetProps = () => BoundsInterpolationProps;
 
 export type LinkAccessor = {
-	getMeasured: (tag: BoundId, key?: string) => MeasuredEntry | null;
-	getSnapshot: (tag: BoundId, key?: string) => MeasuredEntry | null;
 	getLink: (tag: BoundId) => BoundsLink | null;
 };
 
-const toResolvedPair = (link: TagLink): ResolvedTransitionPair => {
-	"worklet";
-	return {
-		sourceBounds: link.source.bounds,
-		destinationBounds: link.destination?.bounds ?? null,
-		sourceStyles: link.source.styles,
-		destinationStyles: link.destination?.styles ?? null,
-		sourceScreenKey: link.source.screenKey,
-		destinationScreenKey: link.destination?.screenKey ?? null,
-	};
-};
-
 export const createLinkAccessor = (getProps: GetProps): LinkAccessor => {
 	"worklet";
 
-	const getMeasured = (tag: BoundId, key?: string): MeasuredEntry | null => {
-		"worklet";
-		if (!key) return null;
-		const entry = getEntry(String(tag), key);
-		return entry?.bounds ? (entry as MeasuredEntry) : null;
-	};
-
-	const getSnapshot = (tag: BoundId, key?: string): MeasuredEntry | null => {
-		"worklet";
-		return getMeasured(tag, key);
-	};
-
 	const getLink = (tag: BoundId): BoundsLink | null => {
 		"worklet";
 		const props = getProps();
 		const stringTag = String(tag);
 		const pairKey = resolveBoundsPairKey(props);
-		const resolved = pairKey
-			? getResolvedLink(pairKey, stringTag)
-			: { tag: stringTag, link: null };
-		const selectedTag = resolved.tag;
-		const link = resolved.link;
-
-		if (!link) return null;
-		const resolvedPair = toResolvedPair(link);
-
-		return {
-			id: selectedTag,
-			source: link.source
-				? { bounds: link.source.bounds, styles: link.source.styles }
-				: null,
-			destination: link.destination
-				? { bounds: link.destination.bounds, styles: link.destination.styles }
-				: null,
-			initialSource: link.initialSource
-				? {
-						bounds: link.initialSource.bounds,
-						styles: link.initialSource.styles,
-					}
-				: null,
-			initialDestination: link.initialDestination
-				? {
-						bounds: link.initialDestination.bounds,
-						styles: link.initialDestination.styles,
-					}
-				: null,
-			compute: <T extends BoundsLinkComputeOptions>(
-				computeOptions: T,
-			): BoundsOptionsResult<T & { id: string }> => {
-				"worklet";
-				return prepareBoundStyles({
-					props,
-					options: {
-						...computeOptions,
-						id: selectedTag,
-					} as T & { id: string },
-					resolvedPair,
-				});
-			},
-		};
+		if (!pairKey) return null;
+
+		const resolved = getResolvedLink(pairKey, stringTag);
+		return resolved.link
+			? {
+					id: resolved.tag,
+					...resolved.link,
+				}
+			: null;
 	};
 
 	return {
-		getMeasured,
-		getSnapshot,
 		getLink,
 	};
 };

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

@@ -1,5 +1,8 @@
 import { getEntry } from "../../../stores/bounds/internals/entries";
-import { setActiveGroupId } from "../../../stores/bounds/internals/links";
+import {
+	getActiveGroupId,
+	setActiveGroupId,
+} from "../../../stores/bounds/internals/links";
 import type { ResolvedTransitionPair } from "../../../stores/bounds/types";
 import type { BoundsInterpolationProps } from "../../../types/bounds.types";
 import { DEFAULT_BOUNDS_OPTIONS } from "../constants";
@@ -18,7 +21,6 @@ type ComputeResolvedBoundsStylesParams<T extends BoundsOptions> = {
 	props: BaseInterpolatorProps;
 	options: T;
 	resolvedPair?: ResolvedTransitionPair;
-	syncGroupActiveId?: boolean;
 };
 
 type BuildBoundsOptionsParams = {
@@ -55,7 +57,7 @@ const buildBoundsOptions = ({
 	return resolved;
 };
 
-const syncActiveGroupId = (params: {
+export const syncActiveGroupId = (params: {
 	props: BoundsInterpolationProps;
 	id?: BoundId;
 	group?: string;
@@ -67,25 +69,19 @@ const syncActiveGroupId = (params: {
 	const pairKey = resolveBoundsPairKey(props);
 	if (!pairKey) return;
 
-	setActiveGroupId(pairKey, group, String(id));
+	const activeId = String(id);
+	if (getActiveGroupId(pairKey, group) === activeId) return;
+
+	setActiveGroupId(pairKey, group, activeId);
 };
 
 export const prepareBoundStyles = <T extends BoundsOptions>({
 	props,
 	options,
 	resolvedPair,
-	syncGroupActiveId = false,
 }: ComputeResolvedBoundsStylesParams<T>): BoundsOptionsResult<T> => {
 	"worklet";
 
-	if (syncGroupActiveId) {
-		syncActiveGroupId({
-			props,
-			id: options.id,
-			group: options.group,
-		});
-	}
-
 	const resolved = buildBoundsOptions({
 		props,
 		id: options.id,
@@ -101,6 +97,7 @@ export const prepareBoundStyles = <T extends BoundsOptions>({
 			next: props.next,
 			progress: resolved.progress ?? props.progress,
 			dimensions: props.layouts.screen,
+			interpolationProps: props,
 		},
 		resolved,
 		resolvedPair,