react-native-screen-transitions 3.11.2 → 3.12.0

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;

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

@@ -1,61 +1,37 @@
-import { useLayoutEffect } from "react";
 import type { View } from "react-native";
 import {
 	cancelAnimation,
+	type MeasuredDimensions,
 	measure,
-	runOnUI,
-	type SharedValue,
 	useAnimatedReaction,
 	useAnimatedRef,
 	useSharedValue,
 	withDelay,
 	withTiming,
 } from "react-native-reanimated";
-import { ScrollStore } from "../../../../../../stores/scroll.store";
-import { getVisibilityBlockOffset } from "../../../../../../utils/visibility-block-offset";
-import {
-	adjustedMeasuredBoundsForOverscrollDeltas,
-	correctMeasuredBoundsForVisibilityGate,
-} from "../../../../utils/measured-bounds";
-import {
-	clearPortalHostBounds,
-	setPortalHostBounds,
-} from "../stores/host-bounds.store";
 
 const HOST_MEASUREMENT_RETRY_DELAY_MS = 16;
 
 type UseHostMeasurementParams = {
-	capturesScroll: boolean;
-	enabled: boolean;
-	hostKey: string;
-	screenKey: string;
-	visibilityBlocked: SharedValue<boolean>;
-	viewportHeight: number;
-	viewportWidth: number;
+	measurementKey: string | null;
 };
 
 export const useHostMeasurement = ({
-	capturesScroll,
-	enabled,
-	hostKey,
-	screenKey,
-	visibilityBlocked,
-	viewportHeight,
-	viewportWidth,
+	measurementKey,
 }: UseHostMeasurementParams) => {
 	const hostRef = useAnimatedRef<View>();
-	const scrollMetadata = ScrollStore.getValue(screenKey, "metadata");
-	const hasMeasuredHost = useSharedValue(false);
+	const hostBounds = useSharedValue<MeasuredDimensions | null>(null);
+	const measuredKey = useSharedValue<string | null>(null);
 	const retryToken = useSharedValue(0);
 
 	useAnimatedReaction(
 		() => {
 			"worklet";
-			if (!enabled) {
+			if (!measurementKey) {
 				return null;
 			}
 
-			return [hasMeasuredHost.get(), retryToken.get()] as const;
+			return [measurementKey, measuredKey.get(), retryToken.get()] as const;
 		},
 		(state) => {
 			"worklet";
@@ -64,9 +40,8 @@ export const useHostMeasurement = ({
 				return;
 			}
 
-			const [hasAlreadyMeasured] = state;
-
-			if (!enabled || hasAlreadyMeasured) {
+			const [requestedKey, completedKey] = state;
+			if (requestedKey === completedKey) {
 				return;
 			}
 
@@ -85,23 +60,7 @@ export const useHostMeasurement = ({
 
 			cancelAnimation(retryToken);
 
-			// A measurement taken mid rubber-band would bake the transient
-			// overscroll displacement into the host frame. Store the at-rest
-			// position instead; clamped scroll deltas share that basis.
-			const currentScroll = scrollMetadata.get();
-			const overscrollNormalized = capturesScroll
-				? adjustedMeasuredBoundsForOverscrollDeltas(measured, currentScroll)
-				: measured;
-
-			const correctedMeasured = correctMeasuredBoundsForVisibilityGate({
-				measured: overscrollNormalized,
-				visibilityBlocked: visibilityBlocked.get(),
-				visibilityBlockOffset: getVisibilityBlockOffset(viewportHeight),
-				viewportWidth,
-				viewportHeight,
-			});
-
-			if (correctedMeasured.width <= 0 || correctedMeasured.height <= 0) {
+			if (measured.width <= 0 || measured.height <= 0) {
 				cancelAnimation(retryToken);
 				retryToken.set(
 					withDelay(
@@ -112,27 +71,21 @@ export const useHostMeasurement = ({
 				return;
 			}
 
-			setPortalHostBounds(hostKey, {
-				x: correctedMeasured.x,
-				y: correctedMeasured.y,
-				width: correctedMeasured.width,
-				height: correctedMeasured.height,
-				pageX: correctedMeasured.pageX,
-				pageY: correctedMeasured.pageY,
-				scroll: capturesScroll ? currentScroll : null,
+			hostBounds.set({
+				x: measured.x,
+				y: measured.y,
+				width: measured.width,
+				height: measured.height,
+				pageX: measured.pageX,
+				pageY: measured.pageY,
 			});
-
-			hasMeasuredHost.set(true);
+			measuredKey.set(requestedKey);
 		},
 	);
 
-	useLayoutEffect(() => {
-		return () => {
-			runOnUI(clearPortalHostBounds)(hostKey);
-		};
-	}, [hostKey]);
-
 	return {
+		hostBounds,
 		hostRef,
+		measuredKey,
 	};
 };

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

@@ -71,6 +71,7 @@ const EnabledBoundaryPortal = memo(function EnabledBoundaryPortal({
 	}
 
 	const { teleportProps } = useBoundaryPortalAttachment({ boundaryId });
+
 	const { handleOnLayout, placeholderStyle } = usePlaceholderStyles();
 
 	return (

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

@@ -1,14 +1,15 @@
 import { useSyncExternalStore } from "react";
 import type { SharedValue } from "react-native-reanimated";
 import type { NormalizedTransitionInterpolatedStyle } from "../../../../../../types/animation.types";
+import type { BoundaryLocalMeasurementValue } from "../../../../types";
 
 export type ActivePortalBoundaryHost = {
 	boundaryId: string;
 	hostKey: string;
+	localMeasurement: BoundaryLocalMeasurementValue;
 	pairKey: string;
 	portalHostName: string;
 	portalHostReady: SharedValue<boolean>;
-	screenKey: string;
 	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
 };
 
@@ -54,10 +55,10 @@ const isSameHost = (
 	return (
 		a.boundaryId === b.boundaryId &&
 		a.hostKey === b.hostKey &&
+		a.localMeasurement === b.localMeasurement &&
 		a.pairKey === b.pairKey &&
 		a.portalHostName === b.portalHostName &&
 		a.portalHostReady === b.portalHostReady &&
-		a.screenKey === b.screenKey &&
 		a.slotsMap === b.slotsMap
 	);
 };