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

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

@@ -0,0 +1,164 @@
+import {
+	createPendingPairKey,
+	createScreenPairKey,
+	getDestinationScreenKeyFromPairKey,
+} from "../../../stores/bounds/helpers/link-pairs.helpers";
+import type {
+	LinkPairsState,
+	ScreenPairKey,
+} from "../../../stores/bounds/types";
+import type { MeasureTarget } from "../types";
+
+const SOURCE_SIGNAL_PREFIX = "source|";
+const DESTINATION_SIGNAL_PREFIX = "destination|";
+
+type RefreshBoundarySignal = MeasureTarget & {
+	signal: string;
+};
+
+const findNestedDestinationPairKey = (
+	linkState: LinkPairsState | undefined,
+	linkId: string,
+	ancestorScreenKeys: readonly string[] | undefined,
+): ScreenPairKey | null => {
+	"worklet";
+	const destinationScreenKey = ancestorScreenKeys?.[0];
+	if (!linkState || !destinationScreenKey) return null;
+
+	for (const pairKey in linkState) {
+		if (getDestinationScreenKeyFromPairKey(pairKey) !== destinationScreenKey) {
+			continue;
+		}
+
+		if (linkState[pairKey]?.links?.[linkId]?.destination) {
+			return pairKey;
+		}
+	}
+
+	return null;
+};
+
+const buildRefreshSignal = (
+	type: MeasureTarget["type"],
+	pairKey: ScreenPairKey,
+	key: string,
+): RefreshBoundarySignal => {
+	"worklet";
+	const prefix =
+		type === "source" ? SOURCE_SIGNAL_PREFIX : DESTINATION_SIGNAL_PREFIX;
+	return {
+		type,
+		pairKey,
+		signal: `${prefix}${pairKey}|${key}`,
+	};
+};
+
+export const getRefreshBoundarySignal = (params: {
+	enabled: boolean;
+	currentScreenKey: string;
+	preferredSourceScreenKey?: string;
+	nextScreenKey?: string;
+	linkId: string;
+	group?: string;
+	ancestorScreenKeys?: readonly string[];
+	shouldRefresh: boolean;
+	closing: boolean;
+	entering: boolean;
+	animating: boolean;
+	progress: number;
+	linkState?: LinkPairsState;
+}): RefreshBoundarySignal | null => {
+	"worklet";
+	const {
+		enabled,
+		currentScreenKey,
+		preferredSourceScreenKey,
+		nextScreenKey,
+		linkId,
+		group,
+		ancestorScreenKeys,
+		shouldRefresh,
+		closing,
+		entering,
+		animating,
+		progress,
+		linkState,
+	} = params;
+
+	if (!enabled) return null;
+
+	const canRefreshPreCloseDestination =
+		shouldRefresh && closing && !entering && !animating && progress >= 1;
+	const canRefreshSettledDestination = shouldRefresh && !closing && !entering;
+
+	if (!canRefreshPreCloseDestination && !canRefreshSettledDestination) {
+		return null;
+	}
+
+	// Non-group refresh only rewrites destination bounds. Source refresh is a
+	// grouped-only fallback for active ids that do not have source bounds yet.
+	if (!group) {
+		if (nextScreenKey) {
+			return null;
+		}
+
+		// Nested initial screens have no previous screen in their own navigator,
+		// so recover the pair by looking for a destination on the ancestor route.
+		const pairKey = preferredSourceScreenKey
+			? createScreenPairKey(preferredSourceScreenKey, currentScreenKey)
+			: findNestedDestinationPairKey(linkState, linkId, ancestorScreenKeys);
+
+		if (!pairKey) return null;
+
+		return buildRefreshSignal(
+			"destination",
+			pairKey,
+			[currentScreenKey, closing ? "closing" : "settled"].join("|"),
+		);
+	}
+
+	// Source-side grouped refresh: a new active id may not have source bounds yet,
+	// so the next screen's lifecycle pulse gives that source one chance to capture.
+	if (nextScreenKey) {
+		const pairKey = createScreenPairKey(currentScreenKey, nextScreenKey);
+		const pendingPairKey = createPendingPairKey(currentScreenKey);
+		const activeId = linkState?.[pairKey]?.groups?.[group]?.activeId;
+		const hasSource =
+			!!linkState?.[pairKey]?.links?.[linkId]?.source ||
+			!!linkState?.[pendingPairKey]?.links?.[linkId]?.source;
+
+		if (activeId !== linkId || hasSource) {
+			return null;
+		}
+
+		return buildRefreshSignal(
+			"source",
+			pairKey,
+			[group, linkId, closing ? "closing" : "settled"].join("|"),
+		);
+	}
+
+	if (!preferredSourceScreenKey) return null;
+
+	// Destination-side grouped refresh: only the active member rewrites the
+	// destination side, keeping inactive grouped members from stealing the link.
+	const pairKey = createScreenPairKey(
+		preferredSourceScreenKey,
+		currentScreenKey,
+	);
+	const activeId = linkState?.[pairKey]?.groups?.[group]?.activeId;
+	const hasSource = !!linkState?.[pairKey]?.links?.[linkId]?.source;
+	const hasDestination = !!linkState?.[pairKey]?.links?.[linkId]?.destination;
+
+	// Destination retargeting should only measure a concrete member that already
+	// participates in the pair. Missing members fall back to initialId at resolve.
+	if (activeId !== linkId || (!hasSource && !hasDestination)) {
+		return null;
+	}
+
+	return buildRefreshSignal(
+		"destination",
+		pairKey,
+		[group, linkId, closing ? "closing" : "settled"].join("|"),
+	);
+};

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

@@ -0,0 +1,72 @@
+import { createScreenPairKey } from "../../../stores/bounds/helpers/link-pairs.helpers";
+import type {
+	LinkPairsState,
+	ScreenPairKey,
+} from "../../../stores/bounds/types";
+
+const SOURCE_SIGNAL_PREFIX = "source|";
+
+type SourceCaptureSignal = {
+	pairKey: ScreenPairKey;
+	signal: string;
+};
+
+const buildSourceSignal = (
+	pairKey: ScreenPairKey,
+	key: string,
+): SourceCaptureSignal => {
+	"worklet";
+	return {
+		pairKey,
+		signal: `${SOURCE_SIGNAL_PREFIX}${pairKey}|${key}`,
+	};
+};
+
+export const getInitialSourceCaptureSignal = (params: {
+	enabled: boolean;
+	nextScreenKey?: string;
+	currentScreenKey?: string;
+	linkId: string;
+	group?: string;
+	shouldAutoMeasure: boolean;
+	linkState?: LinkPairsState;
+}): SourceCaptureSignal | null => {
+	"worklet";
+	const {
+		enabled,
+		nextScreenKey,
+		currentScreenKey,
+		linkId,
+		group,
+		shouldAutoMeasure,
+		linkState,
+	} = params;
+
+	if (!enabled || !nextScreenKey || !currentScreenKey) {
+		return null;
+	}
+
+	// Trigger components capture on press. This passive path is for Boundary.View
+	// slots that need a source before navigation starts.
+	if (!shouldAutoMeasure) {
+		return null;
+	}
+
+	const pairKey = createScreenPairKey(currentScreenKey, nextScreenKey);
+
+	if (group) {
+		const activeId = linkState?.[pairKey]?.groups?.[group]?.activeId;
+
+		// Passive grouped sources should not measure every mounted item. Once a
+		// group has an active id, only that concrete member can auto-capture.
+		if (activeId && activeId !== linkId) {
+			return null;
+		}
+	}
+
+	const signalParts = group
+		? [currentScreenKey, nextScreenKey, group, linkId]
+		: [currentScreenKey, nextScreenKey, linkId];
+
+	return buildSourceSignal(pairKey, signalParts.join("|"));
+};

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

@@ -1,17 +1,15 @@
 import type * as React from "react";
-import { StyleSheet, type View } from "react-native";
+import { StyleSheet } from "react-native";
 import Animated, {
 	Extrapolation,
 	interpolate,
 	useAnimatedProps,
-	useAnimatedRef,
 	useDerivedValue,
 	useSharedValue,
 } from "react-native-reanimated";
 import { Screen as RNSScreen } from "react-native-screens";
 import { EPSILON } from "../constants";
 import { useStack } from "../hooks/navigation/use-stack";
-import { LayoutAnchorProvider } from "../providers/layout-anchor.provider";
 import { useManagedStackContext } from "../providers/stack/managed.provider";
 import { AnimationStore } from "../stores/animation.store";
 
@@ -54,7 +52,6 @@ export const NativeScreen = ({
 	const routesLength = routes.length;
 	const topIndex = routesLength - 1;
 	const topRouteKey = routes[topIndex]?.key ?? routeKey;
-	const screenRef = useAnimatedRef<View>();
 
 	const sceneClosing = AnimationStore.getValue(routeKey, "closing");
 	const topSceneProgress = AnimationStore.getValue(topRouteKey, "progress");
@@ -155,16 +152,13 @@ export const NativeScreen = ({
 	if (DISABLE_NATIVE_SCREENS) {
 		return (
 			<Animated.View
-				ref={screenRef}
 				// Keep a native boundary per screen when falling back to plain views.
 				// Android release builds can otherwise flatten sibling screens together.
 				collapsable={false}
 				style={StyleSheet.absoluteFill}
 				animatedProps={animatedProps}
 			>
-				<LayoutAnchorProvider anchorRef={screenRef}>
-					{children}
-				</LayoutAnchorProvider>
+				{children}
 			</Animated.View>
 		);
 	}
@@ -172,14 +166,11 @@ export const NativeScreen = ({
 	return (
 		<AnimatedNativeScreen
 			enabled
-			ref={screenRef}
 			style={StyleSheet.absoluteFill}
 			freezeOnBlur={freezeOnBlur}
 			animatedProps={animatedProps}
 		>
-			<LayoutAnchorProvider anchorRef={screenRef}>
-				{children}
-			</LayoutAnchorProvider>
+			{children}
 		</AnimatedNativeScreen>
 	);
 };

package/src/shared/constants.ts

@@ -48,6 +48,7 @@ const DEFAULT_RAW_GESTURE_VALUES = {
 
 const DEFAULT_GESTURE_VALUES = {
 	...DEFAULT_RAW_GESTURE_VALUES,
+	velocity: 0,
 	focalX: 0,
 	focalY: 0,
 	raw: DEFAULT_RAW_GESTURE_VALUES,
@@ -180,12 +181,6 @@ export const FALSE = 0;
  */
 export const EPSILON = 1e-5;
 
-/**
- * Threshold for snapping animations to target when "close enough" (1% of range).
- * Prevents micro-jitter/oscillation near animation endpoints.
- */
-export const ANIMATION_SNAP_THRESHOLD = 0.01;
-
 /**
  * Number of consecutive frames progress must remain near its target before it
  * is treated as logically settled.

package/src/shared/index.ts

@@ -56,10 +56,7 @@ export type {
 	OverlayProps,
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,
-	ScreenTransitionAccessor,
 	ScreenTransitionConfig,
-	ScreenTransitionDepthTarget,
-	ScreenTransitionTarget,
 	TransitionInterpolatedStyle,
 	TransitionSlotStyle,
 	TransitionSpec,

package/src/shared/providers/helpers/measured-bounds-writes.ts

@@ -0,0 +1,67 @@
+import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
+import { setEntry } from "../../stores/bounds/internals/entries";
+import { setDestination, setSource } from "../../stores/bounds/internals/links";
+import type { ScreenPairKey } from "../../stores/bounds/types";
+
+type LinkWrite =
+	| {
+			type: "source";
+			pairKey: ScreenPairKey;
+	  }
+	| {
+			type: "destination";
+			pairKey: ScreenPairKey;
+	  };
+
+type ApplyMeasuredBoundsWritesParams = {
+	entryTag: string;
+	linkId: string;
+	group?: string;
+	currentScreenKey: string;
+	measured: MeasuredDimensions;
+	preparedStyles: StyleProps;
+	linkWrite?: LinkWrite;
+};
+
+export const applyMeasuredBoundsWrites = (
+	params: ApplyMeasuredBoundsWritesParams,
+) => {
+	"worklet";
+	const {
+		entryTag,
+		linkId,
+		group,
+		currentScreenKey,
+		measured,
+		preparedStyles,
+		linkWrite,
+	} = params;
+
+	// Set the bounds entry on every measure to avoid any stale measurements
+	// for the public read API.
+	setEntry(entryTag, currentScreenKey, {
+		bounds: measured,
+	});
+
+	if (linkWrite?.type === "source") {
+		setSource(
+			linkWrite.pairKey,
+			linkId,
+			currentScreenKey,
+			measured,
+			preparedStyles,
+			group,
+		);
+	}
+
+	if (linkWrite?.type === "destination") {
+		setDestination(
+			linkWrite.pairKey,
+			linkId,
+			currentScreenKey,
+			measured,
+			preparedStyles,
+			group,
+		);
+	}
+};

package/src/shared/providers/register-bounds.provider.tsx

@@ -11,25 +11,24 @@ import {
 	useSharedValue,
 } from "react-native-reanimated";
 import type { SharedValue } from "react-native-reanimated/lib/typescript/commonTypes";
-import { applyMeasuredBoundsWrites } from "../components/create-boundary-component/helpers/apply-measured-bounds-writes";
 import useStableCallback from "../hooks/use-stable-callback";
 import useStableCallbackValue from "../hooks/use-stable-callback-value";
 import { AnimationStore } from "../stores/animation.store";
-import { getEntry } from "../stores/bounds/internals/entries";
 import {
-	getPendingLink,
-	hasDestinationLink,
-	hasSourceLink,
-} from "../stores/bounds/internals/links";
+	createPendingPairKey,
+	createScreenPairKey,
+} from "../stores/bounds/helpers/link-pairs.helpers";
+import { getEntry } from "../stores/bounds/internals/entries";
+import { getDestination, getSource } from "../stores/bounds/internals/links";
 import { prepareStyleForBounds } from "../utils/bounds/helpers/styles/styles";
 import createProvider from "../utils/create-provider";
+import { applyMeasuredBoundsWrites } from "./helpers/measured-bounds-writes";
 import { useDescriptorDerivations, useDescriptors } from "./screen/descriptors";
 
 interface MaybeMeasureAndStoreParams {
 	onPress?: ((...args: unknown[]) => void) | undefined;
 	shouldSetSource?: boolean;
 	shouldSetDestination?: boolean;
-	shouldUpdateSource?: boolean;
 }
 
 interface RegisterBoundsRenderProps {
@@ -208,48 +207,14 @@ const useParentSyncReaction = (params: {
 	);
 };
 
-const CloseRemeasureReactionEffect = (params: {
-	sharedBoundTag: string;
-	remeasureOnFocus: boolean;
-	nextClosing: SharedValue<number>;
-	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
-}) => {
-	const {
-		sharedBoundTag,
-		remeasureOnFocus,
-		nextClosing,
-		maybeMeasureAndStore,
-	} = params;
-
-	useAnimatedReaction(
-		() => nextClosing.get(),
-		(closing, prevClosing) => {
-			"worklet";
-			if (closing === 1 && (prevClosing === 0 || prevClosing === null)) {
-				maybeMeasureAndStore({ shouldUpdateSource: true });
-			}
-		},
-		[sharedBoundTag, remeasureOnFocus, nextClosing],
-	);
-
-	return null;
-};
-
 let useRegisterBoundsContext: () => RegisterBoundsContextValue | null;
 
 const registerBoundsBundle = createProvider("RegisterBounds", {
 	guarded: false,
 })<RegisterBoundsProviderProps, RegisterBoundsContextValue>(
-	({
-		style,
-		onPress,
-		sharedBoundTag,
-		animatedRef,
-		remeasureOnFocus,
-		children,
-	}) => {
+	({ style, onPress, sharedBoundTag, animatedRef, children }) => {
 		const { current, next } = useDescriptors();
-		const { ancestorKeys } = useDescriptorDerivations();
+		const { ancestorKeys, previousScreenKey } = useDescriptorDerivations();
 		const currentScreenKey = current.route.key;
 		const selectedNextRouteId = getRouteParamId(next?.route);
 
@@ -277,7 +242,6 @@ const registerBoundsBundle = createProvider("RegisterBounds", {
 				onPress,
 				shouldSetSource,
 				shouldSetDestination,
-				shouldUpdateSource,
 			}: MaybeMeasureAndStoreParams = {}) => {
 				"worklet";
 				if (!sharedBoundTag) {
@@ -285,15 +249,27 @@ const registerBoundsBundle = createProvider("RegisterBounds", {
 					return;
 				}
 
+				const sourcePairKey = createPendingPairKey(currentScreenKey);
+				const destinationPairKey = previousScreenKey
+					? createScreenPairKey(previousScreenKey, currentScreenKey)
+					: undefined;
+				const pendingSourcePairKey = previousScreenKey
+					? createPendingPairKey(previousScreenKey)
+					: undefined;
+
 				if (shouldSetSource && isAnimating.get()) {
 					const existing = getEntry(sharedBoundTag, currentScreenKey);
 					if (existing?.bounds) {
 						applyMeasuredBoundsWrites({
-							sharedBoundTag,
+							entryTag: sharedBoundTag,
+							linkId: sharedBoundTag,
 							currentScreenKey,
 							measured: existing.bounds,
 							preparedStyles,
-							shouldSetSource: true,
+							linkWrite: {
+								type: "source",
+								pairKey: sourcePairKey,
+							},
 						});
 					}
 
@@ -301,31 +277,30 @@ const registerBoundsBundle = createProvider("RegisterBounds", {
 					return;
 				}
 
-				const hasPending = getPendingLink(sharedBoundTag) !== null;
-				const hasSource = hasSourceLink(sharedBoundTag, currentScreenKey);
-				const hasDestination = hasDestinationLink(
-					sharedBoundTag,
-					currentScreenKey,
-				);
+				const hasPendingSource = pendingSourcePairKey
+					? getSource(pendingSourcePairKey, sharedBoundTag) !== null
+					: false;
+				const hasSource =
+					getSource(sourcePairKey, sharedBoundTag) !== null ||
+					(destinationPairKey
+						? getSource(destinationPairKey, sharedBoundTag) !== null
+						: false);
+				const hasDestination = destinationPairKey
+					? getDestination(destinationPairKey, sharedBoundTag) !== null
+					: false;
 
 				const wantsSetSource = !!shouldSetSource;
 				const wantsSetDestination = !!shouldSetDestination;
-				const wantsUpdateSource = !!shouldUpdateSource;
-				const wantsSnapshotOnly =
-					!wantsSetSource && !wantsSetDestination && !wantsUpdateSource;
+				const wantsSnapshotOnly = !wantsSetSource && !wantsSetDestination;
 
 				const canSetSource = wantsSetSource;
-				const canSetDestination = wantsSetDestination && hasPending;
-				const canUpdateSource = wantsUpdateSource && hasSource;
+				const canSetDestination =
+					wantsSetDestination && (hasPendingSource || hasSource);
 				const canSnapshotOnly =
-					wantsSnapshotOnly && (hasPending || hasSource || hasDestination);
-
-				if (
-					!canSetSource &&
-					!canSetDestination &&
-					!canUpdateSource &&
-					!canSnapshotOnly
-				) {
+					wantsSnapshotOnly &&
+					(hasPendingSource || hasSource || hasDestination);
+
+				if (!canSetSource && !canSetDestination && !canSnapshotOnly) {
 					if (onPress) runOnJS(onPress)();
 					return;
 				}
@@ -339,15 +314,38 @@ const registerBoundsBundle = createProvider("RegisterBounds", {
 				emitUpdate();
 
 				applyMeasuredBoundsWrites({
-					sharedBoundTag,
+					entryTag: sharedBoundTag,
+					linkId: sharedBoundTag,
 					currentScreenKey,
 					measured,
 					preparedStyles,
-					shouldSetSource: canSetSource,
-					shouldUpdateSource: canUpdateSource,
-					shouldSetDestination: canSetDestination,
+					linkWrite: canSetSource
+						? {
+								type: "source",
+								pairKey: sourcePairKey,
+							}
+						: canSetDestination && destinationPairKey
+							? {
+									type: "destination",
+									pairKey: destinationPairKey,
+								}
+							: undefined,
 				});
 
+				if (canSetSource && canSetDestination && destinationPairKey) {
+					applyMeasuredBoundsWrites({
+						entryTag: sharedBoundTag,
+						linkId: sharedBoundTag,
+						currentScreenKey,
+						measured,
+						preparedStyles,
+						linkWrite: {
+							type: "destination",
+							pairKey: destinationPairKey,
+						},
+					});
+				}
+
 				if (onPress) runOnJS(onPress)();
 			},
 		);
@@ -368,15 +366,6 @@ const registerBoundsBundle = createProvider("RegisterBounds", {
 			ancestorKeys,
 		});
 
-		// Re-measure source bounds when the destination screen (next in stack)
-		// starts closing. This fires at the instant the back animation begins,
-		// unlike useFocusEffect which fires too late (after the screen is removed
-		// from state).
-		const nextScreenKey = next?.route.key;
-		const nextClosing = nextScreenKey
-			? AnimationStore.getValue(nextScreenKey, "closing")
-			: null;
-
 		useParentSyncReaction({ parentContext, maybeMeasureAndStore });
 
 		const captureActiveOnPress = useStableCallback(() => {
@@ -390,19 +379,7 @@ const registerBoundsBundle = createProvider("RegisterBounds", {
 
 		return {
 			value: { updateSignal },
-			children: (
-				<>
-					{sharedBoundTag && remeasureOnFocus && nextClosing ? (
-						<CloseRemeasureReactionEffect
-							sharedBoundTag={sharedBoundTag}
-							remeasureOnFocus={remeasureOnFocus}
-							nextClosing={nextClosing}
-							maybeMeasureAndStore={maybeMeasureAndStore}
-						/>
-					) : null}
-					{children({ handleInitialLayout, captureActiveOnPress })}
-				</>
-			),
+			children: <>{children({ handleInitialLayout, captureActiveOnPress })}</>,
 		};
 	},
 );

package/src/shared/providers/screen/animation/helpers/accessors/use-build-transition-accessor.ts

@@ -72,20 +72,6 @@ export const createTransitionAccessor = (
 		return {
 			...frame,
 			bounds: source.boundsAccessor,
-			transition: (target?: ScreenTransitionTarget) => {
-				"worklet";
-				const targetIndex = resolveTargetIndex(
-					target,
-					sourceIndex,
-					currentSources.length,
-				);
-
-				if (targetIndex === -1) {
-					return null;
-				}
-
-				return buildScope(targetIndex);
-			},
 		};
 	};
 

package/src/shared/providers/screen/animation/helpers/hydrate-transition-state/index.ts

@@ -18,8 +18,6 @@ import {
 } from "./snap-points";
 import type { BuiltState } from "./types";
 
-export { computeLogicallySettled } from "./settle";
-
 const LOGICAL_SETTLE_STICKY_PROGRESS_THRESHOLD =
 	LOGICAL_SETTLE_PROGRESS_THRESHOLD * 10;
 
@@ -38,6 +36,7 @@ export const hydrateTransitionState = (
 	out.gesture.y = s.gesture.y.get();
 	out.gesture.normX = s.gesture.normX.get();
 	out.gesture.normY = s.gesture.normY.get();
+	out.gesture.velocity = s.gesture.velocity.get();
 	out.gesture.scale = s.gesture.scale.get();
 	out.gesture.normScale = s.gesture.normScale.get();
 	out.gesture.focalX = s.gesture.focalX.get();

package/src/shared/providers/screen/animation/helpers/pipeline.ts

@@ -20,10 +20,7 @@ import { hydrateTransitionState } from "./hydrate-transition-state";
 import type { SelectedInterpolatorOptions } from "./selected-interpolator-options";
 import { useBuildTransitionState } from "./use-build-transition-state";
 
-export type ScreenInterpolatorFrame = Omit<
-	ScreenInterpolationProps,
-	"bounds" | "transition"
->;
+export type ScreenInterpolatorFrame = Omit<ScreenInterpolationProps, "bounds">;
 
 interface ScreenAnimationPipeline {
 	screenInterpolatorProps: SharedValue<ScreenInterpolatorFrame>;