react-native-screen-transitions 4.1.0-alpha.0 → 4.1.0-beta.1

package/src/adapters/with-screen-transitions/stack-layout.tsx

@@ -1,16 +1,17 @@
 import type { NavigationState, Route } from "@react-navigation/native";
 import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { Overlay } from "../../components/overlay";
-import { ScreenComposer } from "../../providers/screen/screen-composer";
+import { Screen } from "../../components/screen/screen";
 import { BlankStackStoreProvider } from "../../providers/stack/blank-stack.provider";
-import { StackCoreProvider } from "../../providers/stack/core.provider";
 import type { BaseStackDescriptor, BaseStackRoute } from "../../types";
-import { isOverlayVisible } from "../../utils/overlay/visibility";
 import {
 	ScreenTransitionsAdapterProvider,
 	type ScreenTransitionsAdapterScene,
 	useScreenTransitionsAdapterContext,
 } from "./context";
+import { NativeStackLifecycle } from "./lifecycle";
 import {
 	type AdapterDescriptorOptions,
 	resolveAdapterTransitionOptions,
@@ -109,9 +110,8 @@ function buildTransitionStackState({
 
 		if (
 			!shouldShowFloatOverlay &&
-			(normalizedDescriptor.options as AdapterDescriptorOptions)
-				.enableTransitions &&
-			isOverlayVisible(normalizedDescriptor.options)
+			normalizedDescriptor.options.overlay &&
+			normalizedDescriptor.options.overlayShown !== false
 		) {
 			shouldShowFloatOverlay = true;
 		}
@@ -182,9 +182,9 @@ export function ScreenTransitionsStackLayout(
 	props: ScreenTransitionsStackContentProps,
 ) {
 	return (
-		<StackCoreProvider config={{ TRANSITIONS_ALWAYS_ON: false }}>
+		<GestureHandlerRootView style={styles.container}>
 			<ScreenTransitionsStackContent {...props} />
-		</StackCoreProvider>
+		</GestureHandlerRootView>
 	);
 }
 
@@ -207,5 +207,11 @@ export function ScreenTransitionsScreenLayout({
 
 	const scene = scenes[sceneIndex];
 
-	return <ScreenComposer routeKey={scene.route.key}>{children}</ScreenComposer>;
+	return (
+		<Screen routeKey={scene.route.key} lifecycle={NativeStackLifecycle}>
+			{children}
+		</Screen>
+	);
 }
+
+const styles = StyleSheet.create({ container: { flex: 1 } });

package/src/animation/snap-to.ts

@@ -1,7 +1,6 @@
 import { scheduleOnUI } from "react-native-worklets";
-import { AnimationStore } from "../stores/animation.store";
+import { getMotionStore } from "../providers/screen/motion";
 import type { HistoryEntry } from "../stores/history.store";
-import { SystemStore } from "../stores/system.store";
 import { animateToProgress } from "../utils/animation/animate-to-progress";
 import { resolveSnapTransitionSpec } from "../utils/animation/resolve-snap-transition-spec";
 import { logger } from "../utils/logger";
@@ -13,14 +12,13 @@ const getSortedSnapPoints = (
 	const snapPoints = descriptor.options?.snapPoints;
 	if (!snapPoints || snapPoints.length === 0) return null;
 
-	// Resolve 'auto' to the measured fraction stored in SystemStore
-	const autoVal = SystemStore.getValue(
+	// Resolve 'auto' to the measured fraction owned by Motion
+	const autoVal = getMotionStore(
 		descriptor.route.key,
-		"resolvedAutoSnapPoint",
-	).get();
+	).state.resolvedAutoSnapPoint.get();
 
 	const resolved = snapPoints
-		.map((p) => (p === "auto" ? autoVal : p))
+		.map((p) => (typeof p === "string" ? autoVal : p))
 		.filter((p): p is number => typeof p === "number" && p > 0);
 
 	return resolved.length > 0 ? resolved.sort((a, b) => a - b) : null;
@@ -44,15 +42,11 @@ export function snapDescriptorToIndex(
 	}
 
 	const targetProgress = sorted[index];
-	const animations = AnimationStore.getBag(descriptor.route.key);
-	const targetProgressValue = SystemStore.getValue(
-		descriptor.route.key,
-		"targetProgress",
-	);
-	const animationProgressValue = SystemStore.getValue(
-		descriptor.route.key,
-		"animationProgress",
-	);
+	const animations = getMotionStore(descriptor.route.key).state;
+	const {
+		targetProgress: targetProgressValue,
+		animationProgress: animationProgressValue,
+	} = animations;
 
 	scheduleOnUI(() => {
 		"worklet";

package/src/animation/transition-blocking.ts

@@ -1,5 +1,5 @@
+import { getMotionStore } from "../providers/screen/motion";
 import { HistoryStore } from "../stores/history.store";
-import { SystemStore } from "../stores/system.store";
 import type { ScreenKey } from "../types/screen.types";
 import { logger } from "../utils/logger";
 
@@ -52,7 +52,7 @@ export function blockTransition(routeKey?: ScreenKey): void {
 		return;
 	}
 
-	SystemStore.getBag(resolvedRouteKey).actions.blockLifecycleStart();
+	getMotionStore(resolvedRouteKey).state.actions.blockLifecycleStart();
 }
 
 /**
@@ -75,5 +75,5 @@ export function unblockTransition(routeKey?: ScreenKey): void {
 		return;
 	}
 
-	SystemStore.getBag(resolvedRouteKey).actions.unblockLifecycleStart();
+	getMotionStore(resolvedRouteKey).state.actions.unblockLifecycleStart();
 }

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

@@ -1,51 +1,62 @@
 import type * as React from "react";
-import { memo } from "react";
+import { memo, useState } from "react";
 import { StyleSheet, View, type ViewProps } from "react-native";
 import { useDerivedValue } from "react-native-reanimated";
 import { useSharedValueState } from "../../../hooks/reanimated/use-shared-value-state";
+import { useOptionalMotionStore } from "../../../providers/screen/motion";
 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";
 
+// Let the content and backdrop layers decide whether to capture touches.
 const PointerEventsByActivity = {
-	active: "auto",
-	inert: "auto",
+	active: "box-none",
+	inert: "box-none",
 	inactive: "none",
 	closing: "none",
 } satisfies Record<StackSceneActivity, ViewProps["pointerEvents"]>;
 
 interface ActivityScreenProps {
 	children: React.ReactNode;
-	inactiveBehavior?: InactiveBehavior;
-	paintDriverRouteKey?: string;
-	hasNestedState?: boolean;
 	routeKey: string;
 }
 
 export const ActivityScreen = memo(function ActivityScreen({
 	children,
-	inactiveBehavior,
-	paintDriverRouteKey,
-	hasNestedState,
 	routeKey,
 }: ActivityScreenProps) {
 	const scene = useBlankStackStore((store) => store.scenesByKey[routeKey]);
-	const stackPaintDriverRouteKey = useBlankStackStore((store) =>
+	const paintDriverRouteKey = useBlankStackStore((store) =>
 		store.paintDriverRouteKeyByRouteKey.get(routeKey),
 	);
-	const stackInactiveBehavior = (
-		scene.descriptor.options as { inactiveBehavior?: InactiveBehavior }
-	).inactiveBehavior;
-	const resolvedInactiveBehavior =
-		inactiveBehavior ?? stackInactiveBehavior ?? DEFAULT_INACTIVE_BEHAVIOR;
-	const resolvedPaintDriverRouteKey =
-		paintDriverRouteKey ?? stackPaintDriverRouteKey;
-	const resolvedHasNestedState = hasNestedState ?? "state" in scene.route;
-	const paintDriverAnimations = resolvedPaintDriverRouteKey
-		? AnimationStore.getBag(resolvedPaintDriverRouteKey)
-		: undefined;
+	const inactiveBehavior =
+		(scene.descriptor.options as { inactiveBehavior?: InactiveBehavior })
+			.inactiveBehavior ?? DEFAULT_INACTIVE_BEHAVIOR;
+	const hasNestedState = "state" in scene.route;
+	const registeredPaintDriverProgress = useOptionalMotionStore(
+		paintDriverRouteKey ?? null,
+		(store) => store.state.transitionProgress,
+	);
+	const [paintDriver, setPaintDriver] = useState({
+		key: paintDriverRouteKey,
+		progress: registeredPaintDriverProgress,
+	});
+	// Activity disconnects the driver's provider when it pauses. Keep observing
+	// the same progress value so that pausing it doesn't wake older screens.
+	if (
+		paintDriver.key !== paintDriverRouteKey ||
+		(registeredPaintDriverProgress !== null &&
+			paintDriver.progress !== registeredPaintDriverProgress)
+	) {
+		setPaintDriver({
+			key: paintDriverRouteKey,
+			progress: registeredPaintDriverProgress,
+		});
+	}
+	const paintDriverProgress =
+		registeredPaintDriverProgress ??
+		(paintDriver.key === paintDriverRouteKey ? paintDriver.progress : null);
 
 	/**
 	 * Avoid hiding inactive content until the screen that exposes it has settled.
@@ -57,11 +68,11 @@ export const ActivityScreen = memo(function ActivityScreen({
 	const isPaintDriverSettled = useDerivedValue(() => {
 		"worklet";
 
-		if (!paintDriverAnimations) {
+		if (!paintDriverProgress) {
 			return false;
 		}
 
-		return paintDriverAnimations.transitionProgress.get() >= 1;
+		return paintDriverProgress.get() >= 1;
 	});
 
 	const isPaintDriverSettledOnJS = useSharedValueState(isPaintDriverSettled);
@@ -71,9 +82,9 @@ export const ActivityScreen = memo(function ActivityScreen({
 	let visible = scene.activity !== "inactive";
 
 	if (scene.activity === "inactive") {
-		if (resolvedInactiveBehavior === "keep" || !isPaintDriverSettledOnJS) {
+		if (inactiveBehavior === "keep" || !isPaintDriverSettledOnJS) {
 			visible = true;
-		} else if (resolvedInactiveBehavior === "pause") {
+		} else if (inactiveBehavior === "pause") {
 			activityViewMode = "paused";
 			visible = true;
 		} else {
@@ -83,9 +94,9 @@ export const ActivityScreen = memo(function ActivityScreen({
 	}
 
 	const shouldUnmount =
-		resolvedInactiveBehavior === "unmount" &&
+		inactiveBehavior === "unmount" &&
 		scene.activity === "inactive" &&
-		!resolvedHasNestedState &&
+		!hasNestedState &&
 		isPaintDriverSettledOnJS;
 
 	if (shouldUnmount) {

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

@@ -1,9 +1,14 @@
-import { memo } from "react";
+import { memo, useMemo } from "react";
 import type { View } from "react-native";
 import type { AnimatedRef } from "react-native-reanimated";
-import { useDescriptorsStore } from "../../../providers/screen/descriptors";
+import { useBuilderStore } from "../../../providers/screen/builder";
 import type { BoundTag } from "../../../stores/bounds/types";
-import { useBoundaryMeasurement } from "../hooks/use-boundary-measurement";
+import { prepareStyleForBounds } from "../../../utils/bounds/helpers/styles/styles";
+import { useBoundaryPresence } from "../hooks/lifecycles/use-boundary-presence";
+import { useInitialDestinationMeasurement } from "../hooks/lifecycles/use-initial-destination-measurement";
+import { useInitialSourceMeasurement } from "../hooks/lifecycles/use-initial-source-measurement";
+import { useRefreshBoundary } from "../hooks/lifecycles/use-refresh-boundary";
+import { useMeasurer } from "../hooks/use-measurer";
 import type {
 	BoundaryConfigProps,
 	BoundaryLocalMeasurementValue,
@@ -32,21 +37,52 @@ export const BoundaryLifecycle = memo(function BoundaryLifecycle({
 	measuredRef,
 	style,
 }: BoundaryLifecycleProps) {
-	const hasConfiguredInterpolator = useDescriptorsStore(
+	const hasConfiguredInterpolator = useBuilderStore(
 		(s) => s.derivations.hasConfiguredInterpolator,
 	);
 
-	useBoundaryMeasurement({
-		boundTag,
+	const runtimeEnabled = enabled && hasConfiguredInterpolator;
+	const preparedStyles = useMemo(() => prepareStyleForBounds(style), [style]);
+
+	const measureBoundary = useMeasurer({
 		enabled,
-		runtimeEnabled: enabled && hasConfiguredInterpolator,
+		boundTag,
 		currentScreenKey,
-		measuredRef,
-		style,
+		preparedStyles,
+		measuredAnimatedRef: measuredRef,
 		handoff,
 		escapeClipping,
 		localMeasurement,
-		config,
+	});
+
+	// Presence and source capture must not depend on this screen owning an
+	// interpolator: a nested source can participate in a transition owned by a
+	// different navigator.
+	useBoundaryPresence({
+		enabled,
+		boundTag,
+		currentScreenKey,
+		boundaryConfig: config,
+		handoff,
+		escapeClipping,
+	});
+
+	useInitialSourceMeasurement({
+		enabled,
+		measureBoundary,
+		boundTag,
+	});
+
+	useInitialDestinationMeasurement({
+		boundTag,
+		enabled: runtimeEnabled,
+		measureBoundary,
+	});
+
+	useRefreshBoundary({
+		enabled: runtimeEnabled,
+		boundTag,
+		measureBoundary,
 	});
 
 	return null;

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

@@ -1,16 +1,9 @@
 import type React from "react";
 import { memo, useLayoutEffect } from "react";
 import Animated from "react-native-reanimated";
-import {
-	useComposedSlotStyles,
-	useSlotLayoutStyles,
-} from "../../../providers/screen/styles";
 import { logger } from "../../../utils/logger";
-import {
-	BoundaryContentPortal,
-	BoundaryContentPortalHost,
-} from "../portal/components/boundary-content-portal";
-import { BoundaryPortal } from "../portal/components/boundary-portal";
+import { useComposedBoundaryStyle } from "../hooks/use-composed-boundary-style";
+import { Portal } from "../portal/components/portal";
 import {
 	TARGET_OUTSIDE_ROOT_WARNING,
 	useOptionalBoundaryRootStore,
@@ -44,16 +37,13 @@ const BoundaryTargetInner = (props: InternalBoundaryTargetProps) => {
 	const shouldEscapeTargetToScreenHost =
 		isActiveTarget && portalRuntime?.escapeClipping === true;
 
-	const shouldApplyAssociatedStyleInline =
-		isActiveTarget && portalRuntime?.escapeClipping !== true;
-	const shouldApplyPortalLayoutStyle =
-		isActiveTarget && portalRuntime?.escapeClipping === true;
-
-	const associatedTargetStyles = useComposedSlotStyles(
-		rootContext?.boundTag.tag,
+	const associatedTargetStyles = useComposedBoundaryStyle(
+		rootContext?.slotsMap,
+		boundaryId,
 		style,
+		shouldEscapeTargetToScreenHost ? "layout" : "full",
 	);
-	const portalLayoutStyle = useSlotLayoutStyles(rootContext?.boundTag.tag);
+
 	const measurementRef = isActiveTarget
 		? rootContext.measurementRef
 		: undefined;
@@ -65,7 +55,8 @@ const BoundaryTargetInner = (props: InternalBoundaryTargetProps) => {
 	}, [rootContext]);
 
 	return (
-		<BoundaryPortal
+		<Portal
+			mode="escapeClipping"
 			boundaryId={boundaryId ?? ""}
 			enabled={shouldEscapeTargetToScreenHost}
 			placeholderRef={measurementRef}
@@ -74,27 +65,14 @@ const BoundaryTargetInner = (props: InternalBoundaryTargetProps) => {
 				{...rest}
 				pointerEvents={pointerEvents}
 				ref={shouldEscapeTargetToScreenHost ? undefined : measurementRef}
-				style={[
-					style,
-					shouldApplyAssociatedStyleInline ? associatedTargetStyles : undefined,
-					shouldApplyPortalLayoutStyle ? portalLayoutStyle : undefined,
-				]}
+				style={[style, isActiveTarget ? associatedTargetStyles : undefined]}
 				collapsable={false}
 			>
-				<BoundaryContentPortalHost
-					boundaryId={boundaryId ?? ""}
-					enabled={handoffEnabled}
-					screenKey={rootContext?.currentScreenKey ?? ""}
-				>
-					<BoundaryContentPortal
-						boundaryId={boundaryId}
-						enabled={handoffEnabled}
-					>
-						{children}
-					</BoundaryContentPortal>
-				</BoundaryContentPortalHost>
+				<Portal mode="handoff" boundaryId={boundaryId} enabled={handoffEnabled}>
+					{children}
+				</Portal>
 			</Animated.View>
-		</BoundaryPortal>
+		</Portal>
 	);
 };
 

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

@@ -10,11 +10,7 @@ import {
 	BOUNDARY_TARGET_ACTIVE_PROP,
 	BoundaryTarget,
 } from "./components/boundary-target";
-import {
-	BoundaryContentPortal,
-	BoundaryContentPortalHost,
-} from "./portal/components/boundary-content-portal";
-import { BoundaryPortal } from "./portal/components/boundary-portal";
+import { Portal } from "./portal/components/portal";
 import { BoundaryRootProvider } from "./providers/boundary-root.provider";
 import type { BoundaryComponentProps } from "./types";
 import { resolveBoundaryTarget } from "./utils/resolve-boundary-target";
@@ -50,6 +46,12 @@ export function createBoundaryComponent<P extends object>(
 			children,
 			...rest
 		} = props as any;
+
+		const config = useMemo(
+			() => ({ anchor, scaleMode, target, method }),
+			[anchor, scaleMode, target, method],
+		);
+
 		const targetResolution = useMemo(() => {
 			return resolveBoundaryTarget(children, {
 				isTarget: (element) => element.type === BoundaryTarget,
@@ -59,13 +61,14 @@ export function createBoundaryComponent<P extends object>(
 					} as any),
 			});
 		}, [children]);
+
 		const targetStyle = (
 			targetResolution.target?.props as { style?: unknown } | undefined
 		)?.style;
 
 		return (
 			<BoundaryRootProvider
-				config={{ anchor, scaleMode, target, method }}
+				config={config}
 				enabled={enabled}
 				escapeClipping={escapeClipping}
 				forwardedRef={forwardedRef}
@@ -78,7 +81,8 @@ export function createBoundaryComponent<P extends object>(
 				targetStyle={targetStyle}
 			>
 				{(root) => (
-					<BoundaryPortal
+					<Portal
+						mode="escapeClipping"
 						boundaryId={root.boundTag.tag}
 						enabled={root.shouldRenderBoundaryRootThroughPortal}
 						placeholderRef={root.measurementRef}
@@ -89,20 +93,15 @@ export function createBoundaryComponent<P extends object>(
 							style={[style, root.attachedStyle]}
 							collapsable={false}
 						>
-							<BoundaryContentPortalHost
+							<Portal
+								mode="handoff"
 								boundaryId={root.boundTag.tag}
 								enabled={root.shouldRenderHandoffHost}
-								screenKey={root.currentScreenKey}
 							>
-								<BoundaryContentPortal
-									boundaryId={root.boundTag.tag}
-									enabled={root.shouldRenderHandoffHost}
-								>
-									{targetResolution.children}
-								</BoundaryContentPortal>
-							</BoundaryContentPortalHost>
+								{targetResolution.children}
+							</Portal>
 						</AnimatedComponent>
-					</BoundaryPortal>
+					</Portal>
 				)}
 			</BoundaryRootProvider>
 		);

package/src/components/boundary/helpers/presentation.ts

@@ -0,0 +1,88 @@
+import type { DerivedValue } from "react-native-reanimated";
+import { getLinkKeyFromTag } from "../../../stores/bounds/helpers/link-pairs.helpers";
+import type {
+	boundaryRegistry,
+	pairs,
+} from "../../../stores/bounds/internals/state";
+import type { BoundaryHandoffTarget } from "../../../types/animation.types";
+
+export type { BoundaryPairPresentation } from "../../../providers/screen/orchestrator/helpers/use-pair-presentation";
+
+import type { BoundaryPairPresentation } from "../../../providers/screen/orchestrator/helpers/use-pair-presentation";
+
+export type BoundaryPresentationState = {
+	presentations: readonly (
+		| DerivedValue<BoundaryPairPresentation | undefined>
+		| null
+		| undefined
+	)[];
+	pairs: ReturnType<typeof pairs.get>;
+	entries: ReturnType<typeof boundaryRegistry.get>;
+};
+
+export function resolveBoundaryPresentation(
+	screenKey: string,
+	boundaryId: string,
+	state: BoundaryPresentationState,
+) {
+	"worklet";
+	const linkKey = getLinkKeyFromTag(boundaryId);
+	let result: BoundaryPairPresentation | undefined;
+	for (const value of state.presentations) {
+		const presentation = value?.get();
+		if (!presentation) continue;
+		const pair = state.pairs[presentation.pairKey];
+		const link = pair?.links[linkKey];
+		if (!link || (link.group && pair.groups[link.group]?.activeId !== linkKey))
+			continue;
+		const sourceKey = link.source?.screenKey ?? presentation.sourceKey;
+		const destinationKey =
+			link.destination?.screenKey ?? presentation.destinationKey;
+		if (sourceKey !== screenKey && destinationKey !== screenKey) continue;
+		// A preparing or completed pair cannot displace a live presentation.
+		if (result && !presentation.ready) continue;
+		result = { ...presentation, sourceKey, destinationKey };
+	}
+	return result;
+}
+
+export function resolveBoundaryReceiver(
+	presentation: BoundaryPairPresentation | undefined,
+	target: BoundaryHandoffTarget | undefined,
+	screenKey: string,
+) {
+	"worklet";
+	if (!presentation) return screenKey;
+	return presentation.ready && target !== "source"
+		? presentation.destinationKey
+		: presentation.sourceKey;
+}
+
+export function resolveBoundaryHandoff(
+	screenKey: string,
+	boundaryId: string,
+	state: BoundaryPresentationState,
+) {
+	"worklet";
+	let receiver = screenKey;
+	const visited: Record<string, true> = {};
+	while (!visited[receiver]) {
+		visited[receiver] = true;
+		const p = resolveBoundaryPresentation(receiver, boundaryId, state);
+		if (!p) break;
+		const slot = (p.sourceKey === receiver ? p.source : p.destination)[
+			boundaryId
+		];
+		const next = resolveBoundaryReceiver(
+			p,
+			slot?.props?.handoffTarget ??
+				p.destination[boundaryId]?.props?.handoffTarget ??
+				p.source[boundaryId]?.props?.handoffTarget,
+			receiver,
+		);
+		if (next === receiver || !state.entries[boundaryId]?.screens[next]?.handoff)
+			break;
+		receiver = next;
+	}
+	return receiver;
+}

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

@@ -7,9 +7,9 @@ import {
 	withTiming,
 } from "react-native-reanimated";
 import { scheduleOnUI } from "react-native-worklets";
-import { useDescriptorsStore } from "../../../../providers/screen/descriptors";
+import { useBuilderStore } from "../../../../providers/screen/builder";
+import { useMotionStore } from "../../../../providers/screen/motion";
 import { useBlankStackStore } from "../../../../providers/stack/blank-stack.provider";
-import { AnimationStore } from "../../../../stores/animation.store";
 import {
 	createScreenPairKey,
 	getSourceScreenKeyFromPairKey,
@@ -21,7 +21,6 @@ import {
 import { getLink } from "../../../../stores/bounds/internals/links";
 import { pairs } from "../../../../stores/bounds/internals/state";
 import type { BoundTag } from "../../../../stores/bounds/types";
-import { SystemStore } from "../../../../stores/system.store";
 import { logger } from "../../../../utils/logger";
 import type { MeasureBoundary } from "../../types";
 import { getInitialDestinationMeasurementSignal } from "../../utils/destination-signals";
@@ -35,6 +34,7 @@ const HANDSHAKE_RETRY_DELAY_MS = 16;
  * so the open proceeds without that boundary.
  */
 const MAX_HANDSHAKE_RETRIES = 20;
+const EMPTY_SCENES: never[] = [];
 
 interface UseInitialDestinationMeasurementParams {
 	boundTag: BoundTag;
@@ -48,11 +48,11 @@ export const useInitialDestinationMeasurement = ({
 	measureBoundary,
 }: UseInitialDestinationMeasurementParams) => {
 	const { tag, linkKey, group } = boundTag;
-	const currentScreenKey = useDescriptorsStore(
+	const currentScreenKey = useBuilderStore(
 		(s) => s.derivations.currentScreenKey,
 	);
-	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
-	const destinationPairKey = useDescriptorsStore(
+	const nextScreenKey = useBuilderStore((s) => s.derivations.nextScreenKey);
+	const destinationPairKey = useBuilderStore(
 		(s) => s.derivations.destinationPairKey,
 	);
 	const destinationEnabled = enabled && !nextScreenKey;
@@ -60,7 +60,9 @@ export const useInitialDestinationMeasurement = ({
 	const preferredSourceScreenKey = destinationPairKey
 		? getSourceScreenKeyFromPairKey(destinationPairKey)
 		: undefined;
-	const stackScenes = useBlankStackStore((store) => store.scenes);
+	const stackScenes = useBlankStackStore((store) =>
+		canReceiveDestination ? store.scenes : EMPTY_SCENES,
+	);
 	// A retained closing screen can still have registered boundaries, but it
 	// cannot own a new transition link.
 	const closingSourceScreenKeys = useMemo(
@@ -70,14 +72,11 @@ export const useInitialDestinationMeasurement = ({
 				.map((scene) => scene.route.key),
 		[stackScenes],
 	);
-	const progress = AnimationStore.getValue(
-		currentScreenKey,
-		"transitionProgress",
-	);
+	const progress = useMotionStore((store) => store.state.transitionProgress);
 
-	const {
-		actions: { blockLifecycleStart, unblockLifecycleStart },
-	} = SystemStore.getBag(currentScreenKey);
+	const { blockLifecycleStart, unblockLifecycleStart } = useMotionStore(
+		(store) => store.state.actions,
+	);
 
 	const isBlockingLifecycleStart = useSharedValue(0);
 	const retryToken = useSharedValue(0);

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

@@ -1,5 +1,5 @@
 import { useAnimatedReaction, useSharedValue } from "react-native-reanimated";
-import { useDescriptorsStore } from "../../../../providers/screen/descriptors";
+import { useBuilderStore } from "../../../../providers/screen/builder";
 import { getPairKeyForSource } from "../../../../stores/bounds/internals/links";
 import { pairs } from "../../../../stores/bounds/internals/state";
 import type { BoundTag } from "../../../../stores/bounds/types";
@@ -12,7 +12,7 @@ export const useInitialSourceMeasurement = (params: {
 	boundTag: BoundTag;
 }) => {
 	const { enabled, measureBoundary, boundTag } = params;
-	const currentScreenKey = useDescriptorsStore(
+	const currentScreenKey = useBuilderStore(
 		(s) => s.derivations.currentScreenKey,
 	);
 	const lastSourceCaptureSignal = useSharedValue<string | null>(null);