react-native-screen-transitions 4.0.0-alpha.7 → 4.0.0-alpha.9

package/src/components/activity/activity-view.tsx

@@ -0,0 +1,93 @@
+import { Activity, type ReactNode } from "react";
+import {
+	type HostComponent,
+	NativeComponentRegistry,
+	type ViewProps,
+} from "react-native";
+
+export type ActivityViewMode = "normal" | "inert" | "paused";
+
+interface ActivityViewProps {
+	children: ReactNode;
+	mode: ActivityViewMode;
+	visible: boolean;
+}
+
+/**
+ * Separates React lifecycle activity from native presentation.
+ *
+ * A paused Activity tears down effects and deprioritizes updates. Keeping an
+ * explicit display value on its host view lets `pause` preserve the last paint,
+ * while `hide` can pause the same subtree and remove its presentation.
+ */
+export function ActivityView({ children, mode, visible }: ActivityViewProps) {
+	const activityMode = mode === "paused" ? "hidden" : "visible";
+	const display = visible ? "contents" : "none";
+	const { ContentView, PaintView } = getNativeActivityViews();
+
+	return (
+		<Activity mode={activityMode}>
+			<ContentView style={{ display: "contents" }}>
+				<PaintView style={{ display }}>{children}</PaintView>
+			</ContentView>
+		</Activity>
+	);
+}
+
+const ACTIVITY_CONTENT_STYLE: Record<
+	string,
+	true | { process?: (value: unknown) => unknown }
+> = {
+	display: {
+		// Activity writes display:none to its nearest host child. Preserve the
+		// native paint while React pauses the subtree.
+		process: () => "contents",
+	},
+};
+
+const ACTIVITY_PAINT_STYLE: Record<
+	string,
+	true | { process?: (value: unknown) => unknown }
+> = {
+	display: {
+		process: (value: unknown) => (value === "none" ? "none" : "contents"),
+	},
+};
+
+const ACTIVITY_CONTENT_VIEW_CONFIG = {
+	uiViewClassName: "RCTView",
+	validAttributes: { style: ACTIVITY_CONTENT_STYLE },
+};
+
+const ACTIVITY_PAINT_VIEW_CONFIG = {
+	uiViewClassName: "RCTView",
+	validAttributes: { style: ACTIVITY_PAINT_STYLE },
+};
+
+type NativeActivityViewProps = Omit<ViewProps, "style"> & {
+	style?: { display?: "contents" | "none" };
+};
+
+let nativeActivityViews:
+	| {
+			ContentView: HostComponent<NativeActivityViewProps>;
+			PaintView: HostComponent<NativeActivityViewProps>;
+	  }
+	| undefined;
+
+function getNativeActivityViews() {
+	if (!nativeActivityViews) {
+		nativeActivityViews = {
+			ContentView: NativeComponentRegistry.get<NativeActivityViewProps>(
+				"ScreenTransitionsActivityContentView",
+				() => ACTIVITY_CONTENT_VIEW_CONFIG,
+			),
+			PaintView: NativeComponentRegistry.get<NativeActivityViewProps>(
+				"ScreenTransitionsActivityPaintView",
+				() => ACTIVITY_PAINT_VIEW_CONFIG,
+			),
+		};
+	}
+
+	return nativeActivityViews;
+}

package/src/components/activity/activity-view.web.tsx

@@ -0,0 +1,79 @@
+/// <reference lib="dom" />
+
+import { Activity, type ReactNode, useCallback } from "react";
+import { StyleSheet, View } from "react-native";
+
+export type ActivityViewMode = "normal" | "inert" | "paused";
+
+interface ActivityViewProps {
+	children: ReactNode;
+	mode: ActivityViewMode;
+	visible: boolean;
+}
+
+/**
+ * Web Activity writes display:none directly to its host child. Observe that
+ * write so lifecycle pausing and retained paint remain independent there too.
+ */
+export function ActivityView({ children, mode, visible }: ActivityViewProps) {
+	const display = visible ? "flex" : "none";
+	const activityMode = mode === "paused" ? "hidden" : "visible";
+	const onRef = useCallback(
+		(node: React.ComponentRef<typeof View> | null) => {
+			if (!(node instanceof HTMLElement)) {
+				return;
+			}
+
+			const childObservers: MutationObserver[] = [];
+			const observeChildren = () => {
+				for (const observer of childObservers) {
+					observer.disconnect();
+				}
+				childObservers.length = 0;
+
+				node.childNodes.forEach((child) => {
+					if (!(child instanceof HTMLElement)) {
+						return;
+					}
+
+					child.style.display = display;
+					const observer = new MutationObserver(() => {
+						child.style.display = display;
+					});
+					observer.observe(child, {
+						attributes: true,
+						attributeFilter: ["style"],
+					});
+					childObservers.push(observer);
+				});
+			};
+
+			observeChildren();
+			const observer = new MutationObserver(observeChildren);
+			observer.observe(node, { childList: true });
+
+			return () => {
+				observer.disconnect();
+				for (const childObserver of childObservers) {
+					childObserver.disconnect();
+				}
+			};
+		},
+		[display],
+	);
+
+	return (
+		<View ref={onRef} collapsable={false} style={styles.contents}>
+			<Activity mode={activityMode}>
+				<View collapsable={false} style={[styles.content, { display }]}>
+					{children}
+				</View>
+			</Activity>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	contents: { display: "contents" },
+	content: { flex: 1 },
+});

package/src/components/activity/variants/activity-container.tsx

@@ -1,25 +1,13 @@
 import { StyleSheet, View } from "react-native";
 
-import { ScreenContainer } from "react-native-screens";
-import { IS_WEB } from "../../../constants";
-import { useStack } from "../../../hooks/navigation/use-stack";
-
 interface Props {
 	children: React.ReactNode;
 }
 
 export const ActivityContainer = ({ children }: Props) => {
-	const nativeScreenDisabled = useStack((s) => s.flags.DISABLE_NATIVE_SCREENS);
-	const Component = IS_WEB || nativeScreenDisabled ? View : ScreenContainer;
 	return (
-		<Component collapsable={false} style={styles.container}>
+		<View collapsable={false} style={StyleSheet.absoluteFill}>
 			{children}
-		</Component>
+		</View>
 	);
 };
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-	},
-});

package/src/components/activity/variants/activity-screen.tsx

@@ -2,23 +2,13 @@ import type * as React from "react";
 import { memo } from "react";
 import { StyleSheet, View, type ViewProps } from "react-native";
 import { useDerivedValue } from "react-native-reanimated";
-import { Screen } from "react-native-screens";
-import { IS_WEB } from "../../../constants";
-import { useStack } from "../../../hooks/navigation/use-stack";
 import { useSharedValueState } from "../../../hooks/reanimated/use-shared-value-state";
 import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
 import { AnimationStore } from "../../../stores/animation.store";
 import type { StackSceneActivity } from "../../../types/stack.types";
+import { ActivityView, type ActivityViewMode } from "../activity-view";
 import { DEFAULT_INACTIVE_BEHAVIOR, type InactiveBehavior } from "../helpers";
 
-type ActivityState = 0 | 1 | 2;
-const ActivityStateByActivity = {
-	active: 2,
-	inert: 1,
-	inactive: 0,
-	closing: 1,
-} satisfies Record<StackSceneActivity, ActivityState>;
-
 const PointerEventsByActivity = {
 	active: "auto",
 	inert: "auto",
@@ -27,53 +17,32 @@ const PointerEventsByActivity = {
 } satisfies Record<StackSceneActivity, ViewProps["pointerEvents"]>;
 
 interface ActivityScreenProps {
-	activity?: StackSceneActivity;
 	children: React.ReactNode;
 	inactiveBehavior?: InactiveBehavior;
 	paintDriverRouteKey?: string;
 	hasNestedState?: boolean;
-	routeKey?: string;
+	routeKey: string;
 }
 
 export const ActivityScreen = memo(function ActivityScreen({
-	activity,
 	children,
 	inactiveBehavior,
 	paintDriverRouteKey,
 	hasNestedState,
 	routeKey,
 }: ActivityScreenProps) {
-	const stackActivity = useBlankStackStore((store) =>
-		routeKey ? store?.scenesByKey[routeKey]?.activity : undefined,
-	);
-	const stackInactiveBehavior = useBlankStackStore((store) =>
-		routeKey
-			? (
-					store?.scenesByKey[routeKey]?.descriptor.options as
-						| { inactiveBehavior?: InactiveBehavior }
-						| undefined
-				)?.inactiveBehavior
-			: undefined,
+	const scene = useBlankStackStore((store) => store.scenesByKey[routeKey]);
+	const stackPaintDriverRouteKey = useBlankStackStore((store) =>
+		store.paintDriverRouteKeyByRouteKey.get(routeKey),
 	);
-	const stackRoute = useBlankStackStore((store) =>
-		routeKey ? store?.scenesByKey[routeKey]?.route : undefined,
-	);
-	const stackPaintDriverRouteKey = useBlankStackStore((store) => {
-		if (!routeKey || !store) {
-			return undefined;
-		}
-
-		const routeIndex = store.routeKeys.indexOf(routeKey);
-		return store.routeKeys[routeIndex + 2];
-	});
-	const resolvedActivity = activity ?? stackActivity ?? "active";
+	const stackInactiveBehavior = (
+		scene.descriptor.options as { inactiveBehavior?: InactiveBehavior }
+	).inactiveBehavior;
 	const resolvedInactiveBehavior =
 		inactiveBehavior ?? stackInactiveBehavior ?? DEFAULT_INACTIVE_BEHAVIOR;
 	const resolvedPaintDriverRouteKey =
 		paintDriverRouteKey ?? stackPaintDriverRouteKey;
-	const resolvedHasNestedState =
-		hasNestedState ?? (stackRoute ? "state" in stackRoute : false);
-	const nativeScreenDisabled = useStack((s) => s.flags.DISABLE_NATIVE_SCREENS);
+	const resolvedHasNestedState = hasNestedState ?? "state" in scene.route;
 	const paintDriverAnimations = resolvedPaintDriverRouteKey
 		? AnimationStore.getBag(resolvedPaintDriverRouteKey)
 		: undefined;
@@ -97,77 +66,41 @@ export const ActivityScreen = memo(function ActivityScreen({
 
 	const isPaintDriverSettledOnJS = useSharedValueState(isPaintDriverSettled);
 
-	let activityState: ActivityState = ActivityStateByActivity[resolvedActivity];
-	let shouldFreeze = false;
-	let visible = resolvedActivity !== "inactive";
+	let activityViewMode: ActivityViewMode =
+		scene.activity === "active" ? "normal" : "inert";
+	let visible = scene.activity !== "inactive";
 
-	const shouldWaitForPaintDriver = !isPaintDriverSettledOnJS;
-
-	if (resolvedActivity === "inactive") {
-		if (resolvedInactiveBehavior === "keep") {
-			activityState = 1;
-			visible = true;
-		} else if (shouldWaitForPaintDriver) {
-			// Delay hiding until the paint driver has settled to avoid
-			// a blank frame during the transition.
-			activityState = 1;
+	if (scene.activity === "inactive") {
+		if (resolvedInactiveBehavior === "keep" || !isPaintDriverSettledOnJS) {
 			visible = true;
 		} else if (resolvedInactiveBehavior === "pause") {
-			activityState = 1;
-			shouldFreeze = true;
+			activityViewMode = "paused";
 			visible = true;
 		} else {
-			// `hide` freezes and hides native presentation. Non-nested
-			// `unmount` removes the React subtree through the JS guard below.
-			activityState = 0;
-			shouldFreeze = true;
+			activityViewMode = "paused";
 			visible = false;
 		}
 	}
 
 	const shouldUnmount =
 		resolvedInactiveBehavior === "unmount" &&
-		resolvedActivity === "inactive" &&
+		scene.activity === "inactive" &&
 		!resolvedHasNestedState &&
 		isPaintDriverSettledOnJS;
 
-	const pointerEvents = PointerEventsByActivity[resolvedActivity];
-
 	if (shouldUnmount) {
 		return null;
 	}
 
-	const style = [StyleSheet.absoluteFill, visible ? undefined : styles.hidden];
-
-	if (IS_WEB || nativeScreenDisabled) {
-		return (
-			<View style={style} pointerEvents={pointerEvents} collapsable={false}>
-				{children}
-			</View>
-		);
-	}
-
 	return (
-		<Screen
-			style={style}
-			activityState={activityState}
-			shouldFreeze={shouldFreeze}
-			pointerEvents={pointerEvents}
+		<View
+			style={StyleSheet.absoluteFill}
+			pointerEvents={PointerEventsByActivity[scene.activity]}
 			collapsable={false}
 		>
-			{children}
-		</Screen>
+			<ActivityView mode={activityViewMode} visible={visible}>
+				{children}
+			</ActivityView>
+		</View>
 	);
 });
-
-const HIDDEN_SCREEN_OFFSET = 10_000;
-const styles = StyleSheet.create({
-	hidden: {
-		// NOTE:
-		// When setting a screen to display:"none", the gesture detector will not recognize anymore. Since I believe
-		// rngh is attaching itself to its nearest native view, this of course would kill the detector.
-		// To avoid this, we use a transform to move the screen off-screen instead of display: "none". This isn't my favorite approach,
-		// but i'm hoping react 19's activity could mitigate this better and avoid dependence on rns.
-		transform: [{ translateY: HIDDEN_SCREEN_OFFSET }],
-	},
-});

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

@@ -13,7 +13,7 @@ import {
 import { BoundaryPortal } from "../portal/components/boundary-portal";
 import {
 	TARGET_OUTSIDE_ROOT_WARNING,
-	useBoundaryRootStore,
+	useOptionalBoundaryRootStore,
 } from "../providers/boundary-root.provider";
 
 type BoundaryTargetProps = Omit<
@@ -36,7 +36,7 @@ const BoundaryTargetInner = (props: InternalBoundaryTargetProps) => {
 		style,
 		...rest
 	} = props;
-	const rootContext = useBoundaryRootStore();
+	const rootContext = useOptionalBoundaryRootStore();
 	const boundaryId = rootContext?.boundTag.tag;
 	const isActiveTarget = active === true && rootContext !== null;
 	const portalRuntime = rootContext?.portalRuntime;
@@ -68,7 +68,6 @@ const BoundaryTargetInner = (props: InternalBoundaryTargetProps) => {
 		<BoundaryPortal
 			boundaryId={boundaryId ?? ""}
 			enabled={shouldEscapeTargetToScreenHost}
-			localMeasurement={rootContext?.localMeasurement}
 			placeholderRef={measurementRef}
 		>
 			<Animated.View

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

@@ -10,7 +10,10 @@ import {
 	BOUNDARY_TARGET_ACTIVE_PROP,
 	BoundaryTarget,
 } from "./components/boundary-target";
-import { BoundaryContentPortalHost } from "./portal/components/boundary-content-portal";
+import {
+	BoundaryContentPortal,
+	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";
@@ -78,7 +81,6 @@ export function createBoundaryComponent<P extends object>(
 					<BoundaryPortal
 						boundaryId={root.boundTag.tag}
 						enabled={root.shouldRenderBoundaryRootThroughPortal}
-						localMeasurement={root.localMeasurement}
 						placeholderRef={root.measurementRef}
 					>
 						<AnimatedComponent
@@ -92,7 +94,12 @@ export function createBoundaryComponent<P extends object>(
 								enabled={root.shouldRenderHandoffHost}
 								screenKey={root.currentScreenKey}
 							>
-								{targetResolution.children}
+								<BoundaryContentPortal
+									boundaryId={root.boundTag.tag}
+									enabled={root.shouldRenderHandoffHost}
+								>
+									{targetResolution.children}
+								</BoundaryContentPortal>
 							</BoundaryContentPortalHost>
 						</AnimatedComponent>
 					</BoundaryPortal>

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

@@ -7,8 +7,8 @@ import {
 	withTiming,
 } from "react-native-reanimated";
 import { scheduleOnUI } from "react-native-worklets";
-import { useStack } from "../../../../hooks/navigation/use-stack";
 import { useDescriptorsStore } from "../../../../providers/screen/descriptors";
+import { useBlankStackStore } from "../../../../providers/stack/blank-stack.provider";
 import { AnimationStore } from "../../../../stores/animation.store";
 import {
 	createScreenPairKey,
@@ -60,7 +60,7 @@ export const useInitialDestinationMeasurement = ({
 	const preferredSourceScreenKey = destinationPairKey
 		? getSourceScreenKeyFromPairKey(destinationPairKey)
 		: undefined;
-	const stackScenes = useStack((store) => store.scenes);
+	const stackScenes = useBlankStackStore((store) => store.scenes);
 	// A retained closing screen can still have registered boundaries, but it
 	// cannot own a new transition link.
 	const closingSourceScreenKeys = useMemo(

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

@@ -3,7 +3,7 @@ import type { View } from "react-native";
 import { useWindowDimensions } from "react-native";
 import type { AnimatedRef, StyleProps } from "react-native-reanimated";
 import { applyMeasuredBoundsWrites } from "../../../providers/helpers/measured-bounds-writes";
-import { useScreenSlots } from "../../../providers/screen/styles";
+import { useScreenSlotStore } from "../../../providers/screen/styles";
 import type { BoundTag } from "../../../stores/bounds/types";
 import { ScrollStore } from "../../../stores/scroll.store";
 import { SystemStore } from "../../../stores/system.store";
@@ -46,7 +46,9 @@ export const useMeasurer = ({
 		currentScreenKey,
 		"pendingLifecycleStartBlockCount",
 	);
-	const { visibilityBlocked } = useScreenSlots();
+	const visibilityBlocked = useScreenSlotStore(
+		(store) => store.visibilityBlocked,
+	);
 
 	return useCallback(
 		(target) => {

package/src/components/boundary/index.tsx

@@ -24,11 +24,7 @@ const BoundaryPrimitive = forwardRef<View, BoundaryPrimitiveProps>(
 BoundaryPrimitive.displayName = "Transition.Boundary.Primitive";
 
 const BoundaryRoot = createBoundaryComponent(BoundaryPrimitive);
-const BoundaryView = createBoundaryComponent(View);
-const BoundaryTrigger = createBoundaryComponent(Pressable);
 BoundaryRoot.displayName = "Transition.Boundary";
-BoundaryView.displayName = "Transition.Boundary.View";
-BoundaryTrigger.displayName = "Transition.Boundary.Trigger";
 BoundaryTarget.displayName = "Transition.Boundary.Target";
 Host.displayName = "Transition.Boundary.Host";
 
@@ -60,14 +56,6 @@ export interface BoundaryComponent extends BoundaryRootComponent {
 	 * Explicit host for clipping-escape placement.
 	 */
 	Host: typeof Host;
-	/**
-	 * @deprecated Use `Transition.Boundary` without `onPress`.
-	 */
-	View: typeof BoundaryView;
-	/**
-	 * @deprecated Use `Transition.Boundary` with `onPress`.
-	 */
-	Trigger: typeof BoundaryTrigger;
 }
 
 export type BoundaryProps = BoundaryComponentProps<BoundaryPrimitiveProps>;
@@ -75,6 +63,4 @@ export type BoundaryProps = BoundaryComponentProps<BoundaryPrimitiveProps>;
 export const Boundary = Object.assign(BoundaryRoot, {
 	Target: BoundaryTarget,
 	Host,
-	View: BoundaryView,
-	Trigger: BoundaryTrigger,
 }) as BoundaryComponent;

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

@@ -1,8 +1,11 @@
 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 {
+	useOptionalScreenSlotStore,
+	useScreenSlotStore,
+} from "../../../../../../providers/screen/styles";
 import { hasCloseTransitionFinished } from "../../../../../../providers/screen/styles/helpers/transition-visual-state";
+import { useBlankStackStore } from "../../../../../../providers/stack/blank-stack.provider";
 import { AnimationStore } from "../../../../../../stores/animation.store";
 import { getLinkKeyFromTag } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
 import { getEntry } from "../../../../../../stores/bounds/internals/entries";
@@ -24,15 +27,26 @@ interface UseBoundaryContentPortalAttachmentParams {
 export const useBoundaryContentPortalAttachment = ({
 	boundaryId,
 }: UseBoundaryContentPortalAttachmentParams) => {
-	const { nextInterpolatorReady, slotsMap } = useScreenSlots();
+	const slotsMap = useScreenSlotStore((store) => store.slotsMap);
 
 	const currentScreenKey = useDescriptorsStore(
 		(s) => s.derivations.currentScreenKey,
 	);
+	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
 	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
+	const destinationSlots = useOptionalScreenSlotStore(
+		nextScreenKey ?? currentScreenKey,
+	);
+	const unavailableInterpolatorReady = useSharedValue(0);
+	const interpolatorReady =
+		destinationSlots?.interpolatorReady ?? unavailableInterpolatorReady;
 
-	const activeReceiverScreenKey = useStack(resolveActiveHandoffReceiver);
-	const previousReceiverScreenKey = useStack(resolvePreviousHandoffReceiver);
+	const activeReceiverScreenKey = useBlankStackStore(
+		resolveActiveHandoffReceiver,
+	);
+	const previousReceiverScreenKey = useBlankStackStore(
+		resolvePreviousHandoffReceiver,
+	);
 
 	const activeReceiverAnimationProgress = SystemStore.getValue(
 		activeReceiverScreenKey ?? currentScreenKey,
@@ -85,7 +99,7 @@ export const useBoundaryContentPortalAttachment = ({
 				? link.destination.screenKey
 				: null;
 
-		const interpolatorReady = nextInterpolatorReady.get();
+		const isInterpolatorReady = interpolatorReady.get();
 		const attachedScreenKey = attachedReceiverScreenKey.get();
 
 		const nextReceiverScreenKey = resolveHandoffAttachmentCandidate({
@@ -93,7 +107,7 @@ export const useBoundaryContentPortalAttachment = ({
 			activeReceiverScreenKey,
 			attachedReceiverScreenKey: attachedScreenKey,
 			hasActiveCloseFinished,
-			interpolatorReady: !!interpolatorReady,
+			interpolatorReady: !!isInterpolatorReady,
 			pairChangedDuringClose,
 			pairDestinationScreenKey: pairDestination,
 			previousReceiverScreenKey,
@@ -110,7 +124,7 @@ export const useBoundaryContentPortalAttachment = ({
 
 		const activatingPairDestination =
 			!!pairDestination &&
-			!!interpolatorReady &&
+			!!isInterpolatorReady &&
 			nextReceiverScreenKey === pairDestination;
 
 		const canActivateReceiver =

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

@@ -21,6 +21,23 @@ type UseActivePortalBoundaryHostParams = {
 	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
 };
 
+export const resolveActivePortalPairKey = ({
+	pairKey,
+	measurementPairKey,
+	hasAnimatedSlot,
+}: {
+	pairKey: ScreenPairKey | null;
+	measurementPairKey: ScreenPairKey | null | undefined;
+	hasAnimatedSlot: boolean;
+}): ScreenPairKey | null => {
+	"worklet";
+	if (!pairKey || measurementPairKey !== pairKey || !hasAnimatedSlot) {
+		return null;
+	}
+
+	return pairKey;
+};
+
 export const useActivePortalBoundaryHost = ({
 	boundaryId,
 	currentScreenKey,
@@ -43,11 +60,12 @@ export const useActivePortalBoundaryHost = ({
 			"worklet";
 			const pairKey = getPairKeyForSource(boundaryId, currentScreenKey);
 			const measurement = localMeasurement.get();
-			if (!pairKey || measurement?.pairKey !== pairKey) {
-				return null;
-			}
 
-			return pairKey;
+			return resolveActivePortalPairKey({
+				pairKey,
+				measurementPairKey: measurement?.pairKey,
+				hasAnimatedSlot: slotsMap.get()[boundaryId] !== undefined,
+			});
 		},
 		(pairKey, previousPairKey) => {
 			"worklet";

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

@@ -1,7 +1,7 @@
 import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
-import { useScreenSlots } from "../../../../../../providers/screen/styles";
-import type { BoundaryLocalMeasurementValue } from "../../../../types";
+import { useScreenSlotStore } 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";
@@ -9,17 +9,22 @@ import { useActivePortalBoundaryHost } from "./use-active-portal-boundary-host";
 
 interface UseBoundaryPortalAttachmentParams {
 	boundaryId: string;
-	localMeasurement: BoundaryLocalMeasurementValue;
 }
 
 export const useBoundaryPortalAttachment = ({
 	boundaryId,
-	localMeasurement,
 }: 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,
 	);
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useScreenSlotStore((store) => store.slotsMap);
 	const portalHostName = useSharedValue<string | null>(null);
 	const portalHostReady = useSharedValue(false);
 	const escapeHostKey = useActiveHostKey(currentScreenKey);