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

package/src/shared/components/create-boundary-component/hooks/use-deferred-measurement-trigger.ts

@@ -0,0 +1,58 @@
+import { useCallback } from "react";
+import {
+	type SharedValue,
+	useAnimatedReaction,
+	useSharedValue,
+} from "react-native-reanimated";
+
+export const useDeferredMeasurementTrigger = (params: {
+	enabled: boolean;
+	isAnimating: SharedValue<number>;
+	canFlush?: () => boolean;
+	onFlush: () => void;
+}) => {
+	const { enabled, isAnimating, canFlush, onFlush } = params;
+	const hasPendingMeasurement = useSharedValue(false);
+
+	const clearPendingMeasurement = useCallback(() => {
+		"worklet";
+		hasPendingMeasurement.value = false;
+	}, [hasPendingMeasurement]);
+
+	const queueOrFlushMeasurement = useCallback(() => {
+		"worklet";
+		if (!enabled) return;
+
+		if (isAnimating.value) {
+			hasPendingMeasurement.value = true;
+			return;
+		}
+
+		hasPendingMeasurement.value = false;
+		onFlush();
+	}, [enabled, isAnimating, hasPendingMeasurement, onFlush]);
+
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			if (!enabled) return false;
+			if (!hasPendingMeasurement.value) return false;
+			if (isAnimating.value) return false;
+			return canFlush ? canFlush() : true;
+		},
+		(shouldFlush, previousShouldFlush) => {
+			"worklet";
+			if (!enabled) return;
+			if (!shouldFlush || shouldFlush === previousShouldFlush) return;
+
+			hasPendingMeasurement.value = false;
+			onFlush();
+		},
+		[enabled, isAnimating, hasPendingMeasurement, canFlush, onFlush],
+	);
+
+	return {
+		clearPendingMeasurement,
+		queueOrFlushMeasurement,
+	};
+};

package/src/shared/components/create-boundary-component/hooks/use-group-active-measurement.ts

@@ -1,7 +1,11 @@
-import { useAnimatedReaction } from "react-native-reanimated";
-import type { AnimationStore } from "../../../stores/animation.store";
+import { type SharedValue, useAnimatedReaction } from "react-native-reanimated";
 import { BoundStore } from "../../../stores/bounds";
 import type { BoundaryId, MaybeMeasureAndStoreParams } from "../types";
+import {
+	canFlushGroupActiveMeasurement,
+	resolveGroupActiveMeasurementAction,
+} from "./helpers/measurement-rules";
+import { useDeferredMeasurementTrigger } from "./use-deferred-measurement-trigger";
 
 /**
  * Watches the group's active id in the BoundStore.
@@ -15,7 +19,7 @@ export const useGroupActiveMeasurement = (params: {
 	group: string | undefined;
 	id: BoundaryId;
 	shouldUpdateDestination: boolean;
-	isAnimating: ReturnType<typeof AnimationStore.getRouteAnimation>;
+	isAnimating: SharedValue<number>;
 	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
 }) => {
 	const {
@@ -29,6 +33,24 @@ export const useGroupActiveMeasurement = (params: {
 	const idStr = String(id);
 
 	const allGroups = BoundStore.getGroups();
+	const { clearPendingMeasurement, queueOrFlushMeasurement } =
+		useDeferredMeasurementTrigger({
+			enabled,
+			isAnimating,
+			canFlush: () => {
+				"worklet";
+				return canFlushGroupActiveMeasurement({
+					enabled,
+					isEligible: !!group && shouldUpdateDestination,
+					memberId: idStr,
+					activeId: group ? (allGroups.value[group]?.activeId ?? null) : null,
+				});
+			},
+			onFlush: () => {
+				"worklet";
+				maybeMeasureAndStore({ intent: "refresh-destination" });
+			},
+		});
 
 	useAnimatedReaction(
 		() => {
@@ -39,12 +61,21 @@ export const useGroupActiveMeasurement = (params: {
 		},
 		(activeId, previousActiveId) => {
 			"worklet";
-			if (!enabled) return;
-			if (!group || !shouldUpdateDestination) return;
-			if (isAnimating.value) return;
+			const action = resolveGroupActiveMeasurementAction({
+				enabled,
+				isEligible: !!group && shouldUpdateDestination,
+				memberId: idStr,
+				activeId,
+				previousActiveId,
+			});
 
-			if (activeId === idStr && activeId !== previousActiveId) {
-				maybeMeasureAndStore({ shouldUpdateDestination: true });
+			if (action === "clear-pending") {
+				clearPendingMeasurement();
+				return;
+			}
+
+			if (action === "queue-or-flush") {
+				queueOrFlushMeasurement();
 			}
 		},
 		[
@@ -52,8 +83,8 @@ export const useGroupActiveMeasurement = (params: {
 			group,
 			idStr,
 			shouldUpdateDestination,
-			isAnimating,
-			maybeMeasureAndStore,
+			clearPendingMeasurement,
+			queueOrFlushMeasurement,
 		],
 	);
 };

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

@@ -0,0 +1,82 @@
+import { type SharedValue, useAnimatedReaction } from "react-native-reanimated";
+import { BoundStore } from "../../../stores/bounds";
+import type { BoundaryId, MaybeMeasureAndStoreParams } from "../types";
+import {
+	canFlushGroupActiveMeasurement,
+	resolveGroupActiveMeasurementAction,
+} from "./helpers/measurement-rules";
+import { useDeferredMeasurementTrigger } from "./use-deferred-measurement-trigger";
+
+export const useGroupActiveSourceMeasurement = (params: {
+	enabled: boolean;
+	group: string | undefined;
+	id: BoundaryId;
+	hasNextScreen: boolean;
+	isAnimating: SharedValue<number>;
+	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
+}) => {
+	const {
+		enabled,
+		group,
+		id,
+		hasNextScreen,
+		isAnimating,
+		maybeMeasureAndStore,
+	} = params;
+	const idStr = String(id);
+	const allGroups = BoundStore.getGroups();
+	const { clearPendingMeasurement, queueOrFlushMeasurement } =
+		useDeferredMeasurementTrigger({
+			enabled,
+			isAnimating,
+			canFlush: () => {
+				"worklet";
+				return canFlushGroupActiveMeasurement({
+					enabled,
+					isEligible: !!group && hasNextScreen,
+					memberId: idStr,
+					activeId: group ? (allGroups.value[group]?.activeId ?? null) : null,
+				});
+			},
+			onFlush: () => {
+				"worklet";
+				maybeMeasureAndStore({ intent: "refresh-source" });
+			},
+		});
+
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			if (!enabled) return null;
+			if (!group) return null;
+			return allGroups.value[group]?.activeId ?? null;
+		},
+		(activeId, previousActiveId) => {
+			"worklet";
+			const action = resolveGroupActiveMeasurementAction({
+				enabled,
+				isEligible: !!group && hasNextScreen,
+				memberId: idStr,
+				activeId,
+				previousActiveId,
+			});
+
+			if (action === "clear-pending") {
+				clearPendingMeasurement();
+				return;
+			}
+
+			if (action === "queue-or-flush") {
+				queueOrFlushMeasurement();
+			}
+		},
+		[
+			enabled,
+			group,
+			idStr,
+			hasNextScreen,
+			clearPendingMeasurement,
+			queueOrFlushMeasurement,
+		],
+	);
+};

package/src/shared/components/create-boundary-component/hooks/use-initial-layout-handler.ts

@@ -4,6 +4,7 @@ import { AnimationStore } from "../../../stores/animation.store";
 import { BoundStore } from "../../../stores/bounds";
 import { resolvePendingSourceKey } from "../helpers/resolve-pending-source-key";
 import type { MaybeMeasureAndStoreParams } from "../types";
+import { resolveInitialLayoutMeasurementIntent } from "./helpers/measurement-rules";
 
 export const useInitialLayoutHandler = (params: {
 	enabled: boolean;
@@ -46,21 +47,32 @@ export const useInitialLayoutHandler = (params: {
 			}
 		}
 
-		if (!isAnyAnimating) return;
-		const resolvedSourceKey = resolvePendingSourceKey(
-			sharedBoundTag,
-			expectedSourceScreenKey,
-		);
-		if (!resolvedSourceKey) return;
-		if (
-			!BoundStore.hasPendingLinkFromSource(sharedBoundTag, resolvedSourceKey)
-		) {
-			return;
+		let hasPendingLinkFromSource = false;
+
+		if (isAnyAnimating) {
+			const resolvedSourceKey = resolvePendingSourceKey(
+				sharedBoundTag,
+				expectedSourceScreenKey,
+			);
+			if (
+				resolvedSourceKey &&
+				BoundStore.hasPendingLinkFromSource(sharedBoundTag, resolvedSourceKey)
+			) {
+				hasPendingLinkFromSource = true;
+			}
 		}
 
+		const intent = resolveInitialLayoutMeasurementIntent({
+			enabled,
+			hasSharedBoundTag: !!sharedBoundTag,
+			hasMeasuredOnLayout: hasMeasuredOnLayout.get(),
+			isAnyAnimating: !!isAnyAnimating,
+			hasPendingLinkFromSource,
+		});
+		if (!intent) return;
+
 		maybeMeasureAndStore({
-			shouldSetSource: false,
-			shouldSetDestination: true,
+			intent,
 		});
 
 		hasMeasuredOnLayout.set(true);

package/src/shared/components/create-boundary-component/hooks/use-pending-destination-measurement.ts

@@ -2,6 +2,7 @@ import { useAnimatedReaction } from "react-native-reanimated";
 import { BoundStore } from "../../../stores/bounds";
 import { resolvePendingSourceKey } from "../helpers/resolve-pending-source-key";
 import type { MaybeMeasureAndStoreParams } from "../types";
+import { resolvePendingDestinationCaptureSignal } from "./helpers/measurement-rules";
 
 export const usePendingDestinationMeasurement = (params: {
 	sharedBoundTag: string;
@@ -19,19 +20,20 @@ export const usePendingDestinationMeasurement = (params: {
 	useAnimatedReaction(
 		() => {
 			"worklet";
-			if (!enabled) return 0;
 			const resolvedSourceKey = resolvePendingSourceKey(
 				sharedBoundTag,
 				expectedSourceScreenKey,
 			);
-			if (!resolvedSourceKey) return 0;
-
-			return BoundStore.hasPendingLinkFromSource(
-				sharedBoundTag,
+			return resolvePendingDestinationCaptureSignal({
+				enabled,
 				resolvedSourceKey,
-			)
-				? resolvedSourceKey
-				: 0;
+				hasPendingLinkFromSource: resolvedSourceKey
+					? BoundStore.hasPendingLinkFromSource(
+							sharedBoundTag,
+							resolvedSourceKey,
+						)
+					: false,
+			});
 		},
 		(captureSignal, previousCaptureSignal) => {
 			"worklet";
@@ -40,7 +42,7 @@ export const usePendingDestinationMeasurement = (params: {
 				return;
 			}
 
-			maybeMeasureAndStore({ shouldSetDestination: true });
+			maybeMeasureAndStore({ intent: "complete-destination" });
 		},
 		[enabled, sharedBoundTag, expectedSourceScreenKey, maybeMeasureAndStore],
 	);

package/src/shared/components/create-boundary-component/hooks/use-pending-destination-retry-measurement.ts

@@ -1,16 +1,20 @@
-import { useAnimatedReaction, useSharedValue } from "react-native-reanimated";
-import type { AnimationStore } from "../../../stores/animation.store";
+import {
+	type SharedValue,
+	useAnimatedReaction,
+	useSharedValue,
+} from "react-native-reanimated";
 import { BoundStore } from "../../../stores/bounds";
 import { resolvePendingSourceKey } from "../helpers/resolve-pending-source-key";
 import type { MaybeMeasureAndStoreParams } from "../types";
+import { resolvePendingDestinationRetrySignal } from "./helpers/measurement-rules";
 
 export const usePendingDestinationRetryMeasurement = (params: {
 	sharedBoundTag: string;
 	enabled: boolean;
 	currentScreenKey: string;
 	expectedSourceScreenKey?: string;
-	progress: ReturnType<typeof AnimationStore.getRouteAnimation>;
-	animating: ReturnType<typeof AnimationStore.getRouteAnimation>;
+	progress: SharedValue<number>;
+	animating: SharedValue<number>;
 	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
 }) => {
 	const {
@@ -31,31 +35,30 @@ export const usePendingDestinationRetryMeasurement = (params: {
 	useAnimatedReaction(
 		() => {
 			"worklet";
-			if (!enabled) return 0;
-			if (retryCount.get() >= MAX_RETRIES) return 0;
-			if (!animating.get()) return 0;
-			if (BoundStore.hasDestinationLink(sharedBoundTag, currentScreenKey))
-				return 0;
-
-			const currentProgress = progress.get();
-			if (currentProgress <= 0 || currentProgress >= RETRY_PROGRESS_MAX) {
-				return 0;
-			}
-
 			const resolvedSourceKey = resolvePendingSourceKey(
 				sharedBoundTag,
 				expectedSourceScreenKey,
 			);
-
-			if (!resolvedSourceKey) return 0;
-			if (
-				!BoundStore.hasPendingLinkFromSource(sharedBoundTag, resolvedSourceKey)
-			) {
-				return 0;
-			}
-
-			const bucket = Math.floor(currentProgress * RETRY_PROGRESS_BUCKETS) + 1;
-			return bucket;
+			return resolvePendingDestinationRetrySignal({
+				enabled,
+				retryCount: retryCount.get(),
+				maxRetries: MAX_RETRIES,
+				isAnimating: !!animating.get(),
+				hasDestinationLink: BoundStore.hasDestinationLink(
+					sharedBoundTag,
+					currentScreenKey,
+				),
+				progress: progress.get(),
+				retryProgressMax: RETRY_PROGRESS_MAX,
+				retryProgressBuckets: RETRY_PROGRESS_BUCKETS,
+				resolvedSourceKey,
+				hasPendingLinkFromSource: resolvedSourceKey
+					? BoundStore.hasPendingLinkFromSource(
+							sharedBoundTag,
+							resolvedSourceKey,
+						)
+					: false,
+			});
 		},
 		(captureSignal) => {
 			"worklet";
@@ -67,7 +70,7 @@ export const usePendingDestinationRetryMeasurement = (params: {
 
 			if (retryCount.get() >= MAX_RETRIES) return;
 			retryCount.set(retryCount.get() + 1);
-			maybeMeasureAndStore({ shouldSetDestination: true });
+			maybeMeasureAndStore({ intent: "complete-destination" });
 		},
 		[
 			enabled,

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

@@ -1,40 +1,49 @@
-import { useAnimatedReaction } from "react-native-reanimated";
+import { type SharedValue, useAnimatedReaction } from "react-native-reanimated";
 import { useScrollSettleContext } from "../../../providers/scroll-settle.provider";
-import type { AnimationStore } from "../../../stores/animation.store";
 import type { MaybeMeasureAndStoreParams } from "../types";
+import { shouldTriggerScrollSettledRefresh } from "./helpers/measurement-rules";
+import { useDeferredMeasurementTrigger } from "./use-deferred-measurement-trigger";
 
 export const useScrollSettledMeasurement = (params: {
 	enabled: boolean;
 	group: string | undefined;
 	hasNextScreen: boolean;
-	isAnimating: ReturnType<typeof AnimationStore.getRouteAnimation>;
+	isAnimating: SharedValue<number>;
 	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
 }) => {
 	const { enabled, group, hasNextScreen, isAnimating, maybeMeasureAndStore } =
 		params;
 	const scrollSettle = useScrollSettleContext();
 	const settledSignal = scrollSettle?.settledSignal;
+	const { queueOrFlushMeasurement } = useDeferredMeasurementTrigger({
+		enabled,
+		isAnimating,
+		onFlush: () => {
+			"worklet";
+			maybeMeasureAndStore({ intent: "refresh-source" });
+		},
+	});
 
 	useAnimatedReaction(
 		() => settledSignal?.value ?? 0,
 		(signal, previousSignal) => {
 			"worklet";
-			if (!enabled) return;
-			if (!group || !hasNextScreen || !settledSignal) return;
-			if (signal === 0 || signal === previousSignal) return;
-			if (isAnimating.value) return;
-
+			if (
+				!shouldTriggerScrollSettledRefresh({
+					enabled,
+					group,
+					hasNextScreen,
+					hasSettledSignal: !!settledSignal,
+					signal,
+					previousSignal,
+				})
+			) {
+				return;
+			}
 			// Re-measure source bounds after scroll settles while idle.
 			// This captures post-scroll positions before close transition starts.
-			maybeMeasureAndStore({ shouldUpdateSource: true });
+			queueOrFlushMeasurement();
 		},
-		[
-			enabled,
-			group,
-			hasNextScreen,
-			settledSignal,
-			isAnimating,
-			maybeMeasureAndStore,
-		],
+		[enabled, group, hasNextScreen, settledSignal, queueOrFlushMeasurement],
 	);
 };

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

@@ -17,6 +17,7 @@ import { useAutoSourceMeasurement } from "./hooks/use-auto-source-measurement";
 import { useBoundaryMeasureAndStore } from "./hooks/use-boundary-measure-and-store";
 import { useBoundaryPresence } from "./hooks/use-boundary-presence";
 import { useGroupActiveMeasurement } from "./hooks/use-group-active-measurement";
+import { useGroupActiveSourceMeasurement } from "./hooks/use-group-active-source-measurement";
 import { useInitialLayoutHandler } from "./hooks/use-initial-layout-handler";
 import { usePendingDestinationMeasurement } from "./hooks/use-pending-destination-measurement";
 import { usePendingDestinationRetryMeasurement } from "./hooks/use-pending-destination-retry-measurement";
@@ -24,15 +25,23 @@ import { useScrollSettledMeasurement } from "./hooks/use-scroll-settled-measurem
 import type { BoundaryComponentProps, BoundaryConfigProps } from "./types";
 import { buildBoundaryMatchKey } from "./utils/build-boundary-match-key";
 
-const setGroupActiveIdOnUI = (group: string, id: string) => {
+const setGroupSelectionOnUI = (group: string, id: string) => {
 	"worklet";
 	BoundStore.setGroupActiveId(group, id);
 };
 
+interface CreateBoundaryComponentOptions {
+	alreadyAnimated?: boolean;
+}
+
 export function createBoundaryComponent<P extends object>(
 	Wrapped: ComponentType<P>,
+	options: CreateBoundaryComponentOptions = {},
 ) {
-	const AnimatedComponent = Animated.createAnimatedComponent(Wrapped);
+	const { alreadyAnimated = false } = options;
+	const AnimatedComponent = alreadyAnimated
+		? Wrapped
+		: Animated.createAnimatedComponent(Wrapped);
 
 	const Inner = forwardRef<
 		React.ComponentRef<typeof AnimatedComponent>,
@@ -171,6 +180,18 @@ export function createBoundaryComponent<P extends object>(
 			maybeMeasureAndStore,
 		});
 
+		// Source-side analog for grouped retargeting: when an unfocused/source
+		// boundary becomes the active member, refresh its snapshot (and source
+		// link when one exists) so close transitions don't use stale geometry.
+		useGroupActiveSourceMeasurement({
+			enabled: runtimeEnabled,
+			group,
+			id,
+			hasNextScreen,
+			isAnimating,
+			maybeMeasureAndStore,
+		});
+
 		// While idle on source screens, re-measure after scroll settles so a later
 		// close transition starts from up-to-date source geometry.
 		useScrollSettledMeasurement({
@@ -196,9 +217,9 @@ export function createBoundaryComponent<P extends object>(
 			(...args: unknown[]) => {
 				// Press path has priority: capture source before user onPress/navigation.
 				if (group) {
-					runOnUI(setGroupActiveIdOnUI)(group, String(id));
+					runOnUI(setGroupSelectionOnUI)(group, String(id));
 				}
-				runOnUI(maybeMeasureAndStore)({ shouldSetSource: true });
+				runOnUI(maybeMeasureAndStore)({ intent: "capture-source" });
 
 				if (typeof onPress === "function") {
 					onPress(...args);
@@ -258,6 +279,4 @@ export const Boundary = {
 	View: BoundaryView,
 	/** Pressable boundary wrapper with press-priority source capture. */
 	Pressable: BoundaryPressable,
-	/** Factory for custom boundary wrappers. */
-	createBoundaryComponent,
 };

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

@@ -39,9 +39,13 @@ export type BoundaryComponentProps<P extends object> = Omit<P, "id"> &
 /** Convenience alias for a View-based boundary (the most common case). */
 export type BoundaryProps = BoundaryComponentProps<ViewProps>;
 
+export type MeasurementIntent =
+	| "capture-source"
+	| "complete-destination"
+	| "refresh-source"
+	| "refresh-destination"
+	| "snapshot-only";
+
 export interface MaybeMeasureAndStoreParams {
-	shouldSetSource?: boolean;
-	shouldSetDestination?: boolean;
-	shouldUpdateSource?: boolean;
-	shouldUpdateDestination?: boolean;
+	intent?: MeasurementIntent | readonly MeasurementIntent[];
 }

package/src/shared/components/create-transition-aware-component.tsx

@@ -17,15 +17,18 @@ import type { TransitionAwareProps } from "../types/screen.types";
 
 interface CreateTransitionAwareComponentOptions {
 	isScrollable?: boolean;
+	alreadyAnimated?: boolean;
 }
 
 export function createTransitionAwareComponent<P extends object>(
 	Wrapped: ComponentType<P>,
 	options: CreateTransitionAwareComponentOptions = {},
 ) {
-	const { isScrollable = false } = options;
+	const { isScrollable = false, alreadyAnimated = false } = options;
 
-	const AnimatedComponent = Animated.createAnimatedComponent(Wrapped);
+	const AnimatedComponent = alreadyAnimated
+		? Wrapped
+		: Animated.createAnimatedComponent(Wrapped);
 
 	const ScrollableInner = forwardRef<
 		React.ComponentRef<typeof Wrapped>,

package/src/shared/components/native-screen-container.tsx

@@ -8,14 +8,22 @@ interface Props {
 
 export const NativeScreenContainer = ({ children }: Props) => {
 	const {
-		flags: { DISABLE_NATIVE_SCREENS = false },
+		flags: {
+			DISABLE_NATIVE_SCREENS = false,
+			DISABLE_NATIVE_SCREEN_CONTAINER = false,
+		},
 	} = useStack();
-	if (!DISABLE_NATIVE_SCREENS) {
+	if (!DISABLE_NATIVE_SCREENS && !DISABLE_NATIVE_SCREEN_CONTAINER) {
 		return (
 			<ScreenContainer style={styles.container}>{children}</ScreenContainer>
 		);
 	}
-	return <View style={styles.container}>{children}</View>;
+	return (
+		// Mirror ScreenContainer's native boundary when screens are disabled.
+		<View collapsable={false} style={styles.container}>
+			{children}
+		</View>
+	);
 };
 
 const styles = StyleSheet.create({