react-native-screen-transitions 3.5.2 → 3.6.0-alpha.0

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

@@ -15,11 +15,11 @@ import Animated, {
 import { NO_STYLES } from "../../constants";
 import { useDescriptorDerivations } from "../../providers/screen/descriptors";
 import { useScreenStyles } from "../../providers/screen/styles";
-import { setGroupActiveId } from "../../stores/bounds/internals/groups";
+import { setGroupInitialId } from "../../stores/bounds/internals/groups";
 import { prepareStyleForBounds } from "../../utils/bounds/helpers/styles/styles";
 import { useBoundaryPresence } from "./hooks/use-boundary-presence";
-import { useCaptureDestinationBoundary } from "./hooks/use-capture-destination-boundary";
-import { useCaptureSourceBoundary } from "./hooks/use-capture-source-boundary";
+import { useInitialDestinationMeasurement } from "./hooks/use-initial-destination-measurement";
+import { useInitialSourceMeasurement } from "./hooks/use-initial-source-measurement";
 import { useMeasurer } from "./hooks/use-measurer";
 import { useRefreshBoundary } from "./hooks/use-refresh-boundary";
 import {
@@ -92,7 +92,10 @@ export function createBoundaryComponent<P extends object>(
 			};
 		}, [anchor, scaleMode, target, method]);
 
-		const preparedStyles = useMemo(() => prepareStyleForBounds(style), [style]);
+		const ownerPreparedStyles = useMemo(
+			() => prepareStyleForBounds(style),
+			[style],
+		);
 		const { stylesMap } = useScreenStyles();
 
 		const associatedStyles = useAnimatedStyle(() => {
@@ -110,10 +113,13 @@ export function createBoundaryComponent<P extends object>(
 			};
 		});
 
-		const { contextValue, measuredRef, hasActiveTarget } = useBoundaryOwner({
-			ownerRef,
-			associatedTargetStyles: runtimeEnabled ? associatedStyles : undefined,
-		});
+		const { contextValue, measuredRef, hasActiveTarget, targetPreparedStyles } =
+			useBoundaryOwner({
+				ownerRef,
+				associatedTargetStyles: runtimeEnabled ? associatedStyles : undefined,
+			});
+
+		const preparedStyles = targetPreparedStyles ?? ownerPreparedStyles;
 
 		const measureBoundary = useMeasurer({
 			enabled,
@@ -141,26 +147,20 @@ export function createBoundaryComponent<P extends object>(
 			boundaryConfig,
 		});
 
-		// On the source screen, capture source bounds when a matching destination
-		// appears on the next screen.
-		useCaptureSourceBoundary({
+		// Initial source measurement: capture source bounds when a matching
+		// destination appears on the next screen.
+		useInitialSourceMeasurement({
 			enabled: runtimeEnabled,
-			sharedBoundTag,
-			id,
-			group,
 			nextScreenKey,
 			measureBoundary,
 		});
 
-		// Destination completion path: hold lifecycle start until the first valid
-		// destination measurement attaches, then release the pending transition.
-		useCaptureDestinationBoundary({
+		// Initial destination measurement: hold lifecycle start until the first
+		// valid destination measurement attaches, then release the pending transition.
+		useInitialDestinationMeasurement({
 			sharedBoundTag,
 			enabled: shouldRunDestinationEffects,
-			id,
-			group,
 			currentScreenKey,
-			expectedSourceScreenKey: preferredSourceScreenKey,
 			measureBoundary,
 		});
 
@@ -183,7 +183,7 @@ export function createBoundaryComponent<P extends object>(
 			(...args: unknown[]) => {
 				// Press path has priority: capture source before user onPress/navigation.
 				if (group) {
-					runOnUI(setGroupActiveId)(group, String(id));
+					runOnUI(setGroupInitialId)(group, String(id));
 				}
 				runOnUI(measureBoundary)({ intent: "capture-source" });
 

package/src/shared/{stores/bounds → components/create-boundary-component}/helpers/apply-measured-bounds-writes.ts

@@ -1,5 +1,9 @@
 import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
-import { setDestination, setEntry, setSource } from "../internals/registry";
+import { setEntry } from "../../../stores/bounds/internals/entries";
+import {
+	setDestination,
+	setSource,
+} from "../../../stores/bounds/internals/links";
 
 type ApplyMeasuredBoundsWritesParams = {
 	sharedBoundTag: string;
@@ -9,7 +13,6 @@ type ApplyMeasuredBoundsWritesParams = {
 	ancestorKeys: string[];
 	navigatorKey?: string;
 	ancestorNavigatorKeys?: string[];
-	shouldWriteEntry?: boolean;
 	shouldSetSource?: boolean;
 	shouldUpdateSource?: boolean;
 	shouldSetDestination?: boolean;
@@ -29,7 +32,6 @@ export const applyMeasuredBoundsWrites = (
 		ancestorKeys,
 		navigatorKey,
 		ancestorNavigatorKeys,
-		shouldWriteEntry,
 		shouldSetSource,
 		shouldUpdateSource,
 		shouldSetDestination,
@@ -37,15 +39,11 @@ export const applyMeasuredBoundsWrites = (
 		expectedSourceScreenKey,
 	} = params;
 
-	if (shouldWriteEntry) {
-		setEntry(sharedBoundTag, currentScreenKey, {
-			bounds: measured,
-			styles: preparedStyles,
-			ancestorKeys,
-			navigatorKey,
-			ancestorNavigatorKeys,
-		});
-	}
+	// Set the bounds entry on every measure to avoid any stale measurements
+	// for the public read API.
+	setEntry(sharedBoundTag, currentScreenKey, {
+		bounds: measured,
+	});
 
 	if (shouldSetSource) {
 		setSource(

package/src/shared/components/create-boundary-component/helpers/resolve-pending-source-key.ts

@@ -1,7 +1,7 @@
 import {
 	getPendingLink,
 	hasSourceLink,
-} from "../../../stores/bounds/internals/registry";
+} from "../../../stores/bounds/internals/links";
 
 export const resolvePendingSourceKey = (
 	sharedBoundTag: string,

package/src/shared/components/create-boundary-component/hooks/helpers/boundary-link-context.ts

@@ -0,0 +1,48 @@
+import {
+	getPendingLink,
+	hasDestinationLink,
+	hasSourceLink,
+} from "../../../../stores/bounds/internals/links";
+import { resolvePendingSourceKey } from "../../helpers/resolve-pending-source-key";
+
+export type LinkContext = {
+	/**
+	 * The source screen this measurement should pair with, if one can be
+	 * resolved. Disambiguates between multiple candidate sources in the
+	 * registry (e.g. nested or repeat presentations of the same tag).
+	 */
+	expectedSourceScreenKey: string | undefined;
+	/** A pending link exists waiting for a destination to attach. */
+	hasPendingLink: boolean;
+	/** The expected source screen has a captured source ready to attach to. */
+	hasAttachableSourceLink: boolean;
+	/** The current screen is already registered as the source for this tag. */
+	hasSourceLink: boolean;
+	/** The current screen is already registered as the destination for this tag. */
+	hasDestinationLink: boolean;
+};
+
+export const createLinkContext = (params: {
+	sharedBoundTag: string;
+	currentScreenKey: string;
+	preferredSourceScreenKey?: string;
+}): LinkContext => {
+	"worklet";
+	const { sharedBoundTag, currentScreenKey, preferredSourceScreenKey } = params;
+
+	const expectedSourceScreenKey =
+		resolvePendingSourceKey(sharedBoundTag, preferredSourceScreenKey) ??
+		undefined;
+	const hasPendingLink =
+		getPendingLink(sharedBoundTag, expectedSourceScreenKey) !== null;
+
+	return {
+		expectedSourceScreenKey,
+		hasPendingLink,
+		hasAttachableSourceLink: expectedSourceScreenKey
+			? hasSourceLink(sharedBoundTag, expectedSourceScreenKey)
+			: false,
+		hasSourceLink: hasSourceLink(sharedBoundTag, currentScreenKey),
+		hasDestinationLink: hasDestinationLink(sharedBoundTag, currentScreenKey),
+	};
+};

package/src/shared/components/create-boundary-component/hooks/helpers/measurement-rules.ts

@@ -1,10 +1,5 @@
 import type { MeasureIntent } from "../../types";
 
-type PresenceLikeEntry = {
-	count: number;
-	ancestorKeys?: string[];
-};
-
 export type MeasureIntentFlags = {
 	captureSource: boolean;
 	completeDestination: boolean;
@@ -21,11 +16,6 @@ export type MeasureWritePlan = {
 	wantsDestinationWrite: boolean;
 };
 
-export type DeferredMeasurementAction =
-	| "clear-pending"
-	| "queue-or-flush"
-	| "noop";
-
 export const getMeasureIntentFlags = (
 	intent?: MeasureIntent | readonly MeasureIntent[],
 ): MeasureIntentFlags => {
@@ -63,7 +53,7 @@ export const getMeasureIntentFlags = (
 	return flags;
 };
 
-export const resolveMeasureWritePlan = (params: {
+export const buildMeasurementWritePlan = (params: {
 	intents: MeasureIntentFlags;
 	hasPendingLink: boolean;
 	hasSourceLink: boolean;
@@ -98,175 +88,3 @@ export const resolveMeasureWritePlan = (params: {
 		wantsDestinationWrite: completeDestination || refreshDestination,
 	};
 };
-
-/**
- * Temporarily removed destination-match gating for auto source capture.
- *
- * For now, any enabled boundary on a source screen will eagerly capture when a
- * next screen exists, even if no matching destination boundary has registered
- * presence yet. The previous behavior waited for an explicit destination match
- * before allowing source capture.
- */
-export const resolveAutoSourceCaptureSignal = (params: {
-	enabled: boolean;
-	nextScreenKey?: string;
-	tagPresence?: Record<string, PresenceLikeEntry>;
-}): string | 0 => {
-	"worklet";
-	const { enabled, nextScreenKey } = params;
-	if (!enabled) return 0;
-	if (!nextScreenKey) return 0;
-
-	/**
-	 * Temporarily removed destination-match gating for auto source capture.
-	 *
-	 * For now, any enabled boundary on a source screen will eagerly capture when
-	 * a next screen exists, even if no matching destination boundary has
-	 * registered presence yet. The previous behavior waited for an explicit
-	 * destination match before allowing source capture.
-	 */
-	// const tagPresence = params.tagPresence;
-	// if (!tagPresence) return 0;
-	//
-	// const direct = tagPresence[nextScreenKey];
-	// if (direct && direct.count > 0) return nextScreenKey;
-	//
-	// for (const screenKey in tagPresence) {
-	// 	const entry = tagPresence[screenKey];
-	// 	if (entry.ancestorKeys?.includes(nextScreenKey)) {
-	// 		return nextScreenKey;
-	// 	}
-	// }
-	//
-	// return 0;
-
-	return nextScreenKey;
-};
-
-export const resolvePendingDestinationCaptureSignal = (params: {
-	enabled: boolean;
-	resolvedSourceKey?: string | null;
-	hasAttachableSourceLink: boolean;
-	hasDestinationLink: boolean;
-}): string | 0 => {
-	"worklet";
-	const {
-		enabled,
-		resolvedSourceKey,
-		hasAttachableSourceLink,
-		hasDestinationLink,
-	} = params;
-	if (!enabled) return 0;
-	if (!resolvedSourceKey) return 0;
-	if (!hasAttachableSourceLink) return 0;
-	if (hasDestinationLink) return 0;
-	return resolvedSourceKey;
-};
-
-export const resolvePendingDestinationRetrySignal = (params: {
-	enabled: boolean;
-	retryCount: number;
-	maxRetries: number;
-	isAnimating: boolean;
-	hasDestinationLink: boolean;
-	progress: number;
-	retryProgressMax: number;
-	retryProgressBuckets: number;
-	resolvedSourceKey?: string | null;
-	hasAttachableSourceLink: boolean;
-}): number => {
-	"worklet";
-	const {
-		enabled,
-		retryCount,
-		maxRetries,
-		isAnimating,
-		hasDestinationLink,
-		progress,
-		retryProgressMax,
-		retryProgressBuckets,
-		resolvedSourceKey,
-		hasAttachableSourceLink,
-	} = params;
-
-	if (!enabled) return 0;
-	if (retryCount >= maxRetries) return 0;
-	if (!isAnimating) return 0;
-	if (hasDestinationLink) return 0;
-	if (progress <= 0 || progress >= retryProgressMax) return 0;
-	if (!resolvedSourceKey) return 0;
-	if (!hasAttachableSourceLink) return 0;
-
-	return Math.floor(progress * retryProgressBuckets) + 1;
-};
-
-export const resolvePrepareSourceMeasurementIntent = (params: {
-	hasSourceLink: boolean;
-	shouldRefreshExistingSource: boolean;
-}): MeasureIntent | null => {
-	"worklet";
-	if (!params.hasSourceLink) {
-		return "capture-source";
-	}
-
-	return params.shouldRefreshExistingSource ? "refresh-source" : null;
-};
-
-export const PREPARE_DESTINATION_MEASUREMENT_INTENT = [
-	"complete-destination",
-	"refresh-destination",
-] as const satisfies readonly MeasureIntent[];
-
-export const resolveGroupActiveMeasurementAction = (params: {
-	enabled: boolean;
-	isEligible: boolean;
-	memberId: string;
-	activeId: string | null;
-	previousActiveId: string | null;
-}): DeferredMeasurementAction => {
-	"worklet";
-	const { enabled, isEligible, memberId, activeId, previousActiveId } = params;
-
-	if (!enabled || !isEligible) return "noop";
-	if (activeId !== memberId) return "clear-pending";
-	if (activeId === memberId && activeId !== previousActiveId) {
-		return "queue-or-flush";
-	}
-	return "noop";
-};
-
-export const canFlushGroupActiveMeasurement = (params: {
-	enabled: boolean;
-	isEligible: boolean;
-	memberId: string;
-	activeId: string | null;
-}): boolean => {
-	"worklet";
-	const { enabled, isEligible, memberId, activeId } = params;
-	if (!enabled || !isEligible) return false;
-	return activeId === memberId;
-};
-
-export const shouldTriggerScrollSettledRefresh = (params: {
-	enabled: boolean;
-	group: string | undefined;
-	hasNextScreen: boolean;
-	hasSettledSignal: boolean;
-	signal: number;
-	previousSignal: number | null;
-}): boolean => {
-	"worklet";
-	const {
-		enabled,
-		group,
-		hasNextScreen,
-		hasSettledSignal,
-		signal,
-		previousSignal,
-	} = params;
-
-	if (!enabled) return false;
-	if (!group || !hasNextScreen || !hasSettledSignal) return false;
-	if (signal === 0 || signal === previousSignal) return false;
-	return true;
-};

package/src/shared/components/create-boundary-component/hooks/helpers/measurement.ts

@@ -1,23 +1,5 @@
 import type { MeasuredDimensions } from "react-native-reanimated";
 
-export const SNAPSHOT_EPSILON = 0.5;
-
-export const areMeasurementsEqual = (
-	a: MeasuredDimensions,
-	b: MeasuredDimensions,
-): boolean => {
-	"worklet";
-
-	return (
-		Math.abs(a.x - b.x) <= SNAPSHOT_EPSILON &&
-		Math.abs(a.y - b.y) <= SNAPSHOT_EPSILON &&
-		Math.abs(a.pageX - b.pageX) <= SNAPSHOT_EPSILON &&
-		Math.abs(a.pageY - b.pageY) <= SNAPSHOT_EPSILON &&
-		Math.abs(a.width - b.width) <= SNAPSHOT_EPSILON &&
-		Math.abs(a.height - b.height) <= SNAPSHOT_EPSILON
-	);
-};
-
 export const isMeasurementInViewport = (
 	measured: MeasuredDimensions,
 	viewportWidth: number,

package/src/shared/components/create-boundary-component/hooks/helpers/scroll-measurement.ts

@@ -0,0 +1,58 @@
+import type { View } from "react-native";
+import {
+	type AnimatedRef,
+	type MeasuredDimensions,
+	measure,
+} from "react-native-reanimated";
+import type {
+	ScrollGestureAxisState,
+	ScrollGestureState,
+} from "../../../../types/gesture.types";
+
+const SCROLL_MEASUREMENT_EPSILON = 1;
+
+const getOverscrollDelta = (axisState: ScrollGestureAxisState): number => {
+	"worklet";
+	const maxOffset = Math.max(0, axisState.contentSize - axisState.layoutSize);
+	const clampedOffset = Math.min(Math.max(axisState.offset, 0), maxOffset);
+	const delta = axisState.offset - clampedOffset;
+
+	return Math.abs(delta) > SCROLL_MEASUREMENT_EPSILON ? delta : 0;
+};
+
+export const adjustedMeasuredBoundsForOverscrollDeltas = (
+	measured: MeasuredDimensions,
+	scrollState: ScrollGestureState | null,
+): MeasuredDimensions => {
+	"worklet";
+
+	if (!scrollState) {
+		return measured;
+	}
+
+	const deltaX = getOverscrollDelta(scrollState.horizontal);
+	const deltaY = getOverscrollDelta(scrollState.vertical);
+
+	if (deltaX === 0 && deltaY === 0) {
+		return measured;
+	}
+
+	return {
+		...measured,
+		x: measured.x + deltaX,
+		y: measured.y + deltaY,
+		pageX: measured.pageX + deltaX,
+		pageY: measured.pageY + deltaY,
+	};
+};
+
+export const measureWithOverscrollAwareness = (
+	ref: AnimatedRef<View>,
+	scrollState: ScrollGestureState | null,
+): MeasuredDimensions | null => {
+	"worklet";
+	const measured = measure(ref);
+	if (!measured) return null;
+
+	return adjustedMeasuredBoundsForOverscrollDeltas(measured, scrollState);
+};

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

@@ -3,7 +3,7 @@ import { runOnUI } from "react-native-reanimated";
 import {
 	removeEntry,
 	setEntry,
-} from "../../../stores/bounds/internals/registry";
+} from "../../../stores/bounds/internals/entries";
 import type { BoundaryConfigProps } from "../types";
 
 export const useBoundaryPresence = (params: {

package/src/shared/components/create-boundary-component/hooks/{use-capture-destination-boundary.ts → use-initial-destination-measurement.ts}

@@ -1,47 +1,36 @@
-import { useLayoutEffect } from "react";
 import {
 	cancelAnimation,
-	runOnUI,
 	useAnimatedReaction,
 	useSharedValue,
 	withDelay,
 	withTiming,
 } from "react-native-reanimated";
 import { AnimationStore } from "../../../stores/animation.store";
-import { getGroupActiveId } from "../../../stores/bounds/internals/groups";
+import { hasDestinationLink } from "../../../stores/bounds/internals/links";
 import {
-	getPendingLink,
-	hasDestinationLink,
-	hasSourceLink,
-} from "../../../stores/bounds/internals/registry";
-import { SystemStore } from "../../../stores/system.store";
-import { resolvePendingSourceKey } from "../helpers/resolve-pending-source-key";
-import type { BoundaryId, MeasureParams } from "../types";
+	LifecycleTransitionRequestKind,
+	SystemStore,
+} from "../../../stores/system.store";
+import type { MeasureParams } from "../types";
 
 const VIEWPORT_RETRY_DELAY_MS = 16;
 
-interface UseCaptureDestinationBoundaryParams {
+interface UseInitialDestinationMeasurementParams {
 	sharedBoundTag: string;
 	enabled: boolean;
-	id: BoundaryId;
-	group?: string;
 	currentScreenKey: string;
-	expectedSourceScreenKey?: string;
 	measureBoundary: (options: MeasureParams) => void;
 }
 
-export const useCaptureDestinationBoundary = ({
+export const useInitialDestinationMeasurement = ({
 	sharedBoundTag,
 	enabled,
-	id,
-	group,
 	currentScreenKey,
-	expectedSourceScreenKey,
 	measureBoundary,
-}: UseCaptureDestinationBoundaryParams) => {
-	const animating = AnimationStore.getValue(currentScreenKey, "animating");
-	const closing = AnimationStore.getValue(currentScreenKey, "closing");
+}: UseInitialDestinationMeasurementParams) => {
+	const progress = AnimationStore.getValue(currentScreenKey, "progress");
 	const system = SystemStore.getBag(currentScreenKey);
+	const { pendingLifecycleRequestKind } = system;
 	const { blockLifecycleStart, unblockLifecycleStart } = system.actions;
 	const isBlockingLifecycleStart = useSharedValue(0);
 	const retryToken = useSharedValue(0);
@@ -84,37 +73,27 @@ export const useCaptureDestinationBoundary = ({
 			"worklet";
 			const retryTick = retryToken.get();
 
-			if (closing.get() || animating.get()) {
+			const hasPendingOpenRequest =
+				pendingLifecycleRequestKind.get() ===
+				LifecycleTransitionRequestKind.Open;
+
+			const isWaitingForOpenToStart = progress.get() <= 0;
+
+			if (!hasPendingOpenRequest || !isWaitingForOpenToStart) {
 				return [0, retryTick] as const;
 			}
 
-			const resolvedSourceKey = resolvePendingSourceKey(
-				sharedBoundTag,
-				expectedSourceScreenKey,
-			);
-			const hasAttachableSourceLink = resolvedSourceKey
-				? getPendingLink(sharedBoundTag, resolvedSourceKey) !== null ||
-					hasSourceLink(sharedBoundTag, resolvedSourceKey)
-				: false;
 			const hasDestination = hasDestinationLink(
 				sharedBoundTag,
 				currentScreenKey,
 			);
 
-			const shouldBlock =
-				enabled &&
-				!!resolvedSourceKey &&
-				hasAttachableSourceLink &&
-				!hasDestination;
+			const shouldBlock = enabled && !hasDestination;
 
 			if (!shouldBlock) {
 				return [0, retryTick] as const;
 			}
 
-			if (group && getGroupActiveId(group) !== String(id)) {
-				return [0, retryTick] as const;
-			}
-
 			return [1, retryTick] as const;
 		},
 		([shouldBlock]) => {
@@ -135,20 +114,4 @@ export const useCaptureDestinationBoundary = ({
 			scheduleViewportRetry();
 		},
 	);
-
-	useLayoutEffect(() => {
-		return () => {
-			runOnUI(() => {
-				"worklet";
-				cancelAnimation(retryToken);
-
-				if (!isBlockingLifecycleStart.get()) {
-					return;
-				}
-
-				unblockLifecycleStart();
-				isBlockingLifecycleStart.set(0);
-			})();
-		};
-	}, [isBlockingLifecycleStart, retryToken, unblockLifecycleStart]);
 };

package/src/shared/components/create-boundary-component/hooks/use-initial-source-measurement.ts

@@ -0,0 +1,27 @@
+import { useAnimatedReaction } from "react-native-reanimated";
+import type { MeasureParams } from "../types";
+
+export const useInitialSourceMeasurement = (params: {
+	enabled: boolean;
+	nextScreenKey?: string;
+	measureBoundary: (options: MeasureParams) => void;
+}) => {
+	const { enabled, nextScreenKey, measureBoundary } = params;
+
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			if (!enabled || !nextScreenKey) {
+				return 0;
+			}
+
+			return nextScreenKey;
+		},
+		(captureSignal) => {
+			"worklet";
+			if (!enabled || !captureSignal) return;
+
+			measureBoundary({ intent: "capture-source" });
+		},
+	);
+};