react-native-screen-transitions 4.1.0-beta.1 → 4.1.0-rc.0

package/src/providers/screen/orchestrator/orchestrator.provider.tsx

@@ -1,73 +0,0 @@
-import { type ReactNode, useMemo } from "react";
-import type { SharedValue } from "react-native-reanimated";
-import type { NormalizedTransitionInterpolatedStyle } from "../../../types/animation.types";
-import type { BoundsAccessor } from "../../../types/bounds.types";
-import { createBoundsAccessor } from "../../../utils/bounds";
-import createProvider from "../../../utils/create-provider";
-import { useBuilderStore } from "../builder";
-import { useMotionStore } from "../motion";
-import { useScreenAnimationPipeline } from "./helpers/pipeline";
-import { usePairPresentation } from "./helpers/use-pair-presentation";
-import { useRegisterGestureOwnership } from "./hooks/use-register-gesture-ownership";
-import { useInterpolatedStylesMap } from "./styles/hooks/use-interpolated-style-maps";
-import { useResolvedStylesMap } from "./styles/hooks/use-resolved-slot-style-map";
-
-export type OrchestratorProviderProps = {
-	children: ReactNode;
-	/** Reuse an existing screen’s orchestration without rebuilding it. */
-	screenKey?: string;
-};
-
-export type OrchestratorState = ReturnType<
-	typeof useScreenAnimationPipeline
-> & {
-	boundsAccessor: BoundsAccessor;
-	pairPresentation: ReturnType<typeof usePairPresentation>;
-	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
-};
-
-export const {
-	OrchestratorProvider,
-	useOptionalOrchestratorStore,
-	useOrchestratorStore,
-} = createProvider("Orchestrator", {
-	global: true,
-})<OrchestratorProviderProps, OrchestratorState>(() => {
-	const currentScreenKey = useBuilderStore(
-		(store) => store.derivations.currentScreenKey,
-	);
-	const gestures = useMotionStore((store) => store.gestures);
-
-	const pipeline = useScreenAnimationPipeline();
-	const pairPresentation = usePairPresentation(pipeline);
-
-	const localStylesMaps = useInterpolatedStylesMap({ pipeline });
-	const slotsMap = useResolvedStylesMap({ localStylesMaps });
-
-	const { screenInterpolatorProps } = pipeline;
-
-	const boundsAccessor = useMemo(
-		() =>
-			createBoundsAccessor(() => {
-				"worklet";
-				return screenInterpolatorProps.get();
-			}),
-		[screenInterpolatorProps],
-	);
-
-	useRegisterGestureOwnership({
-		claimedDirections: gestures.claimedDirections,
-		owners: gestures.owners,
-		source: gestures,
-	});
-
-	return {
-		key: currentScreenKey,
-		value: {
-			...pipeline,
-			pairPresentation,
-			boundsAccessor,
-			slotsMap,
-		},
-	};
-});

package/src/providers/screen/orchestrator/styles/constants.ts

@@ -1,87 +0,0 @@
-import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../../components/boundary/portal/utils/naming";
-import {
-	NAVIGATION_MASK_CONTAINER_STYLE_ID,
-	NAVIGATION_MASK_ELEMENT_STYLE_ID,
-} from "../../../../constants";
-
-const IDENTITY_TRANSFORM = [
-	{ translateX: 0 },
-	{ translateY: 0 },
-	{ scale: 1 },
-	{ scaleX: 1 },
-	{ scaleY: 1 },
-] as const;
-
-/**
- * Safe identity resets for transition-owned style props.
- *
- * This list should stay limited to props with a predictable neutral value after
- * an animation finishes. Avoid layout-owning props such as width, height, top,
- * left, margin, padding, flex, or aspectRatio; resetting those to zero can clip
- * or collapse user layout. If another visual-only transition prop needs cleanup,
- * please add its identity value here in a PR.
- */
-export const STYLE_RESET_VALUES: Record<string, unknown> = {
-	filter: [{ blur: 0.01 }],
-	transform: IDENTITY_TRANSFORM,
-	translateX: 0,
-	translateY: 0,
-	scale: 1,
-	scaleX: 1,
-	scaleY: 1,
-	opacity: 1,
-	zIndex: 0,
-	elevation: 0,
-	overflow: "visible",
-	backgroundColor: "transparent",
-	borderColor: "transparent",
-	borderTopColor: "transparent",
-	borderRightColor: "transparent",
-	borderBottomColor: "transparent",
-	borderLeftColor: "transparent",
-	borderStartColor: "transparent",
-	borderEndColor: "transparent",
-	borderRadius: 0,
-	borderTopLeftRadius: 0,
-	borderTopRightRadius: 0,
-	borderBottomRightRadius: 0,
-	borderBottomLeftRadius: 0,
-	borderTopStartRadius: 0,
-	borderTopEndRadius: 0,
-	borderBottomStartRadius: 0,
-	borderBottomEndRadius: 0,
-	borderStartStartRadius: 0,
-	borderStartEndRadius: 0,
-	borderEndStartRadius: 0,
-	borderEndEndRadius: 0,
-	shadowColor: "transparent",
-	shadowOffset: { width: 0, height: 0 },
-	shadowOpacity: 0,
-	shadowRadius: 0,
-};
-
-export const PROP_RESET_VALUES: Record<string, unknown> = {
-	hostName: PORTAL_HOST_NAME_RESET_VALUE,
-	pointerEvents: "auto",
-};
-
-const RESERVED_STYLE_SLOT_IDS = {
-	clip: true,
-	overlay: true,
-	content: true,
-	surface: true,
-	backdrop: true,
-	[NAVIGATION_MASK_ELEMENT_STYLE_ID]: true,
-	[NAVIGATION_MASK_CONTAINER_STYLE_ID]: true,
-} as const;
-
-export const isReservedStyleSlot = (slotId: string) => {
-	"worklet";
-	// biome-ignore lint/suspicious/noPrototypeBuiltins: <proj issue>
-	return Object.prototype.hasOwnProperty.call(RESERVED_STYLE_SLOT_IDS, slotId);
-};
-
-export const shouldSlotInherit = (slotId: string) => {
-	"worklet";
-	return !isReservedStyleSlot(slotId);
-};

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

@@ -1,129 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,138 +0,0 @@
-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),
-		],
-	};
-};