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

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,
@@ -23,9 +26,8 @@ import { buildScreenTransitionOptions } from "./build-screen-transition-options"
 import { updateDerivations } from "./derivations";
 import { hasTransitionsEnabled } from "./has-transitions-enabled";
 import { hydrateTransitionState } from "./hydrate-transition-state";
-import { shouldUpdateScreenInterpolator } from "./interpolator-participation";
 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";
 
@@ -35,7 +37,6 @@ export type ScreenInterpolatorFrame = Omit<
 >;
 
 interface ScreenAnimationPipeline {
-	interpolatorUpdatesEnabled: boolean;
 	screenInterpolatorProps: SharedValue<ScreenInterpolatorFrame>;
 	screenInterpolatorPropsRevision: DerivedValue<number>;
 	selectedInterpolatorOptions: SharedValue<SelectedInterpolatorOptions>;
@@ -214,6 +215,8 @@ const hydrateInterpolatorFrame = <TFrame extends ScreenInterpolatorFrame>({
 	prevAnimation,
 	nextHasTransitions,
 	interpolatorOptions,
+	stackProgressEntries,
+	currentRouteKey,
 }: {
 	frame: TFrame;
 	dimensions: ScreenInterpolatorFrame["layouts"]["screen"];
@@ -223,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";
@@ -230,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;
@@ -262,45 +261,31 @@ 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;
 
 	return frame;
 };
 
-export function useScreenAnimationPipeline(
-	parentInterpolatorUpdatesEnabled = true,
-): ScreenAnimationPipeline {
+export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 	const transitionsAlwaysOn = useStack(
 		(stack) => stack.flags.TRANSITIONS_ALWAYS_ON,
 	);
 	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 currentActivity = useStack((stack) => {
-		const routeIndex = stack.routeKeys.indexOf(currDescriptor.route.key);
-		return stack.scenes[routeIndex]?.activity;
-	});
-	const interpolatorUpdatesEnabled =
-		parentInterpolatorUpdatesEnabled &&
-		shouldUpdateScreenInterpolator(
-			currentActivity ?? "active",
-			currDescriptor.options.experimental_updateInactiveInterpolators === true,
-		);
-
 	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,50 +311,40 @@ export function useScreenAnimationPipeline(
 		});
 
 	const propsRevisionState = useSharedValue({ value: 0 });
-	const screenInterpolatorPropsRevision = useDerivedValue<number>(
-		interpolatorUpdatesEnabled
-			? () => {
-					"worklet";
-					screenInterpolatorProps.modify((frame) => {
-						"worklet";
-						const interpolatorOptions = selectedInterpolatorOptions.get();
-						return hydrateInterpolatorFrame({
-							frame,
-							dimensions,
-							insets,
-							currentAnimation,
-							nextAnimation,
-							prevAnimation,
-							nextHasTransitions,
-							interpolatorOptions,
-						});
-					}, 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.
-					propsRevisionState.modify((revision) => {
-						"worklet";
-						revision.value += 1;
-						return revision;
-					}, false);
-
-					return propsRevisionState.get().value;
-				}
-			: () => {
-					"worklet";
-					return propsRevisionState.get().value;
-				},
-	);
+	const screenInterpolatorPropsRevision = useDerivedValue<number>(() => {
+		"worklet";
+		screenInterpolatorProps.modify((frame) => {
+			"worklet";
+			const interpolatorOptions = selectedInterpolatorOptions.get();
+			return hydrateInterpolatorFrame({
+				frame,
+				dimensions,
+				insets,
+				currentAnimation,
+				nextAnimation,
+				prevAnimation,
+				nextHasTransitions,
+				interpolatorOptions,
+				stackProgressEntries,
+				currentRouteKey,
+			});
+		}, false);
+
+		// `screenInterpolatorProps` is mutated in place. Consumers read this
+		// revision first so Reanimated subscribes to the hydrated frame.
+		propsRevisionState.modify((revision) => {
+			"worklet";
+			revision.value += 1;
+			return revision;
+		}, false);
+
+		return propsRevisionState.get().value;
+	});
 
 	const nextInterpolator = nextDescriptor?.options.screenStyleInterpolator;
-	const currentInterpolator = currDescriptor?.options.screenStyleInterpolator;
+	const currentInterpolator = currDescriptor.options.screenStyleInterpolator;
 
 	return {
-		interpolatorUpdatesEnabled,
 		screenInterpolatorProps,
 		screenInterpolatorPropsRevision,
 		selectedInterpolatorOptions,

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

@@ -2,7 +2,9 @@ import type { ReactNode } 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,
@@ -12,7 +14,6 @@ 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 { deriveStructuralAncestorKeys } from "./helpers/derive-structural-ancestor-keys";
 
 /**
  * Base descriptor interface - minimal contract for all stack types.
@@ -47,30 +48,32 @@ type DescriptorsProviderProps = {
 	routeKey?: string;
 };
 
-export const { DescriptorsProvider, useDescriptorsStore } = createProvider(
-	"Descriptors",
-	{ guarded: true },
-)<DescriptorsProviderProps, DescriptorStoreValue<BaseDescriptor>>(
-	({ previous, current, next, routeKey, children }, { useParentStore }) => {
-		const parentScreenKey = useParentStore(
+const createDescriptorsProvider = createProvider("Descriptors", {
+	global: true,
+})<DescriptorsProviderProps, DescriptorStoreValue<BaseDescriptor>>;
+
+const {
+	DescriptorsProvider,
+	useDescriptorsStore,
+	useOptionalDescriptorsStore,
+}: ReturnType<typeof createDescriptorsProvider> = createDescriptorsProvider(
+	({ previous, current, next, routeKey, children }) => {
+		const parentScreenKey = useOptionalDescriptorsStore(
 			(store) => store?.derivations.currentScreenKey,
 		);
-		const parentAncestorKeys = useParentStore(
-			(store) => store?.derivations.ancestorKeys,
-		);
-		const parentTransitionSourcePairKey = useParentStore(
+		const parentTransitionSourcePairKey = useOptionalDescriptorsStore(
 			(store) => store?.derivations.transitionSourcePairKey,
 		);
-		const parentTransitionDestinationScreenKey = useParentStore(
+		const parentTransitionDestinationScreenKey = useOptionalDescriptorsStore(
 			(store) => store?.derivations.transitionDestinationScreenKey,
 		);
-		const blankStackCurrent = useBlankStackStore((store) =>
+		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();
@@ -86,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(
@@ -102,40 +116,28 @@ export const { DescriptorsProvider, useDescriptorsStore } = createProvider(
 			[resolvedPrevious, resolvedCurrent, resolvedNext],
 		);
 
-		const ancestorKeys = useMemo(
-			() =>
-				deriveStructuralAncestorKeys(
-					parentScreenKey
-						? {
-								currentScreenKey: parentScreenKey,
-								ancestorKeys: parentAncestorKeys ?? [],
-							}
-						: null,
-				),
-			[parentAncestorKeys, parentScreenKey],
-		);
-
 		const derivations = useMemo(() => {
 			const localDerivations = deriveDescriptorDerivations({
 				previous: resolvedPrevious,
 				current: resolvedCurrent,
 				next: resolvedNext,
-				ancestorKeys,
 			});
 
 			return {
 				...localDerivations,
 				transitionSourcePairKey:
-					localDerivations.sourcePairKey ?? parentTransitionSourcePairKey,
+					localDerivations.sourcePairKey ??
+					parentTransitionSourcePairKey ??
+					undefined,
 				transitionDestinationScreenKey:
 					localDerivations.nextScreenKey ??
-					parentTransitionDestinationScreenKey,
+					parentTransitionDestinationScreenKey ??
+					undefined,
 			};
 		}, [
 			resolvedPrevious,
 			resolvedCurrent,
 			resolvedNext,
-			ancestorKeys,
 			parentTransitionSourcePairKey,
 			parentTransitionDestinationScreenKey,
 		]);
@@ -149,24 +151,41 @@ export const { DescriptorsProvider, useDescriptorsStore } = createProvider(
 		);
 
 		useLayoutEffect(() => {
+			screenTopology.register({
+				screenKey: derivations.currentScreenKey,
+				parentScreenKey,
+			});
 			runOnUI(registerScreen)({
 				screenKey: derivations.currentScreenKey,
-				parentScreenKey: derivations.parentScreenKey,
+				parentScreenKey,
 				animationProgress,
 				pendingLifecycleStartBlockCount,
 			});
 
 			return () => {
+				screenTopology.unregister(derivations.currentScreenKey);
 				runOnUI(unregisterScreen)(derivations.currentScreenKey);
 			};
 		}, [
 			animationProgress,
 			derivations.currentScreenKey,
-			derivations.parentScreenKey,
+			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,
@@ -179,3 +198,5 @@ export const { DescriptorsProvider, useDescriptorsStore } = createProvider(
 		};
 	},
 );
+
+export { DescriptorsProvider, useDescriptorsStore };

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

@@ -12,10 +12,8 @@ export interface DescriptorDerivations {
 	/** Destination root for the nearest source pair. */
 	transitionDestinationScreenKey?: string;
 	destinationPairKey?: ScreenPairKey;
-	parentScreenKey?: string;
 	isFirstKey: boolean;
 	isTopMostScreen: boolean;
-	ancestorKeys: string[];
 	hasConfiguredInterpolator: boolean;
 }
 
@@ -23,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;
@@ -59,10 +55,8 @@ export function deriveDescriptorDerivations({
 		transitionSourcePairKey: sourcePairKey,
 		transitionDestinationScreenKey: nextScreenKey,
 		destinationPairKey,
-		parentScreenKey: ancestorKeys[0],
 		isFirstKey,
 		isTopMostScreen,
-		ancestorKeys,
 		hasConfiguredInterpolator,
 	};
 }