react-native-screen-transitions 4.0.0-alpha.2 → 4.0.0-alpha.4

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

@@ -6,6 +6,7 @@ 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 { DEFAULT_INACTIVE_BEHAVIOR, type InactiveBehavior } from "../helpers";
@@ -26,23 +27,55 @@ const PointerEventsByActivity = {
 } satisfies Record<StackSceneActivity, ViewProps["pointerEvents"]>;
 
 interface ActivityScreenProps {
-	activity: StackSceneActivity;
+	activity?: StackSceneActivity;
 	children: React.ReactNode;
 	inactiveBehavior?: InactiveBehavior;
 	paintDriverRouteKey?: string;
 	hasNestedState?: boolean;
+	routeKey?: string;
 }
 
 export const ActivityScreen = memo(function ActivityScreen({
 	activity,
 	children,
-	inactiveBehavior = DEFAULT_INACTIVE_BEHAVIOR,
+	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 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 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 paintDriverAnimations = paintDriverRouteKey
-		? AnimationStore.getBag(paintDriverRouteKey)
+	const paintDriverAnimations = resolvedPaintDriverRouteKey
+		? AnimationStore.getBag(resolvedPaintDriverRouteKey)
 		: undefined;
 
 	/**
@@ -64,14 +97,14 @@ export const ActivityScreen = memo(function ActivityScreen({
 
 	const isPaintDriverSettledOnJS = useSharedValueState(isPaintDriverSettled);
 
-	let activityState: ActivityState = ActivityStateByActivity[activity];
+	let activityState: ActivityState = ActivityStateByActivity[resolvedActivity];
 	let shouldFreeze = false;
-	let visible = activity !== "inactive";
+	let visible = resolvedActivity !== "inactive";
 
 	const shouldWaitForPaintDriver = !isPaintDriverSettledOnJS;
 
-	if (activity === "inactive") {
-		if (inactiveBehavior === "keep") {
+	if (resolvedActivity === "inactive") {
+		if (resolvedInactiveBehavior === "keep") {
 			activityState = 1;
 			visible = true;
 		} else if (shouldWaitForPaintDriver) {
@@ -79,7 +112,7 @@ export const ActivityScreen = memo(function ActivityScreen({
 			// a blank frame during the transition.
 			activityState = 1;
 			visible = true;
-		} else if (inactiveBehavior === "pause") {
+		} else if (resolvedInactiveBehavior === "pause") {
 			activityState = 1;
 			shouldFreeze = true;
 			visible = true;
@@ -93,12 +126,12 @@ export const ActivityScreen = memo(function ActivityScreen({
 	}
 
 	const shouldUnmount =
-		inactiveBehavior === "unmount" &&
-		activity === "inactive" &&
-		!hasNestedState &&
+		resolvedInactiveBehavior === "unmount" &&
+		resolvedActivity === "inactive" &&
+		!resolvedHasNestedState &&
 		isPaintDriverSettledOnJS;
 
-	const pointerEvents = PointerEventsByActivity[activity];
+	const pointerEvents = PointerEventsByActivity[resolvedActivity];
 
 	if (shouldUnmount) {
 		return null;

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,
-	useBoundaryRootContext,
+	useBoundaryRootStore,
 } from "../providers/boundary-root.provider";
 
 type BoundaryTargetProps = Omit<
@@ -36,7 +36,7 @@ const BoundaryTargetInner = (props: InternalBoundaryTargetProps) => {
 		style,
 		...rest
 	} = props;
-	const rootContext = useBoundaryRootContext();
+	const rootContext = useBoundaryRootStore();
 	const boundaryId = rootContext?.boundTag.tag;
 	const isActiveTarget = active === true && rootContext !== null;
 	const portalRuntime = rootContext?.portalRuntime;

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

@@ -9,8 +9,14 @@ import {
 import { scheduleOnUI } from "react-native-worklets";
 import { useDescriptorsStore } from "../../../../providers/screen/descriptors";
 import { AnimationStore } from "../../../../stores/animation.store";
-import { getSourceScreenKeyFromPairKey } from "../../../../stores/bounds/helpers/link-pairs.helpers";
-import { getEntry } from "../../../../stores/bounds/internals/entries";
+import {
+	createScreenPairKey,
+	getSourceScreenKeyFromPairKey,
+} from "../../../../stores/bounds/helpers/link-pairs.helpers";
+import {
+	getEntry,
+	getMatchingSourceScreenKey,
+} from "../../../../stores/bounds/internals/entries";
 import { getLink } from "../../../../stores/bounds/internals/links";
 import { pairs } from "../../../../stores/bounds/internals/state";
 import type { BoundTag } from "../../../../stores/bounds/types";
@@ -19,7 +25,9 @@ import { logger } from "../../../../utils/logger";
 import type { MeasureBoundary } from "../../types";
 import { getInitialDestinationMeasurementSignal } from "../../utils/destination-signals";
 
-const HANDSHAKE_RETRY_DELAY_MS = 100;
+// A missed layout should be retried on the next frame. The previous 100 ms
+// interval made each ordinary Android layout miss visibly delay navigation.
+const HANDSHAKE_RETRY_DELAY_MS = 16;
 /**
  * A destination whose initial handshake never completes must not hold the
  * transition gate forever. After this budget, release the block with a warning
@@ -48,12 +56,11 @@ export const useInitialDestinationMeasurement = ({
 	const destinationPairKey = useDescriptorsStore(
 		(s) => s.derivations.destinationPairKey,
 	);
-	const ancestorDestinationPairKey = useDescriptorsStore(
-		(s) => s.derivations.ancestorDestinationPairKey,
-	);
 	const destinationEnabled = enabled && !nextScreenKey;
-	const initialDestinationPairKey =
-		destinationPairKey ?? ancestorDestinationPairKey;
+	const canReceiveDestination = destinationEnabled && !!destinationPairKey;
+	const preferredSourceScreenKey = destinationPairKey
+		? getSourceScreenKeyFromPairKey(destinationPairKey)
+		: undefined;
 	const progress = AnimationStore.getValue(
 		currentScreenKey,
 		"transitionProgress",
@@ -82,6 +89,16 @@ export const useInitialDestinationMeasurement = ({
 
 	const claimLifecycleStartBlock = useCallback(() => {
 		"worklet";
+		if (
+			!canReceiveDestination ||
+			!getMatchingSourceScreenKey(
+				tag,
+				currentScreenKey,
+				preferredSourceScreenKey,
+			)
+		) {
+			return;
+		}
 
 		// The progress check and block claim must share one UI-thread operation.
 		// Otherwise a JS-thread layout effect can observe zero, enqueue the block,
@@ -92,10 +109,18 @@ export const useInitialDestinationMeasurement = ({
 
 		blockLifecycleStart();
 		isBlockingLifecycleStart.set(1);
-	}, [blockLifecycleStart, isBlockingLifecycleStart, progress]);
+	}, [
+		blockLifecycleStart,
+		canReceiveDestination,
+		currentScreenKey,
+		isBlockingLifecycleStart,
+		progress,
+		preferredSourceScreenKey,
+		tag,
+	]);
 
 	useLayoutEffect(() => {
-		if (!destinationEnabled || !initialDestinationPairKey) {
+		if (!canReceiveDestination) {
 			return;
 		}
 
@@ -113,34 +138,40 @@ export const useInitialDestinationMeasurement = ({
 		};
 	}, [
 		claimLifecycleStartBlock,
-		destinationEnabled,
 		escapeClipping,
-		initialDestinationPairKey,
+		canReceiveDestination,
 		releaseLifecycleStartBlock,
 	]);
 
 	useAnimatedReaction(
 		() => {
 			"worklet";
+
+			if (!canReceiveDestination || isBlockingLifecycleStart.get() <= 0) {
+				return null;
+			}
+
+			if (progress.get() > 0) {
+				return null;
+			}
+
 			const retryTick = retryToken.get();
-			const isWaitingForOpenToStart = progress.get() <= 0;
-			const sourceScreenKey = initialDestinationPairKey
-				? getSourceScreenKeyFromPairKey(initialDestinationPairKey)
+			const sourceScreenKey = getMatchingSourceScreenKey(
+				tag,
+				currentScreenKey,
+				preferredSourceScreenKey,
+			);
+			const pairKey = sourceScreenKey
+				? createScreenPairKey(sourceScreenKey, currentScreenKey)
 				: undefined;
 			const signal = getInitialDestinationMeasurementSignal({
-				enabled:
-					destinationEnabled &&
-					isWaitingForOpenToStart &&
-					isBlockingLifecycleStart.get() > 0,
-				destinationPairKey,
-				ancestorDestinationPairKey,
+				enabled: destinationEnabled,
+				pairKey,
 				linkId: linkKey,
 				group,
 				destinationPresent: getEntry(tag, currentScreenKey) !== null,
-				sourcePresent:
-					sourceScreenKey !== undefined &&
-					getEntry(tag, sourceScreenKey) !== null,
-				linkState: initialDestinationPairKey ? pairs.get() : undefined,
+				sourcePresent: sourceScreenKey !== null,
+				linkState: pairs.get(),
 			});
 
 			return [
@@ -149,8 +180,13 @@ export const useInitialDestinationMeasurement = ({
 				retryTick,
 			] as const;
 		},
-		([measurePairKey, action, retryTick], previous) => {
+		(next, previous) => {
 			"worklet";
+			if (!next) {
+				return;
+			}
+
+			const [measurePairKey, action, retryTick] = next;
 			if (!measurePairKey || !action) {
 				return;
 			}

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

@@ -1,5 +1,6 @@
 import { useAnimatedReaction, useSharedValue } from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../../providers/screen/descriptors";
+import { getPairKeyForSource } from "../../../../stores/bounds/internals/links";
 import { pairs } from "../../../../stores/bounds/internals/state";
 import type { BoundTag } from "../../../../stores/bounds/types";
 import type { MeasureBoundary } from "../../types";
@@ -11,12 +12,16 @@ export const useInitialSourceMeasurement = (params: {
 	boundTag: BoundTag;
 }) => {
 	const { enabled, measureBoundary, boundTag } = params;
-	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
+	const currentScreenKey = useDescriptorsStore(
+		(s) => s.derivations.currentScreenKey,
+	);
 	const lastSourceCaptureSignal = useSharedValue<string | null>(null);
 
 	useAnimatedReaction(
 		() => {
 			"worklet";
+			const sourcePairKey =
+				getPairKeyForSource(boundTag.tag, currentScreenKey) ?? undefined;
 			return getInitialSourceCaptureSignal({
 				enabled,
 				sourcePairKey,

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

@@ -1,9 +1,12 @@
 import { useAnimatedReaction } from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../../providers/screen/descriptors";
 import { AnimationStore } from "../../../../stores/animation.store";
+import {
+	getPairKeyForDestination,
+	getPairKeyForSource,
+} from "../../../../stores/bounds/internals/links";
 import { pairs } from "../../../../stores/bounds/internals/state";
 import type { BoundTag } from "../../../../stores/bounds/types";
-import { GestureStore } from "../../../../stores/gesture.store";
 import type { MeasureBoundary } from "../../types";
 import { getRefreshBoundarySignal } from "../../utils/refresh-signals";
 
@@ -23,13 +26,6 @@ export const useRefreshBoundary = ({
 		(s) => s.derivations.currentScreenKey,
 	);
 	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
-	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
-	const destinationPairKey = useDescriptorsStore(
-		(s) => s.derivations.destinationPairKey,
-	);
-	const ancestorDestinationPairKey = useDescriptorsStore(
-		(s) => s.derivations.ancestorDestinationPairKey,
-	);
 	// Source-side boundaries refresh from the next screen's lifecycle pulse.
 	// Destination-side boundaries have no next screen, so they refresh from self.
 	const refreshScreenKey = nextScreenKey ?? currentScreenKey;
@@ -38,43 +34,29 @@ export const useRefreshBoundary = ({
 		"willAnimate",
 	);
 	const refreshClosing = AnimationStore.getValue(refreshScreenKey, "closing");
-	const refreshEntering = AnimationStore.getValue(refreshScreenKey, "entering");
-	const refreshAnimating = AnimationStore.getValue(
-		refreshScreenKey,
-		"progressAnimating",
-	);
-	const refreshProgress = AnimationStore.getValue(
-		refreshScreenKey,
-		"transitionProgress",
-	);
-	const refreshDragging = GestureStore.getValue(refreshScreenKey, "dragging");
-	const refreshDismissing = GestureStore.getValue(
-		refreshScreenKey,
-		"dismissing",
-	);
-	const refreshSettling = GestureStore.getValue(refreshScreenKey, "settling");
 
 	useAnimatedReaction(
 		() => {
 			"worklet";
+
+			const shouldRefresh = enabled && !!refreshWillAnimate.get();
+			if (!shouldRefresh) {
+				return null;
+			}
+			const sourcePairKey =
+				getPairKeyForSource(boundTag.tag, currentScreenKey) ?? undefined;
+			const destinationPairKey =
+				getPairKeyForDestination(boundTag.tag, currentScreenKey) ?? undefined;
+
 			return getRefreshBoundarySignal({
 				enabled,
 				currentScreenKey,
 				sourcePairKey,
 				destinationPairKey,
-				ancestorDestinationPairKey,
-				nextScreenKey,
 				linkId: linkKey,
 				group,
-				shouldRefresh: !!refreshWillAnimate.get(),
+				shouldRefresh,
 				closing: !!refreshClosing.get(),
-				entering: !!refreshEntering.get(),
-				animating: !!refreshAnimating.get(),
-				progress: refreshProgress.get(),
-				gestureInProgress:
-					!!refreshDragging.get() ||
-					!!refreshDismissing.get() ||
-					!!refreshSettling.get(),
 				linkState: pairs.get(),
 			});
 		},

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

@@ -60,10 +60,11 @@ export const useBoundaryMeasurement = ({
 		escapeClipping,
 	});
 
-	// Register/unregister this boundary in the presence map so source/destination
-	// matching can resolve across concrete screen keys.
+	// 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: runtimeEnabled,
+		enabled,
 		boundTag,
 		currentScreenKey,
 		boundaryConfig,
@@ -72,7 +73,7 @@ export const useBoundaryMeasurement = ({
 	});
 
 	useInitialSourceMeasurement({
-		enabled: runtimeEnabled,
+		enabled,
 		measureBoundary,
 		boundTag,
 	});

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

@@ -1,13 +1,8 @@
 import { useCallback } from "react";
 import type { View } from "react-native";
 import { useWindowDimensions } from "react-native";
-import {
-	type AnimatedRef,
-	measure,
-	type StyleProps,
-} from "react-native-reanimated";
+import type { AnimatedRef, StyleProps } from "react-native-reanimated";
 import { applyMeasuredBoundsWrites } from "../../../providers/helpers/measured-bounds-writes";
-import { useOriginContext } from "../../../providers/screen/origin.provider";
 import { useScreenSlots } from "../../../providers/screen/styles";
 import type { BoundTag } from "../../../stores/bounds/types";
 import { ScrollStore } from "../../../stores/scroll.store";
@@ -16,9 +11,9 @@ import { getVisibilityBlockOffset } from "../../../utils/visibility-block-offset
 import type { MeasureBoundary } from "../types";
 import {
 	attachScrollSnapshotToMeasuredBounds,
+	correctMeasuredBoundsForVisibilityGate,
 	isMeasurementInViewport,
 	measureWithOverscrollAwareness,
-	normalizeMeasuredBoundsWithVisibilityGate,
 } from "../utils/measured-bounds";
 
 interface UseMeasurerParams {
@@ -49,7 +44,6 @@ export const useMeasurer = ({
 		currentScreenKey,
 		"pendingLifecycleStartBlockCount",
 	);
-	const { originRef } = useOriginContext();
 	const { visibilityBlocked } = useScreenSlots();
 
 	return useCallback(
@@ -61,14 +55,12 @@ export const useMeasurer = ({
 				measuredAnimatedRef,
 				scrollState.get(),
 			);
-			const measuredOrigin = measure(originRef);
 
-			if (!measured || !measuredOrigin) return;
+			if (!measured) return;
 
-			const normalizedMeasured = normalizeMeasuredBoundsWithVisibilityGate({
+			const correctedMeasured = correctMeasuredBoundsForVisibilityGate({
 				measured,
-				origin: measuredOrigin,
-				visibilityBlocked: escapeClipping && visibilityBlocked.get(),
+				visibilityBlocked: visibilityBlocked.get(),
 				visibilityBlockOffset: getVisibilityBlockOffset(viewportHeight),
 				viewportWidth,
 				viewportHeight,
@@ -88,7 +80,7 @@ export const useMeasurer = ({
 				target.type !== "destination" ||
 				!shouldGuardDestinationViewport ||
 				isMeasurementInViewport(
-					normalizedMeasured,
+					correctedMeasured,
 					viewportWidth,
 					viewportHeight,
 				);
@@ -96,7 +88,7 @@ export const useMeasurer = ({
 			if (!viewportAllowsDestinationWrite) return;
 
 			const measuredWithScroll = attachScrollSnapshotToMeasuredBounds(
-				normalizedMeasured,
+				correctedMeasured,
 				scrollMetadata.get(),
 			);
 
@@ -125,7 +117,6 @@ export const useMeasurer = ({
 			scrollState,
 			scrollMetadata,
 			pendingLifecycleStartBlockCount,
-			originRef,
 			visibilityBlocked,
 		],
 	);

package/src/components/boundary/portal/components/boundary-content-portal/helpers/active-handoff-receiver.ts

@@ -0,0 +1,103 @@
+type ReceiverRoute = {
+	key: string;
+};
+
+type ReceiverScene = {
+	activity: string;
+	route: ReceiverRoute;
+};
+
+type ResolveActiveHandoffReceiverParams = {
+	focusedIndex: number;
+	routes: ReceiverRoute[];
+	scenes: ReceiverScene[];
+};
+
+export const resolveActiveHandoffReceiver = ({
+	focusedIndex,
+	routes,
+	scenes,
+}: ResolveActiveHandoffReceiverParams): string | null => {
+	for (let index = scenes.length - 1; index >= 0; index--) {
+		const scene = scenes[index];
+		if (scene?.activity === "closing") {
+			return scene.route.key;
+		}
+	}
+
+	return routes[focusedIndex]?.key ?? null;
+};
+
+export const resolvePreviousHandoffReceiver = ({
+	focusedIndex,
+	routes,
+	scenes,
+}: ResolveActiveHandoffReceiverParams): string | null => {
+	for (let index = scenes.length - 1; index >= 0; index--) {
+		if (scenes[index]?.activity !== "closing") {
+			continue;
+		}
+
+		for (let previousIndex = index - 1; previousIndex >= 0; previousIndex--) {
+			const previousScene = scenes[previousIndex];
+			if (previousScene?.activity !== "closing") {
+				return previousScene?.route.key ?? null;
+			}
+		}
+	}
+
+	return routes[focusedIndex]?.key ?? null;
+};
+
+export const resolveHandoffAttachmentCandidate = ({
+	activeReceiverClosing,
+	activeReceiverScreenKey,
+	attachedReceiverScreenKey,
+	hasActiveCloseFinished,
+	interpolatorReady,
+	pairChangedDuringClose = false,
+	pairDestinationScreenKey,
+	previousReceiverScreenKey,
+}: {
+	activeReceiverClosing: boolean;
+	activeReceiverScreenKey: string | null;
+	attachedReceiverScreenKey: string;
+	hasActiveCloseFinished: boolean;
+	interpolatorReady: boolean;
+	pairChangedDuringClose?: boolean;
+	pairDestinationScreenKey: string | null;
+	previousReceiverScreenKey: string | null;
+}) => {
+	"worklet";
+
+	if (
+		activeReceiverClosing &&
+		interpolatorReady &&
+		pairDestinationScreenKey &&
+		pairChangedDuringClose
+	) {
+		return pairDestinationScreenKey;
+	}
+
+	if (
+		hasActiveCloseFinished &&
+		attachedReceiverScreenKey === activeReceiverScreenKey
+	) {
+		return previousReceiverScreenKey;
+	}
+
+	if (hasActiveCloseFinished) {
+		return attachedReceiverScreenKey;
+	}
+
+	if (
+		activeReceiverClosing &&
+		attachedReceiverScreenKey !== activeReceiverScreenKey &&
+		interpolatorReady &&
+		pairDestinationScreenKey
+	) {
+		return pairDestinationScreenKey;
+	}
+
+	return activeReceiverScreenKey;
+};