react-native-screen-transitions 3.9.0-beta.1 → 3.9.0-beta.3

package/src/shared/components/boundary/portal/utils/ownership.ts

@@ -26,6 +26,29 @@ export type PortalOwnershipSignal =
 			status: "complete";
 	  };
 
+export const isHandoffHostClosingComplete = ({
+	closing,
+	progressAnimating,
+	progressSettled,
+	willAnimate,
+}: {
+	closing: number;
+	progressAnimating: number;
+	progressSettled: number;
+	willAnimate: number;
+}) => {
+	"worklet";
+
+	// A close request marks `closing` before its animation starts. Springs can
+	// also enter their settle-distance threshold before their final frame.
+	return (
+		!!closing &&
+		willAnimate === 0 &&
+		progressSettled === 1 &&
+		progressAnimating === 0
+	);
+};
+
 const hasSeenScreenKey = (screenKeys: ScreenKey[], screenKey: ScreenKey) => {
 	"worklet";
 	for (let index = 0; index < screenKeys.length; index++) {
@@ -36,13 +59,6 @@ const hasSeenScreenKey = (screenKeys: ScreenKey[], screenKey: ScreenKey) => {
 	return false;
 };
 
-export const usesEscapeClippingHost = (
-	link: TagLink | null | undefined,
-): boolean => {
-	"worklet";
-	return link?.source?.handoff === true && link.source.escapeClipping === true;
-};
-
 const isReturningToPreviousSourceHost = ({
 	hostScreenKey,
 	ownerPairKey,
@@ -69,7 +85,7 @@ const isReturningToPreviousSourceHost = ({
 	);
 };
 
-export const canSwitchBoundaryLocalHandoffImmediately = ({
+export const canSwitchHandoffHostImmediately = ({
 	hostScreenKey,
 	ownerPairKey,
 	previousOwnerPairKey,
@@ -118,7 +134,7 @@ const isActiveHandoffLink = ({
 	return !activeId || activeId === linkKey;
 };
 
-const resolveBoundaryLocalStyleOwnerScreenKey = ({
+const resolveHandoffStyleOwnerScreenKey = ({
 	hostScreenKey,
 	isSettledHostReady,
 	settledHostScreenKey,
@@ -160,7 +176,6 @@ const clearSignal = (sourcePairKey: ScreenPairKey): PortalOwnershipSignal => {
 export const resolveBoundaryPortalOwnership = ({
 	boundaryId,
 	currentScreenKey,
-	escapeClipping,
 	handoff,
 	isSettledHostClosingComplete = false,
 	isSettledHostReady = false,
@@ -170,7 +185,6 @@ export const resolveBoundaryPortalOwnership = ({
 }: {
 	boundaryId: string;
 	currentScreenKey: ScreenKey;
-	escapeClipping: boolean;
 	handoff: boolean;
 	isSettledHostClosingComplete?: boolean;
 	isSettledHostReady?: boolean;
@@ -208,7 +222,6 @@ export const resolveBoundaryPortalOwnership = ({
 
 	let hostScreenKey = link.destination.screenKey;
 	let ownerPairKey = sourcePairKey;
-	let previousOwnerPairKey: ScreenPairKey | null = null;
 	const seenScreenKeys: ScreenKey[] = [
 		getSourceScreenKeyFromPairKey(sourcePairKey),
 		hostScreenKey,
@@ -254,7 +267,6 @@ export const resolveBoundaryPortalOwnership = ({
 
 			const nextHostScreenKey = candidate.destination.screenKey;
 
-			previousOwnerPairKey = ownerPairKey;
 			ownerPairKey = candidatePairKey;
 			hostScreenKey = nextHostScreenKey;
 
@@ -283,27 +295,16 @@ export const resolveBoundaryPortalOwnership = ({
 		break;
 	}
 
-	const ownerLink = getPairLink(pairsState, ownerPairKey, linkKey);
-	const ownerUsesEscapeClipping =
-		ownerLink?.source?.escapeClipping ?? escapeClipping;
-
-	if (
-		!ownerUsesEscapeClipping &&
-		isSettledHostClosingComplete &&
-		settledHostScreenKey === hostScreenKey &&
-		previousOwnerPairKey
-	) {
+	if (isSettledHostClosingComplete && settledHostScreenKey === hostScreenKey) {
 		hostScreenKey = getSourceScreenKeyFromPairKey(ownerPairKey);
 	}
 
-	const ownerScreenKey = ownerUsesEscapeClipping
-		? getSourceScreenKeyFromPairKey(ownerPairKey)
-		: resolveBoundaryLocalStyleOwnerScreenKey({
-				hostScreenKey,
-				isSettledHostReady,
-				settledHostScreenKey,
-				sourceScreenKey: getSourceScreenKeyFromPairKey(ownerPairKey),
-			});
+	const ownerScreenKey = resolveHandoffStyleOwnerScreenKey({
+		hostScreenKey,
+		isSettledHostReady,
+		settledHostScreenKey,
+		sourceScreenKey: getSourceScreenKeyFromPairKey(ownerPairKey),
+	});
 
 	return {
 		hostScreenKey,
@@ -312,60 +313,3 @@ export const resolveBoundaryPortalOwnership = ({
 		status: "complete",
 	};
 };
-
-export const hasHandoffEscapeContinuation = ({
-	linkKey,
-	linkState,
-	sourceScreenKey,
-}: {
-	linkKey: string;
-	linkState: LinkPairsState;
-	sourceScreenKey: ScreenKey;
-}) => {
-	"worklet";
-	const pairKeys = Object.keys(linkState);
-	const visitedScreenKeys: ScreenKey[] = [];
-	let cursorScreenKey = sourceScreenKey;
-
-	for (let hop = 0; hop < pairKeys.length; hop++) {
-		if (hasSeenScreenKey(visitedScreenKeys, cursorScreenKey)) {
-			return false;
-		}
-		visitedScreenKeys.push(cursorScreenKey);
-
-		let previousScreenKey: ScreenKey | null = null;
-		for (let index = 0; index < pairKeys.length; index++) {
-			const candidatePairKey = pairKeys[index];
-			const link = candidatePairKey
-				? linkState[candidatePairKey]?.links?.[linkKey]
-				: null;
-
-			if (
-				!link?.source ||
-				!link.destination ||
-				link.destination.screenKey !== cursorScreenKey
-			) {
-				continue;
-			}
-
-			if (usesEscapeClippingHost(link)) {
-				return true;
-			}
-
-			if (!link.source.handoff) {
-				return false;
-			}
-
-			previousScreenKey = link.source.screenKey;
-			break;
-		}
-
-		if (!previousScreenKey) {
-			return false;
-		}
-
-		cursorScreenKey = previousScreenKey;
-	}
-
-	return false;
-};

package/src/shared/components/boundary/providers/boundary-root.provider.tsx

@@ -1,13 +1,36 @@
-import { type ReactNode, useCallback, useMemo, useState } from "react";
+import {
+	type ForwardedRef,
+	type ReactNode,
+	useCallback,
+	useImperativeHandle,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
 import type { View } from "react-native";
 import type { AnimatedRef, StyleProps } from "react-native-reanimated";
 import { useAnimatedRef } from "react-native-reanimated";
+import { useDescriptorsStore } from "../../../providers/screen/descriptors";
+import {
+	useComposedSlotStyles,
+	useSlotStackingStyles,
+} from "../../../providers/screen/styles";
+import { createBoundTag } from "../../../stores/bounds/helpers/link-pairs.helpers";
 import type { BoundTag } from "../../../stores/bounds/types";
 import createProvider from "../../../utils/create-provider";
 import { logger } from "../../../utils/logger";
-import type { BoundaryPortalRuntime } from "../portal/utils/resolve-portal";
+import { useBoundaryMeasurement } from "../hooks/use-boundary-measurement";
+import {
+	type BoundaryPortalRuntime,
+	resolveBoundaryPortal,
+} from "../portal/utils/resolve-portal";
+import type {
+	BoundaryConfigProps,
+	BoundaryId,
+	BoundaryOwnProps,
+} from "../types";
 
-interface BoundaryRootContextValue {
+interface BoundaryRootContextValue extends BoundaryRootRenderState {
 	registerTargetRef: (
 		targetRef: AnimatedRef<View>,
 		preparedStyles: StyleProps,
@@ -33,83 +56,200 @@ const MULTIPLE_TARGETS_WARNING =
 export const TARGET_OUTSIDE_ROOT_WARNING =
 	"Boundary.Target must be rendered inside Transition.Boundary or a component created by createBoundaryComponent.";
 
-interface BoundaryRootProps {
-	value: BoundaryRootContextValue;
-	children: ReactNode;
-}
-
-export const { BoundaryRootProvider, useBoundaryRootContext } = createProvider(
-	"BoundaryRoot",
-	{ guarded: false },
-)<BoundaryRootProps, BoundaryRootContextValue>((props) => props);
-
-export const useBoundaryRootState = (params: {
+export type BoundaryRootRenderState = {
+	attachedStyle: unknown;
 	boundTag: BoundTag;
+	currentScreenKey: string;
+	handoffEnabled: boolean;
 	portalRuntime: BoundaryPortalRuntime;
-	rootMeasurementRef?: AnimatedRef<View>;
-}) => {
-	const { boundTag, portalRuntime, rootMeasurementRef } = params;
-	const rootRef = useAnimatedRef<View>();
-	const [targetEntry, setTargetEntry] = useState<BoundaryTargetEntry | null>(
-		null,
-	);
-
-	const registerTargetRef = useCallback(
-		(
-			targetRef: AnimatedRef<View>,
-			preparedStyles: StyleProps,
-			measurementRef?: AnimatedRef<View>,
-		) => {
-			setTargetEntry((prev) => {
-				if (prev?.ref === targetRef) {
-					return prev;
-				}
-
-				if (__DEV__ && prev !== null) {
-					logger.warnOnce(
-						"boundary:multiple-targets",
-						MULTIPLE_TARGETS_WARNING,
-					);
-				}
+	ref: AnimatedRef<View>;
+	rootEscapePlaceholderRef: AnimatedRef<View>;
+	shouldRenderBoundaryRootThroughPortal: boolean;
+	shouldRenderHandoffHost: boolean;
+};
+
+type BoundaryRootProviderProps = Pick<
+	BoundaryOwnProps,
+	"enabled" | "escapeClipping" | "group" | "handoff"
+> & {
+	children: (state: BoundaryRootRenderState) => ReactNode;
+	config: BoundaryConfigProps;
+	forwardedRef?: ForwardedRef<any>;
+	id: BoundaryId;
+	style?: unknown;
+};
+
+export const {
+	BoundaryRootProvider,
+	useBoundaryRootContext,
+	useBoundaryRootStore,
+} = createProvider("BoundaryRoot", { guarded: false })<
+	BoundaryRootProviderProps,
+	BoundaryRootContextValue
+>(
+	({
+		children,
+		config,
+		enabled = true,
+		escapeClipping,
+		forwardedRef,
+		group,
+		handoff,
+		id,
+		style,
+	}) => {
+		const requestedBoundTag = useMemo(
+			() => createBoundTag(String(id), group),
+			[id, group],
+		);
+		const portalRuntime = resolveBoundaryPortal({
+			handoff,
+			escapeClipping,
+		});
+
+		const currentScreenKey = useDescriptorsStore(
+			(s) => s.derivations.currentScreenKey,
+		);
+		const currentActivity = useDescriptorsStore(
+			(s) => s.descriptors.current.activity,
+		);
+		const retainedBoundTagRef = useRef(requestedBoundTag);
+		const shouldRetainClosingBoundTag =
+			portalRuntime.handoff && currentActivity === "closing";
+
+		// Navigation can update a retained closing route's params before that
+		// route leaves the stack. Keep its handoff identity stable so the payload
+		// remains attached to the closing destination instead of being orphaned.
+		if (!shouldRetainClosingBoundTag) {
+			retainedBoundTagRef.current = requestedBoundTag;
+		}
+
+		const boundTag = retainedBoundTagRef.current;
+		const hasConfiguredInterpolator = useDescriptorsStore(
+			(s) => s.derivations.hasConfiguredInterpolator,
+		);
+		const runtimeEnabled = enabled && hasConfiguredInterpolator;
+		// Associated slot styles attach whenever the boundary is enabled,
+		// independent of whether an interpolator is configured for this transition.
+		const shouldAttachAssociatedStyles = enabled;
+		const shouldEscapeBoundaryRootToScreenHost = portalRuntime.escapeClipping;
+
+		const associatedStyles = useComposedSlotStyles(boundTag.tag, style);
+		const associatedStackingStyles = useSlotStackingStyles(boundTag.tag);
+		const rootRef = useAnimatedRef<View>();
+		const rootEscapePlaceholderRef = useAnimatedRef<View>();
+		const [targetEntry, setTargetEntry] = useState<BoundaryTargetEntry | null>(
+			null,
+		);
 
-				return (
-					prev ?? {
-						ref: targetRef,
-						measurementRef: measurementRef ?? targetRef,
-						preparedStyles,
+		const registerTargetRef = useCallback(
+			(
+				targetRef: AnimatedRef<View>,
+				preparedStyles: StyleProps,
+				measurementRef?: AnimatedRef<View>,
+			) => {
+				setTargetEntry((prev) => {
+					if (prev?.ref === targetRef) {
+						return prev;
 					}
-				);
-			});
-		},
-		[],
-	);
-
-	const unregisterTargetRef = useCallback((targetRef: AnimatedRef<View>) => {
-		setTargetEntry((prev) => (prev?.ref === targetRef ? null : prev));
-	}, []);
-
-	const contextValue = useMemo(
-		() => ({
-			registerTargetRef,
-			unregisterTargetRef,
-			activeTargetRef: targetEntry?.ref ?? null,
-			boundTag,
-			portalRuntime,
-		}),
-		[
-			registerTargetRef,
-			unregisterTargetRef,
-			targetEntry,
+
+					if (__DEV__ && prev !== null) {
+						logger.warnOnce(
+							"boundary:multiple-targets",
+							MULTIPLE_TARGETS_WARNING,
+						);
+					}
+
+					return (
+						prev ?? {
+							ref: targetRef,
+							measurementRef: measurementRef ?? targetRef,
+							preparedStyles,
+						}
+					);
+				});
+			},
+			[],
+		);
+
+		const unregisterTargetRef = useCallback((targetRef: AnimatedRef<View>) => {
+			setTargetEntry((prev) => (prev?.ref === targetRef ? null : prev));
+		}, []);
+
+		const rootMeasurementRef = shouldEscapeBoundaryRootToScreenHost
+			? rootEscapePlaceholderRef
+			: rootRef;
+		const measuredRef = targetEntry?.measurementRef ?? rootMeasurementRef;
+		const hasActiveTarget = targetEntry !== null;
+		const targetPreparedStyles = targetEntry?.preparedStyles;
+
+		useImperativeHandle(forwardedRef, () => rootRef.current as any, [rootRef]);
+
+		useBoundaryMeasurement({
 			boundTag,
-			portalRuntime,
-		],
-	);
-
-	return {
-		ref: rootRef,
-		contextValue,
-		hasActiveTarget: targetEntry !== null,
-		measuredRef: targetEntry?.measurementRef ?? rootMeasurementRef ?? rootRef,
-		targetPreparedStyles: targetEntry?.preparedStyles,
-	};
-};
+			enabled,
+			runtimeEnabled,
+			currentScreenKey,
+			measuredRef,
+			style,
+			targetPreparedStyles,
+			handoff: portalRuntime.handoff,
+			escapeClipping: portalRuntime.escapeClipping,
+			config,
+		});
+
+		const shouldRenderBoundaryRootThroughPortal =
+			shouldEscapeBoundaryRootToScreenHost && !hasActiveTarget;
+		const handoffEnabled = enabled && portalRuntime.handoff;
+		// A nested active target takes the full associated style, so the root keeps
+		// only its stacking context. Root-owned escape-clipping moves the root
+		// through a screen host, so its associated style is applied through the
+		// host instead of inline on the escaped element.
+		// Host-only handoff receivers still need the associated style: their
+		// handoff host is absolute-filled inside this root, so the root is the
+		// visual frame that animates the received payload.
+		const attachedStyle = shouldAttachAssociatedStyles
+			? hasActiveTarget
+				? associatedStackingStyles
+				: shouldRenderBoundaryRootThroughPortal
+					? undefined
+					: associatedStyles
+			: undefined;
+
+		const value = useMemo<BoundaryRootContextValue>(
+			() => ({
+				attachedStyle,
+				activeTargetRef: targetEntry?.ref ?? null,
+				boundTag,
+				currentScreenKey,
+				handoffEnabled,
+				portalRuntime,
+				registerTargetRef,
+				ref: rootRef,
+				rootEscapePlaceholderRef,
+				shouldRenderBoundaryRootThroughPortal,
+				shouldRenderHandoffHost: handoffEnabled && !hasActiveTarget,
+				unregisterTargetRef,
+			}),
+			[
+				attachedStyle,
+				boundTag,
+				currentScreenKey,
+				handoffEnabled,
+				hasActiveTarget,
+				portalRuntime,
+				registerTargetRef,
+				rootRef,
+				rootEscapePlaceholderRef,
+				shouldRenderBoundaryRootThroughPortal,
+				targetEntry,
+				unregisterTargetRef,
+			],
+		);
+
+		return {
+			value,
+			children: children(value),
+		};
+	},
+);

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

@@ -7,14 +7,27 @@ import type {
 	ScreenPairKey,
 } from "../../../stores/bounds/types";
 
-export const getInitialDestinationMeasurePairKey = (params: {
+export type InitialDestinationMeasurementAction =
+	| "wait"
+	| "release"
+	| "measure"
+	| "complete";
+
+export type InitialDestinationMeasurementSignal = {
+	pairKey: ScreenPairKey;
+	action: InitialDestinationMeasurementAction;
+};
+
+export const getInitialDestinationMeasurementSignal = (params: {
 	enabled: boolean;
 	destinationPairKey?: ScreenPairKey;
 	ancestorDestinationPairKey?: ScreenPairKey;
 	linkId: string;
 	group?: string;
+	destinationPresent: boolean;
+	sourcePresent: boolean;
 	linkState?: LinkPairsState;
-}): ScreenPairKey | null => {
+}): InitialDestinationMeasurementSignal | null => {
 	"worklet";
 	const {
 		enabled,
@@ -22,30 +35,41 @@ export const getInitialDestinationMeasurePairKey = (params: {
 		ancestorDestinationPairKey,
 		linkId,
 		group,
+		destinationPresent,
+		sourcePresent,
 		linkState,
 	} = params;
-	const measurePairKey = destinationPairKey ?? ancestorDestinationPairKey;
+	const pairKey = destinationPairKey ?? ancestorDestinationPairKey;
 
-	if (!enabled || !measurePairKey) {
+	if (!enabled || !pairKey) {
 		return null;
 	}
 
-	const linkKey = getLinkKeyFromTag(linkId);
-	const hasDestination =
-		linkState?.[measurePairKey]?.links?.[linkKey]?.destination;
+	if (!destinationPresent) {
+		return { pairKey, action: "wait" };
+	}
 
-	if (hasDestination) {
-		return null;
+	if (!sourcePresent) {
+		return { pairKey, action: "release" };
 	}
 
+	const linkKey = getLinkKeyFromTag(linkId);
 	const activeGroupId =
-		group && linkState
-			? getActiveGroupId(linkState, measurePairKey, group)
-			: null;
+		group && linkState ? getActiveGroupId(linkState, pairKey, group) : null;
 
 	if (activeGroupId && activeGroupId !== linkKey) {
-		return null;
+		return { pairKey, action: "release" };
+	}
+
+	const link = linkState?.[pairKey]?.links?.[linkKey];
+
+	if (!link?.destination) {
+		return { pairKey, action: "measure" };
+	}
+
+	if (!link.source) {
+		return { pairKey, action: "wait" };
 	}
 
-	return measurePairKey;
+	return { pairKey, action: "complete" };
 };

package/src/shared/components/boundary/utils/measured-bounds.ts

@@ -96,6 +96,54 @@ export const isMeasurementInViewport = (
 	);
 };
 
+export const normalizeMeasuredBoundsWithVisibilityGate = ({
+	measured,
+	origin,
+	visibilityBlocked,
+	visibilityBlockOffset,
+	viewportWidth,
+	viewportHeight,
+}: {
+	measured: MeasuredDimensions;
+	origin: MeasuredDimensions;
+	visibilityBlocked: boolean;
+	visibilityBlockOffset: number;
+	viewportWidth: number;
+	viewportHeight: number;
+}): MeasuredDimensions => {
+	"worklet";
+	const normalized = normalizeMeasuredBoundsToOrigin(measured, origin);
+
+	if (
+		!visibilityBlocked ||
+		visibilityBlockOffset <= 0 ||
+		isMeasurementInViewport(normalized, viewportWidth, viewportHeight)
+	) {
+		return normalized;
+	}
+
+	// Fabric can expose the visibility transform to one native measurement one
+	// frame before the other. Prefer normal origin-relative coordinates, then
+	// test either side of that known frame skew while the gate is active.
+	const measuredAhead = {
+		...normalized,
+		pageY: normalized.pageY - visibilityBlockOffset,
+	};
+	if (isMeasurementInViewport(measuredAhead, viewportWidth, viewportHeight)) {
+		return measuredAhead;
+	}
+
+	const originAhead = {
+		...normalized,
+		pageY: normalized.pageY + visibilityBlockOffset,
+	};
+	if (isMeasurementInViewport(originAhead, viewportWidth, viewportHeight)) {
+		return originAhead;
+	}
+
+	return normalized;
+};
+
 export const measureWithOverscrollAwareness = (
 	ref: AnimatedRef<View>,
 	scrollState: ScrollGestureState | null,

package/src/shared/components/screen-container/layers/content.tsx

@@ -8,7 +8,7 @@ import { useGestureContext } from "../../../providers/screen/gestures";
 import { OriginProvider } from "../../../providers/screen/origin.provider";
 import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
 import type { ScreenContentComponentProps } from "../../../types";
-import { ScreenFallbackHost } from "../../boundary/portal/components/host";
+import { ScreenFallbackHost } from "../../boundary/portal/components/boundary-portal/components/host";
 import { useContentLayout } from "../hooks/use-content-layout";
 import { MaybeMaskedNavigationContainer } from "./maybe-masked-navigation-container";
 import { usesLayerRenderProps } from "./render-component";

package/src/shared/configs/presets.ts

@@ -434,7 +434,7 @@ export const SharedAppleMusic = ({
 			const dragXScale = interpolate(normX, [0, 1], xScaleOuput);
 			const dragYScale = interpolate(normY, [0, 1], yScaleOuput);
 
-			const boundValues = bounds({ id: sharedBoundTag }).math({
+			const boundValues = bounds({ id: sharedBoundTag }).values({
 				method: focused ? "content" : "transform",
 				anchor: "top",
 				scaleMode: "uniform",
@@ -453,7 +453,7 @@ export const SharedAppleMusic = ({
 			 * ===============================
 			 */
 			if (focused) {
-				const maskedValues = bounds({ id: sharedBoundTag }).math({
+				const maskedValues = bounds({ id: sharedBoundTag }).values({
 					space: "absolute",
 					method: "size",
 					target: "fullscreen",

package/src/shared/constants.ts

@@ -53,12 +53,16 @@ const DEFAULT_GESTURE_VALUES = {
 	velocity: 0,
 	focalX: 0,
 	focalY: 0,
+	pinchOriginX: 0,
+	pinchOriginY: 0,
 	raw: DEFAULT_RAW_GESTURE_VALUES,
 	handoff: {
 		...DEFAULT_RAW_GESTURE_VALUES,
 		velocity: 0,
 		focalX: 0,
 		focalY: 0,
+		pinchOriginX: 0,
+		pinchOriginY: 0,
 		raw: DEFAULT_RAW_GESTURE_VALUES,
 		active: null,
 		direction: null,