react-native-screen-transitions 3.9.0 → 3.11.0

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

@@ -1,9 +1,8 @@
-import { useLayoutEffect, useState } from "react";
+import { useLayoutEffect } from "react";
 import type { View } from "react-native";
 import {
 	cancelAnimation,
 	measure,
-	runOnJS,
 	runOnUI,
 	type SharedValue,
 	useAnimatedReaction,
@@ -12,13 +11,12 @@ import {
 	withDelay,
 	withTiming,
 } from "react-native-reanimated";
-import { useOriginContext } from "../../../../../../providers/screen/origin.provider";
 import { ScrollStore } from "../../../../../../stores/scroll.store";
 import { getVisibilityBlockOffset } from "../../../../../../utils/visibility-block-offset";
 import {
 	adjustedMeasuredBoundsForOverscrollDeltas,
+	correctMeasuredBoundsForVisibilityGate,
 	isMeasurementInViewport,
-	normalizeMeasuredBoundsWithVisibilityGate,
 } from "../../../../utils/measured-bounds";
 import {
 	clearPortalHostBounds,
@@ -48,8 +46,6 @@ export const useHostMeasurement = ({
 }: UseHostMeasurementParams) => {
 	const hostRef = useAnimatedRef<View>();
 	const scrollMetadata = ScrollStore.getValue(screenKey, "metadata");
-	const [canRenderHosts, setCanRenderHosts] = useState<boolean>(false);
-	const { originRef } = useOriginContext();
 	const hasMeasuredHost = useSharedValue(false);
 	const retryToken = useSharedValue(0);
 
@@ -76,9 +72,8 @@ export const useHostMeasurement = ({
 			}
 
 			const measured = measure(hostRef);
-			const measuredOrigin = measure(originRef);
 
-			if (!measured || !measuredOrigin) {
+			if (!measured) {
 				cancelAnimation(retryToken);
 				retryToken.set(
 					withDelay(
@@ -90,7 +85,6 @@ export const useHostMeasurement = ({
 			}
 
 			cancelAnimation(retryToken);
-			hasMeasuredHost.set(true);
 
 			// A measurement taken mid rubber-band would bake the transient
 			// overscroll displacement into the host frame. Store the at-rest
@@ -100,9 +94,8 @@ export const useHostMeasurement = ({
 				? adjustedMeasuredBoundsForOverscrollDeltas(measured, currentScroll)
 				: measured;
 
-			const normalizedMeasured = normalizeMeasuredBoundsWithVisibilityGate({
+			const correctedMeasured = correctMeasuredBoundsForVisibilityGate({
 				measured: overscrollNormalized,
-				origin: measuredOrigin,
 				visibilityBlocked: visibilityBlocked.get(),
 				visibilityBlockOffset: getVisibilityBlockOffset(viewportHeight),
 				viewportWidth,
@@ -111,7 +104,7 @@ export const useHostMeasurement = ({
 
 			if (
 				!isMeasurementInViewport(
-					normalizedMeasured,
+					correctedMeasured,
 					viewportWidth,
 					viewportHeight,
 				)
@@ -127,16 +120,16 @@ export const useHostMeasurement = ({
 			}
 
 			setPortalHostBounds(hostKey, {
-				x: normalizedMeasured.x,
-				y: normalizedMeasured.y,
-				width: normalizedMeasured.width,
-				height: normalizedMeasured.height,
-				pageX: normalizedMeasured.pageX,
-				pageY: normalizedMeasured.pageY,
+				x: correctedMeasured.x,
+				y: correctedMeasured.y,
+				width: correctedMeasured.width,
+				height: correctedMeasured.height,
+				pageX: correctedMeasured.pageX,
+				pageY: correctedMeasured.pageY,
 				scroll: capturesScroll ? currentScroll : null,
 			});
 
-			runOnJS(setCanRenderHosts)(true);
+			hasMeasuredHost.set(true);
 		},
 	);
 
@@ -147,7 +140,6 @@ export const useHostMeasurement = ({
 	}, [hostKey]);
 
 	return {
-		canRenderHosts,
 		hostRef,
 	};
 };

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

@@ -1,8 +1,35 @@
-import { memo, type ReactNode } from "react";
+import {
+	type ComponentProps,
+	type ComponentType,
+	memo,
+	type ReactNode,
+} from "react";
 import type { View } from "react-native";
-import type { AnimatedRef } from "react-native-reanimated";
-import { BoundaryPortalSlot } from "./components/portal-slot";
+import Animated, { type AnimatedRef, runOnUI } from "react-native-reanimated";
+import { logger } from "../../../../../utils/logger";
+import {
+	isTeleportAvailable,
+	PORTAL_POINTER_EVENTS,
+	NativePortal as TeleportPortal,
+} from "../../teleport";
 import { useBoundaryPortalAttachment } from "./hooks/use-boundary-portal-attachment";
+import { usePlaceholderStyles } from "./hooks/use-placeholder-styles";
+
+type NullableHostNamePortalProps = Omit<
+	ComponentProps<NonNullable<typeof TeleportPortal>>,
+	"hostName"
+> & {
+	hostName?: string | null;
+};
+
+const AnimatedNativePortal = TeleportPortal
+	? Animated.createAnimatedComponent(
+			TeleportPortal as ComponentType<NullableHostNamePortalProps>,
+		)
+	: null;
+const EnabledNativePortal = AnimatedNativePortal as NonNullable<
+	typeof AnimatedNativePortal
+>;
 
 type BoundaryPortalProps = {
 	boundaryId: string;
@@ -17,19 +44,52 @@ export const BoundaryPortal = memo(function BoundaryPortal({
 	enabled,
 	placeholderRef,
 }: BoundaryPortalProps) {
-	const { teleportProps } = useBoundaryPortalAttachment({
-		boundaryId,
-		enabled,
-	});
+	if (!enabled || !isTeleportAvailable || !AnimatedNativePortal) {
+		return children;
+	}
 
 	return (
-		<BoundaryPortalSlot
-			id={boundaryId}
-			enabled={enabled}
-			animatedProps={teleportProps}
+		<EnabledBoundaryPortal
+			boundaryId={boundaryId}
 			placeholderRef={placeholderRef}
 		>
 			{children}
-		</BoundaryPortalSlot>
+		</EnabledBoundaryPortal>
+	);
+});
+
+const EnabledBoundaryPortal = memo(function EnabledBoundaryPortal({
+	boundaryId,
+	children,
+	placeholderRef,
+}: Omit<BoundaryPortalProps, "enabled">) {
+	if (__DEV__ && !boundaryId) {
+		logger.warnOnce(
+			"portal:missing-id",
+			"A boundary portal was rendered without an id; rendering inline.",
+		);
+	}
+
+	const { teleportProps } = useBoundaryPortalAttachment({ boundaryId });
+	const { handleOnLayout, placeholderStyle } = usePlaceholderStyles();
+
+	return (
+		<Animated.View
+			ref={placeholderRef}
+			onLayout={({ nativeEvent: { layout } }) =>
+				runOnUI(handleOnLayout)(layout)
+			}
+			style={placeholderStyle}
+			pointerEvents={PORTAL_POINTER_EVENTS}
+			collapsable={false}
+		>
+			<EnabledNativePortal
+				animatedProps={teleportProps}
+				name={boundaryId}
+				pointerEvents={PORTAL_POINTER_EVENTS}
+			>
+				{children}
+			</EnabledNativePortal>
+		</Animated.View>
 	);
 });

package/src/shared/components/boundary/portal/components/boundary-portal/stores/host-registry.store.ts

@@ -4,7 +4,6 @@ export type HostRegistration = {
 	hostKey: string;
 	screenKey: string;
 	fallback: boolean;
-	capturesScroll: boolean;
 };
 
 type HostRegistrySnapshot = Record<string, string>;

package/src/shared/components/boundary/portal/components/boundary-portal/stores/portal-boundary-host.store.ts

@@ -5,11 +5,11 @@ import type { NormalizedTransitionInterpolatedStyle } from "../../../../../../ty
 
 export type ActivePortalBoundaryHost = {
 	boundaryId: string;
-	escapeClipping: boolean;
 	hostKey: string;
 	localStylesMaps: SharedValue<LocalStyleLayers>;
 	pairKey: string;
 	portalHostName: string;
+	portalHostReady: SharedValue<boolean>;
 	screenKey: string;
 	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
 };
@@ -55,11 +55,11 @@ const isSameHost = (
 ) => {
 	return (
 		a.boundaryId === b.boundaryId &&
-		a.escapeClipping === b.escapeClipping &&
 		a.hostKey === b.hostKey &&
 		a.localStylesMaps === b.localStylesMaps &&
 		a.pairKey === b.pairKey &&
 		a.portalHostName === b.portalHostName &&
+		a.portalHostReady === b.portalHostReady &&
 		a.screenKey === b.screenKey &&
 		a.slotsMap === b.slotsMap
 	);
@@ -85,43 +85,6 @@ export const unmountPortalBoundaryHostByName = (
 	emit();
 };
 
-/**
- * Post-handoff GC: drop every receiver for this boundary except the one now
- * visible (`keepPortalHostName`). Called once the new host is confirmed on
- * screen so the superseded receivers stop rendering.
- */
-export const dropStalePortalBoundaryHosts = ({
-	boundaryId,
-	keepPortalHostName,
-}: {
-	boundaryId: string;
-	keepPortalHostName: string;
-}) => {
-	if (!activeBoundaryHosts.has(keepPortalHostName)) {
-		return;
-	}
-
-	let didDelete = false;
-
-	for (const [hostEntryKey, host] of activeBoundaryHosts) {
-		if (
-			host.boundaryId !== boundaryId ||
-			host.portalHostName === keepPortalHostName
-		) {
-			continue;
-		}
-
-		activeBoundaryHosts.delete(hostEntryKey);
-		didDelete = true;
-	}
-
-	if (!didDelete) {
-		return;
-	}
-
-	emit();
-};
-
 const subscribe = (listener: () => void) => {
 	listeners.add(listener);
 

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

@@ -1 +1,12 @@
+const BOUNDARY_PORTAL_HOST_NAME_SUFFIX = "-portal-host";
+
+export const createBoundaryPortalHostName = (
+	hostKey: string,
+	boundaryId: string,
+	pairKey?: string | null,
+) => {
+	"worklet";
+	return `${hostKey}-${pairKey ? `${pairKey}-` : ""}${boundaryId}${BOUNDARY_PORTAL_HOST_NAME_SUFFIX}`;
+};
+
 export const PORTAL_HOST_NAME_RESET_VALUE = null;

package/src/shared/components/boundary/portal/utils/resolve-portal.ts

@@ -1,17 +1,33 @@
 import { logger } from "../../../../utils/logger";
 import { isTeleportAvailable } from "../teleport";
 
-export type BoundaryPortalRuntime = {
+export type BoundaryPortalRuntime = Readonly<{
 	handoff: boolean;
 	escapeClipping: boolean;
-	enabled: boolean;
-};
+}>;
 
 type ResolveBoundaryPortalParams = {
 	handoff?: boolean;
 	escapeClipping?: boolean;
 };
 
+const DISABLED_RUNTIME: BoundaryPortalRuntime = {
+	handoff: false,
+	escapeClipping: false,
+};
+const HANDOFF_RUNTIME: BoundaryPortalRuntime = {
+	handoff: true,
+	escapeClipping: false,
+};
+const ESCAPE_CLIPPING_RUNTIME: BoundaryPortalRuntime = {
+	handoff: false,
+	escapeClipping: true,
+};
+const HANDOFF_ESCAPE_CLIPPING_RUNTIME: BoundaryPortalRuntime = {
+	handoff: true,
+	escapeClipping: true,
+};
+
 export const resolveBoundaryPortal = ({
 	handoff,
 	escapeClipping,
@@ -22,11 +38,7 @@ export const resolveBoundaryPortal = ({
 	const enabled = resolvedHandoff || resolvedEscapeClipping;
 
 	if (!enabled) {
-		return {
-			handoff: false,
-			escapeClipping: false,
-			enabled: false,
-		};
+		return DISABLED_RUNTIME;
 	}
 
 	if (!isTeleportAvailable) {
@@ -35,16 +47,12 @@ export const resolveBoundaryPortal = ({
 			"react-native-teleport is not installed; handoff and escapeClipping boundaries will render inline.",
 		);
 
-		return {
-			handoff: false,
-			escapeClipping: false,
-			enabled: false,
-		};
+		return DISABLED_RUNTIME;
 	}
 
-	return {
-		handoff: resolvedHandoff,
-		escapeClipping: resolvedEscapeClipping,
-		enabled,
-	};
+	return resolvedHandoff
+		? resolvedEscapeClipping
+			? HANDOFF_ESCAPE_CLIPPING_RUNTIME
+			: HANDOFF_RUNTIME
+		: ESCAPE_CLIPPING_RUNTIME;
 };

package/src/shared/components/boundary/portal/utils/teleport-control.ts

@@ -11,15 +11,3 @@ export const isTeleportEnabled = (
 
 	return teleport?.enabled !== false;
 };
-
-export const shouldAttachBoundaryPortal = ({
-	enabled,
-	teleport,
-}: {
-	enabled: boolean;
-	teleport?: BoundaryTeleportControl;
-}) => {
-	"worklet";
-
-	return enabled && isTeleportEnabled(teleport);
-};

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

@@ -1,20 +1,20 @@
 import {
 	type ForwardedRef,
 	type ReactNode,
-	useCallback,
 	useImperativeHandle,
+	useLayoutEffect,
 	useMemo,
 	useRef,
-	useState,
 } from "react";
 import type { View } from "react-native";
-import type { AnimatedRef, StyleProps } from "react-native-reanimated";
+import type { AnimatedRef } from "react-native-reanimated";
 import { useAnimatedRef } from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../providers/screen/descriptors";
 import {
 	useComposedSlotStyles,
 	useSlotStackingStyles,
 } from "../../../providers/screen/styles";
+import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
 import { createBoundTag } from "../../../stores/bounds/helpers/link-pairs.helpers";
 import type { BoundTag } from "../../../stores/bounds/types";
 import createProvider from "../../../utils/create-provider";
@@ -30,28 +30,11 @@ import type {
 	BoundaryOwnProps,
 } from "../types";
 
-interface BoundaryRootContextValue extends BoundaryRootRenderState {
-	registerTargetRef: (
-		targetRef: AnimatedRef<View>,
-		preparedStyles: StyleProps,
-		measurementRef?: AnimatedRef<View>,
-	) => void;
-	unregisterTargetRef: (targetRef: AnimatedRef<View>) => void;
-	activeTargetRef: AnimatedRef<View> | null;
-	boundTag: BoundTag;
-	portalRuntime: BoundaryPortalRuntime;
-}
-
-type BoundaryTargetEntry = {
-	ref: AnimatedRef<View>;
-	/** Surface to measure — the portal placeholder when content can teleport. */
-	measurementRef: AnimatedRef<View>;
-	preparedStyles: StyleProps;
-};
+type BoundaryRootContextValue = BoundaryRootRenderState;
 
 // logger.warn prepends the library prefix.
 const MULTIPLE_TARGETS_WARNING =
-	"Multiple Boundary.Target elements were rendered under the same boundary root. The first registered target will be measured.";
+	"Multiple Boundary.Target elements were rendered under the same boundary root. The first target in render order will be measured.";
 
 export const TARGET_OUTSIDE_ROOT_WARNING =
 	"Boundary.Target must be rendered inside Transition.Boundary or a component created by createBoundaryComponent.";
@@ -61,9 +44,9 @@ export type BoundaryRootRenderState = {
 	boundTag: BoundTag;
 	currentScreenKey: string;
 	handoffEnabled: boolean;
+	measurementRef: AnimatedRef<View>;
 	portalRuntime: BoundaryPortalRuntime;
 	ref: AnimatedRef<View>;
-	rootEscapePlaceholderRef: AnimatedRef<View>;
 	shouldRenderBoundaryRootThroughPortal: boolean;
 	shouldRenderHandoffHost: boolean;
 };
@@ -75,18 +58,17 @@ type BoundaryRootProviderProps = Pick<
 	children: (state: BoundaryRootRenderState) => ReactNode;
 	config: BoundaryConfigProps;
 	forwardedRef?: ForwardedRef<any>;
+	hasTarget: boolean;
 	id: BoundaryId;
 	style?: unknown;
+	targetCount: number;
+	targetStyle?: unknown;
 };
 
-export const {
-	BoundaryRootProvider,
-	useBoundaryRootContext,
-	useBoundaryRootStore,
-} = createProvider("BoundaryRoot", { guarded: false })<
-	BoundaryRootProviderProps,
-	BoundaryRootContextValue
->(
+export const { BoundaryRootProvider, useBoundaryRootStore } = createProvider(
+	"BoundaryRoot",
+	{ guarded: false },
+)<BoundaryRootProviderProps, BoundaryRootContextValue>(
 	({
 		children,
 		config,
@@ -95,8 +77,11 @@ export const {
 		forwardedRef,
 		group,
 		handoff,
+		hasTarget,
 		id,
 		style,
+		targetCount,
+		targetStyle,
 	}) => {
 		const requestedBoundTag = useMemo(
 			() => createBoundTag(String(id), group),
@@ -110,12 +95,12 @@ export const {
 		const currentScreenKey = useDescriptorsStore(
 			(s) => s.derivations.currentScreenKey,
 		);
-		const currentActivity = useDescriptorsStore(
-			(s) => s.descriptors.current.activity,
+		const isCurrentScreenClosing = useBlankStackStore(
+			(store) => store?.scenesByKey[currentScreenKey]?.activity === "closing",
 		);
 		const retainedBoundTagRef = useRef(requestedBoundTag);
 		const shouldRetainClosingBoundTag =
-			portalRuntime.handoff && currentActivity === "closing";
+			portalRuntime.handoff && isCurrentScreenClosing;
 
 		// Navigation can update a retained closing route's params before that
 		// route leaves the stack. Keep its handoff identity stable so the payload
@@ -137,51 +122,18 @@ export const {
 		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,
-		);
-
-		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,
-						);
-					}
-
-					return (
-						prev ?? {
-							ref: targetRef,
-							measurementRef: measurementRef ?? targetRef,
-							preparedStyles,
-						}
-					);
-				});
-			},
-			[],
-		);
+		const measurementRef = useAnimatedRef<View>();
 
-		const unregisterTargetRef = useCallback((targetRef: AnimatedRef<View>) => {
-			setTargetEntry((prev) => (prev?.ref === targetRef ? null : prev));
-		}, []);
+		useLayoutEffect(() => {
+			if (__DEV__ && targetCount > 1) {
+				logger.warnOnce("boundary:multiple-targets", MULTIPLE_TARGETS_WARNING);
+			}
+		}, [targetCount]);
 
-		const rootMeasurementRef = shouldEscapeBoundaryRootToScreenHost
-			? rootEscapePlaceholderRef
-			: rootRef;
-		const measuredRef = targetEntry?.measurementRef ?? rootMeasurementRef;
-		const hasActiveTarget = targetEntry !== null;
-		const targetPreparedStyles = targetEntry?.preparedStyles;
+		const measuredRef =
+			hasTarget || shouldEscapeBoundaryRootToScreenHost
+				? measurementRef
+				: rootRef;
 
 		useImperativeHandle(forwardedRef, () => rootRef.current as any, [rootRef]);
 
@@ -191,15 +143,14 @@ export const {
 			runtimeEnabled,
 			currentScreenKey,
 			measuredRef,
-			style,
-			targetPreparedStyles,
+			style: hasTarget ? targetStyle : style,
 			handoff: portalRuntime.handoff,
 			escapeClipping: portalRuntime.escapeClipping,
 			config,
 		});
 
 		const shouldRenderBoundaryRootThroughPortal =
-			shouldEscapeBoundaryRootToScreenHost && !hasActiveTarget;
+			shouldEscapeBoundaryRootToScreenHost && !hasTarget;
 		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
@@ -209,7 +160,7 @@ export const {
 		// handoff host is absolute-filled inside this root, so the root is the
 		// visual frame that animates the received payload.
 		const attachedStyle = shouldAttachAssociatedStyles
-			? hasActiveTarget
+			? hasTarget
 				? associatedStackingStyles
 				: shouldRenderBoundaryRootThroughPortal
 					? undefined
@@ -219,31 +170,25 @@ export const {
 		const value = useMemo<BoundaryRootContextValue>(
 			() => ({
 				attachedStyle,
-				activeTargetRef: targetEntry?.ref ?? null,
 				boundTag,
 				currentScreenKey,
 				handoffEnabled,
+				measurementRef,
 				portalRuntime,
-				registerTargetRef,
 				ref: rootRef,
-				rootEscapePlaceholderRef,
 				shouldRenderBoundaryRootThroughPortal,
-				shouldRenderHandoffHost: handoffEnabled && !hasActiveTarget,
-				unregisterTargetRef,
+				shouldRenderHandoffHost: handoffEnabled && !hasTarget,
 			}),
 			[
 				attachedStyle,
 				boundTag,
 				currentScreenKey,
 				handoffEnabled,
-				hasActiveTarget,
+				hasTarget,
+				measurementRef,
 				portalRuntime,
-				registerTargetRef,
 				rootRef,
-				rootEscapePlaceholderRef,
 				shouldRenderBoundaryRootThroughPortal,
-				targetEntry,
-				unregisterTargetRef,
 			],
 		);