react-native-screen-transitions 4.1.0-alpha.0 → 4.1.0-beta.0

package/src/providers/screen/orchestrator/styles/helpers/compose-slot-style.ts

@@ -0,0 +1,129 @@
+import type { StyleProps, TransformArrayItem } from "react-native-reanimated";
+import { NO_STYLES } from "../../../../../constants";
+
+type SharedValueLike = {
+	_isReanimatedSharedValue: true;
+	get?: () => unknown;
+	value?: unknown;
+};
+
+const isSharedValueLike = (value: unknown): value is SharedValueLike => {
+	"worklet";
+	return (
+		(value as Partial<SharedValueLike> | null)?._isReanimatedSharedValue ===
+		true
+	);
+};
+
+const resolveTransformValue = <T>(value: T): T | unknown => {
+	"worklet";
+	if (isSharedValueLike(value)) {
+		return value.value;
+	}
+
+	if (Array.isArray(value)) {
+		const resolved = [];
+		for (let index = 0; index < value.length; index++) {
+			const item = value[index];
+			resolved.push(isSharedValueLike(item) ? item.value : item);
+		}
+		return resolved;
+	}
+
+	return value;
+};
+
+const resolveTransformItem = (
+	value: TransformArrayItem,
+): TransformArrayItem => {
+	"worklet";
+	if (typeof value === "object" && value !== null) {
+		const resolved: Record<string, unknown> = {};
+		const source = value as Record<string, unknown>;
+		for (const key in source) {
+			resolved[key] = resolveTransformValue(source[key]);
+		}
+		return resolved as TransformArrayItem;
+	}
+
+	return value;
+};
+
+const resolveLocalTransform = (
+	transform: TransformArrayItem[],
+): TransformArrayItem[] => {
+	"worklet";
+	const resolved: TransformArrayItem[] = [];
+
+	for (let index = 0; index < transform.length; index++) {
+		resolved.push(resolveTransformItem(transform[index]));
+	}
+
+	return resolved;
+};
+
+const flattenStyleObject = (
+	style: unknown,
+): Record<string, unknown> | undefined => {
+	if (style === null || style === undefined || typeof style !== "object") {
+		return undefined;
+	}
+
+	if (!Array.isArray(style)) {
+		return style as Record<string, unknown>;
+	}
+
+	let flattened: Record<string, unknown> | undefined;
+	for (let index = 0; index < style.length; index++) {
+		const child = flattenStyleObject(style[index]);
+
+		if (!child) {
+			continue;
+		}
+
+		flattened = flattened ?? {};
+		Object.assign(flattened, child);
+	}
+
+	return flattened;
+};
+
+export const getLocalTransformForSlotComposition = (
+	style: unknown,
+): TransformArrayItem[] | undefined => {
+	const flattened = flattenStyleObject(style);
+	const transform = flattened?.transform;
+
+	return Array.isArray(transform)
+		? (transform as TransformArrayItem[])
+		: undefined;
+};
+
+export const composeSlotStyleWithLocalTransform = (
+	slotStyle: StyleProps | undefined,
+	localTransform: TransformArrayItem[] | undefined,
+	boundsLocalTransform?: TransformArrayItem[],
+): StyleProps => {
+	"worklet";
+	const resolvedSlotStyle = (slotStyle ?? NO_STYLES) as StyleProps;
+	// The measured bounds snapshot supersedes the live local transform so bounds
+	// geometry and payload scale are composed from the same measurement frame.
+	const transformToCompose = boundsLocalTransform ?? localTransform;
+
+	if (!transformToCompose?.length) {
+		return resolvedSlotStyle;
+	}
+
+	const slotTransform = resolvedSlotStyle.transform;
+	if (!Array.isArray(slotTransform)) {
+		return resolvedSlotStyle;
+	}
+
+	return {
+		...resolvedSlotStyle,
+		transform: [
+			...(slotTransform as TransformArrayItem[]),
+			...resolveLocalTransform(transformToCompose),
+		],
+	};
+};

package/src/providers/screen/orchestrator/styles/helpers/create-interpolator-scope.ts

@@ -0,0 +1,26 @@
+import type { ScreenInterpolationProps } from "../../../../../types/animation.types";
+import { createBoundsAccessor } from "../../../../../utils/bounds";
+import type { ScreenInterpolatorFrame } from "../../helpers/pipeline";
+import type { SelectedInterpolatorFrame } from "./select-interpolator-frame";
+
+export const createInterpolatorScope = ({
+	frame,
+	selectedFrame,
+}: {
+	frame: ScreenInterpolatorFrame;
+	selectedFrame: SelectedInterpolatorFrame;
+}): ScreenInterpolationProps => {
+	"worklet";
+
+	const selectedProps = {
+		...frame,
+		...selectedFrame,
+	};
+	return {
+		...selectedProps,
+		bounds: createBoundsAccessor(() => {
+			"worklet";
+			return selectedProps;
+		}),
+	};
+};

package/src/providers/screen/orchestrator/styles/helpers/normalize-slots.ts

@@ -0,0 +1,111 @@
+import type {
+	NormalizedTransitionInterpolatedStyle,
+	NormalizedTransitionSlotStyle,
+} from "../../../../../types/animation.types";
+import {
+	getBoundsLocalTransform,
+	stripBoundsLocalTransform,
+} from "../../../../../utils/bounds/helpers/styles/local-transform";
+
+const isExplicitTransitionSlot = (value: unknown) => {
+	"worklet";
+	return (
+		typeof value === "object" &&
+		value != null &&
+		("style" in value || "props" in value)
+	);
+};
+
+const hasBoundsLocalTransformMarker = (style: unknown) => {
+	"worklet";
+	return !!getBoundsLocalTransform(style as any)?.length;
+};
+
+const isAlreadyNormalizedStyleMapWithoutBoundsMetadata = (
+	raw: Record<string, any>,
+) => {
+	"worklet";
+
+	for (const key in raw) {
+		const value = raw[key];
+
+		if (value === undefined) {
+			continue;
+		}
+
+		if (!isExplicitTransitionSlot(value)) {
+			return false;
+		}
+
+		if (
+			hasBoundsLocalTransformMarker(
+				(value as NormalizedTransitionSlotStyle).style,
+			)
+		) {
+			return false;
+		}
+	}
+
+	return true;
+};
+
+/**
+ * Normalizes an interpolator result into the canonical `{ style, props }` slot format.
+ *
+ * Handles three cases per key:
+ * 1. Proper `TransitionSlotStyle` values (has `style` or `props` key) — pass through
+ * 2. Style shorthand (plain StyleProps without wrapping) — auto-wrapped as `{ style: value }`
+ */
+export function normalizeSlots(
+	raw: Record<string, any>,
+): NormalizedTransitionInterpolatedStyle {
+	"worklet";
+
+	if (isAlreadyNormalizedStyleMapWithoutBoundsMetadata(raw)) {
+		return raw as NormalizedTransitionInterpolatedStyle;
+	}
+
+	const normalized: Record<string, NormalizedTransitionSlotStyle | undefined> =
+		{};
+
+	for (const key in raw) {
+		const value = raw[key];
+
+		// ── All other keys ──
+		if (value === undefined) {
+			normalized[key] = undefined;
+			continue;
+		}
+
+		if (isExplicitTransitionSlot(value)) {
+			const explicitSlot = value as NormalizedTransitionSlotStyle;
+			const boundsLocalTransform = getBoundsLocalTransform(explicitSlot.style);
+
+			if (!boundsLocalTransform?.length) {
+				normalized[key] = explicitSlot;
+				continue;
+			}
+
+			normalized[key] = {
+				style: explicitSlot.style
+					? stripBoundsLocalTransform(explicitSlot.style)
+					: undefined,
+				props: explicitSlot.props,
+				boundsLocalTransform,
+			};
+		} else {
+			const boundsLocalTransform = getBoundsLocalTransform(value);
+			const style =
+				boundsLocalTransform?.length && value
+					? stripBoundsLocalTransform(value)
+					: value;
+
+			// Shorthand: plain StyleProps — wrap it
+			normalized[key] = boundsLocalTransform?.length
+				? { style, boundsLocalTransform }
+				: { style };
+		}
+	}
+
+	return normalized as NormalizedTransitionInterpolatedStyle;
+}

package/src/providers/screen/orchestrator/styles/helpers/resolve-interpolator-style-handoff.ts

@@ -0,0 +1,138 @@
+import type {
+	NormalizedTransitionInterpolatedStyle,
+	NormalizedTransitionSlotStyle,
+} from "../../../../../types/animation.types";
+import type { LocalStyleLayers } from "./resolve-slot-styles";
+
+const mergeBuckets = (
+	frozen: Record<string, unknown> | undefined,
+	live: Record<string, unknown> | undefined,
+	composeTransforms: boolean,
+) => {
+	"worklet";
+
+	if (!frozen) {
+		return live;
+	}
+
+	if (!live) {
+		return frozen;
+	}
+
+	const merged: Record<string, unknown> = { ...frozen };
+
+	for (const key in live) {
+		const liveValue = live[key];
+
+		if (liveValue === undefined || liveValue === null) {
+			continue;
+		}
+
+		const frozenValue = frozen[key];
+
+		if (
+			composeTransforms &&
+			key === "transform" &&
+			Array.isArray(frozenValue) &&
+			Array.isArray(liveValue)
+		) {
+			merged[key] = [...frozenValue, ...liveValue];
+			continue;
+		}
+
+		merged[key] = liveValue;
+	}
+
+	return merged;
+};
+
+const mergeSlots = (
+	frozen: NormalizedTransitionSlotStyle | undefined,
+	live: NormalizedTransitionSlotStyle,
+): NormalizedTransitionSlotStyle => {
+	"worklet";
+
+	if (!frozen) {
+		return live;
+	}
+
+	const merged: NormalizedTransitionSlotStyle = {};
+	const style = mergeBuckets(
+		frozen.style as Record<string, unknown> | undefined,
+		live.style as Record<string, unknown> | undefined,
+		true,
+	);
+
+	if (style) {
+		merged.style = style;
+	}
+
+	if (frozen.props || live.props) {
+		merged.props = mergeBuckets(frozen.props, live.props, false);
+	}
+
+	const boundsLocalTransform =
+		live.boundsLocalTransform ?? frozen.boundsLocalTransform;
+
+	if (boundsLocalTransform) {
+		merged.boundsLocalTransform = boundsLocalTransform;
+	}
+
+	return merged;
+};
+
+const composeCurrentAndNextStyles = (
+	current: NormalizedTransitionInterpolatedStyle,
+	next: NormalizedTransitionInterpolatedStyle,
+) => {
+	"worklet";
+	const composed: NormalizedTransitionInterpolatedStyle = { ...current };
+
+	for (const slotId in next) {
+		const nextSlot = next[slotId];
+
+		if (nextSlot) {
+			composed[slotId] = mergeSlots(current[slotId], nextSlot);
+		}
+	}
+
+	return composed;
+};
+
+export const resolveInterpolatorStyleHandoff = ({
+	currentOwnsInterpolator,
+	currentStylesMap,
+	nextStylesMap,
+}: {
+	currentOwnsInterpolator: boolean;
+	currentStylesMap: NormalizedTransitionInterpolatedStyle | undefined;
+	nextStylesMap: NormalizedTransitionInterpolatedStyle | undefined;
+}): {
+	localStylesMaps: LocalStyleLayers;
+} => {
+	"worklet";
+
+	if (currentOwnsInterpolator) {
+		return {
+			localStylesMaps: currentStylesMap ? [currentStylesMap] : [],
+		};
+	}
+
+	if (!nextStylesMap) {
+		return {
+			localStylesMaps: currentStylesMap ? [currentStylesMap] : [],
+		};
+	}
+
+	if (!currentStylesMap) {
+		return {
+			localStylesMaps: [nextStylesMap],
+		};
+	}
+
+	return {
+		localStylesMaps: [
+			composeCurrentAndNextStyles(currentStylesMap, nextStylesMap),
+		],
+	};
+};