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

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

@@ -2,6 +2,7 @@ import { type ReactNode, useCallback, useLayoutEffect, useMemo } from "react";
 import { useSharedValue } from "react-native-reanimated";
 import { createBoundsAccessor } from "../../../utils/bounds";
 import createProvider from "../../../utils/create-provider";
+import { useDescriptorsStore } from "../descriptors";
 import { useScreenAnimationPipeline } from "./helpers/pipeline";
 import type {
 	RegisterScreenAnimationDescendant,
@@ -25,33 +26,49 @@ export type ScreenAnimationContextValue = ReturnType<
 };
 
 export type ScreenAnimationContextResult = {
+	key: string;
 	value: ScreenAnimationContextValue;
 };
 
 export const { ScreenAnimationProvider, useScreenAnimationStore } =
 	createProvider("ScreenAnimation", {
 		guarded: true,
+		global: true,
 	})<Props, ScreenAnimationContextValue>(
 		(_props, { useParentStore }): ScreenAnimationContextResult => {
-			const parentContext = useParentStore();
-			const parentScreenInterpolatorProps =
-				parentContext?.screenInterpolatorProps;
-			const parentScreenInterpolatorPropsRevision =
-				parentContext?.screenInterpolatorPropsRevision;
-			const parentAncestorScreenAnimationSources =
-				parentContext?.ancestorScreenAnimationSources;
-			const parentRegisterDescendantScreenAnimationSource =
-				parentContext?.registerDescendantScreenAnimationSource;
-			const parentAncestorDescendantScreenAnimationRegistrars =
-				parentContext?.ancestorDescendantScreenAnimationRegistrars;
+			const currentScreenKey = useDescriptorsStore(
+				(store) => store.derivations.currentScreenKey,
+			);
+			const parentScreenInterpolatorProps = useParentStore(
+				(parentContext) => parentContext?.screenInterpolatorProps,
+			);
+			const parentScreenInterpolatorPropsRevision = useParentStore(
+				(parentContext) => parentContext?.screenInterpolatorPropsRevision,
+			);
+			const parentAncestorScreenAnimationSources = useParentStore(
+				(parentContext) => parentContext?.ancestorScreenAnimationSources,
+			);
+			const parentRegisterDescendantScreenAnimationSource = useParentStore(
+				(parentContext) =>
+					parentContext?.registerDescendantScreenAnimationSource,
+			);
+			const parentAncestorDescendantScreenAnimationRegistrars = useParentStore(
+				(parentContext) =>
+					parentContext?.ancestorDescendantScreenAnimationRegistrars,
+			);
+
+			const parentInterpolatorUpdatesEnabled = useParentStore(
+				(parentContext) => parentContext?.interpolatorUpdatesEnabled,
+			);
 
 			const {
+				interpolatorUpdatesEnabled,
 				screenInterpolatorProps,
 				screenInterpolatorPropsRevision,
 				selectedInterpolatorOptions,
 				nextInterpolator,
 				currentInterpolator,
-			} = useScreenAnimationPipeline();
+			} = useScreenAnimationPipeline(parentInterpolatorUpdatesEnabled ?? true);
 
 			const selfScreenAnimationSource = useMemo<ScreenAnimationSource>(
 				() => ({
@@ -192,7 +209,9 @@ export const { ScreenAnimationProvider, useScreenAnimationStore } =
 			]);
 
 			return {
+				key: currentScreenKey,
 				value: {
+					interpolatorUpdatesEnabled,
 					screenInterpolatorProps,
 					screenInterpolatorPropsRevision,
 					selectedInterpolatorOptions,

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

@@ -4,7 +4,7 @@ import type {
 	ScreenTransitionTarget,
 } from "../../../../../types/animation.types";
 import { createBoundsAccessor } from "../../../../../utils/bounds";
-import { useScreenAnimationStore } from "../../animation.provider";
+import type { ScreenAnimationContextValue } from "../../animation.provider";
 import type {
 	ScreenAnimationDescendantSources,
 	ScreenAnimationSource,
@@ -15,6 +15,14 @@ type TransitionSourceIndex = number;
 
 export type TransitionAccessorSource = ScreenAnimationTransitionSource;
 
+type TransitionAccessorStore = Pick<
+	ScreenAnimationContextValue,
+	| "screenInterpolatorProps"
+	| "screenInterpolatorPropsRevision"
+	| "ancestorScreenAnimationSources"
+	| "descendantScreenAnimationSources"
+>;
+
 const resolveTargetIndex = (
 	target: ScreenTransitionTarget | undefined,
 	currentIndex: TransitionSourceIndex,
@@ -118,14 +126,12 @@ const buildSourceBoundsAccessor = (source: ScreenAnimationSource) => {
 	});
 };
 
-export const useBuildTransitionAccessor = () => {
-	const {
-		screenInterpolatorProps,
-		screenInterpolatorPropsRevision,
-		ancestorScreenAnimationSources,
-		descendantScreenAnimationSources,
-	} = useScreenAnimationStore();
-
+export const useBuildTransitionAccessor = ({
+	screenInterpolatorProps,
+	screenInterpolatorPropsRevision,
+	ancestorScreenAnimationSources,
+	descendantScreenAnimationSources,
+}: TransitionAccessorStore) => {
 	return useMemo(() => {
 		const selfSource = {
 			screenInterpolatorProps,

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/interpolator-participation.ts

@@ -0,0 +1,6 @@
+import type { StackSceneActivity } from "../../../../types/stack.types";
+
+export const shouldUpdateScreenInterpolator = (
+	activity: StackSceneActivity,
+	updateInactiveInterpolators: boolean,
+) => activity !== "inactive" || updateInactiveInterpolators;

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

@@ -23,6 +23,7 @@ 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 { useBuildTransitionState } from "./use-build-transition-state";
@@ -34,6 +35,7 @@ export type ScreenInterpolatorFrame = Omit<
 >;
 
 interface ScreenAnimationPipeline {
+	interpolatorUpdatesEnabled: boolean;
 	screenInterpolatorProps: SharedValue<ScreenInterpolatorFrame>;
 	screenInterpolatorPropsRevision: DerivedValue<number>;
 	selectedInterpolatorOptions: SharedValue<SelectedInterpolatorOptions>;
@@ -273,7 +275,9 @@ const hydrateInterpolatorFrame = <TFrame extends ScreenInterpolatorFrame>({
 	return frame;
 };
 
-export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
+export function useScreenAnimationPipeline(
+	parentInterpolatorUpdatesEnabled = true,
+): ScreenAnimationPipeline {
 	const transitionsAlwaysOn = useStack(
 		(stack) => stack.flags.TRANSITIONS_ALWAYS_ON,
 	);
@@ -283,6 +287,16 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 	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);
@@ -312,42 +326,50 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 		});
 
 	const propsRevisionState = useSharedValue({ value: 0 });
-	const screenInterpolatorPropsRevision = useDerivedValue<number>(() => {
-		"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;
-	});
+	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 nextInterpolator = nextDescriptor?.options.screenStyleInterpolator;
 	const currentInterpolator = currDescriptor?.options.screenStyleInterpolator;
 
 	return {
+		interpolatorUpdatesEnabled,
 		screenInterpolatorProps,
 		screenInterpolatorPropsRevision,
 		selectedInterpolatorOptions,

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

@@ -1,3 +1,4 @@
+import { useRoute } from "@react-navigation/native";
 import { type DerivedValue, useDerivedValue } from "react-native-reanimated";
 import type {
 	ScreenInterpolationProps,
@@ -33,12 +34,21 @@ export function useScreenAnimation(
 ):
 	| DerivedValue<ScreenInterpolationProps>
 	| DerivedValue<ScreenInterpolationProps | null> {
+	const route = useRoute();
+	const screenAnimationStore = useScreenAnimationStore(route.key);
+
+	if (!screenAnimationStore) {
+		throw new Error(
+			`ScreenAnimation store for route "${route.key}" was not found`,
+		);
+	}
+
 	const {
 		screenInterpolatorPropsRevision,
 		ancestorScreenAnimationSources,
 		descendantScreenAnimationSources,
-	} = useScreenAnimationStore();
-	const transition = useBuildTransitionAccessor();
+	} = screenAnimationStore;
+	const transition = useBuildTransitionAccessor(screenAnimationStore);
 	const transitionTarget = normalizeScreenAnimationTarget(
 		target,
 		ancestorScreenAnimationSources.length,

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

@@ -1,12 +1,18 @@
 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 {
+	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";
+import { deriveStructuralAncestorKeys } from "./helpers/derive-structural-ancestor-keys";
 
 /**
  * Base descriptor interface - minimal contract for all stack types.
@@ -45,7 +51,19 @@ export const { DescriptorsProvider, useDescriptorsStore } = createProvider(
 	"Descriptors",
 	{ guarded: true },
 )<DescriptorsProviderProps, DescriptorStoreValue<BaseDescriptor>>(
-	({ previous, current, next, routeKey, children }) => {
+	({ previous, current, next, routeKey, children }, { useParentStore }) => {
+		const parentScreenKey = useParentStore(
+			(store) => store?.derivations.currentScreenKey,
+		);
+		const parentAncestorKeys = useParentStore(
+			(store) => store?.derivations.ancestorKeys,
+		);
+		const parentTransitionSourcePairKey = useParentStore(
+			(store) => store?.derivations.transitionSourcePairKey,
+		);
+		const parentTransitionDestinationScreenKey = useParentStore(
+			(store) => store?.derivations.transitionDestinationScreenKey,
+		);
 		const blankStackCurrent = useBlankStackStore((store) =>
 			routeKey ? store?.scenesByKey[routeKey]?.descriptor : undefined,
 		);
@@ -85,20 +103,68 @@ export const { DescriptorsProvider, useDescriptorsStore } = createProvider(
 		);
 
 		const ancestorKeys = useMemo(
-			() => getAncestorKeys(resolvedCurrent),
-			[resolvedCurrent],
+			() =>
+				deriveStructuralAncestorKeys(
+					parentScreenKey
+						? {
+								currentScreenKey: parentScreenKey,
+								ancestorKeys: parentAncestorKeys ?? [],
+							}
+						: null,
+				),
+			[parentAncestorKeys, parentScreenKey],
 		);
 
-		const derivations = useMemo(
-			() =>
-				deriveDescriptorDerivations({
-					previous: resolvedPrevious,
-					current: resolvedCurrent,
-					next: resolvedNext,
-					ancestorKeys,
-				}),
-			[resolvedPrevious, resolvedCurrent, resolvedNext, ancestorKeys],
+		const derivations = useMemo(() => {
+			const localDerivations = deriveDescriptorDerivations({
+				previous: resolvedPrevious,
+				current: resolvedCurrent,
+				next: resolvedNext,
+				ancestorKeys,
+			});
+
+			return {
+				...localDerivations,
+				transitionSourcePairKey:
+					localDerivations.sourcePairKey ?? parentTransitionSourcePairKey,
+				transitionDestinationScreenKey:
+					localDerivations.nextScreenKey ??
+					parentTransitionDestinationScreenKey,
+			};
+		}, [
+			resolvedPrevious,
+			resolvedCurrent,
+			resolvedNext,
+			ancestorKeys,
+			parentTransitionSourcePairKey,
+			parentTransitionDestinationScreenKey,
+		]);
+		const animationProgress = SystemStore.getValue(
+			derivations.currentScreenKey,
+			"animationProgress",
 		);
+		const pendingLifecycleStartBlockCount = SystemStore.getValue(
+			derivations.currentScreenKey,
+			"pendingLifecycleStartBlockCount",
+		);
+
+		useLayoutEffect(() => {
+			runOnUI(registerScreen)({
+				screenKey: derivations.currentScreenKey,
+				parentScreenKey: derivations.parentScreenKey,
+				animationProgress,
+				pendingLifecycleStartBlockCount,
+			});
+
+			return () => {
+				runOnUI(unregisterScreen)(derivations.currentScreenKey);
+			};
+		}, [
+			animationProgress,
+			derivations.currentScreenKey,
+			derivations.parentScreenKey,
+			pendingLifecycleStartBlockCount,
+		]);
 
 		return {
 			value: {

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

@@ -7,6 +7,10 @@ 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;
@@ -52,6 +56,8 @@ export function deriveDescriptorDerivations({
 		currentScreenKey,
 		nextScreenKey,
 		sourcePairKey,
+		transitionSourcePairKey: sourcePairKey,
+		transitionDestinationScreenKey: nextScreenKey,
 		destinationPairKey,
 		parentScreenKey: ancestorKeys[0],
 		isFirstKey,

package/src/shared/providers/screen/descriptors/helpers/derive-structural-ancestor-keys.ts

@@ -0,0 +1,13 @@
+import type { DescriptorDerivationsContextValue } from "../descriptors.provider";
+
+type ParentDescriptorState = Pick<
+	DescriptorDerivationsContextValue,
+	"currentScreenKey" | "ancestorKeys"
+>;
+
+export const deriveStructuralAncestorKeys = (
+	parent: ParentDescriptorState | null,
+): string[] => {
+	if (!parent) return [];
+	return [parent.currentScreenKey, ...parent.ancestorKeys];
+};

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

@@ -1,11 +1,11 @@
-import { useMemo } from "react";
+import { Fragment, useMemo } from "react";
 import { Gesture } from "react-native-gesture-handler";
 import { useSharedValue } from "react-native-reanimated";
 import { ScrollStore } from "../../../stores/scroll.store";
 import createProvider from "../../../utils/create-provider";
 import { useDescriptorsStore } from "../descriptors";
 import { useScreenGestureConfig } from "./hooks/use-screen-gesture-config";
-import { useWalkUpAndRegisterShadowingClaims } from "./ownership/use-walk-up-and-register-shadowing-claims";
+import { GestureOwnershipBridge } from "./ownership/gesture-ownership-bridge";
 import { useBuildPanGesture } from "./pan/use-build-pan-gesture";
 import { useBuildPinchGesture } from "./pinch/use-build-pinch-gesture";
 import {
@@ -28,11 +28,16 @@ export const { ScreenGestureProvider, useScreenGestureStore: useGestureStore } =
 			{ children },
 			{ useParentStore },
 		): { value: GestureContextType; children: React.ReactNode } => {
-			const gestureContext = useParentStore();
-			const gestureConfig = useScreenGestureConfig();
 			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);
 
 			const scrollState = ScrollStore.getValue(
 				currentScreenKey,
@@ -89,13 +94,19 @@ export const { ScreenGestureProvider, useScreenGestureStore: useGestureStore } =
 				],
 			);
 
-			useWalkUpAndRegisterShadowingClaims(
-				gestureConfig.participation.claimedDirections,
+			const content = useMemo(
+				() => (
+					<Fragment>
+						<GestureOwnershipBridge />
+						{children}
+					</Fragment>
+				),
+				[children],
 			);
 
 			return {
 				value,
-				children,
+				children: content,
 			};
 		},
 	);

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

@@ -1,12 +1,12 @@
 import { usePreventRemoveContext } from "@react-navigation/native";
 import { useMemo } from "react";
 import { useDescriptorsStore } from "../../descriptors";
-import { useGestureStore } from "../gestures.provider";
 import { resolveScreenGestureConfig } from "../shared/policy";
-import type { ScreenGestureConfig } from "../types";
+import type { GestureContextType, ScreenGestureConfig } from "../types";
 
-export function useScreenGestureConfig(): ScreenGestureConfig {
-	const gestureContext = useGestureStore();
+export function useScreenGestureConfig(
+	gestureContext: GestureContextType | null,
+): ScreenGestureConfig {
 	const options = useDescriptorsStore((store) => store.options);
 	const isFirstKey = useDescriptorsStore(
 		(store) => store.derivations.isFirstKey,