react-native-screen-transitions 3.12.0 → 3.13.0-beta.1

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

@@ -210,14 +210,29 @@ export const hydrateTransitionState = (
 	const resolvedAutoSnap =
 		s.hasAutoSnapPoint && autoSnapPoint > 0 ? autoSnapPoint : null;
 
+	const targetProgress = s.targetProgress.get();
+	const lockedSnapPoint = s.gesture.internal.lockedSnapPoint.get();
+
+	const isSettlingToLockedSnapPoint =
+		out.gesture.settling && targetProgress === lockedSnapPoint;
+
+	const isLockedGestureLifecycle =
+		options.gestureSnapLocked &&
+		lockedSnapPoint !== null &&
+		(out.gesture.dragging ||
+			isSettlingToLockedSnapPoint ||
+			out.gesture.dismissing);
+
+	const animatedSnapProgress = isLockedGestureLifecycle
+		? lockedSnapPoint
+		: out.progress;
+
 	out.animatedSnapIndex = computeAnimatedSnapIndex(
-		out.progress,
+		animatedSnapProgress,
 		s.sortedNumericSnapPoints,
 		resolvedAutoSnap,
 	);
 
-	const targetProgress = s.targetProgress.get();
-
 	out.snapIndex = computeTargetSnapIndex(
 		targetProgress,
 		s.sortedNumericSnapPoints,

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

@@ -11,7 +11,6 @@ import type { BaseStackRoute } from "../../../../../types/stack.types";
 export type BuiltState = {
 	transitionProgress: SharedValue<number>;
 	visualProgress: SharedValue<number>;
-	stackProgress: SharedValue<number>;
 	willAnimate: SharedValue<number>;
 	closing: SharedValue<number>;
 	progressAnimating: SharedValue<number>;

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

@@ -11,7 +11,10 @@ import {
 	createScreenTransitionState,
 	DEFAULT_SCREEN_TRANSITION_STATE,
 } from "../../../../constants";
-import { useStack } from "../../../../hooks/navigation/use-stack";
+import {
+	useStack,
+	useStackProgressEntries,
+} from "../../../../hooks/navigation/use-stack";
 import type {
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,
@@ -24,7 +27,7 @@ import { updateDerivations } from "./derivations";
 import { hasTransitionsEnabled } from "./has-transitions-enabled";
 import { hydrateTransitionState } from "./hydrate-transition-state";
 import type { SelectedInterpolatorOptions } from "./selected-interpolator-options";
-import { resolveStackProgress } from "./stack-progress";
+import { readStackProgress, type StackProgressEntry } from "./stack-progress";
 import { useBuildTransitionState } from "./use-build-transition-state";
 import { toPlainRoute, toPlainValue } from "./worklet";
 
@@ -212,6 +215,8 @@ const hydrateInterpolatorFrame = <TFrame extends ScreenInterpolatorFrame>({
 	prevAnimation,
 	nextHasTransitions,
 	interpolatorOptions,
+	stackProgressEntries,
+	currentRouteKey,
 }: {
 	frame: TFrame;
 	dimensions: ScreenInterpolatorFrame["layouts"]["screen"];
@@ -221,6 +226,8 @@ const hydrateInterpolatorFrame = <TFrame extends ScreenInterpolatorFrame>({
 	prevAnimation: BuiltTransitionState | undefined;
 	nextHasTransitions: boolean;
 	interpolatorOptions: SelectedInterpolatorOptions;
+	stackProgressEntries: readonly StackProgressEntry[];
+	currentRouteKey: string;
 }): TFrame => {
 	"worklet";
 	const shouldApplyOptionsToCurrent = interpolatorOptions.owner === "current";
@@ -228,12 +235,6 @@ const hydrateInterpolatorFrame = <TFrame extends ScreenInterpolatorFrame>({
 		interpolatorOptions.owner === "next" &&
 		!!nextAnimation &&
 		nextHasTransitions;
-	const previousCurrentProgress = currentAnimation?.visualProgress.get();
-	const previousNextProgress =
-		nextAnimation && nextHasTransitions
-			? nextAnimation.visualProgress.get()
-			: undefined;
-
 	frame.previous = prevAnimation
 		? hydrateTransitionState(prevAnimation, dimensions)
 		: undefined;
@@ -260,13 +261,10 @@ const hydrateInterpolatorFrame = <TFrame extends ScreenInterpolatorFrame>({
 
 	updateDerivations(frame);
 
-	frame.stackProgress = resolveStackProgress(
-		currentAnimation?.stackProgress,
+	frame.stackProgress = readStackProgress(
+		stackProgressEntries,
+		currentRouteKey,
 		frame.progress,
-		frame.current.progress,
-		previousCurrentProgress,
-		frame.next?.progress,
-		previousNextProgress,
 	);
 	frame.logicallySettled = frame.active.settled;
 
@@ -279,14 +277,15 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 	);
 	const dimensions = useWindowDimensions();
 	const insets = useSafeAreaInsets();
+	const stackProgressEntries = useStackProgressEntries();
 
 	const currDescriptor = useDescriptorsStore((store) => store.current);
 	const nextDescriptor = useDescriptorsStore((store) => store.next);
 	const prevDescriptor = useDescriptorsStore((store) => store.previous);
-
 	const currentAnimation = useBuildTransitionState(currDescriptor);
 	const nextAnimation = useBuildTransitionState(nextDescriptor);
 	const prevAnimation = useBuildTransitionState(prevDescriptor);
+	const currentRouteKey = currDescriptor.route.key;
 
 	const nextRouteKey = nextDescriptor?.route?.key;
 	const nextHasTransitions =
@@ -326,15 +325,13 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 				prevAnimation,
 				nextHasTransitions,
 				interpolatorOptions,
+				stackProgressEntries,
+				currentRouteKey,
 			});
 		}, false);
 
-		// Critical reactive dependency for `screenInterpolatorProps`.
-		//
-		// `screenInterpolatorProps` is mutated in place to avoid allocating a large
-		// interpolator frame every tick. Consumers must read this revision before
-		// reading `screenInterpolatorProps`, otherwise Reanimated may not subscribe
-		// to frame updates and can observe stale transition state.
+		// `screenInterpolatorProps` is mutated in place. Consumers read this
+		// revision first so Reanimated subscribes to the hydrated frame.
 		propsRevisionState.modify((revision) => {
 			"worklet";
 			revision.value += 1;
@@ -345,7 +342,7 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 	});
 
 	const nextInterpolator = nextDescriptor?.options.screenStyleInterpolator;
-	const currentInterpolator = currDescriptor?.options.screenStyleInterpolator;
+	const currentInterpolator = currDescriptor.options.screenStyleInterpolator;
 
 	return {
 		screenInterpolatorProps,

package/src/shared/providers/screen/animation/helpers/read-screen-animation-revisions.ts

@@ -1,39 +1,15 @@
 import type { SharedValue } from "react-native-reanimated";
-import type {
-	ScreenAnimationDescendantSources,
-	ScreenAnimationSource,
-	ScreenInterpolatorPropsRevision,
-} from "../types";
+import type { ScreenAnimationTransitionSource } from "../types";
 
 type ScreenInterpolatorExternalDeps = Pick<SharedValue<unknown>, "get">[];
 
 export const readScreenAnimationRevisions = (
-	screenInterpolatorPropsRevision: ScreenInterpolatorPropsRevision,
-	ancestorScreenAnimationSources: ScreenAnimationSource[],
-	descendantScreenAnimationSources: ScreenAnimationDescendantSources,
-	screenInterpolatorExternalDeps?: ScreenInterpolatorExternalDeps,
+	sources: readonly ScreenAnimationTransitionSource[],
+	externalRevisions: ScreenInterpolatorExternalDeps = [],
 ) => {
 	"worklet";
-	screenInterpolatorPropsRevision.get();
-
-	for (let index = 0; index < ancestorScreenAnimationSources.length; index++) {
-		ancestorScreenAnimationSources[
-			index
-		]?.screenInterpolatorPropsRevision.get();
-	}
-
-	const descendantSources = descendantScreenAnimationSources.get();
-	for (let index = 0; index < descendantSources.length; index++) {
-		descendantSources[index]?.source.screenInterpolatorPropsRevision.get();
-	}
-
-	if (screenInterpolatorExternalDeps) {
-		for (
-			let index = 0;
-			index < screenInterpolatorExternalDeps.length;
-			index++
-		) {
-			screenInterpolatorExternalDeps[index]?.get();
-		}
+	for (const source of sources) {
+		source.screenInterpolatorPropsRevision.get();
 	}
+	for (const revision of externalRevisions) revision.get();
 };

package/src/shared/providers/screen/animation/helpers/stack-progress.ts

@@ -1,44 +1,25 @@
 import type { SharedValue } from "react-native-reanimated";
 
-export const syncStackProgressValues = (
-	visualProgressValues: SharedValue<number>[],
-	stackProgressValues: SharedValue<number>[],
-) => {
-	"worklet";
-	let total = 0;
-
-	for (let i = visualProgressValues.length - 1; i >= 0; i--) {
-		total += visualProgressValues[i]?.get() ?? 0;
-		const stackProgress = stackProgressValues[i];
-
-		if (stackProgress && stackProgress.get() !== total) {
-			stackProgress.set(total);
-		}
-	}
+export type StackProgressEntry = {
+	routeKey: string;
+	visualProgress: SharedValue<number>;
 };
 
-export const resolveStackProgress = (
-	stackProgress: SharedValue<number> | undefined,
+export const readStackProgress = (
+	entries: readonly StackProgressEntry[],
+	routeKey: string,
 	fallbackProgress: number,
-	currentProgress: number,
-	previousCurrentProgress: number | undefined,
-	nextProgress: number | undefined,
-	previousNextProgress: number | undefined,
 ) => {
 	"worklet";
-	if (!stackProgress) {
-		return fallbackProgress;
-	}
+	let progress = 0;
 
-	let total = stackProgress.get();
-
-	if (previousCurrentProgress !== undefined) {
-		total += currentProgress - previousCurrentProgress;
-	}
+	for (let index = entries.length - 1; index >= 0; index--) {
+		const entry = entries[index];
+		if (!entry) continue;
 
-	if (nextProgress !== undefined && previousNextProgress !== undefined) {
-		total += nextProgress - previousNextProgress;
+		progress += entry.visualProgress.get();
+		if (entry.routeKey === routeKey) return progress;
 	}
 
-	return total;
+	return fallbackProgress;
 };

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

@@ -22,7 +22,6 @@ import { toPlainRoute, toPlainValue } from "./worklet";
 type BuiltState = {
 	transitionProgress: SharedValue<number>;
 	visualProgress: SharedValue<number>;
-	stackProgress: SharedValue<number>;
 	willAnimate: SharedValue<number>;
 	closing: SharedValue<number>;
 	progressAnimating: SharedValue<number>;
@@ -68,7 +67,6 @@ export const useBuildTransitionState = (
 		return {
 			transitionProgress: AnimationStore.getValue(key, "transitionProgress"),
 			visualProgress: AnimationStore.getValue(key, "visualProgress"),
-			stackProgress: AnimationStore.getValue(key, "stackProgress"),
 			willAnimate: AnimationStore.getValue(key, "willAnimate"),
 			closing: AnimationStore.getValue(key, "closing"),
 			entering: AnimationStore.getValue(key, "entering"),

package/src/shared/providers/screen/animation/index.tsx

@@ -1,5 +1,6 @@
 export {
 	ScreenAnimationProvider,
+	useOptionalScreenAnimationStore,
 	useScreenAnimationStore,
 } from "./animation.provider";
 export {

package/src/shared/providers/screen/animation/types.ts

@@ -15,30 +15,8 @@ export type ScreenAnimationTarget =
 	| ScreenTransitionTarget
 	| ScreenAnimationLegacyTarget;
 
-export type ScreenAnimationSource = {
+export type ScreenAnimationTransitionSource = {
 	screenInterpolatorProps: SharedValue<ScreenInterpolatorFrame>;
 	screenInterpolatorPropsRevision: ScreenInterpolatorPropsRevision;
-};
-
-export type ScreenAnimationTransitionSource = ScreenAnimationSource & {
 	boundsAccessor: BoundsAccessor;
 };
-
-export type ScreenAnimationDescendantSource = {
-	source: ScreenAnimationTransitionSource;
-	depth: number;
-};
-
-export type ScreenAnimationDescendantSources = SharedValue<
-	ScreenAnimationDescendantSource[]
->;
-
-export type RegisterScreenAnimationDescendant = (
-	source: ScreenAnimationTransitionSource,
-	depth: number,
-) => () => void;
-
-export type ScreenAnimationAncestorDescendantRegistrar = {
-	register: RegisterScreenAnimationDescendant;
-	depth: number;
-};

package/src/shared/providers/screen/animation/use-screen-animation.tsx

@@ -4,7 +4,7 @@ import type {
 	ScreenInterpolationProps,
 	ScreenTransitionTarget,
 } from "../../../types/animation.types";
-import { useScreenAnimationStore } from "./animation.provider";
+import { useOptionalScreenAnimationStore } from "./animation.provider";
 import { useBuildTransitionAccessor } from "./helpers/accessors/use-build-transition-accessor";
 import { readScreenAnimationRevisions } from "./helpers/read-screen-animation-revisions";
 import type {
@@ -35,32 +35,28 @@ export function useScreenAnimation(
 	| DerivedValue<ScreenInterpolationProps>
 	| DerivedValue<ScreenInterpolationProps | null> {
 	const route = useRoute();
-	const screenAnimationStore = useScreenAnimationStore(route.key);
+	const localAnimationStore = useOptionalScreenAnimationStore();
+	const keyedAnimationStore = useOptionalScreenAnimationStore(
+		localAnimationStore ? null : route.key,
+	);
+	const screenAnimationStore = localAnimationStore ?? keyedAnimationStore;
 
 	if (!screenAnimationStore) {
 		throw new Error(
-			`ScreenAnimation store for route "${route.key}" was not found`,
+			`ScreenAnimationStore is unavailable for route "${route.key}"`,
 		);
 	}
 
-	const {
-		screenInterpolatorPropsRevision,
-		ancestorScreenAnimationSources,
-		descendantScreenAnimationSources,
-	} = screenAnimationStore;
+	const { transitionSources, transitionOriginIndex } = screenAnimationStore;
 	const transition = useBuildTransitionAccessor(screenAnimationStore);
 	const transitionTarget = normalizeScreenAnimationTarget(
 		target,
-		ancestorScreenAnimationSources.length,
+		transitionOriginIndex,
 	);
 
 	const animation = useDerivedValue<ScreenInterpolationProps | null>(() => {
 		"worklet";
-		readScreenAnimationRevisions(
-			screenInterpolatorPropsRevision,
-			ancestorScreenAnimationSources,
-			descendantScreenAnimationSources,
-		);
+		readScreenAnimationRevisions(transitionSources);
 		return transition(transitionTarget);
 	});
 

package/src/shared/providers/screen/descriptors/descriptors.provider.tsx

@@ -1,12 +1,19 @@
 import type { ReactNode } from "react";
-import { useMemo } from "react";
+import { useLayoutEffect, useMemo } from "react";
+import { runOnUI } from "react-native-reanimated";
 import { useScreenTransitionsAdapterOptionalContext } from "../../../adapters/with-screen-transitions/context";
-import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
+import { screenTopology } from "../../../factories/screen-topology";
+import { useStack } from "../../../hooks/navigation/use-stack";
+import { useOptionalBlankStackStore } from "../../../providers/stack/blank-stack.provider";
+import {
+	registerScreen,
+	unregisterScreen,
+} from "../../../stores/bounds/internals/coordinator";
+import { SystemStore } from "../../../stores/system.store";
 import type { BaseStackDescriptor } from "../../../types/stack.types";
 import createProvider from "../../../utils/create-provider";
 import type { DescriptorDerivations } from "./helpers/derive-descriptor-derivations";
 import { deriveDescriptorDerivations } from "./helpers/derive-descriptor-derivations";
-import { getAncestorKeys } from "./helpers/get-ancestor-keys";
 
 /**
  * Base descriptor interface - minimal contract for all stack types.
@@ -41,18 +48,32 @@ type DescriptorsProviderProps = {
 	routeKey?: string;
 };
 
-export const { DescriptorsProvider, useDescriptorsStore } = createProvider(
-	"Descriptors",
-	{ guarded: true },
-)<DescriptorsProviderProps, DescriptorStoreValue<BaseDescriptor>>(
+const createDescriptorsProvider = createProvider("Descriptors", {
+	global: true,
+})<DescriptorsProviderProps, DescriptorStoreValue<BaseDescriptor>>;
+
+const {
+	DescriptorsProvider,
+	useDescriptorsStore,
+	useOptionalDescriptorsStore,
+}: ReturnType<typeof createDescriptorsProvider> = createDescriptorsProvider(
 	({ previous, current, next, routeKey, children }) => {
-		const blankStackCurrent = useBlankStackStore((store) =>
+		const parentScreenKey = useOptionalDescriptorsStore(
+			(store) => store?.derivations.currentScreenKey,
+		);
+		const parentTransitionSourcePairKey = useOptionalDescriptorsStore(
+			(store) => store?.derivations.transitionSourcePairKey,
+		);
+		const parentTransitionDestinationScreenKey = useOptionalDescriptorsStore(
+			(store) => store?.derivations.transitionDestinationScreenKey,
+		);
+		const blankStackCurrent = useOptionalBlankStackStore((store) =>
 			routeKey ? store?.scenesByKey[routeKey]?.descriptor : undefined,
 		);
-		const blankStackPrevious = useBlankStackStore((store) =>
+		const blankStackPrevious = useOptionalBlankStackStore((store) =>
 			routeKey ? store?.scenesByKey[routeKey]?.previousDescriptor : undefined,
 		);
-		const blankStackNext = useBlankStackStore((store) =>
+		const blankStackNext = useOptionalBlankStackStore((store) =>
 			routeKey ? store?.scenesByKey[routeKey]?.nextDescriptor : undefined,
 		);
 		const adapterContext = useScreenTransitionsAdapterOptionalContext();
@@ -68,6 +89,17 @@ export const { DescriptorsProvider, useDescriptorsStore } = createProvider(
 		const resolvedPrevious =
 			previous ?? blankStackPrevious ?? adapterScene?.previousDescriptor;
 		const resolvedNext = next ?? blankStackNext ?? adapterScene?.nextDescriptor;
+		const currentScreenKey = current?.route.key ?? routeKey;
+		const isActiveScreen = useStack((store) => {
+			const focusedScene = store.scenes[
+				store.focusedIndex
+			] as (typeof store.scenes)[number];
+
+			return (
+				focusedScene.route.key === currentScreenKey &&
+				focusedScene.activity === "active"
+			);
+		});
 
 		if (!resolvedCurrent) {
 			throw new Error(
@@ -84,23 +116,76 @@ export const { DescriptorsProvider, useDescriptorsStore } = createProvider(
 			[resolvedPrevious, resolvedCurrent, resolvedNext],
 		);
 
-		const ancestorKeys = useMemo(
-			() => getAncestorKeys(resolvedCurrent),
-			[resolvedCurrent],
-		);
+		const derivations = useMemo(() => {
+			const localDerivations = deriveDescriptorDerivations({
+				previous: resolvedPrevious,
+				current: resolvedCurrent,
+				next: resolvedNext,
+			});
 
-		const derivations = useMemo(
-			() =>
-				deriveDescriptorDerivations({
-					previous: resolvedPrevious,
-					current: resolvedCurrent,
-					next: resolvedNext,
-					ancestorKeys,
-				}),
-			[resolvedPrevious, resolvedCurrent, resolvedNext, ancestorKeys],
+			return {
+				...localDerivations,
+				transitionSourcePairKey:
+					localDerivations.sourcePairKey ??
+					parentTransitionSourcePairKey ??
+					undefined,
+				transitionDestinationScreenKey:
+					localDerivations.nextScreenKey ??
+					parentTransitionDestinationScreenKey ??
+					undefined,
+			};
+		}, [
+			resolvedPrevious,
+			resolvedCurrent,
+			resolvedNext,
+			parentTransitionSourcePairKey,
+			parentTransitionDestinationScreenKey,
+		]);
+		const animationProgress = SystemStore.getValue(
+			derivations.currentScreenKey,
+			"animationProgress",
 		);
+		const pendingLifecycleStartBlockCount = SystemStore.getValue(
+			derivations.currentScreenKey,
+			"pendingLifecycleStartBlockCount",
+		);
+
+		useLayoutEffect(() => {
+			screenTopology.register({
+				screenKey: derivations.currentScreenKey,
+				parentScreenKey,
+			});
+			runOnUI(registerScreen)({
+				screenKey: derivations.currentScreenKey,
+				parentScreenKey,
+				animationProgress,
+				pendingLifecycleStartBlockCount,
+			});
+
+			return () => {
+				screenTopology.unregister(derivations.currentScreenKey);
+				runOnUI(unregisterScreen)(derivations.currentScreenKey);
+			};
+		}, [
+			animationProgress,
+			derivations.currentScreenKey,
+			parentScreenKey,
+			pendingLifecycleStartBlockCount,
+		]);
+
+		useLayoutEffect(() => {
+			if (!isActiveScreen || !parentScreenKey) {
+				return;
+			}
+
+			return screenTopology.activate({
+				screenKey: derivations.currentScreenKey,
+				parentScreenKey,
+			});
+		}, [isActiveScreen, derivations.currentScreenKey, parentScreenKey]);
 
 		return {
+			key: derivations.currentScreenKey,
 			value: {
 				previous: resolvedPrevious,
 				current: resolvedCurrent,
@@ -113,3 +198,5 @@ export const { DescriptorsProvider, useDescriptorsStore } = createProvider(
 		};
 	},
 );
+
+export { DescriptorsProvider, useDescriptorsStore };

package/src/shared/providers/screen/descriptors/helpers/derive-descriptor-derivations.ts

@@ -7,11 +7,13 @@ export interface DescriptorDerivations {
 	currentScreenKey: string;
 	nextScreenKey?: string;
 	sourcePairKey?: ScreenPairKey;
+	/** Nearest source pair owned by this screen or one of its ancestors. */
+	transitionSourcePairKey?: ScreenPairKey;
+	/** Destination root for the nearest source pair. */
+	transitionDestinationScreenKey?: string;
 	destinationPairKey?: ScreenPairKey;
-	parentScreenKey?: string;
 	isFirstKey: boolean;
 	isTopMostScreen: boolean;
-	ancestorKeys: string[];
 	hasConfiguredInterpolator: boolean;
 }
 
@@ -19,14 +21,12 @@ interface Params {
 	previous?: BaseStackDescriptor;
 	current: BaseStackDescriptor;
 	next?: BaseStackDescriptor;
-	ancestorKeys: string[];
 }
 
 export function deriveDescriptorDerivations({
 	previous,
 	current,
 	next,
-	ancestorKeys,
 }: Params): DescriptorDerivations {
 	const previousScreenKey = previous?.route.key;
 	const currentScreenKey = current.route.key;
@@ -52,11 +52,11 @@ export function deriveDescriptorDerivations({
 		currentScreenKey,
 		nextScreenKey,
 		sourcePairKey,
+		transitionSourcePairKey: sourcePairKey,
+		transitionDestinationScreenKey: nextScreenKey,
 		destinationPairKey,
-		parentScreenKey: ancestorKeys[0],
 		isFirstKey,
 		isTopMostScreen,
-		ancestorKeys,
 		hasConfiguredInterpolator,
 	};
 }