react-native-screen-transitions 3.6.0-alpha.1 → 3.6.0-alpha.2

package/src/shared/components/create-boundary-component/hooks/use-measurer.ts

@@ -2,22 +2,24 @@ import { useCallback } from "react";
 import type { View } from "react-native";
 import { useWindowDimensions } from "react-native";
 import type { AnimatedRef, StyleProps } from "react-native-reanimated";
+import { setEntry } from "../../../stores/bounds/internals/entries";
+import {
+	setDestination,
+	setSource,
+} from "../../../stores/bounds/internals/links";
 import { ScrollStore } from "../../../stores/scroll.store";
 import { SystemStore } from "../../../stores/system.store";
-import { applyMeasuredBoundsWrites } from "../helpers/apply-measured-bounds-writes";
-import type { MeasureParams } from "../types";
-import { createLinkContext } from "./helpers/boundary-link-context";
-import { isMeasurementInViewport } from "./helpers/measurement";
+import type { MeasureBoundary } from "../types";
 import {
-	buildMeasurementWritePlan,
-	getMeasureIntentFlags,
-} from "./helpers/measurement-rules";
-import { measureWithOverscrollAwareness } from "./helpers/scroll-measurement";
+	isMeasurementInViewport,
+	measureWithOverscrollAwareness,
+} from "../utils/measured-bounds";
 
 interface UseMeasurerParams {
 	enabled: boolean;
-	sharedBoundTag: string;
-	preferredSourceScreenKey?: string;
+	entryTag: string;
+	linkId: string;
+	group?: string;
 	currentScreenKey: string;
 	preparedStyles: StyleProps;
 	measuredAnimatedRef: AnimatedRef<View>;
@@ -25,12 +27,13 @@ interface UseMeasurerParams {
 
 export const useMeasurer = ({
 	enabled,
-	sharedBoundTag,
-	preferredSourceScreenKey,
+	entryTag,
+	linkId,
+	group,
 	currentScreenKey,
 	preparedStyles,
 	measuredAnimatedRef,
-}: UseMeasurerParams) => {
+}: UseMeasurerParams): MeasureBoundary => {
 	const { width: viewportWidth, height: viewportHeight } =
 		useWindowDimensions();
 
@@ -41,27 +44,10 @@ export const useMeasurer = ({
 	);
 
 	return useCallback(
-		({ intent }: MeasureParams = {}) => {
+		(target) => {
 			"worklet";
 			if (!enabled) return;
 
-			const intents = getMeasureIntentFlags(intent);
-			const currentLink = createLinkContext({
-				sharedBoundTag,
-				currentScreenKey,
-				preferredSourceScreenKey,
-			});
-
-			const writePlan = buildMeasurementWritePlan({
-				intents,
-				hasPendingLink: currentLink.hasPendingLink,
-				hasSourceLink: currentLink.hasSourceLink,
-				hasDestinationLink: currentLink.hasDestinationLink,
-				hasAttachableSourceLink: currentLink.hasAttachableSourceLink,
-			});
-
-			if (!writePlan.writesAny) return;
-
 			const measured = measureWithOverscrollAwareness(
 				measuredAnimatedRef,
 				scrollState.get(),
@@ -69,15 +55,6 @@ export const useMeasurer = ({
 
 			if (!measured) return;
 
-			/**
-			 * Source Pass
-			 * Source intents are intentionally used & kept unguarded.
-			 */
-			const sourceWrites = {
-				shouldSetSource: writePlan.captureSource,
-				shouldUpdateSource: writePlan.refreshSource,
-			};
-
 			/**
 			 * - Destination Pass -
 			 * Be strict while lifecycle start is blocked for destination capture.
@@ -86,40 +63,48 @@ export const useMeasurer = ({
 			 * lifecycle blocked until a valid retry lands.
 			 */
 			const shouldGuardDestinationViewport =
-				pendingLifecycleStartBlockCount.get() > 0;
+				pendingLifecycleStartBlockCount.get() > 0 || !!group;
+
 			const viewportAllowsDestinationWrite =
+				target.type !== "destination" ||
 				!shouldGuardDestinationViewport ||
 				isMeasurementInViewport(measured, viewportWidth, viewportHeight);
 
-			const destinationWrites = {
-				shouldSetDestination:
-					viewportAllowsDestinationWrite && writePlan.completeDestination,
-				shouldUpdateDestination:
-					viewportAllowsDestinationWrite && writePlan.refreshDestination,
-			};
+			if (!viewportAllowsDestinationWrite) return;
 
-			const shouldApplyMeasurement =
-				sourceWrites.shouldSetSource ||
-				sourceWrites.shouldUpdateSource ||
-				destinationWrites.shouldSetDestination ||
-				destinationWrites.shouldUpdateDestination;
+			// Set the bounds entry on every measure to avoid any stale measurements
+			// for the public read API.
+			setEntry(entryTag, currentScreenKey, {
+				bounds: measured,
+			});
 
-			if (!shouldApplyMeasurement) return;
+			if (target.type === "source") {
+				setSource(
+					target.pairKey,
+					linkId,
+					currentScreenKey,
+					measured,
+					preparedStyles,
+					group,
+				);
+			}
 
-			applyMeasuredBoundsWrites({
-				sharedBoundTag,
-				currentScreenKey,
-				measured,
-				preparedStyles,
-				expectedSourceScreenKey: currentLink.expectedSourceScreenKey,
-				...sourceWrites,
-				...destinationWrites,
-			});
+			if (target.type === "destination") {
+				setDestination(
+					target.pairKey,
+					linkId,
+					currentScreenKey,
+					measured,
+					preparedStyles,
+					group,
+				);
+			}
 		},
 		[
 			enabled,
-			sharedBoundTag,
-			preferredSourceScreenKey,
+			entryTag,
+			linkId,
+			group,
 			currentScreenKey,
 			preparedStyles,
 			measuredAnimatedRef,

package/src/shared/components/create-boundary-component/hooks/use-refresh-boundary.ts

@@ -1,116 +1,77 @@
 import { useAnimatedReaction } from "react-native-reanimated";
 import { AnimationStore } from "../../../stores/animation.store";
-import { getGroupActiveId } from "../../../stores/bounds/internals/groups";
-import {
-	hasDestinationLink,
-	hasSourceLink,
-} from "../../../stores/bounds/internals/links";
-import type { BoundaryId, MeasureParams } from "../types";
+import { pairs } from "../../../stores/bounds/internals/state";
+import type { MeasureBoundary } from "../types";
+import { getRefreshBoundarySignal } from "../utils/refresh-signals";
 
 interface UseRefreshBoundaryParams {
 	enabled: boolean;
-	sharedBoundTag: string;
-	id: BoundaryId;
-	group?: string;
 	currentScreenKey: string;
+	preferredSourceScreenKey?: string;
 	nextScreenKey?: string;
-	hasNextScreen: boolean;
-	measureBoundary: (options: MeasureParams) => void;
+	linkId: string;
+	group?: string;
+	ancestorScreenKeys: string[];
+	measureBoundary: MeasureBoundary;
 }
 
 export const useRefreshBoundary = ({
 	enabled,
-	sharedBoundTag,
-	id,
-	group,
 	currentScreenKey,
+	preferredSourceScreenKey,
 	nextScreenKey,
-	hasNextScreen,
+	linkId,
+	group,
+	ancestorScreenKeys,
 	measureBoundary,
 }: UseRefreshBoundaryParams) => {
-	const currentWillAnimate = AnimationStore.getValue(
-		currentScreenKey,
+	// 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;
+	const refreshWillAnimate = AnimationStore.getValue(
+		refreshScreenKey,
 		"willAnimate",
 	);
-	const currentClosing = AnimationStore.getValue(currentScreenKey, "closing");
-	const currentEntering = AnimationStore.getValue(currentScreenKey, "entering");
-	const currentAnimating = AnimationStore.getValue(
-		currentScreenKey,
+	const refreshClosing = AnimationStore.getValue(refreshScreenKey, "closing");
+	const refreshEntering = AnimationStore.getValue(refreshScreenKey, "entering");
+	const refreshAnimating = AnimationStore.getValue(
+		refreshScreenKey,
 		"progressAnimating",
 	);
-	const currentProgress = AnimationStore.getValue(currentScreenKey, "progress");
-	const nextWillAnimate = nextScreenKey
-		? AnimationStore.getValue(nextScreenKey, "willAnimate")
-		: null;
-
-	const nextClosing = nextScreenKey
-		? AnimationStore.getValue(nextScreenKey, "closing")
-		: null;
-	const nextEntering = nextScreenKey
-		? AnimationStore.getValue(nextScreenKey, "entering")
-		: null;
+	const refreshProgress = AnimationStore.getValue(refreshScreenKey, "progress");
 
 	useAnimatedReaction(
 		() => {
 			"worklet";
-
-			const shouldRefresh = hasNextScreen
-				? (nextWillAnimate?.get() ?? 0)
-				: currentWillAnimate.get();
-			const closing = hasNextScreen
-				? (nextClosing?.get() ?? 0)
-				: currentClosing.get();
-			const entering = hasNextScreen
-				? (nextEntering?.get() ?? 0)
-				: currentEntering.get();
-
-			// Programmatic close marks `closing` before pulsing `willAnimate`.
-			// This frame is still settled, so destination refresh is valid and
-			// reveal can compute initial/current destination delta before progress moves.
-			const canRefreshPreCloseDestination =
-				!hasNextScreen &&
-				shouldRefresh &&
-				closing &&
-				!entering &&
-				!currentAnimating.get() &&
-				currentProgress.get() >= 1;
-
-			if (
-				canRefreshPreCloseDestination ||
-				(shouldRefresh && !closing && !entering)
-			) {
-				return 1;
-			}
-
-			return 0;
+			return getRefreshBoundarySignal({
+				enabled,
+				currentScreenKey,
+				preferredSourceScreenKey,
+				nextScreenKey,
+				linkId,
+				group,
+				ancestorScreenKeys,
+				shouldRefresh: !!refreshWillAnimate.get(),
+				closing: !!refreshClosing.get(),
+				entering: !!refreshEntering.get(),
+				animating: !!refreshAnimating.get(),
+				progress: refreshProgress.get(),
+				linkState: group || ancestorScreenKeys.length ? pairs.get() : undefined,
+			});
 		},
-		(shouldRefresh, prevShouldRefresh) => {
+		(refreshSignal, prevRefreshSignal) => {
 			"worklet";
 
-			if (!enabled || !shouldRefresh || shouldRefresh === prevShouldRefresh)
-				return;
-
-			const currentGroupActiveId = group ? getGroupActiveId(group) : null;
-
-			if (group && currentGroupActiveId !== String(id)) {
-				return;
-			}
-
-			if (hasNextScreen) {
-				if (
-					!nextScreenKey ||
-					!hasSourceLink(sharedBoundTag, currentScreenKey) ||
-					!hasDestinationLink(sharedBoundTag, nextScreenKey)
-				) {
-					return;
-				}
-
-				measureBoundary({ intent: "refresh-source" });
+			if (
+				!refreshSignal ||
+				refreshSignal.signal === prevRefreshSignal?.signal
+			) {
 				return;
 			}
 
 			measureBoundary({
-				intent: "refresh-destination",
+				type: refreshSignal.type,
+				pairKey: refreshSignal.pairKey,
 			});
 		},
 	);

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

@@ -4,7 +4,9 @@ import { createBoundaryComponent } from "./create-boundary-component";
 
 export { createBoundaryComponent };
 
-const BoundaryView = createBoundaryComponent(View);
+const BoundaryView = createBoundaryComponent(View, {
+	shouldAutoMeasure: true,
+});
 const BoundaryTrigger = createBoundaryComponent(Pressable);
 BoundaryView.displayName = "Transition.Boundary.View";
 BoundaryTrigger.displayName = "Transition.Boundary.Trigger";

package/src/shared/components/create-boundary-component/types.ts

@@ -1,3 +1,4 @@
+import type { ScreenPairKey } from "../../stores/bounds/types";
 import type { BoundsOptions } from "../../utils/bounds/types/options";
 
 export type BoundaryId = string | number;
@@ -15,9 +16,8 @@ export type BoundaryConfigProps = Pick<
 export interface BoundaryOwnProps extends BoundaryConfigProps {
 	/**
 	 * Optional group name for collection/list scenarios.
-	 * When provided, boundaries are tracked as a group and the active member
-	 * re-measures automatically when focus changes within the group.
-	 * The internal tag becomes `group:id`.
+	 * When provided, concrete boundary entries use `group:id`, while transition
+	 * links stay keyed by the member `id` inside the active screen pair.
 	 */
 	group?: string;
 	/**
@@ -35,12 +35,14 @@ export interface BoundaryOwnProps extends BoundaryConfigProps {
 export type BoundaryComponentProps<P extends object> = Omit<P, "id"> &
 	BoundaryOwnProps;
 
-export type MeasureIntent =
-	| "capture-source"
-	| "complete-destination"
-	| "refresh-source"
-	| "refresh-destination";
+export type MeasureTarget =
+	| {
+			type: "source";
+			pairKey: ScreenPairKey;
+	  }
+	| {
+			type: "destination";
+			pairKey: ScreenPairKey;
+	  };
 
-export interface MeasureParams {
-	intent?: MeasureIntent | readonly MeasureIntent[];
-}
+export type MeasureBoundary = (target: MeasureTarget) => void;

package/src/shared/components/create-boundary-component/utils/destination-signals.ts

@@ -0,0 +1,129 @@
+import {
+	createPendingPairKey,
+	createScreenPairKey,
+	getDestinationScreenKeyFromPairKey,
+	getSourceScreenKeyFromPairKey,
+} from "../../../stores/bounds/helpers/link-pairs.helpers";
+import {
+	getDestination,
+	getSource,
+} from "../../../stores/bounds/internals/links";
+import type {
+	LinkPairsState,
+	ScreenPairKey,
+} from "../../../stores/bounds/types";
+
+const findPendingSourcePairKey = (
+	linkState: LinkPairsState | undefined,
+	linkId: string,
+): ScreenPairKey | null => {
+	"worklet";
+	if (!linkState) return null;
+
+	for (const pairKey in linkState) {
+		const sourceScreenKey = getSourceScreenKeyFromPairKey(pairKey);
+
+		if (pairKey !== createPendingPairKey(sourceScreenKey)) {
+			continue;
+		}
+
+		if (linkState[pairKey]?.links?.[linkId]?.source) {
+			return pairKey;
+		}
+	}
+
+	return null;
+};
+
+// Passive Boundary.View sources in nested routes can already live in the final
+// ancestor pair, even before the destination side has attached.
+const findAncestorSourcePairKey = (
+	linkState: LinkPairsState | undefined,
+	linkId: string,
+	destinationScreenKey: string | undefined,
+): ScreenPairKey | null => {
+	"worklet";
+	if (!linkState || !destinationScreenKey) return null;
+
+	for (const pairKey in linkState) {
+		if (getDestinationScreenKeyFromPairKey(pairKey) !== destinationScreenKey) {
+			continue;
+		}
+
+		if (linkState[pairKey]?.links?.[linkId]?.source) {
+			return pairKey;
+		}
+	}
+
+	return null;
+};
+
+export const getInitialDestinationMeasurePairKey = (params: {
+	enabled: boolean;
+	currentScreenKey: string;
+	preferredSourceScreenKey?: string;
+	ancestorScreenKeys?: readonly string[];
+	linkId: string;
+	linkState?: LinkPairsState;
+}): ScreenPairKey | null => {
+	"worklet";
+	const {
+		enabled,
+		currentScreenKey,
+		preferredSourceScreenKey,
+		ancestorScreenKeys,
+		linkId,
+		linkState,
+	} = params;
+
+	if (!enabled) {
+		return null;
+	}
+
+	// Initial screens inside nested navigators measure concrete child views, but
+	// the transition pair belongs to the nearest animated ancestor route.
+	const ancestorPairKey = findAncestorSourcePairKey(
+		linkState,
+		linkId,
+		ancestorScreenKeys?.[0],
+	);
+
+	// Trigger sources start as pending screen<> links. Boundary.View sources may
+	// already be in the ancestor pair, so only scan pending when needed.
+	const pendingSourcePairKey = preferredSourceScreenKey
+		? createPendingPairKey(preferredSourceScreenKey)
+		: ancestorPairKey
+			? null
+			: findPendingSourcePairKey(linkState, linkId);
+
+	const sourceScreenKey = preferredSourceScreenKey
+		? preferredSourceScreenKey
+		: getSourceScreenKeyFromPairKey(
+				ancestorPairKey ?? pendingSourcePairKey ?? "",
+			);
+
+	if (!sourceScreenKey) return null;
+
+	// Non-nested destinations attach to their own route. Nested initial screens
+	// attach to the animated ancestor route unless that pair already exists.
+	const destinationScreenKey =
+		ancestorPairKey || preferredSourceScreenKey || !ancestorScreenKeys?.[0]
+			? currentScreenKey
+			: ancestorScreenKeys[0];
+
+	const destinationPairKey =
+		ancestorPairKey ??
+		createScreenPairKey(sourceScreenKey, destinationScreenKey);
+
+	const hasDestinationLink =
+		getDestination(destinationPairKey, linkId) !== null;
+
+	const hasAttachableSourceLink =
+		getSource(destinationPairKey, linkId) !== null ||
+		(!!pendingSourcePairKey &&
+			getSource(pendingSourcePairKey, linkId) !== null);
+
+	return hasAttachableSourceLink && !hasDestinationLink
+		? destinationPairKey
+		: null;
+};

package/src/shared/components/create-boundary-component/{hooks/helpers/scroll-measurement.ts → utils/measured-bounds.ts}

@@ -7,7 +7,7 @@ import {
 import type {
 	ScrollGestureAxisState,
 	ScrollGestureState,
-} from "../../../../types/gesture.types";
+} from "../../../types/gesture.types";
 
 const SCROLL_MEASUREMENT_EPSILON = 1;
 
@@ -46,6 +46,30 @@ export const adjustedMeasuredBoundsForOverscrollDeltas = (
 	};
 };
 
+export const isMeasurementInViewport = (
+	measured: MeasuredDimensions,
+	viewportWidth: number,
+	viewportHeight: number,
+): boolean => {
+	"worklet";
+
+	if (measured.width <= 0 || measured.height <= 0) {
+		return false;
+	}
+
+	const toleranceX = viewportWidth * 0.15;
+	const toleranceY = viewportHeight * 0.15;
+	const centerX = measured.pageX + measured.width / 2;
+	const centerY = measured.pageY + measured.height / 2;
+
+	return (
+		centerX >= -toleranceX &&
+		centerX <= viewportWidth + toleranceX &&
+		centerY >= -toleranceY &&
+		centerY <= viewportHeight + toleranceY
+	);
+};
+
 export const measureWithOverscrollAwareness = (
 	ref: AnimatedRef<View>,
 	scrollState: ScrollGestureState | null,