react-native-screen-transitions 3.10.0 → 3.11.1

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

@@ -1,52 +1,51 @@
-import {
-	type SharedValue,
-	useAnimatedProps,
-	useSharedValue,
-} from "react-native-reanimated";
+import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
+import { useStack } from "../../../../../../hooks/navigation/use-stack";
 import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
 import { useScreenSlots } from "../../../../../../providers/screen/styles";
 import { hasCloseTransitionFinished } from "../../../../../../providers/screen/styles/helpers/transition-visual-state";
 import { AnimationStore } from "../../../../../../stores/animation.store";
+import { getLinkKeyFromTag } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
+import { getEntry } from "../../../../../../stores/bounds/internals/entries";
 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 { isTeleportEnabled } from "../../../utils/teleport-control";
+import {
+	resolveActiveHandoffReceiver,
+	resolveHandoffAttachmentCandidate,
+	resolvePreviousHandoffReceiver,
+} from "../helpers/active-handoff-receiver";
 import { createBoundaryContentPortalHostName } from "../helpers/host-name";
 
 interface UseBoundaryContentPortalAttachmentParams {
 	boundaryId: string;
 }
 
-type AttachedDestination = {
-	animationProgress: SharedValue<number>;
-	closing: SharedValue<number>;
-	screenKey: string;
-};
-
 export const useBoundaryContentPortalAttachment = ({
 	boundaryId,
 }: UseBoundaryContentPortalAttachmentParams) => {
-	const { slotsMap } = useScreenSlots();
-	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
+	const { nextInterpolatorReady, slotsMap } = useScreenSlots();
+
 	const currentScreenKey = useDescriptorsStore(
 		(s) => s.derivations.currentScreenKey,
 	);
-	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
-	const destinationScreenKey = nextScreenKey ?? currentScreenKey;
-	const destinationAnimationProgress = SystemStore.getValue(
-		destinationScreenKey,
+	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
+
+	const activeReceiverScreenKey = useStack(resolveActiveHandoffReceiver);
+	const previousReceiverScreenKey = useStack(resolvePreviousHandoffReceiver);
+
+	const activeReceiverAnimationProgress = SystemStore.getValue(
+		activeReceiverScreenKey ?? currentScreenKey,
 		"animationProgress",
 	);
-	const destinationClosing = AnimationStore.getValue(
-		destinationScreenKey,
+
+	const activeReceiverClosing = AnimationStore.getValue(
+		activeReceiverScreenKey ?? currentScreenKey,
 		"closing",
 	);
 
-	// `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 attachedReceiverScreenKey = useSharedValue(currentScreenKey);
+	const sourcePairBeforeClose = useSharedValue<string | null>(null);
 
 	const teleportProps = useAnimatedProps(() => {
 		"worklet";
@@ -58,49 +57,75 @@ export const useBoundaryContentPortalAttachment = ({
 			...slotProps
 		} = slot?.props ?? {};
 
-		const animationProgress = destinationAnimationProgress.get();
 		const shouldTeleport = isTeleportEnabled(teleport);
-		const pairsState = pairs.get();
-
-		const enteringTargetScreenKey = shouldTeleport
-			? resolveEnteringHandoffTarget({
-					animationProgress,
-					boundaryId,
-					currentScreenKey,
-					pairsState,
-					sourcePairKey,
-				})
-			: null;
+		const closing = activeReceiverClosing.get();
+		const animationProgress = activeReceiverAnimationProgress.get();
 
-		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,
-			});
+		if (!closing) {
+			sourcePairBeforeClose.set(sourcePairKey ?? null);
 		}
 
-		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)
+		const pairChangedDuringClose =
+			!!closing &&
+			!!sourcePairKey &&
+			sourcePairKey !== sourcePairBeforeClose.get();
+
+		const hasActiveCloseFinished = hasCloseTransitionFinished({
+			closing,
+			animationProgress,
+		});
+
+		const pair = sourcePairKey ? pairs.get()[sourcePairKey] : null;
+		const link = pair?.links[getLinkKeyFromTag(boundaryId)];
+
+		const pairDestination =
+			link?.status === "complete" &&
+			(!link.group ||
+				pair?.groups[link.group]?.activeId === getLinkKeyFromTag(boundaryId))
+				? link.destination.screenKey
 				: null;
 
+		const interpolatorReady = nextInterpolatorReady.get();
+		const attachedScreenKey = attachedReceiverScreenKey.get();
+
+		const nextReceiverScreenKey = resolveHandoffAttachmentCandidate({
+			activeReceiverClosing: !!closing,
+			activeReceiverScreenKey,
+			attachedReceiverScreenKey: attachedScreenKey,
+			hasActiveCloseFinished,
+			interpolatorReady: !!interpolatorReady,
+			pairChangedDuringClose,
+			pairDestinationScreenKey: pairDestination,
+			previousReceiverScreenKey,
+		});
+
+		const receiverEntry = nextReceiverScreenKey
+			? getEntry(boundaryId, nextReceiverScreenKey)
+			: null;
+
+		const receiverReady = receiverEntry?.handoff === true;
+
+		const returningFromActiveClose =
+			hasActiveCloseFinished && attachedScreenKey === activeReceiverScreenKey;
+
+		const activatingPairDestination =
+			!!pairDestination &&
+			!!interpolatorReady &&
+			nextReceiverScreenKey === pairDestination;
+
+		const canActivateReceiver =
+			returningFromActiveClose ||
+			activatingPairDestination ||
+			animationProgress > 0;
+
+		if (nextReceiverScreenKey && receiverReady && canActivateReceiver) {
+			attachedReceiverScreenKey.set(nextReceiverScreenKey);
+		}
+
+		const targetScreenKey = shouldTeleport
+			? attachedReceiverScreenKey.get()
+			: null;
+
 		const targetHostName = targetScreenKey
 			? createBoundaryContentPortalHostName(targetScreenKey, boundaryId)
 			: PORTAL_HOST_NAME_RESET_VALUE;

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

@@ -62,20 +62,18 @@ function HostImpl({ fallback = false, style }: HostImplProps) {
 		};
 	}, [fallback, hostKey, screenKey]);
 
-	const boundaryHosts = measurement.canRenderHosts
-		? activeBoundaryHosts.map((host) => (
-				<View
-					key={host.portalHostName}
-					pointerEvents={PORTAL_POINTER_EVENTS}
-					style={[
-						styles.boundaryHostViewport,
-						{ width: viewportWidth, height: viewportHeight },
-					]}
-				>
-					<PortalBoundaryHost host={host} style={StyleSheet.absoluteFill} />
-				</View>
-			))
-		: null;
+	const boundaryHosts = activeBoundaryHosts.map((host) => (
+		<View
+			key={host.portalHostName}
+			pointerEvents={PORTAL_POINTER_EVENTS}
+			style={[
+				styles.boundaryHostViewport,
+				{ width: viewportWidth, height: viewportHeight },
+			]}
+		>
+			<PortalBoundaryHost host={host} style={StyleSheet.absoluteFill} />
+		</View>
+	));
 
 	return (
 		<Animated.View

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

@@ -16,7 +16,6 @@ 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 { hasLocalSlot } from "../helpers/has-local-slot";
 import { resolvePortalOffsetStyle } from "../helpers/offset-style";
 import { getPortalHostBounds } from "../stores/host-bounds.store";
 import type { ActivePortalBoundaryHost } from "../stores/portal-boundary-host.store";
@@ -44,11 +43,10 @@ export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 		}
 
 		const link = getLink(host.pairKey, host.boundaryId);
-		const hasGeometry =
-			link?.source !== null &&
-			link !== undefined &&
-			getPortalHostBounds(host.hostKey) !== null &&
-			hasLocalSlot(host.localStylesMaps.get(), 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);
@@ -103,20 +101,6 @@ export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 	});
 	const slotStyle = useAnimatedStyle(() => {
 		"worklet";
-		// `slotsMap` is the resolved map: it may contain real interpolator output,
-		// inherited styles, or resolver-created reset patches for slots that just
-		// disappeared. Normal components need those reset patches so stale styles
-		// clear correctly.
-		//
-		// A screen-level portal host is different. It is only the temporary visual
-		// receiver for teleported content, not the original component that needs a
-		// cleanup frame. If the current local interpolator layers did not emit this
-		// boundary id, any resolved style here is cleanup/stale residue and should
-		// not be drawn by the host.
-		if (!hasLocalSlot(host.localStylesMaps.get(), host.boundaryId)) {
-			return NO_STYLES;
-		}
-
 		const slot = host.slotsMap.get()[host.boundaryId];
 
 		return composeSlotStyleWithLocalTransform(

package/src/shared/components/boundary/portal/components/boundary-portal/helpers/active-pair.ts

@@ -0,0 +1,36 @@
+import { getLinkKeyFromTag } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
+import type {
+	LinkPairsState,
+	ScreenPairKey,
+} from "../../../../../../stores/bounds/types";
+
+type HasActiveBoundaryPortalLinkParams = {
+	boundaryId: string;
+	pairsState: LinkPairsState;
+	sourcePairKey?: ScreenPairKey;
+};
+
+export const hasActiveBoundaryPortalLink = ({
+	boundaryId,
+	pairsState,
+	sourcePairKey,
+}: HasActiveBoundaryPortalLinkParams): boolean => {
+	"worklet";
+	if (!sourcePairKey) {
+		return false;
+	}
+
+	const pair = pairsState[sourcePairKey];
+	const linkKey = getLinkKeyFromTag(boundaryId);
+	const link = pair?.links[linkKey];
+
+	if (!link?.source) {
+		return false;
+	}
+
+	if (link.group && pair.groups[link.group]?.activeId !== linkKey) {
+		return false;
+	}
+
+	return true;
+};

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

@@ -0,0 +1,107 @@
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import {
+	runOnJS,
+	type SharedValue,
+	useAnimatedReaction,
+} from "react-native-reanimated";
+import { getPairKeyForSource } from "../../../../../../stores/bounds/internals/links";
+import type { ScreenPairKey } from "../../../../../../stores/bounds/types";
+import type { NormalizedTransitionInterpolatedStyle } from "../../../../../../types/animation.types";
+import { createBoundaryPortalHostName } from "../../../utils/naming";
+import {
+	mountPortalBoundaryHost,
+	unmountPortalBoundaryHostByName,
+} from "../stores/portal-boundary-host.store";
+
+type UseActivePortalBoundaryHostParams = {
+	boundaryId: string;
+	currentScreenKey: string;
+	escapeHostKey?: string;
+	portalHostName: SharedValue<string | null>;
+	portalHostReady: SharedValue<boolean>;
+	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
+};
+
+type ActivePortal = {
+	pairKey: ScreenPairKey;
+};
+
+export const useActivePortalBoundaryHost = ({
+	boundaryId,
+	currentScreenKey,
+	escapeHostKey,
+	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;
+		}
+
+		activePairKeyRef.current = pairKey;
+		setActivePortal(pairKey ? { pairKey } : null);
+	}, []);
+
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			const isBoundaryAnimating = slotsMap.get()[boundaryId] !== undefined;
+			if (!isBoundaryAnimating) {
+				return null;
+			}
+
+			return getPairKeyForSource(boundaryId, currentScreenKey);
+		},
+		(pairKey, previousPairKey) => {
+			"worklet";
+			if (pairKey === previousPairKey) {
+				return;
+			}
+
+			runOnJS(updateActivePortal)(pairKey);
+		},
+	);
+
+	useLayoutEffect(() => {
+		if (!activePortal || !escapeHostKey) {
+			portalHostName.set(null);
+			portalHostReady.set(false);
+			return;
+		}
+
+		const nextPortalHostName = createBoundaryPortalHostName(
+			escapeHostKey,
+			boundaryId,
+			activePortal.pairKey,
+		);
+
+		mountPortalBoundaryHost({
+			boundaryId,
+			hostKey: escapeHostKey,
+			pairKey: activePortal.pairKey,
+			portalHostName: nextPortalHostName,
+			portalHostReady,
+			screenKey: currentScreenKey,
+			slotsMap,
+		});
+		portalHostName.set(nextPortalHostName);
+
+		return () => {
+			portalHostName.set(null);
+			portalHostReady.set(false);
+			unmountPortalBoundaryHostByName(nextPortalHostName);
+		};
+	}, [
+		activePortal,
+		boundaryId,
+		currentScreenKey,
+		escapeHostKey,
+		portalHostName,
+		portalHostReady,
+		slotsMap,
+	]);
+};

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

@@ -1,97 +1,34 @@
-import { useLayoutEffect } from "react";
-import {
-	type SharedValue,
-	useAnimatedProps,
-	useSharedValue,
-} from "react-native-reanimated";
+import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
 import { useScreenSlots } from "../../../../../../providers/screen/styles";
-import { hasCloseTransitionFinished } from "../../../../../../providers/screen/styles/helpers/transition-visual-state";
-import { AnimationStore } from "../../../../../../stores/animation.store";
-import { getLinkKeyFromTag } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
-import { pairs } from "../../../../../../stores/bounds/internals/state";
-import { SystemStore } from "../../../../../../stores/system.store";
 import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
 import { isTeleportEnabled } from "../../../utils/teleport-control";
-import { createBoundaryPortalHostName } from "../helpers/host-name";
 import { useActiveHostKey } from "../stores/host-registry.store";
-import {
-	mountPortalBoundaryHost,
-	unmountPortalBoundaryHostByName,
-} from "../stores/portal-boundary-host.store";
+import { useActivePortalBoundaryHost } from "./use-active-portal-boundary-host";
 
 interface UseBoundaryPortalAttachmentParams {
 	boundaryId: string;
 }
 
-type AttachedDestination = {
-	animationProgress: SharedValue<number>;
-	closing: SharedValue<number>;
-};
-
 export const useBoundaryPortalAttachment = ({
 	boundaryId,
 }: UseBoundaryPortalAttachmentParams) => {
-	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
 	const currentScreenKey = useDescriptorsStore(
 		(s) => s.derivations.currentScreenKey,
 	);
-	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
-	const destinationScreenKey = nextScreenKey ?? currentScreenKey;
-	const destinationAnimationProgress = SystemStore.getValue(
-		destinationScreenKey,
-		"animationProgress",
-	);
-	const destinationClosing = AnimationStore.getValue(
-		destinationScreenKey,
-		"closing",
-	);
-	const { localStylesMaps, slotsMap } = useScreenSlots();
+	const { slotsMap } = useScreenSlots();
 	const portalHostName = useSharedValue<string | null>(null);
 	const portalHostReady = useSharedValue(false);
-	const attachedDestination = useSharedValue<AttachedDestination | null>(null);
 	const escapeHostKey = useActiveHostKey(currentScreenKey);
 
-	useLayoutEffect(() => {
-		if (!sourcePairKey || !escapeHostKey) {
-			portalHostName.set(null);
-			portalHostReady.set(false);
-			return;
-		}
-
-		const nextPortalHostName = createBoundaryPortalHostName(
-			escapeHostKey,
-			boundaryId,
-			sourcePairKey,
-		);
-
-		mountPortalBoundaryHost({
-			boundaryId,
-			hostKey: escapeHostKey,
-			localStylesMaps,
-			pairKey: sourcePairKey,
-			portalHostName: nextPortalHostName,
-			portalHostReady,
-			screenKey: currentScreenKey,
-			slotsMap,
-		});
-		portalHostName.set(nextPortalHostName);
-
-		return () => {
-			portalHostName.set(null);
-			portalHostReady.set(false);
-			unmountPortalBoundaryHostByName(nextPortalHostName);
-		};
-	}, [
+	useActivePortalBoundaryHost({
 		boundaryId,
 		currentScreenKey,
 		escapeHostKey,
-		localStylesMaps,
 		portalHostName,
 		portalHostReady,
-		sourcePairKey,
 		slotsMap,
-	]);
+	});
 
 	const teleportProps = useAnimatedProps(() => {
 		"worklet";
@@ -102,38 +39,17 @@ export const useBoundaryPortalAttachment = ({
 			teleport,
 			...slotProps
 		} = slot?.props ?? {};
-		const shouldTeleport = isTeleportEnabled(teleport);
-		const hostName = portalHostName.get();
-		const pair = sourcePairKey ? pairs.get()[sourcePairKey] : undefined;
-		const linkKey = getLinkKeyFromTag(boundaryId);
-		const link = pair?.links[linkKey];
-		const hasActiveLink =
-			link?.source !== null &&
-			link !== undefined &&
-			(!link.group || pair?.groups[link.group]?.activeId === linkKey);
-		const hasAttachableHost =
-			shouldTeleport && hasActiveLink && portalHostReady.get() && hostName;
-
-		if (hasAttachableHost) {
-			attachedDestination.set({
-				animationProgress: destinationAnimationProgress,
-				closing: destinationClosing,
-			});
-		}
-
-		const attached = attachedDestination.get();
-		const hasAttachedCloseFinished =
-			attached !== null &&
-			hasCloseTransitionFinished({
-				animationProgress: attached.animationProgress.get(),
-				closing: attached.closing.get(),
-			});
-		const canAttach = hasAttachableHost && !hasAttachedCloseFinished;
-		const targetHostName = canAttach ? hostName : PORTAL_HOST_NAME_RESET_VALUE;
+		const shouldAttach =
+			slot !== undefined &&
+			isTeleportEnabled(teleport) &&
+			portalHostReady.get();
+		const hostName = shouldAttach
+			? portalHostName.get()
+			: PORTAL_HOST_NAME_RESET_VALUE;
 
 		return {
 			...slotProps,
-			hostName: targetHostName,
+			hostName,
 		};
 	});
 

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,11 @@ 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,
-	isMeasurementInViewport,
-	normalizeMeasuredBoundsWithVisibilityGate,
+	correctMeasuredBoundsForVisibilityGate,
 } from "../../../../utils/measured-bounds";
 import {
 	clearPortalHostBounds,
@@ -48,8 +45,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 +71,8 @@ export const useHostMeasurement = ({
 			}
 
 			const measured = measure(hostRef);
-			const measuredOrigin = measure(originRef);
 
-			if (!measured || !measuredOrigin) {
+			if (!measured) {
 				cancelAnimation(retryToken);
 				retryToken.set(
 					withDelay(
@@ -90,7 +84,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,22 +93,15 @@ export const useHostMeasurement = ({
 				? adjustedMeasuredBoundsForOverscrollDeltas(measured, currentScroll)
 				: measured;
 
-			const normalizedMeasured = normalizeMeasuredBoundsWithVisibilityGate({
+			const correctedMeasured = correctMeasuredBoundsForVisibilityGate({
 				measured: overscrollNormalized,
-				origin: measuredOrigin,
 				visibilityBlocked: visibilityBlocked.get(),
 				visibilityBlockOffset: getVisibilityBlockOffset(viewportHeight),
 				viewportWidth,
 				viewportHeight,
 			});
 
-			if (
-				!isMeasurementInViewport(
-					normalizedMeasured,
-					viewportWidth,
-					viewportHeight,
-				)
-			) {
+			if (correctedMeasured.width <= 0 || correctedMeasured.height <= 0) {
 				cancelAnimation(retryToken);
 				retryToken.set(
 					withDelay(
@@ -127,16 +113,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 +133,6 @@ export const useHostMeasurement = ({
 	}, [hostKey]);
 
 	return {
-		canRenderHosts,
 		hostRef,
 	};
 };