react-native-screen-transitions 3.9.0-alpha.2 → 3.9.0-alpha.3

package/src/shared/components/boundary/utils/refresh-signals.ts

@@ -26,19 +26,6 @@ const buildRefreshSignal = (
 	};
 };
 
-const isMatchedScreenPortalDestinationRefresh = (
-	linkState: LinkPairsState | undefined,
-	pairKey: ScreenPairKey,
-	linkId: string,
-) => {
-	"worklet";
-
-	return (
-		linkState?.[pairKey]?.links?.[linkId]?.source?.portalAttachTarget ===
-		"matched-screen"
-	);
-};
-
 export const getRefreshBoundarySignal = (params: {
 	enabled: boolean;
 	currentScreenKey: string;
@@ -99,22 +86,6 @@ export const getRefreshBoundarySignal = (params: {
 			return null;
 		}
 
-		// NOTE:
-		// Matched-screen portals use the destination as the initial host/anchor.
-		// Once attached, the teleported source is the thing being animated, so a
-		// fresh destination measure would mix in a second coordinate basis. Signals were introduced for scroll view cases + group
-		// cases, but I can't find a case for where a live component ( matched-screen ) would need this complexity. I would just assume
-		// you would want this for a->b | b->a transitions.
-		if (
-			isMatchedScreenPortalDestinationRefresh(
-				linkState,
-				refreshDestinationPairKey,
-				linkId,
-			)
-		) {
-			return null;
-		}
-
 		return buildRefreshSignal(
 			"destination",
 			refreshDestinationPairKey,
@@ -155,18 +126,6 @@ export const getRefreshBoundarySignal = (params: {
 		return null;
 	}
 
-	// NOTE:
-	// see above for explanation
-	if (
-		isMatchedScreenPortalDestinationRefresh(
-			linkState,
-			refreshDestinationPairKey,
-			linkId,
-		)
-	) {
-		return null;
-	}
-
 	return buildRefreshSignal(
 		"destination",
 		refreshDestinationPairKey,

package/src/shared/components/boundary/utils/source-signals.ts

@@ -15,32 +15,20 @@ export const getInitialSourceCaptureSignal = (params: {
 	sourcePairKey?: ScreenPairKey;
 	linkId: string;
 	group?: string;
-	shouldAutoMeasure: boolean;
 	linkState?: LinkPairsState;
 }): SourceCaptureSignal | null => {
 	"worklet";
-	const {
-		enabled,
-		sourcePairKey,
-		linkId,
-		group,
-		shouldAutoMeasure,
-		linkState,
-	} = params;
+	const { enabled, sourcePairKey, linkId, group, linkState } = params;
 
 	if (!enabled || !sourcePairKey) {
 		return null;
 	}
 
-	// Trigger components capture on press. Passive Boundary.View sources wait for
-	// their destination side to attach, then capture into the same assigned pair.
-	if (!shouldAutoMeasure) {
-		return null;
-	}
-
-	const link = linkState?.[sourcePairKey]?.links?.[linkId];
+	const pair = linkState?.[sourcePairKey];
+	const link = pair?.links?.[linkId];
+	const hasSourceRequest = pair?.sourceRequests?.[linkId];
 
-	if (!link?.destination || link.source) {
+	if ((!link?.destination && !hasSourceRequest) || link?.source) {
 		return null;
 	}
 

package/src/shared/index.ts

@@ -26,11 +26,6 @@ export default {
 export type { NativeStackAdapterOptions } from "./adapters/with-screen-transitions";
 export { withScreenTransitions } from "./adapters/with-screen-transitions";
 export { snapTo } from "./animation/snap-to";
-export type {
-	BoundaryPortal,
-	BoundaryPortalAttachTarget,
-	BoundaryPortalOptions,
-} from "./components/boundary";
 export {
 	NAVIGATION_MASK_CONTAINER_STYLE_ID,
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,

package/src/shared/providers/helpers/measured-bounds-writes.ts

@@ -1,11 +1,7 @@
 import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
 import { setEntry } from "../../stores/bounds/internals/entries";
 import { setDestination, setSource } from "../../stores/bounds/internals/links";
-import type {
-	BoundsPortalAttachTarget,
-	ScreenPairKey,
-	SourceHostRef,
-} from "../../stores/bounds/types";
+import type { ScreenPairKey } from "../../stores/bounds/types";
 
 type LinkWrite =
 	| {
@@ -25,8 +21,8 @@ type ApplyMeasuredBoundsWritesParams = {
 	measured: MeasuredDimensions;
 	preparedStyles: StyleProps;
 	linkWrite?: LinkWrite;
-	portalHost?: BoundsPortalAttachTarget;
-	sourceHost?: SourceHostRef;
+	handoff?: boolean;
+	escapeClipping?: boolean;
 };
 
 export const applyMeasuredBoundsWrites = (
@@ -41,8 +37,8 @@ export const applyMeasuredBoundsWrites = (
 		measured,
 		preparedStyles,
 		linkWrite,
-		portalHost,
-		sourceHost,
+		handoff,
+		escapeClipping,
 	} = params;
 
 	// Set the bounds entry on every measure to avoid any stale measurements
@@ -59,8 +55,7 @@ export const applyMeasuredBoundsWrites = (
 			measured,
 			preparedStyles,
 			group,
-			portalHost,
-			sourceHost,
+			{ handoff, escapeClipping },
 		);
 	}
 

package/src/shared/providers/screen/animation/helpers/derivations.ts

@@ -5,6 +5,7 @@ interface DerivationsTarget {
 	current: ScreenTransitionState;
 	next?: ScreenTransitionState;
 	progress: number;
+	transitionProgress: number;
 	focused: boolean;
 	active: ScreenTransitionState;
 	inactive: ScreenTransitionState | undefined;
@@ -14,6 +15,8 @@ export const updateDerivations = (frame: DerivationsTarget) => {
 	"worklet";
 
 	frame.progress = frame.current.progress + (frame.next?.progress ?? 0);
+	frame.transitionProgress =
+		frame.current.transitionProgress + (frame.next?.transitionProgress ?? 0);
 	frame.focused = !frame.next;
 	frame.active = frame.focused ? frame.current : (frame.next ?? frame.current);
 	frame.inactive = frame.focused ? frame.previous : frame.current;

package/src/shared/providers/screen/animation/helpers/pipeline.ts

@@ -184,6 +184,7 @@ const createInitialInterpolatorProps = ({
 		current,
 		next,
 		progress: 0,
+		transitionProgress: 0,
 		stackProgress: 0,
 		logicallySettled: 1,
 		focused: true,

package/src/shared/providers/screen/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/shared/providers/screen/styles/helpers/normalize-slots.ts

@@ -2,6 +2,10 @@ import type {
 	NormalizedTransitionInterpolatedStyle,
 	NormalizedTransitionSlotStyle,
 } from "../../../../types/animation.types";
+import {
+	getBoundsLocalTransform,
+	stripBoundsLocalTransform,
+} from "../../../../utils/bounds/helpers/styles/local-transform";
 
 const isExplicitTransitionSlot = (value: unknown) => {
 	"worklet";
@@ -12,7 +16,14 @@ const isExplicitTransitionSlot = (value: unknown) => {
 	);
 };
 
-const isAlreadyNormalizedStyleMap = (raw: Record<string, any>) => {
+const hasBoundsLocalTransformMarker = (style: unknown) => {
+	"worklet";
+	return !!getBoundsLocalTransform(style as any)?.length;
+};
+
+const isAlreadyNormalizedStyleMapWithoutBoundsMetadata = (
+	raw: Record<string, any>,
+) => {
 	"worklet";
 
 	for (const key in raw) {
@@ -25,6 +36,14 @@ const isAlreadyNormalizedStyleMap = (raw: Record<string, any>) => {
 		if (!isExplicitTransitionSlot(value)) {
 			return false;
 		}
+
+		if (
+			hasBoundsLocalTransformMarker(
+				(value as NormalizedTransitionSlotStyle).style,
+			)
+		) {
+			return false;
+		}
 	}
 
 	return true;
@@ -42,10 +61,7 @@ export function normalizeSlots(
 ): NormalizedTransitionInterpolatedStyle {
 	"worklet";
 
-	// Most modern interpolators already return the canonical `{ style, props }`
-	// slot shape. In that common case, we can forward the raw object directly and
-	// avoid building a second map just to copy the same slot references over.
-	if (isAlreadyNormalizedStyleMap(raw)) {
+	if (isAlreadyNormalizedStyleMapWithoutBoundsMetadata(raw)) {
 		return raw as NormalizedTransitionInterpolatedStyle;
 	}
 
@@ -62,11 +78,32 @@ export function normalizeSlots(
 		}
 
 		if (isExplicitTransitionSlot(value)) {
-			// Proper TransitionSlotStyle — pass through
-			normalized[key] = value as NormalizedTransitionSlotStyle;
+			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] = { style: value };
+			normalized[key] = boundsLocalTransform?.length
+				? { style, boundsLocalTransform }
+				: { style };
 		}
 	}
 

package/src/shared/providers/screen/styles/helpers/resolve-slot-styles/index.ts

@@ -107,6 +107,7 @@ const getResolvedSlotOutput = ({
 		resolvedSlot: materializeResolvedSlot({
 			baseStyle: state.baseStyle,
 			baseProps: state.baseProps,
+			boundsLocalTransform: slot?.boundsLocalTransform,
 			previousState,
 			styleKeys: state.styleKeys,
 			propKeys: state.propKeys,
@@ -164,6 +165,9 @@ const getMergedLocalSlot = (
 	"worklet";
 	let mergedStyle: Record<string, unknown> | undefined;
 	let mergedProps: Record<string, unknown> | undefined;
+	let boundsLocalTransform:
+		| NormalizedTransitionSlotStyle["boundsLocalTransform"]
+		| undefined;
 
 	for (let index = 0; index < context.localStylesMaps.length; index++) {
 		const slot = context.localStylesMaps[index]?.[slotId];
@@ -177,15 +181,19 @@ const getMergedLocalSlot = (
 			slot.style as Record<string, unknown> | undefined,
 		);
 		mergedProps = mergeBucket(mergedProps, slot.props);
+		if (slot.boundsLocalTransform?.length) {
+			boundsLocalTransform = slot.boundsLocalTransform;
+		}
 	}
 
-	if (!mergedStyle && !mergedProps) {
+	if (!mergedStyle && !mergedProps && !boundsLocalTransform) {
 		return undefined;
 	}
 
 	return {
 		style: mergedStyle,
 		props: mergedProps,
+		boundsLocalTransform,
 	};
 };
 
@@ -343,7 +351,11 @@ const areSlotsEqual = (
 
 	return (
 		areFlatObjectsEqual(left.style, right.style) &&
-		areFlatObjectsEqual(left.props, right.props)
+		areFlatObjectsEqual(left.props, right.props) &&
+		areTransformArraysEqual(
+			left.boundsLocalTransform,
+			right.boundsLocalTransform,
+		)
 	);
 };
 

package/src/shared/providers/screen/styles/helpers/resolve-slot-styles/materialize-slot.ts

@@ -111,6 +111,7 @@ const materializeResolvedProps = ({
 export const materializeResolvedSlot = ({
 	baseStyle,
 	baseProps,
+	boundsLocalTransform,
 	previousState,
 	styleKeys,
 	propKeys,
@@ -121,6 +122,7 @@ export const materializeResolvedSlot = ({
 }: {
 	baseStyle: Record<string, unknown> | undefined;
 	baseProps: Record<string, unknown> | undefined;
+	boundsLocalTransform: NormalizedTransitionSlotStyle["boundsLocalTransform"];
 	previousState: ResettableStyleState | undefined;
 	styleKeys: Record<string, true> | undefined;
 	propKeys: Record<string, true> | undefined;
@@ -149,6 +151,7 @@ export const materializeResolvedSlot = ({
 
 	resolvedSlot.style = resolvedStyle;
 	resolvedSlot.props = resolvedProps;
+	resolvedSlot.boundsLocalTransform = boundsLocalTransform;
 
 	if (!resolvedSlot.style && !resolvedSlot.props) {
 		return undefined;

package/src/shared/providers/screen/styles/hooks/slot-resolvers.tsx

@@ -0,0 +1,111 @@
+import { useMemo } from "react";
+import { useAnimatedProps, useAnimatedStyle } from "react-native-reanimated";
+import { NO_PROPS, NO_STYLES } from "../../../../constants";
+import {
+	composeSlotStyleWithLocalTransform,
+	getLocalTransformForSlotComposition,
+} from "../helpers/compose-slot-style";
+import { useScreenSlots } from "../slot.provider";
+
+export const useSlotStyles = (slotId: string | undefined) => {
+	const { slotsMap } = useScreenSlots();
+
+	return useAnimatedStyle(() => {
+		const slot = slotId ? slotsMap.get()[slotId] : undefined;
+		const slotStyle = slot?.style ?? NO_STYLES;
+
+		return composeSlotStyleWithLocalTransform(
+			slotStyle,
+			undefined,
+			slot?.boundsLocalTransform,
+		);
+	});
+};
+
+export const useComposedSlotStyles = (
+	slotId: string | undefined,
+	style: unknown,
+) => {
+	const { slotsMap } = useScreenSlots();
+	const localTransform = useMemo(
+		() => getLocalTransformForSlotComposition(style),
+		[style],
+	);
+
+	return useAnimatedStyle(() => {
+		const slot = slotId ? slotsMap.get()[slotId] : undefined;
+		const slotStyle = slot?.style ?? NO_STYLES;
+
+		return composeSlotStyleWithLocalTransform(
+			slotStyle,
+			localTransform,
+			slot?.boundsLocalTransform,
+		);
+	});
+};
+
+/**
+ * Stacking-only slice (`zIndex`/`elevation`) of a slot's style. Returned
+ * separately so an owner can keep just its stacking context while a nested
+ * target takes the full associated style. Yields `NO_STYLES` when neither is set.
+ */
+export const useSlotStackingStyles = (slotId: string | undefined) => {
+	const { slotsMap } = useScreenSlots();
+
+	return useAnimatedStyle(() => {
+		const baseStyle = slotId ? slotsMap.get()[slotId]?.style : undefined;
+		const zIndex = baseStyle?.zIndex ?? 0;
+		const elevation = baseStyle?.elevation ?? 0;
+
+		if (zIndex === 0 && elevation === 0) {
+			return NO_STYLES;
+		}
+
+		return { zIndex, elevation };
+	});
+};
+
+export const useSlotLayoutStyles = (slotId: string | undefined) => {
+	const { slotsMap } = useScreenSlots();
+
+	return useAnimatedStyle(() => {
+		const baseStyle = slotId ? slotsMap.get()[slotId]?.style : undefined;
+		const width = baseStyle?.width;
+		const height = baseStyle?.height;
+		const minWidth = baseStyle?.minWidth;
+		const minHeight = baseStyle?.minHeight;
+		const maxWidth = baseStyle?.maxWidth;
+		const maxHeight = baseStyle?.maxHeight;
+		const aspectRatio = baseStyle?.aspectRatio;
+
+		if (
+			width === undefined &&
+			height === undefined &&
+			minWidth === undefined &&
+			minHeight === undefined &&
+			maxWidth === undefined &&
+			maxHeight === undefined &&
+			aspectRatio === undefined
+		) {
+			return NO_STYLES;
+		}
+
+		return {
+			width,
+			height,
+			minWidth,
+			minHeight,
+			maxWidth,
+			maxHeight,
+			aspectRatio,
+		};
+	});
+};
+
+export const useSlotProps = (slotId: string | undefined) => {
+	const { slotsMap } = useScreenSlots();
+
+	return useAnimatedProps(() => {
+		return (slotId ? slotsMap.get()[slotId]?.props : undefined) ?? NO_PROPS;
+	});
+};

package/src/shared/providers/screen/styles/hooks/use-interpolated-style-maps.tsx

@@ -1,6 +1,10 @@
 import { useDerivedValue, useSharedValue } from "react-native-reanimated";
 import { NO_STYLES } from "../../../../constants";
 import { AnimationStore } from "../../../../stores/animation.store";
+import {
+	LifecycleTransitionRequestKind,
+	SystemStore,
+} from "../../../../stores/system.store";
 import type {
 	NormalizedTransitionInterpolatedStyle,
 	ScreenStyleInterpolator,
@@ -140,15 +144,19 @@ export const useInterpolatedStylesMap = () => {
 	} = useScreenAnimationContext();
 	const boundsAccessor = useBuildBoundsAccessor();
 	const transition = useBuildTransitionAccessor();
+	const nextInterpolatorReady = useSharedValue(0);
 
+	const activeScreenKey = nextScreenKey ?? currentScreenKey;
 	const {
 		entering: activeEntering,
 		transitionProgress: activeTransitionProgress,
-	} = AnimationStore.getBag(nextScreenKey ?? currentScreenKey);
+	} = AnimationStore.getBag(activeScreenKey);
+	const { pendingLifecycleRequestKind: activePendingLifecycleRequestKind } =
+		SystemStore.getBag(activeScreenKey);
 
 	const isGesturingDuringCloseAnimation = useSharedValue(false);
 
-	return useDerivedValue<LocalStyleLayers>(() => {
+	const localStylesMaps = useDerivedValue<LocalStyleLayers>(() => {
 		"worklet";
 		readScreenAnimationRevisions(
 			screenInterpolatorPropsRevision,
@@ -179,13 +187,18 @@ export const useInterpolatedStylesMap = () => {
 		// genuinely live: never during a gesture-driven close, never before a next
 		// interpolator exists, and never in the next screen's pre-start window
 		// (entering, but no transformed frame yet). Only then does "next" take over.
+		const isPendingOpen =
+			activePendingLifecycleRequestKind.get() ===
+			LifecycleTransitionRequestKind.Open;
+		const activeOpening = isPendingOpen || !!activeEntering.get();
 		const currentOwnsInterpolator =
 			isInGestureMode ||
 			!nextInterpolator ||
 			isOpeningBeforeStart(
-				activeEntering.get(),
+				activeOpening ? 1 : 0,
 				activeTransitionProgress.get(),
 			);
+		nextInterpolatorReady.set(currentOwnsInterpolator ? 0 : 1);
 
 		const interpolatorOptionsOwner = currentOwnsInterpolator
 			? "current"
@@ -250,4 +263,9 @@ export const useInterpolatedStylesMap = () => {
 
 		return layers;
 	});
+
+	return {
+		localStylesMaps,
+		nextInterpolatorReady,
+	};
 };

package/src/shared/providers/screen/styles/index.tsx

@@ -1,9 +1,14 @@
+export {
+	useComposedSlotStyles,
+	useSlotLayoutStyles,
+	useSlotProps,
+	useSlotStackingStyles,
+	useSlotStyles,
+} from "./hooks/slot-resolvers";
+
 export {
 	ScreenSlotContext,
 	type ScreenSlotName,
 	ScreenSlotProvider,
 	useScreenSlots,
-	useSlotProps,
-	useSlotStackingStyles,
-	useSlotStyles,
 } from "./slot.provider";