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

package/src/shared/components/boundary/components/boundary-target.tsx

@@ -1,19 +1,20 @@
 import type React from "react";
-import { memo, useMemo } from "react";
-import type { View } from "react-native";
-import Animated, { useAnimatedRef } from "react-native-reanimated";
+import { memo, useLayoutEffect } from "react";
+import Animated from "react-native-reanimated";
 import {
 	useComposedSlotStyles,
 	useSlotLayoutStyles,
 } from "../../../providers/screen/styles";
-import { prepareStyleForBounds } from "../../../utils/bounds/helpers/styles/styles";
-import { useRegisterTarget } from "../hooks/use-register-target";
+import { logger } from "../../../utils/logger";
 import {
 	BoundaryContentPortal,
 	BoundaryContentPortalHost,
 } from "../portal/components/boundary-content-portal";
 import { BoundaryPortal } from "../portal/components/boundary-portal";
-import { useBoundaryRootContext } from "../providers/boundary-root.provider";
+import {
+	TARGET_OUTSIDE_ROOT_WARNING,
+	useBoundaryRootContext,
+} from "../providers/boundary-root.provider";
 
 type BoundaryTargetProps = Omit<
 	React.ComponentProps<typeof Animated.View>,
@@ -22,19 +23,26 @@ type BoundaryTargetProps = Omit<
 	children?: React.ReactNode;
 };
 
-export const BoundaryTarget = memo(function BoundaryTarget(
-	props: BoundaryTargetProps,
-) {
-	const { children, pointerEvents, style, ...rest } = props;
-	const targetAnimatedRef = useAnimatedRef<View>();
-	const targetEscapePlaceholderRef = useAnimatedRef<View>();
+export const BOUNDARY_TARGET_ACTIVE_PROP = "__boundaryTargetActive" as const;
+type InternalBoundaryTargetProps = BoundaryTargetProps & {
+	[BOUNDARY_TARGET_ACTIVE_PROP]?: boolean;
+};
+
+const BoundaryTargetInner = (props: InternalBoundaryTargetProps) => {
+	const {
+		[BOUNDARY_TARGET_ACTIVE_PROP]: active,
+		children,
+		pointerEvents,
+		style,
+		...rest
+	} = props;
 	const rootContext = useBoundaryRootContext();
 	const boundaryId = rootContext?.boundTag.tag;
-	const isActiveTarget = rootContext?.activeTargetRef === targetAnimatedRef;
+	const isActiveTarget = active === true && rootContext !== null;
 	const portalRuntime = rootContext?.portalRuntime;
 	const handoffEnabled = isActiveTarget && rootContext?.handoffEnabled === true;
 	const shouldEscapeTargetToScreenHost =
-		portalRuntime?.escapeClipping === true && boundaryId !== undefined;
+		isActiveTarget && portalRuntime?.escapeClipping === true;
 
 	const shouldApplyAssociatedStyleInline =
 		isActiveTarget && portalRuntime?.escapeClipping !== true;
@@ -46,24 +54,26 @@ export const BoundaryTarget = memo(function BoundaryTarget(
 		style,
 	);
 	const portalLayoutStyle = useSlotLayoutStyles(rootContext?.boundTag.tag);
-	const preparedStyles = useMemo(() => prepareStyleForBounds(style), [style]);
-
-	const measurementRef = shouldEscapeTargetToScreenHost
-		? targetEscapePlaceholderRef
-		: targetAnimatedRef;
+	const measurementRef = isActiveTarget
+		? rootContext.measurementRef
+		: undefined;
 
-	useRegisterTarget({ preparedStyles, measurementRef, targetAnimatedRef });
+	useLayoutEffect(() => {
+		if (__DEV__ && rootContext === null) {
+			logger.warn(TARGET_OUTSIDE_ROOT_WARNING);
+		}
+	}, [rootContext]);
 
 	return (
 		<BoundaryPortal
 			boundaryId={boundaryId ?? ""}
 			enabled={shouldEscapeTargetToScreenHost}
-			placeholderRef={targetEscapePlaceholderRef}
+			placeholderRef={measurementRef}
 		>
 			<Animated.View
 				{...rest}
 				pointerEvents={pointerEvents}
-				ref={targetAnimatedRef}
+				ref={shouldEscapeTargetToScreenHost ? undefined : measurementRef}
 				style={[
 					style,
 					shouldApplyAssociatedStyleInline ? associatedTargetStyles : undefined,
@@ -86,4 +96,8 @@ export const BoundaryTarget = memo(function BoundaryTarget(
 			</Animated.View>
 		</BoundaryPortal>
 	);
-});
+};
+
+export const BoundaryTarget = memo(
+	BoundaryTargetInner,
+) as React.NamedExoticComponent<BoundaryTargetProps>;

package/src/shared/components/boundary/create-boundary-component.tsx

@@ -1,9 +1,20 @@
-import { type ComponentType, forwardRef, memo } from "react";
+import {
+	type ComponentType,
+	cloneElement,
+	forwardRef,
+	memo,
+	useMemo,
+} from "react";
 import Animated from "react-native-reanimated";
+import {
+	BOUNDARY_TARGET_ACTIVE_PROP,
+	BoundaryTarget,
+} from "./components/boundary-target";
 import { BoundaryContentPortalHost } from "./portal/components/boundary-content-portal";
 import { BoundaryPortal } from "./portal/components/boundary-portal";
 import { BoundaryRootProvider } from "./providers/boundary-root.provider";
 import type { BoundaryComponentProps } from "./types";
+import { resolveBoundaryTarget } from "./utils/resolve-boundary-target";
 
 interface CreateBoundaryComponentOptions {
 	alreadyAnimated?: boolean;
@@ -36,6 +47,18 @@ export function createBoundaryComponent<P extends object>(
 			children,
 			...rest
 		} = props as any;
+		const targetResolution = useMemo(() => {
+			return resolveBoundaryTarget(children, {
+				isTarget: (element) => element.type === BoundaryTarget,
+				mapTarget: (element, selected) =>
+					cloneElement(element, {
+						[BOUNDARY_TARGET_ACTIVE_PROP]: selected,
+					} as any),
+			});
+		}, [children]);
+		const targetStyle = (
+			targetResolution.target?.props as { style?: unknown } | undefined
+		)?.style;
 
 		return (
 			<BoundaryRootProvider
@@ -45,14 +68,17 @@ export function createBoundaryComponent<P extends object>(
 				forwardedRef={forwardedRef}
 				group={group}
 				handoff={handoff}
+				hasTarget={targetResolution.target !== null}
 				id={id}
 				style={style}
+				targetCount={targetResolution.targetCount}
+				targetStyle={targetStyle}
 			>
 				{(root) => (
 					<BoundaryPortal
 						boundaryId={root.boundTag.tag}
 						enabled={root.shouldRenderBoundaryRootThroughPortal}
-						placeholderRef={root.rootEscapePlaceholderRef}
+						placeholderRef={root.measurementRef}
 					>
 						<AnimatedComponent
 							{...rest}
@@ -65,7 +91,7 @@ export function createBoundaryComponent<P extends object>(
 								enabled={root.shouldRenderHandoffHost}
 								screenKey={root.currentScreenKey}
 							>
-								{children}
+								{targetResolution.children}
 							</BoundaryContentPortalHost>
 						</AnimatedComponent>
 					</BoundaryPortal>

package/src/shared/components/boundary/hooks/lifecycles/use-refresh-boundary.ts

@@ -3,6 +3,7 @@ import { useDescriptorsStore } from "../../../../providers/screen/descriptors";
 import { AnimationStore } from "../../../../stores/animation.store";
 import { pairs } from "../../../../stores/bounds/internals/state";
 import type { BoundTag } from "../../../../stores/bounds/types";
+import { GestureStore } from "../../../../stores/gesture.store";
 import type { MeasureBoundary } from "../../types";
 import { getRefreshBoundarySignal } from "../../utils/refresh-signals";
 
@@ -46,6 +47,12 @@ export const useRefreshBoundary = ({
 		refreshScreenKey,
 		"transitionProgress",
 	);
+	const refreshDragging = GestureStore.getValue(refreshScreenKey, "dragging");
+	const refreshDismissing = GestureStore.getValue(
+		refreshScreenKey,
+		"dismissing",
+	);
+	const refreshSettling = GestureStore.getValue(refreshScreenKey, "settling");
 
 	useAnimatedReaction(
 		() => {
@@ -64,6 +71,10 @@ export const useRefreshBoundary = ({
 				entering: !!refreshEntering.get(),
 				animating: !!refreshAnimating.get(),
 				progress: refreshProgress.get(),
+				gestureInProgress:
+					!!refreshDragging.get() ||
+					!!refreshDismissing.get() ||
+					!!refreshSettling.get(),
 				linkState: pairs.get(),
 			});
 		},

package/src/shared/components/boundary/hooks/use-boundary-measurement.ts

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import type { View } from "react-native";
-import type { AnimatedRef, StyleProps } from "react-native-reanimated";
+import type { AnimatedRef } from "react-native-reanimated";
 import type { BoundTag } from "../../../stores/bounds/types";
 import { prepareStyleForBounds } from "../../../utils/bounds/helpers/styles/styles";
 import type { BoundaryConfigProps } from "../types";
@@ -19,9 +19,8 @@ interface UseBoundaryMeasurementParams {
 	currentScreenKey: string;
 	/** Surface to measure: a nested target's placeholder, else the root. */
 	measuredRef: AnimatedRef<View>;
-	/** Root's own style; ignored when a nested target supplies its own. */
+	/** Style belonging to the selected measurement surface. */
 	style?: unknown;
-	targetPreparedStyles?: StyleProps;
 	handoff: boolean;
 	escapeClipping: boolean;
 	config: BoundaryConfigProps;
@@ -39,7 +38,6 @@ export const useBoundaryMeasurement = ({
 	currentScreenKey,
 	measuredRef,
 	style,
-	targetPreparedStyles,
 	handoff,
 	escapeClipping,
 	config,
@@ -50,11 +48,7 @@ export const useBoundaryMeasurement = ({
 		[anchor, scaleMode, target, method],
 	);
 
-	const rootPreparedStyles = useMemo(
-		() => prepareStyleForBounds(style),
-		[style],
-	);
-	const preparedStyles = targetPreparedStyles ?? rootPreparedStyles;
+	const preparedStyles = useMemo(() => prepareStyleForBounds(style), [style]);
 
 	const measureBoundary = useMeasurer({
 		enabled,

package/src/shared/components/boundary/index.tsx

@@ -1,10 +1,6 @@
 import { forwardRef } from "react";
-import {
-	Pressable,
-	type PressableProps,
-	View,
-	type ViewProps,
-} from "react-native";
+import { View, type ViewProps } from "react-native";
+import { Pressable, type PressableProps } from "react-native-gesture-handler";
 import { BoundaryTarget } from "./components/boundary-target";
 import { createBoundaryComponent } from "./create-boundary-component";
 import { Host } from "./portal";
@@ -52,12 +48,12 @@ type BoundaryRootComponent = typeof BoundaryRoot;
  *
  * Use:
  * - `Boundary` for passive and pressable shared elements.
- * - `Boundary.Target` to measure a nested descendant instead of the root.
+ * - `Boundary.Target` as a direct child to measure it instead of the root.
  * - `Boundary.Host` to make clipping-escape host placement explicit.
  */
 export interface BoundaryComponent extends BoundaryRootComponent {
 	/**
-	 * Optional nested measurement override inside a boundary root.
+	 * Optional direct-child measurement override inside a boundary root.
 	 */
 	Target: typeof BoundaryTarget;
 	/**

package/src/shared/components/boundary/portal/components/boundary-content-portal/hooks/use-boundary-content-portal-attachment.ts

@@ -1,317 +1,115 @@
-import { useCallback, useLayoutEffect, useState } from "react";
 import {
-	runOnJS,
+	type SharedValue,
 	useAnimatedProps,
-	useAnimatedReaction,
 	useSharedValue,
 } from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
 import { useScreenSlots } from "../../../../../../providers/screen/styles";
-import { useRegisteredScreenSlots } from "../../../../../../providers/screen/styles/stores/slot-references.store";
+import { hasCloseTransitionFinished } from "../../../../../../providers/screen/styles/helpers/transition-visual-state";
 import { AnimationStore } from "../../../../../../stores/animation.store";
-import { getSourceScreenKeyFromPairKey } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
 import { pairs } from "../../../../../../stores/bounds/internals/state";
+import { SystemStore } from "../../../../../../stores/system.store";
+import { resolveEnteringHandoffTarget } from "../../../utils/handoff-target";
 import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
-import {
-	canSwitchHandoffHostImmediately,
-	isHandoffHostClosingComplete,
-	type PortalOwnershipSignal,
-	resolveBoundaryPortalOwnership,
-} from "../../../utils/ownership";
-import { shallowEqual } from "../../../utils/shallow-equal";
-import { shouldAttachBoundaryPortal } from "../../../utils/teleport-control";
-import { resolveNextVisiblePortalHostName } from "../../../utils/visible-host";
+import { isTeleportEnabled } from "../../../utils/teleport-control";
 import { createBoundaryContentPortalHostName } from "../helpers/host-name";
 
 interface UseBoundaryContentPortalAttachmentParams {
 	boundaryId: string;
-	enabled: boolean;
 }
 
+type AttachedDestination = {
+	animationProgress: SharedValue<number>;
+	closing: SharedValue<number>;
+	screenKey: string;
+};
+
 export const useBoundaryContentPortalAttachment = ({
 	boundaryId,
-	enabled,
 }: UseBoundaryContentPortalAttachmentParams) => {
-	const ownScreenSlots = useScreenSlots();
+	const { slotsMap } = useScreenSlots();
 	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
 	const currentScreenKey = useDescriptorsStore(
 		(s) => s.derivations.currentScreenKey,
 	);
-	const [ownership, setOwnership] = useState<Extract<
-		PortalOwnershipSignal,
-		{ status: "complete" }
-	> | null>(null);
-
-	const styleOwnerScreenKey = ownership?.ownerScreenKey ?? currentScreenKey;
-	const ownerScreenSlots = useRegisteredScreenSlots(styleOwnerScreenKey);
-	const activeScreenSlots = ownerScreenSlots ?? ownScreenSlots;
-	const {
-		nextInterpolatorReady: activeNextInterpolatorReady,
-		slotsMap: activeSlotsMap,
-	} = activeScreenSlots;
-	const requestedPortalHostName = useSharedValue<string | null>(null);
-	const visiblePortalHostName = useSharedValue<string | null>(null);
-	const canSwitchPortalHostImmediately = useSharedValue(0);
-
-	const targetScreenKey = ownership ? ownership.hostScreenKey : null;
-	const settledHostScreenKey = ownership?.hostScreenKey ?? null;
-	const settledHostProgress = AnimationStore.getValue(
-		settledHostScreenKey ?? currentScreenKey,
-		"progressSettled",
-	);
-	const settledHostAnimating = AnimationStore.getValue(
-		settledHostScreenKey ?? currentScreenKey,
-		"progressAnimating",
-	);
-	const settledHostWillAnimate = AnimationStore.getValue(
-		settledHostScreenKey ?? currentScreenKey,
-		"willAnimate",
+	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
+	const destinationScreenKey = nextScreenKey ?? currentScreenKey;
+	const destinationAnimationProgress = SystemStore.getValue(
+		destinationScreenKey,
+		"animationProgress",
 	);
-	const settledHostClosing = AnimationStore.getValue(
-		settledHostScreenKey ?? currentScreenKey,
+	const destinationClosing = AnimationStore.getValue(
+		destinationScreenKey,
 		"closing",
 	);
-	const handoffHostName =
-		targetScreenKey !== null
-			? createBoundaryContentPortalHostName(targetScreenKey, boundaryId)
-			: null;
-
-	const updatePortalOwnership = useCallback(
-		(
-			hostScreenKey: string | null,
-			ownerPairKey?: string,
-			ownerScreenKey?: string,
-		) => {
-			if (hostScreenKey && ownerPairKey && ownerScreenKey) {
-				setOwnership((current) => {
-					if (
-						current?.hostScreenKey === hostScreenKey &&
-						current.ownerPairKey === ownerPairKey &&
-						current.ownerScreenKey === ownerScreenKey
-					) {
-						return current;
-					}
-
-					return {
-						hostScreenKey,
-						ownerPairKey,
-						ownerScreenKey,
-						status: "complete",
-					};
-				});
-				return;
-			}
-
-			setOwnership((current) => (current ? null : current));
-		},
-		[],
-	);
-
-	useLayoutEffect(() => {
-		if (!enabled || !ownership || !handoffHostName) {
-			requestedPortalHostName.set(null);
-			visiblePortalHostName.set(null);
-			return;
-		}
-
-		requestedPortalHostName.set(handoffHostName);
-	}, [
-		enabled,
-		handoffHostName,
-		ownership,
-		requestedPortalHostName,
-		visiblePortalHostName,
-	]);
-
-	useLayoutEffect(() => {
-		return () => {
-			requestedPortalHostName.set(null);
-			visiblePortalHostName.set(null);
-		};
-	}, [requestedPortalHostName, visiblePortalHostName]);
-
-	useAnimatedReaction(
-		() => {
-			"worklet";
-			if (!enabled) {
-				return {
-					hostScreenKey: null,
-					ownerPairKey: sourcePairKey,
-					ownerScreenKey: null,
-					status: "clear",
-				};
-			}
-
-			const progressAnimating = settledHostAnimating.get();
-			const progressSettled = settledHostProgress.get();
-			const willAnimate = settledHostWillAnimate.get();
-			const closing = settledHostClosing.get();
-			const isOwnedHostClosing =
-				!!closing &&
-				!!ownership &&
-				settledHostScreenKey === ownership.hostScreenKey;
-
-			if (isOwnedHostClosing && ownership) {
-				const isClosingComplete = isHandoffHostClosingComplete({
-					closing,
-					progressAnimating,
-					progressSettled,
-					willAnimate,
-				});
-
-				if (!isClosingComplete) {
-					return ownership;
-				}
-
-				const sourceScreenKey = getSourceScreenKeyFromPairKey(
-					ownership.ownerPairKey,
-				);
-
-				return {
-					hostScreenKey: sourceScreenKey,
-					ownerPairKey: ownership.ownerPairKey,
-					ownerScreenKey: sourceScreenKey,
-					status: "complete",
-				};
-			}
-
-			if (!sourcePairKey) {
-				return {
-					hostScreenKey: null,
-					ownerPairKey: sourcePairKey,
-					ownerScreenKey: null,
-					status: "clear",
-				};
-			}
-
-			return resolveBoundaryPortalOwnership({
-				boundaryId,
-				currentScreenKey,
-				handoff: true,
-				isSettledHostClosingComplete: isHandoffHostClosingComplete({
-					closing,
-					progressAnimating,
-					progressSettled,
-					willAnimate,
-				}),
-				isSettledHostReady: progressSettled === 1 && progressAnimating === 0,
-				pairsState: pairs.get(),
-				settledHostScreenKey,
-				sourcePairKey,
-			});
-		},
-		(signal, previousSignal) => {
-			"worklet";
-			if (shallowEqual(previousSignal, signal)) {
-				return;
-			}
-
-			if (signal.status === "pending") {
-				canSwitchPortalHostImmediately.set(0);
-				return;
-			}
-
-			const hostScreenKey =
-				signal.status === "complete" ? signal.hostScreenKey : null;
-			let previousOwnerPairKey: string | undefined;
-
-			if (previousSignal?.status === "complete") {
-				previousOwnerPairKey = previousSignal.ownerPairKey ?? undefined;
-			}
-
-			const canSwitchImmediately = canSwitchHandoffHostImmediately({
-				hostScreenKey,
-				ownerPairKey:
-					signal.status === "complete" ? signal.ownerPairKey : undefined,
-				previousOwnerPairKey,
-			});
-
-			canSwitchPortalHostImmediately.set(canSwitchImmediately ? 1 : 0);
-
-			if (canSwitchImmediately && hostScreenKey) {
-				const hostName = createBoundaryContentPortalHostName(
-					hostScreenKey,
-					boundaryId,
-				);
-				requestedPortalHostName.set(hostName);
-				visiblePortalHostName.set(hostName);
-			}
-
-			runOnJS(updatePortalOwnership)(
-				signal.hostScreenKey,
-				signal.ownerPairKey,
-				signal.ownerScreenKey ?? undefined,
-			);
-		},
-	);
 
-	useAnimatedReaction(
-		() => {
-			"worklet";
-			const slot = activeSlotsMap.get()[boundaryId];
-			const teleport = slot?.props?.teleport;
-			const shouldTeleport = shouldAttachBoundaryPortal({
-				enabled,
-				teleport,
-			});
-			const requestedName = requestedPortalHostName.get();
-			const visibleName = visiblePortalHostName.get();
-			const isInterpolatorReady = activeNextInterpolatorReady.get();
-			const nextVisibleName = resolveNextVisiblePortalHostName({
-				canSwitchImmediately: canSwitchPortalHostImmediately.get() === 1,
-				isInterpolatorReady: isInterpolatorReady === 1,
-				requestedName,
-				shouldTeleport,
-				visibleName,
-			});
-
-			return {
-				isInterpolatorReady,
-				nextVisibleName,
-				requestedName,
-				shouldTeleport,
-				teleport,
-				visibleName,
-			};
-		},
-		(state, previousState) => {
-			"worklet";
-			if (shallowEqual(previousState, state)) {
-				return;
-			}
-
-			if (state.nextVisibleName !== state.visibleName) {
-				visiblePortalHostName.set(state.nextVisibleName);
-			}
-		},
-	);
+	// `nextScreenKey` can change while the previously attached destination is
+	// still closing. Retain that destination's lifecycle shared values so this
+	// payload follows the screen that actually hosts it, not the newest route.
+	const attachedDestination = useSharedValue<AttachedDestination | null>(null);
 
 	const teleportProps = useAnimatedProps(() => {
 		"worklet";
 
-		const slot = activeSlotsMap.get()[boundaryId];
+		const slot = slotsMap.get()[boundaryId];
 		const {
 			pointerEvents: _pointerEvents,
 			teleport,
 			...slotProps
 		} = slot?.props ?? {};
-		const shouldTeleport = shouldAttachBoundaryPortal({
-			enabled,
-			teleport,
-		});
-		const visibleName = visiblePortalHostName.get();
+
+		const animationProgress = destinationAnimationProgress.get();
+		const shouldTeleport = isTeleportEnabled(teleport);
+		const pairsState = pairs.get();
+
+		const enteringTargetScreenKey = shouldTeleport
+			? resolveEnteringHandoffTarget({
+					animationProgress,
+					boundaryId,
+					currentScreenKey,
+					pairsState,
+					sourcePairKey,
+				})
+			: null;
+
+		if (enteringTargetScreenKey) {
+			// A valid entering pair is the only event that replaces the current
+			// attachment and its lifecycle owner.
+			attachedDestination.set({
+				animationProgress: destinationAnimationProgress,
+				closing: destinationClosing,
+				screenKey: enteringTargetScreenKey,
+			});
+		}
+
+		const attached = attachedDestination.get();
+		const hasAttachedCloseFinished =
+			attached !== null &&
+			hasCloseTransitionFinished({
+				animationProgress: attached.animationProgress.get(),
+				closing: attached.closing.get(),
+			});
+
+		// Missing or changing pairs do not imply a return: keep the current host
+		// until its own screen visually closes. At that point, target the source
+		// host explicitly instead of `null` so Teleport restores source dimensions.
+		const targetScreenKey = enteringTargetScreenKey
+			? enteringTargetScreenKey
+			: shouldTeleport
+				? hasAttachedCloseFinished
+					? currentScreenKey
+					: (attached?.screenKey ?? null)
+				: null;
+
+		const targetHostName = targetScreenKey
+			? createBoundaryContentPortalHostName(targetScreenKey, boundaryId)
+			: PORTAL_HOST_NAME_RESET_VALUE;
 
 		return {
 			...slotProps,
-			hostName:
-				shouldTeleport && visibleName
-					? visibleName
-					: PORTAL_HOST_NAME_RESET_VALUE,
+			hostName: targetHostName,
 		};
 	});
 
-	return {
-		teleportProps,
-		visiblePortalHostName,
-	};
+	return { teleportProps };
 };