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

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,
 	};
 }

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

@@ -4,6 +4,7 @@ import { useSharedValue } from "react-native-reanimated";
 import { ScrollStore } from "../../../stores/scroll.store";
 import createProvider from "../../../utils/create-provider";
 import { useDescriptorsStore } from "../descriptors";
+import { useCurrentScreenRelationships } from "../use-current-screen-relationships";
 import { useScreenGestureConfig } from "./hooks/use-screen-gesture-config";
 import { GestureOwnershipBridge } from "./ownership/gesture-ownership-bridge";
 import { useBuildPanGesture } from "./pan/use-build-pan-gesture";
@@ -13,100 +14,110 @@ import {
 	type GestureCompositionOwner,
 	type GestureContextType,
 	NO_DIRECTION_CLAIMS,
+	type ScreenGestureSource,
 } from "./types";
 
 interface ScreenGestureProviderProps {
 	children: React.ReactNode;
 }
 
-export const { ScreenGestureProvider, useScreenGestureStore: useGestureStore } =
-	createProvider("ScreenGesture", { guarded: false })<
-		ScreenGestureProviderProps,
-		GestureContextType
-	>(
-		(
-			{ children },
-			{ useParentStore },
-		): { value: GestureContextType; children: React.ReactNode } => {
-			const currentScreenKey = useDescriptorsStore(
-				(store) => store.derivations.currentScreenKey,
-			);
-			const isTopMostScreen = useDescriptorsStore(
-				(store) => store.derivations.isTopMostScreen,
-			);
-			const gestureContext = useParentStore((parentContext) =>
-				isTopMostScreen ? parentContext : null,
-			);
-			const gestureConfig = useScreenGestureConfig(gestureContext);
+type ScreenGestureStoreValue = GestureContextType & {
+	relationshipGestureSources: readonly ScreenGestureSource[];
+};
 
-			const scrollState = ScrollStore.getValue(
-				currentScreenKey,
-				"coordination",
-			);
-
-			// Ancestors read this before activating. If a nested screen claims the same
-			// direction, it writes here so the ancestor can fail and let it take priority.
-			const childDirectionClaims =
-				useSharedValue<DirectionClaimMap>(NO_DIRECTION_CLAIMS);
+const EMPTY_GESTURE_SOURCES: readonly ScreenGestureSource[] = [];
 
-			// The first gesture to activate owns navigation release. Other gestures may
-			// still join as companion trackers during the same simultaneous composition.
-			const gestureCompositionOwner =
-				useSharedValue<GestureCompositionOwner>(null);
+const createScreenGestureProvider = createProvider("ScreenGesture", {
+	global: true,
+})<ScreenGestureProviderProps, ScreenGestureStoreValue>;
 
-			const panGesture = useBuildPanGesture({
+export const {
+	ScreenGestureProvider,
+	useOptionalScreenGestureStore,
+	useScreenGestureStore,
+}: ReturnType<typeof createScreenGestureProvider> = createScreenGestureProvider(
+	({ children }) => {
+		const currentScreenKey = useDescriptorsStore(
+			(store) => store.derivations.currentScreenKey,
+		);
+		const isTopMostScreen = useDescriptorsStore(
+			(store) => store.derivations.isTopMostScreen,
+		);
+		const relationships = useCurrentScreenRelationships();
+		const relationshipAncestorGestures =
+			useOptionalScreenGestureStore(
+				relationships.parentScreenKey,
+				(store) => store.relationshipGestureSources,
+			) ?? EMPTY_GESTURE_SOURCES;
+		const ancestorGestures = isTopMostScreen
+			? relationshipAncestorGestures
+			: EMPTY_GESTURE_SOURCES;
+		const gestureConfig = useScreenGestureConfig(ancestorGestures);
+		const scrollState = ScrollStore.getValue(currentScreenKey, "coordination");
+		const childDirectionClaims =
+			useSharedValue<DirectionClaimMap>(NO_DIRECTION_CLAIMS);
+		const gestureCompositionOwner =
+			useSharedValue<GestureCompositionOwner>(null);
+		const panGesture = useBuildPanGesture({
+			scrollState,
+			gestureConfig,
+			childDirectionClaims,
+			gestureCompositionOwner,
+		});
+		const pinchGesture = useBuildPinchGesture({
+			gestureConfig,
+			gestureCompositionOwner,
+		});
+		const detectorGesture = useMemo(
+			() => Gesture.Simultaneous(panGesture, pinchGesture),
+			[panGesture, pinchGesture],
+		);
+		const source = useMemo<ScreenGestureSource>(
+			() => ({
+				routeKey: currentScreenKey,
+				detectorGesture,
+				panGesture,
+				pinchGesture,
 				scrollState,
-				gestureConfig,
+				claimedDirections: gestureConfig.participation.claimedDirections,
 				childDirectionClaims,
-				gestureCompositionOwner,
-			});
-
-			const pinchGesture = useBuildPinchGesture({
-				gestureConfig,
-				gestureCompositionOwner,
-			});
-
-			const detectorGesture = useMemo(
-				() => Gesture.Simultaneous(panGesture, pinchGesture),
-				[panGesture, pinchGesture],
-			);
-
-			const value = useMemo<GestureContextType>(
-				() => ({
-					routeKey: currentScreenKey,
-					detectorGesture,
-					panGesture,
-					pinchGesture,
-					scrollState,
-					gestureContext,
-					claimedDirections: gestureConfig.participation.claimedDirections,
-					childDirectionClaims,
-				}),
-				[
-					currentScreenKey,
-					detectorGesture,
-					panGesture,
-					pinchGesture,
-					scrollState,
-					gestureContext,
-					gestureConfig.participation.claimedDirections,
-					childDirectionClaims,
-				],
-			);
-
-			const content = useMemo(
-				() => (
-					<Fragment>
-						<GestureOwnershipBridge />
-						{children}
-					</Fragment>
-				),
-				[children],
-			);
+			}),
+			[
+				currentScreenKey,
+				detectorGesture,
+				panGesture,
+				pinchGesture,
+				scrollState,
+				gestureConfig.participation.claimedDirections,
+				childDirectionClaims,
+			],
+		);
+		const relationshipGestureSources = useMemo(
+			() => [source, ...ancestorGestures],
+			[source, ancestorGestures],
+		);
+		const value = useMemo<ScreenGestureStoreValue>(
+			() => ({
+				...source,
+				ancestorGestures,
+				relationshipGestureSources,
+			}),
+			[source, ancestorGestures, relationshipGestureSources],
+		);
+		const content = useMemo(
+			() => (
+				<Fragment>
+					<GestureOwnershipBridge />
+					{children}
+				</Fragment>
+			),
+			[children],
+		);
 
-			return {
-				value,
-				children: content,
-			};
-		},
-	);
+		return {
+			key: currentScreenKey,
+			value,
+			children: content,
+		};
+	},
+);

package/src/shared/providers/screen/gestures/hooks/use-screen-gesture-config.ts

@@ -2,10 +2,10 @@ import { usePreventRemoveContext } from "@react-navigation/native";
 import { useMemo } from "react";
 import { useDescriptorsStore } from "../../descriptors";
 import { resolveScreenGestureConfig } from "../shared/policy";
-import type { GestureContextType, ScreenGestureConfig } from "../types";
+import type { ScreenGestureConfig, ScreenGestureSource } from "../types";
 
 export function useScreenGestureConfig(
-	gestureContext: GestureContextType | null,
+	ancestorGestures: readonly ScreenGestureSource[],
 ): ScreenGestureConfig {
 	const options = useDescriptorsStore((store) => store.options);
 	const isFirstKey = useDescriptorsStore(
@@ -23,9 +23,9 @@ export function useScreenGestureConfig(
 			resolveScreenGestureConfig({
 				options,
 				isFirstKey,
-				gestureContext,
+				ancestorGestures,
 				isRemovePrevented,
 			}),
-		[isFirstKey, options, gestureContext, isRemovePrevented],
+		[isFirstKey, options, ancestorGestures, isRemovePrevented],
 	);
 }

package/src/shared/providers/screen/gestures/hooks/use-screen-gesture.ts

@@ -2,8 +2,7 @@ import {
 	type ChainTarget,
 	resolveChainTarget,
 } from "../../../../utils/resolve-chain-target";
-import { useGestureStore } from "../gestures.provider";
-import { walkGestureAncestors } from "../shared/ancestors";
+import { useOptionalScreenGestureStore } from "../gestures.provider";
 
 export type ScreenGestureTarget = ChainTarget;
 
@@ -21,13 +20,13 @@ export type ScreenGestureTarget = ChainTarget;
  * ```
  */
 export const useScreenGesture = (target?: ScreenGestureTarget) => {
-	const ctx = useGestureStore();
+	const ctx = useOptionalScreenGestureStore();
 
 	return (
 		resolveChainTarget({
 			target,
 			self: ctx,
-			ancestors: walkGestureAncestors(ctx?.gestureContext),
+			ancestors: ctx?.ancestorGestures ?? [],
 		})?.panGesture ?? null
 	);
 };

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

@@ -1,6 +1,7 @@
 export {
 	ScreenGestureProvider,
-	useGestureStore,
+	useOptionalScreenGestureStore,
+	useScreenGestureStore,
 } from "./gestures.provider";
 export type {
 	DirectionClaim,