react-native-screen-transitions 3.11.2 → 3.11.3

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

@@ -0,0 +1,53 @@
+import { memo } from "react";
+import type { View } from "react-native";
+import type { AnimatedRef } from "react-native-reanimated";
+import { useDescriptorsStore } from "../../../providers/screen/descriptors";
+import type { BoundTag } from "../../../stores/bounds/types";
+import { useBoundaryMeasurement } from "../hooks/use-boundary-measurement";
+import type {
+	BoundaryConfigProps,
+	BoundaryLocalMeasurementValue,
+} from "../types";
+
+interface BoundaryLifecycleProps {
+	boundTag: BoundTag;
+	config: BoundaryConfigProps;
+	currentScreenKey: string;
+	enabled: boolean;
+	escapeClipping: boolean;
+	handoff: boolean;
+	localMeasurement: BoundaryLocalMeasurementValue;
+	measuredRef: AnimatedRef<View>;
+	style?: unknown;
+}
+
+export const BoundaryLifecycle = memo(function BoundaryLifecycle({
+	boundTag,
+	config,
+	currentScreenKey,
+	enabled,
+	escapeClipping,
+	handoff,
+	localMeasurement,
+	measuredRef,
+	style,
+}: BoundaryLifecycleProps) {
+	const hasConfiguredInterpolator = useDescriptorsStore(
+		(s) => s.derivations.hasConfiguredInterpolator,
+	);
+
+	useBoundaryMeasurement({
+		boundTag,
+		enabled,
+		runtimeEnabled: enabled && hasConfiguredInterpolator,
+		currentScreenKey,
+		measuredRef,
+		style,
+		handoff,
+		escapeClipping,
+		localMeasurement,
+		config,
+	});
+
+	return null;
+});

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

@@ -39,14 +39,12 @@ const MAX_HANDSHAKE_RETRIES = 20;
 interface UseInitialDestinationMeasurementParams {
 	boundTag: BoundTag;
 	enabled: boolean;
-	escapeClipping: boolean;
 	measureBoundary: MeasureBoundary;
 }
 
 export const useInitialDestinationMeasurement = ({
 	boundTag,
 	enabled,
-	escapeClipping,
 	measureBoundary,
 }: UseInitialDestinationMeasurementParams) => {
 	const { tag, linkKey, group } = boundTag;
@@ -142,18 +140,12 @@ export const useInitialDestinationMeasurement = ({
 		runOnUI(claimLifecycleStartBlock)();
 
 		return () => {
-			if (escapeClipping) {
-				// The portal host owns the release after this boundary hands off.
-				return;
-			}
-
 			// This is an abandonment fallback, not a second release. Run it on the UI
 			// runtime so it serializes with the handshake's guarded release.
 			runOnUI(releaseLifecycleStartBlock)();
 		};
 	}, [
 		claimLifecycleStartBlock,
-		escapeClipping,
 		canReceiveDestination,
 		releaseLifecycleStartBlock,
 	]);
@@ -247,12 +239,6 @@ export const useInitialDestinationMeasurement = ({
 				cancelAnimation(retryToken);
 				handshakeRetries.set(0);
 				hasFinishedInitialMeasurement.set(1);
-				if (escapeClipping) {
-					// Screen-level escape has a second readiness phase after destination
-					// matching: the host must commit before the transition starts, or
-					// the payload can disappear for a frame.
-					return;
-				}
 				releaseLifecycleStartBlock();
 				return;
 			}

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

@@ -33,14 +33,24 @@ export const useRefreshBoundary = ({
 		refreshScreenKey,
 		"willAnimate",
 	);
+	const refreshSettled = AnimationStore.getValue(
+		refreshScreenKey,
+		"progressSettled",
+	);
 	const refreshClosing = AnimationStore.getValue(refreshScreenKey, "closing");
 
 	useAnimatedReaction(
 		() => {
 			"worklet";
 
-			const shouldRefresh = enabled && !!refreshWillAnimate.get();
-			if (!shouldRefresh) {
+			if (!enabled) return null;
+
+			const shouldRefresh = !!refreshWillAnimate.get();
+			const settled = !!refreshSettled.get();
+			// A group's active member can change while the transition is settled
+			// (for example, paging a destination gallery). Let that member publish
+			// fresh bounds even though there is no willAnimate lifecycle pulse yet.
+			if (!shouldRefresh && (!group || !settled)) {
 				return null;
 			}
 			const sourcePairKey =
@@ -56,6 +66,7 @@ export const useRefreshBoundary = ({
 				linkId: linkKey,
 				group,
 				shouldRefresh,
+				settled,
 				closing: !!refreshClosing.get(),
 				linkState: pairs.get(),
 			});

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

@@ -3,7 +3,10 @@ import type { View } from "react-native";
 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";
+import type {
+	BoundaryConfigProps,
+	BoundaryLocalMeasurementValue,
+} from "../types";
 import { useBoundaryPresence } from "./lifecycles/use-boundary-presence";
 import { useInitialDestinationMeasurement } from "./lifecycles/use-initial-destination-measurement";
 import { useInitialSourceMeasurement } from "./lifecycles/use-initial-source-measurement";
@@ -23,6 +26,7 @@ interface UseBoundaryMeasurementParams {
 	style?: unknown;
 	handoff: boolean;
 	escapeClipping: boolean;
+	localMeasurement: BoundaryLocalMeasurementValue;
 	config: BoundaryConfigProps;
 }
 
@@ -40,6 +44,7 @@ export const useBoundaryMeasurement = ({
 	style,
 	handoff,
 	escapeClipping,
+	localMeasurement,
 	config,
 }: UseBoundaryMeasurementParams) => {
 	const { anchor, scaleMode, target, method } = config;
@@ -58,6 +63,7 @@ export const useBoundaryMeasurement = ({
 		measuredAnimatedRef: measuredRef,
 		handoff,
 		escapeClipping,
+		localMeasurement,
 	});
 
 	// Presence and source capture must not depend on this screen owning an
@@ -81,7 +87,6 @@ export const useBoundaryMeasurement = ({
 	useInitialDestinationMeasurement({
 		boundTag,
 		enabled: runtimeEnabled,
-		escapeClipping,
 		measureBoundary,
 	});
 

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

@@ -8,7 +8,7 @@ import type { BoundTag } from "../../../stores/bounds/types";
 import { ScrollStore } from "../../../stores/scroll.store";
 import { SystemStore } from "../../../stores/system.store";
 import { getVisibilityBlockOffset } from "../../../utils/visibility-block-offset";
-import type { MeasureBoundary } from "../types";
+import type { BoundaryLocalMeasurementValue, MeasureBoundary } from "../types";
 import {
 	attachScrollSnapshotToMeasuredBounds,
 	correctMeasuredBoundsForVisibilityGate,
@@ -24,6 +24,7 @@ interface UseMeasurerParams {
 	measuredAnimatedRef: AnimatedRef<View>;
 	handoff: boolean;
 	escapeClipping: boolean;
+	localMeasurement: BoundaryLocalMeasurementValue;
 }
 
 export const useMeasurer = ({
@@ -34,6 +35,7 @@ export const useMeasurer = ({
 	measuredAnimatedRef,
 	handoff,
 	escapeClipping,
+	localMeasurement,
 }: UseMeasurerParams): MeasureBoundary => {
 	const { width: viewportWidth, height: viewportHeight } =
 		useWindowDimensions();
@@ -66,6 +68,13 @@ export const useMeasurer = ({
 				viewportHeight,
 			});
 
+			if (escapeClipping && target.type === "source") {
+				localMeasurement.set({
+					bounds: measured,
+					pairKey: target.pairKey,
+				});
+			}
+
 			/**
 			 * - Destination Pass -
 			 * Be strict while lifecycle start is blocked for destination capture.
@@ -112,6 +121,7 @@ export const useMeasurer = ({
 			measuredAnimatedRef,
 			handoff,
 			escapeClipping,
+			localMeasurement,
 			viewportWidth,
 			viewportHeight,
 			scrollState,

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

@@ -8,7 +8,6 @@ import {
 } from "react-native";
 import Animated from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
-import { useScreenSlots } from "../../../../../../providers/screen/styles";
 import { PORTAL_POINTER_EVENTS } from "../../../teleport";
 import { useHostMeasurement } from "../hooks/use-host-measurement";
 import { registerHost, unregisterHost } from "../stores/host-registry.store";
@@ -34,20 +33,17 @@ function HostImpl({ fallback = false, style }: HostImplProps) {
 	}
 
 	const hostKey = fallback ? screenKey : generatedHostKeyRef.current;
-	const capturesScroll = !fallback;
 	const activeBoundaryHosts = useActivePortalBoundaryHosts(hostKey);
-	const { visibilityBlocked } = useScreenSlots();
+
 	const { height: viewportHeight, width: viewportWidth } =
 		useWindowDimensions();
 
+	const measurementKey = activeBoundaryHosts.length
+		? activeBoundaryHosts.map((host) => host.portalHostName).join("|")
+		: null;
+
 	const measurement = useHostMeasurement({
-		capturesScroll,
-		enabled: activeBoundaryHosts.length > 0,
-		hostKey,
-		screenKey,
-		visibilityBlocked,
-		viewportHeight,
-		viewportWidth,
+		measurementKey,
 	});
 
 	useLayoutEffect(() => {
@@ -71,7 +67,13 @@ function HostImpl({ fallback = false, style }: HostImplProps) {
 				{ width: viewportWidth, height: viewportHeight },
 			]}
 		>
-			<PortalBoundaryHost host={host} style={StyleSheet.absoluteFill} />
+			<PortalBoundaryHost
+				host={host}
+				hostBounds={measurement.hostBounds}
+				hostMeasurementKey={measurementKey}
+				measuredHostKey={measurement.measuredKey}
+				style={StyleSheet.absoluteFill}
+			/>
 		</View>
 	));
 

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

@@ -1,4 +1,4 @@
-import { memo, useCallback } from "react";
+import { memo } from "react";
 import {
 	I18nManager,
 	type StyleProp,
@@ -6,97 +6,86 @@ import {
 	type ViewStyle,
 } from "react-native";
 import Animated, {
+	type MeasuredDimensions,
+	type SharedValue,
+	useAnimatedReaction,
 	useAnimatedStyle,
-	useFrameCallback,
-	useSharedValue,
 } from "react-native-reanimated";
 import { NO_STYLES } from "../../../../../../constants";
 import { composeSlotStyleWithLocalTransform } from "../../../../../../providers/screen/styles/helpers/compose-slot-style";
-import { getLink } from "../../../../../../stores/bounds/internals/links";
-import { SystemStore } from "../../../../../../stores/system.store";
-import type { ScrollMeasuredDimensions } from "../../../../utils/measured-bounds";
 import { NativePortalHost, PORTAL_POINTER_EVENTS } from "../../../teleport";
+import { resolveBoundaryLocalMeasurement } from "../helpers/local-measurement";
 import { resolvePortalOffsetStyle } from "../helpers/offset-style";
-import { getPortalHostBounds } from "../stores/host-bounds.store";
 import type { ActivePortalBoundaryHost } from "../stores/portal-boundary-host.store";
 
 const AnimatedPortalBoundaryHost = NativePortalHost
 	? Animated.createAnimatedComponent(NativePortalHost)
 	: null;
 
+const getCurrentBoundaryBounds = (host: ActivePortalBoundaryHost) => {
+	"worklet";
+	return resolveBoundaryLocalMeasurement(
+		host.localMeasurement.get(),
+		host.pairKey,
+	);
+};
+
 type PortalBoundaryHostProps = {
 	host: ActivePortalBoundaryHost;
+	hostBounds: SharedValue<MeasuredDimensions | null>;
+	hostMeasurementKey: string | null;
+	measuredHostKey: SharedValue<string | null>;
 	style?: StyleProp<ViewStyle>;
 };
 
 export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 	host,
+	hostBounds,
+	hostMeasurementKey,
+	measuredHostKey,
 	style,
 }: PortalBoundaryHostProps) {
-	const geometryReadyFrames = useSharedValue(0);
-	const { unblockLifecycleStart } = SystemStore.getBag(host.screenKey).actions;
-
-	const handleFrame = useCallback(() => {
-		"worklet";
-		if (host.portalHostReady.get()) {
-			return;
-		}
-
-		const link = getLink(host.pairKey, host.boundaryId);
-		const hasSource = !!link?.source;
-		const hasHostBounds = getPortalHostBounds(host.hostKey) !== null;
-		const hasSlot = host.slotsMap.get()[host.boundaryId] !== undefined;
-		const hasGeometry = hasSource && hasHostBounds && hasSlot;
-
-		if (!hasGeometry) {
-			geometryReadyFrames.set(0);
-			return;
-		}
-
-		if (geometryReadyFrames.get() === 0) {
-			// Give the source frame, host offset, and slot style one UI frame to
-			// reach native before Teleport targets this receiver.
-			geometryReadyFrames.set(1);
-			return;
-		}
-
-		host.portalHostReady.set(true);
-		unblockLifecycleStart();
-	}, [geometryReadyFrames, host, unblockLifecycleStart]);
-
-	useFrameCallback(handleFrame, true);
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			return (
+				getCurrentBoundaryBounds(host) !== null &&
+				hostBounds.get() !== null &&
+				!!hostMeasurementKey &&
+				measuredHostKey.get() === hostMeasurementKey
+			);
+		},
+		(ready) => {
+			"worklet";
+			if (ready) {
+				host.portalHostReady.set(true);
+			}
+		},
+	);
 
 	const hostStyle = useAnimatedStyle(() => {
 		"worklet";
-		// Strict per-member lookup - a fallback member's source rect would
-		// misplace this host's teleported content.
-		const link = getLink(host.pairKey, host.boundaryId);
-		if (!link?.source) {
+		const boundaryBounds = getCurrentBoundaryBounds(host);
+		if (!boundaryBounds) {
 			return NO_STYLES;
 		}
 
-		const sourceBounds = link.source.bounds as ScrollMeasuredDimensions;
-		const isCrossScreenPortal = link.source.screenKey !== host.screenKey;
-
 		return resolvePortalOffsetStyle({
-			bounds: sourceBounds,
-			hostKey: host.hostKey,
-			placement: isCrossScreenPortal ? "cross-screen" : "same-screen",
+			bounds: boundaryBounds,
+			hostBounds: hostBounds.get(),
 		});
 	});
 
 	const contentFrameStyle = useAnimatedStyle(() => {
 		"worklet";
-		const link = getLink(host.pairKey, host.boundaryId);
-		if (!link?.source) {
+		const boundaryBounds = getCurrentBoundaryBounds(host);
+		if (!boundaryBounds) {
 			return NO_STYLES;
 		}
 
-		const sourceBounds = link.source.bounds as ScrollMeasuredDimensions;
-
 		return {
-			height: sourceBounds.height,
-			width: sourceBounds.width,
+			height: boundaryBounds.height,
+			width: boundaryBounds.width,
 		};
 	});
 	const slotStyle = useAnimatedStyle(() => {

package/src/shared/components/boundary/portal/components/boundary-portal/helpers/local-measurement.ts

@@ -0,0 +1,10 @@
+import type { ScreenPairKey } from "../../../../../../stores/bounds/types";
+import type { BoundaryLocalMeasurement } from "../../../../types";
+
+export const resolveBoundaryLocalMeasurement = (
+	measurement: BoundaryLocalMeasurement | null,
+	pairKey: ScreenPairKey,
+) => {
+	"worklet";
+	return measurement?.pairKey === pairKey ? measurement.bounds : null;
+};

package/src/shared/components/boundary/portal/components/boundary-portal/helpers/offset-style.ts

@@ -1,69 +1,25 @@
-import type { StyleProps } from "react-native-reanimated";
-import { getClampedScrollAxisDelta } from "../../../../../../stores/scroll.store";
-import type { ScrollMeasuredDimensions } from "../../../../utils/measured-bounds";
-import { getPortalHostBounds } from "../stores/host-bounds.store";
-
-/**
- * The two portal coordinate cases we support:
- *
- * - same-screen: source and host live on the same screen; re-base the stored
- *   host frame onto the source measurement's scroll snapshot.
- * - cross-screen: source and host live on different screens; the host is the
- *   replacement coordinate space, so destination scroll is inherited naturally
- *   from host placement instead of manually propagated.
- */
-export type PortalOffsetPlacement = "same-screen" | "cross-screen";
+import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
 
 type ResolvePortalOffsetStyleParams = {
-	/** Source rect, carrying the scroll snapshot taken at measure time. */
-	bounds: ScrollMeasuredDimensions;
-	hostKey: string;
-	placement: PortalOffsetPlacement;
+	bounds: MeasuredDimensions;
+	hostBounds: MeasuredDimensions | null;
 };
 
 export const resolvePortalOffsetStyle = ({
 	bounds,
-	hostKey,
-	placement,
+	hostBounds,
 }: ResolvePortalOffsetStyleParams): StyleProps => {
 	"worklet";
-	const hostBounds = getPortalHostBounds(hostKey);
-	const boundsScrollSnapshot = bounds.scroll ?? null;
-	const hostBoundsScrollSnapshot = hostBounds?.scroll ?? null;
-
-	// same-screen re-bases the static host frame onto the source scroll snapshot.
-	// Cross-screen hosts are the chosen replacement coordinate space, so their
-	// destination scroll is represented by where the host itself is mounted.
-	const alignHostToBoundsScroll = placement === "same-screen";
-
-	const hostSnapshotDeltaX = alignHostToBoundsScroll
-		? getClampedScrollAxisDelta(
-				boundsScrollSnapshot,
-				hostBoundsScrollSnapshot,
-				"horizontal",
-			)
-		: 0;
-	const hostSnapshotDeltaY = alignHostToBoundsScroll
-		? getClampedScrollAxisDelta(
-				boundsScrollSnapshot,
-				hostBoundsScrollSnapshot,
-				"vertical",
-			)
-		: 0;
-
-	// Without registered host bounds the host frame is the origin, so the source
-	// page position becomes the offset directly.
-	const adjustedHostPageX = hostBounds
-		? hostBounds.pageX - hostSnapshotDeltaX
-		: 0;
-	const adjustedHostPageY = hostBounds
-		? hostBounds.pageY - hostSnapshotDeltaY
-		: 0;
+	// Both values are measured in page coordinates. Subtracting the host origin
+	// gives the boundary's local position inside that host, independent of which
+	// scroll container owns either view.
+	const hostPageX = hostBounds?.pageX ?? 0;
+	const hostPageY = hostBounds?.pageY ?? 0;
 
 	return {
 		transform: [
-			{ translateY: bounds.pageY - adjustedHostPageY },
-			{ translateX: bounds.pageX - adjustedHostPageX },
+			{ translateY: bounds.pageY - hostPageY },
+			{ translateX: bounds.pageX - hostPageX },
 		],
 	};
 };

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

@@ -1,4 +1,4 @@
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useState } from "react";
 import {
 	runOnJS,
 	type SharedValue,
@@ -7,6 +7,7 @@ import {
 import { getPairKeyForSource } from "../../../../../../stores/bounds/internals/links";
 import type { ScreenPairKey } from "../../../../../../stores/bounds/types";
 import type { NormalizedTransitionInterpolatedStyle } from "../../../../../../types/animation.types";
+import type { BoundaryLocalMeasurementValue } from "../../../../types";
 import { createBoundaryPortalHostName } from "../../../utils/naming";
 import {
 	mountPortalBoundaryHost,
@@ -17,44 +18,39 @@ type UseActivePortalBoundaryHostParams = {
 	boundaryId: string;
 	currentScreenKey: string;
 	escapeHostKey?: string;
+	localMeasurement: BoundaryLocalMeasurementValue;
 	portalHostName: SharedValue<string | null>;
 	portalHostReady: SharedValue<boolean>;
 	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
 };
 
-type ActivePortal = {
-	pairKey: ScreenPairKey;
-};
-
 export const useActivePortalBoundaryHost = ({
 	boundaryId,
 	currentScreenKey,
 	escapeHostKey,
+	localMeasurement,
 	portalHostName,
 	portalHostReady,
 	slotsMap,
 }: UseActivePortalBoundaryHostParams) => {
-	const [activePortal, setActivePortal] = useState<ActivePortal | null>(null);
-	const activePairKeyRef = useRef<ScreenPairKey | null>(null);
-
-	const updateActivePortal = useCallback((pairKey: ScreenPairKey | null) => {
-		if (activePairKeyRef.current === pairKey) {
-			return;
-		}
+	const [activePairKey, setActivePairKey] = useState<ScreenPairKey | null>(
+		null,
+	);
 
-		activePairKeyRef.current = pairKey;
-		setActivePortal(pairKey ? { pairKey } : null);
+	const updateActivePairKey = useCallback((pairKey: ScreenPairKey | null) => {
+		setActivePairKey(pairKey);
 	}, []);
 
 	useAnimatedReaction(
 		() => {
 			"worklet";
-			const isBoundaryAnimating = slotsMap.get()[boundaryId] !== undefined;
-			if (!isBoundaryAnimating) {
+			const pairKey = getPairKeyForSource(boundaryId, currentScreenKey);
+			const measurement = localMeasurement.get();
+			if (!pairKey || measurement?.pairKey !== pairKey) {
 				return null;
 			}
 
-			return getPairKeyForSource(boundaryId, currentScreenKey);
+			return pairKey;
 		},
 		(pairKey, previousPairKey) => {
 			"worklet";
@@ -62,12 +58,12 @@ export const useActivePortalBoundaryHost = ({
 				return;
 			}
 
-			runOnJS(updateActivePortal)(pairKey);
+			runOnJS(updateActivePairKey)(pairKey);
 		},
 	);
 
 	useLayoutEffect(() => {
-		if (!activePortal || !escapeHostKey) {
+		if (!activePairKey || !escapeHostKey) {
 			portalHostName.set(null);
 			portalHostReady.set(false);
 			return;
@@ -76,16 +72,16 @@ export const useActivePortalBoundaryHost = ({
 		const nextPortalHostName = createBoundaryPortalHostName(
 			escapeHostKey,
 			boundaryId,
-			activePortal.pairKey,
+			activePairKey,
 		);
 
 		mountPortalBoundaryHost({
 			boundaryId,
 			hostKey: escapeHostKey,
-			pairKey: activePortal.pairKey,
+			localMeasurement,
+			pairKey: activePairKey,
 			portalHostName: nextPortalHostName,
 			portalHostReady,
-			screenKey: currentScreenKey,
 			slotsMap,
 		});
 		portalHostName.set(nextPortalHostName);
@@ -96,10 +92,10 @@ export const useActivePortalBoundaryHost = ({
 			unmountPortalBoundaryHostByName(nextPortalHostName);
 		};
 	}, [
-		activePortal,
+		activePairKey,
 		boundaryId,
-		currentScreenKey,
 		escapeHostKey,
+		localMeasurement,
 		portalHostName,
 		portalHostReady,
 		slotsMap,

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

@@ -1,6 +1,7 @@
 import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
 import { useScreenSlots } from "../../../../../../providers/screen/styles";
+import { useBoundaryRootStore } from "../../../../providers/boundary-root.provider";
 import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
 import { isTeleportEnabled } from "../../../utils/teleport-control";
 import { useActiveHostKey } from "../stores/host-registry.store";
@@ -13,6 +14,13 @@ interface UseBoundaryPortalAttachmentParams {
 export const useBoundaryPortalAttachment = ({
 	boundaryId,
 }: UseBoundaryPortalAttachmentParams) => {
+	const localMeasurement = useBoundaryRootStore((root) => {
+		if (!root) {
+			throw new Error("Boundary portal attachment requires a boundary root.");
+		}
+
+		return root.localMeasurement;
+	});
 	const currentScreenKey = useDescriptorsStore(
 		(s) => s.derivations.currentScreenKey,
 	);
@@ -25,6 +33,7 @@ export const useBoundaryPortalAttachment = ({
 		boundaryId,
 		currentScreenKey,
 		escapeHostKey,
+		localMeasurement,
 		portalHostName,
 		portalHostReady,
 		slotsMap,
@@ -39,10 +48,12 @@ export const useBoundaryPortalAttachment = ({
 			teleport,
 			...slotProps
 		} = slot?.props ?? {};
+
 		const shouldAttach =
 			slot !== undefined &&
 			isTeleportEnabled(teleport) &&
 			portalHostReady.get();
+
 		const hostName = shouldAttach
 			? portalHostName.get()
 			: PORTAL_HOST_NAME_RESET_VALUE;