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

package/src/shared/constants.ts

@@ -5,7 +5,10 @@ import type {
 	ScreenTransitionOptions,
 	ScreenTransitionState,
 } from "./types/animation.types";
-import type { ActivationArea } from "./types/gesture.types";
+import type {
+	ActivationArea,
+	GestureProgressMode,
+} from "./types/gesture.types";
 import type { Layout, SheetScrollGestureBehavior } from "./types/screen.types";
 import type { BaseStackRoute } from "./types/stack.types";
 
@@ -45,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,
@@ -157,11 +161,11 @@ export const FULLSCREEN_DIMENSIONS = (
 
 export const DEFAULT_GESTURE_VELOCITY_IMPACT = 0.3;
 export const DEFAULT_GESTURE_SNAP_VELOCITY_IMPACT = 0.1;
-export const DEFAULT_GESTURE_RELEASE_VELOCITY_MAX = 3.2;
 export const DEFAULT_GESTURE_SENSITIVITY = 1;
 export const DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE = 1;
 export const DEFAULT_GESTURE_DIRECTION = "horizontal";
-export const DEFAULT_GESTURE_DRIVES_PROGRESS = true;
+export const DEFAULT_GESTURE_PROGRESS_MODE: GestureProgressMode =
+	"progress-driven";
 export const DEFAULT_GESTURE_SNAP_LOCKED = false;
 export const DEFAULT_GESTURE_ACTIVATION_AREA: ActivationArea = "screen";
 export const DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR: SheetScrollGestureBehavior =
@@ -178,7 +182,12 @@ 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.
+ * Number of consecutive frames progress must remain near its target before it
+ * is treated as logically settled.
+ */
+export const LOGICAL_SETTLE_REQUIRED_FRAMES = 5;
+
+/**
+ * Progress distance from target required for logical settle.
  */
-export const ANIMATION_SNAP_THRESHOLD = 0.01;
+export const LOGICAL_SETTLE_PROGRESS_THRESHOLD = 0.001;

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 {
@@ -87,11 +86,14 @@ const useInitialLayoutHandler = (params: {
 		maybeMeasureAndStore,
 	} = params;
 
-	const isAnimating = AnimationStore.getValue(currentScreenKey, "animating");
+	const isAnimating = AnimationStore.getValue(
+		currentScreenKey,
+		"progressAnimating",
+	);
 
 	// Check if any ancestor is animating
 	const ancestorAnimations = ancestorKeys.map((key) =>
-		AnimationStore.getValue(key, "animating"),
+		AnimationStore.getValue(key, "progressAnimating"),
 	);
 
 	const hasMeasuredOnLayout = useSharedValue(false);
@@ -205,49 +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, navigatorKey, ancestorNavigatorKeys } =
-			useDescriptorDerivations();
+		const { ancestorKeys, previousScreenKey } = useDescriptorDerivations();
 		const currentScreenKey = current.route.key;
 		const selectedNextRouteId = getRouteParamId(next?.route);
 
@@ -258,7 +225,10 @@ const registerBoundsBundle = createProvider("RegisterBounds", {
 		const updateSignal: SharedValue<number> =
 			parentContext?.updateSignal ?? ownSignal;
 
-		const isAnimating = AnimationStore.getValue(currentScreenKey, "animating");
+		const isAnimating = AnimationStore.getValue(
+			currentScreenKey,
+			"progressAnimating",
+		);
 		const preparedStyles = useMemo(() => prepareStyleForBounds(style), [style]);
 
 		const emitUpdate = useStableCallbackValue(() => {
@@ -272,7 +242,6 @@ const registerBoundsBundle = createProvider("RegisterBounds", {
 				onPress,
 				shouldSetSource,
 				shouldSetDestination,
-				shouldUpdateSource,
 			}: MaybeMeasureAndStoreParams = {}) => {
 				"worklet";
 				if (!sharedBoundTag) {
@@ -280,18 +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,
-							ancestorKeys,
-							navigatorKey,
-							ancestorNavigatorKeys,
+							entryTag: sharedBoundTag,
+							linkId: sharedBoundTag,
 							currentScreenKey,
 							measured: existing.bounds,
 							preparedStyles,
-							shouldSetSource: true,
+							linkWrite: {
+								type: "source",
+								pairKey: sourcePairKey,
+							},
 						});
 					}
 
@@ -299,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;
 				}
@@ -337,18 +314,38 @@ const registerBoundsBundle = createProvider("RegisterBounds", {
 				emitUpdate();
 
 				applyMeasuredBoundsWrites({
-					sharedBoundTag,
+					entryTag: sharedBoundTag,
+					linkId: sharedBoundTag,
 					currentScreenKey,
 					measured,
 					preparedStyles,
-					ancestorKeys,
-					navigatorKey,
-					ancestorNavigatorKeys,
-					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)();
 			},
 		);
@@ -369,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(() => {
@@ -391,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/animation.provider.tsx

@@ -1,7 +1,21 @@
-import { type ReactNode, useContext } from "react";
+import {
+	type ReactNode,
+	useCallback,
+	useContext,
+	useLayoutEffect,
+	useMemo,
+} from "react";
+import { useSharedValue } from "react-native-reanimated";
+import { createBoundsAccessor } from "../../../utils/bounds";
 import createProvider from "../../../utils/create-provider";
 import { useScreenAnimationPipeline } from "./helpers/pipeline";
-import type { ScreenAnimationSource } from "./types";
+import type {
+	RegisterScreenAnimationDescendant,
+	ScreenAnimationAncestorDescendantRegistrar,
+	ScreenAnimationDescendantSources,
+	ScreenAnimationSource,
+	ScreenAnimationTransitionSource,
+} from "./types";
 
 type Props = {
 	children: ReactNode;
@@ -11,6 +25,9 @@ export type ScreenAnimationContextValue = ReturnType<
 	typeof useScreenAnimationPipeline
 > & {
 	ancestorScreenAnimationSources: ScreenAnimationSource[];
+	descendantScreenAnimationSources: ScreenAnimationDescendantSources;
+	registerDescendantScreenAnimationSource: RegisterScreenAnimationDescendant;
+	ancestorDescendantScreenAnimationRegistrars: ScreenAnimationAncestorDescendantRegistrar[];
 };
 
 export type ScreenAnimationContextResult = {
@@ -25,35 +42,170 @@ export const {
 	guarded: true,
 })<Props, ScreenAnimationContextValue>((): ScreenAnimationContextResult => {
 	const parentContext = useContext(ScreenAnimationContext);
+	const parentScreenInterpolatorProps = parentContext?.screenInterpolatorProps;
+	const parentScreenInterpolatorPropsRevision =
+		parentContext?.screenInterpolatorPropsRevision;
+	const parentAncestorScreenAnimationSources =
+		parentContext?.ancestorScreenAnimationSources;
+	const parentRegisterDescendantScreenAnimationSource =
+		parentContext?.registerDescendantScreenAnimationSource;
+	const parentAncestorDescendantScreenAnimationRegistrars =
+		parentContext?.ancestorDescendantScreenAnimationRegistrars;
 
 	const {
 		screenInterpolatorProps,
-		screenInterpolatorFrameUpdater,
+		screenInterpolatorPropsRevision,
+		selectedInterpolatorOptions,
 		nextInterpolator,
 		currentInterpolator,
-		boundsAccessor,
 	} = useScreenAnimationPipeline();
 
-	const ancestorScreenAnimationSources = parentContext
-		? [
-				{
-					screenInterpolatorProps: parentContext.screenInterpolatorProps,
-					screenInterpolatorFrameUpdater:
-						parentContext.screenInterpolatorFrameUpdater,
-					boundsAccessor: parentContext.boundsAccessor,
-				},
-				...parentContext.ancestorScreenAnimationSources,
-			]
-		: [];
+	const selfScreenAnimationSource = useMemo<ScreenAnimationSource>(
+		() => ({
+			screenInterpolatorProps,
+			screenInterpolatorPropsRevision,
+		}),
+		[screenInterpolatorProps, screenInterpolatorPropsRevision],
+	);
+
+	const selfScreenAnimationTransitionSource =
+		useMemo<ScreenAnimationTransitionSource>(
+			() => ({
+				...selfScreenAnimationSource,
+				boundsAccessor: createBoundsAccessor(() => {
+					"worklet";
+					return selfScreenAnimationSource.screenInterpolatorProps.get();
+				}),
+			}),
+			[selfScreenAnimationSource],
+		);
+
+	const descendantScreenAnimationSources = useSharedValue<
+		ScreenAnimationDescendantSources["value"]
+	>([]);
+
+	const registerDescendantScreenAnimationSource =
+		useCallback<RegisterScreenAnimationDescendant>(
+			(source, depth) => {
+				descendantScreenAnimationSources.modify(
+					<T extends ScreenAnimationDescendantSources["value"]>(
+						currentSources: T,
+					): T => {
+						"worklet";
+						const existingIndex = currentSources.findIndex(
+							(currentSource) => currentSource.source === source,
+						);
+
+						if (
+							existingIndex !== -1 &&
+							currentSources[existingIndex]?.depth === depth
+						) {
+							return currentSources;
+						}
+
+						const nextSources =
+							existingIndex === -1
+								? [...currentSources, { source, depth }]
+								: currentSources.map((currentSource, index) =>
+										index === existingIndex ? { source, depth } : currentSource,
+									);
+
+						return nextSources.sort((a, b) => a.depth - b.depth) as T;
+					},
+				);
+
+				return () => {
+					descendantScreenAnimationSources.modify(
+						<T extends ScreenAnimationDescendantSources["value"]>(
+							currentSources: T,
+						): T => {
+							"worklet";
+							return currentSources.filter(
+								(currentSource) => currentSource.source !== source,
+							) as T;
+						},
+					);
+				};
+			},
+			[descendantScreenAnimationSources],
+		);
+
+	const ancestorScreenAnimationSources = useMemo(() => {
+		if (
+			!parentScreenInterpolatorProps ||
+			!parentScreenInterpolatorPropsRevision ||
+			!parentAncestorScreenAnimationSources
+		) {
+			return [];
+		}
+
+		return [
+			{
+				screenInterpolatorProps: parentScreenInterpolatorProps,
+				screenInterpolatorPropsRevision: parentScreenInterpolatorPropsRevision,
+			},
+			...parentAncestorScreenAnimationSources,
+		];
+	}, [
+		parentScreenInterpolatorProps,
+		parentScreenInterpolatorPropsRevision,
+		parentAncestorScreenAnimationSources,
+	]);
+
+	const ancestorDescendantScreenAnimationRegistrars = useMemo(() => {
+		if (!parentRegisterDescendantScreenAnimationSource) {
+			return [];
+		}
+
+		// Each provider exposes its own descendant registrar and forwards ancestor
+		// registrars, letting a mounted child register with every ancestor scope.
+		return [
+			{
+				register: parentRegisterDescendantScreenAnimationSource,
+				depth: 1,
+			},
+			...(parentAncestorDescendantScreenAnimationRegistrars ?? []).map(
+				(registrar) => ({
+					register: registrar.register,
+					depth: registrar.depth + 1,
+				}),
+			),
+		];
+	}, [
+		parentRegisterDescendantScreenAnimationSource,
+		parentAncestorDescendantScreenAnimationRegistrars,
+	]);
+
+	useLayoutEffect(() => {
+		const cleanups = ancestorDescendantScreenAnimationRegistrars.map(
+			(registrar) =>
+				registrar.register(
+					selfScreenAnimationTransitionSource,
+					registrar.depth,
+				),
+		);
+
+		return () => {
+			for (const cleanup of cleanups) {
+				cleanup();
+			}
+		};
+	}, [
+		ancestorDescendantScreenAnimationRegistrars,
+		selfScreenAnimationTransitionSource,
+	]);
 
 	return {
 		value: {
 			screenInterpolatorProps,
-			screenInterpolatorFrameUpdater,
+			screenInterpolatorPropsRevision,
+			selectedInterpolatorOptions,
 			nextInterpolator,
 			currentInterpolator,
-			boundsAccessor,
 			ancestorScreenAnimationSources,
+			descendantScreenAnimationSources,
+			registerDescendantScreenAnimationSource,
+			ancestorDescendantScreenAnimationRegistrars,
 		},
 	};
 });

package/src/shared/providers/screen/animation/helpers/accessors/use-build-bounds-accessor.tsx

@@ -0,0 +1,13 @@
+import { useMemo } from "react";
+import { createBoundsAccessor } from "../../../../../utils/bounds";
+import { useScreenAnimationContext } from "../../animation.provider";
+
+export const useBuildBoundsAccessor = () => {
+	const { screenInterpolatorProps } = useScreenAnimationContext();
+	return useMemo(() => {
+		return createBoundsAccessor(() => {
+			"worklet";
+			return screenInterpolatorProps.get();
+		});
+	}, [screenInterpolatorProps]);
+};