react-native-screen-transitions 3.10.0 → 3.11.0

package/src/shared/components/screen-lifecycle/hooks/use-close-transition-intent.ts

@@ -3,10 +3,10 @@ import { useLayoutEffect, useMemo, useRef } from "react";
 import useStableCallback from "../../../hooks/use-stable-callback";
 import {
 	type BaseDescriptor,
-	useDescriptorDerivations,
+	useDescriptorsStore,
 } from "../../../providers/screen/descriptors";
-import { useBlankStackContext } from "../../../providers/stack/blank-stack.provider";
-import { useStackCoreContext } from "../../../providers/stack/core.provider";
+import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
+import { useStackCoreStore } from "../../../providers/stack/core.provider";
 import { GestureStore } from "../../../stores/gesture.store";
 import {
 	LifecycleTransitionRequestKind,
@@ -27,10 +27,15 @@ const useBlankStackClose = ({
 	requestLifecycleTransition,
 	resetStores,
 }: CloseHookParams) => {
-	const { handleCloseRoute } = useBlankStackContext();
+	const handleCloseRoute = useBlankStackStore(
+		(store) => store?.handleCloseRoute,
+	);
+	const isClosing = useBlankStackStore(
+		(store) => store?.scenesByKey[current.route.key]?.activity === "closing",
+	);
 
 	useLayoutEffect(() => {
-		if (current.activity !== "closing") {
+		if (!isClosing) {
 			return;
 		}
 
@@ -38,10 +43,13 @@ const useBlankStackClose = ({
 			LifecycleTransitionRequestKind.BlankStackClose,
 			0,
 		);
-	}, [current.activity, requestLifecycleTransition]);
+	}, [isClosing, requestLifecycleTransition]);
 
 	const handleBlankStackCloseEnd = useStableCallback((finished: boolean) => {
 		if (!finished) return;
+		if (!handleCloseRoute) {
+			throw new Error("Blank stack close handler was not found.");
+		}
 		handleCloseRoute({ route: current.route });
 		requestAnimationFrame(() => {
 			resetStores();
@@ -59,7 +67,9 @@ const useNativeStackClose = ({
 	requestLifecycleTransition,
 	resetStores,
 }: CloseHookParams) => {
-	const { parentScreenKey } = useDescriptorDerivations();
+	const parentScreenKey = useDescriptorsStore(
+		(store) => store.derivations.parentScreenKey,
+	);
 	const pendingActionRef = useRef<any>(null);
 
 	const nearestAncestorDismissing = useMemo(() => {
@@ -121,8 +131,8 @@ export function useCloseTransitionIntent(
 	handleNativeCloseEnd?: (finished: boolean) => void;
 } {
 	const routeKey = current.route.key;
-	const { flags } = useStackCoreContext();
-	const isNativeStack = flags.STACK_TYPE === StackType.NATIVE;
+	const stackType = useStackCoreStore((store) => store.flags.STACK_TYPE);
+	const isNativeStack = stackType === StackType.NATIVE;
 	const { requestLifecycleTransition } = system.actions;
 
 	const resetStores = useStableCallback(() => {

package/src/shared/components/screen-lifecycle/hooks/use-open-transition-intent.ts

@@ -1,7 +1,7 @@
 import { useLayoutEffect } from "react";
 import {
 	type BaseDescriptor,
-	useDescriptorDerivations,
+	useDescriptorsStore,
 } from "../../../providers/screen/descriptors";
 import type { AnimationStoreMap } from "../../../stores/animation.store";
 import {
@@ -41,7 +41,9 @@ export function useOpenTransitionIntent(
 	animations: AnimationStoreMap,
 	system: SystemStoreMap,
 ) {
-	const { isFirstKey } = useDescriptorDerivations();
+	const isFirstKey = useDescriptorsStore(
+		(store) => store.derivations.isFirstKey,
+	);
 	const { requestLifecycleTransition } = system.actions;
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: Must only run once on mount
@@ -78,6 +80,7 @@ export function useOpenTransitionIntent(
 			return;
 		}
 
+		animations.entering.set(1);
 		requestLifecycleTransition(
 			LifecycleTransitionRequestKind.Open,
 			initialProgress ?? 1,

package/src/shared/components/screen-lifecycle/hooks/use-transition-start-controller.ts

@@ -1,6 +1,7 @@
 import { useAnimatedReaction } from "react-native-reanimated";
 import type { BaseDescriptor } from "../../../providers/screen/descriptors";
 import type { AnimationStoreMap } from "../../../stores/animation.store";
+import { GestureStore } from "../../../stores/gesture.store";
 import {
 	LifecycleTransitionRequestKind,
 	type SystemStoreMap,
@@ -29,6 +30,7 @@ export const useTransitionStartController = ({
 	} = system;
 	const { clearLifecycleTransitionRequest } = system.actions;
 	const transitionSpec = current.options.transitionSpec;
+	const isDragging = GestureStore.getValue(current.route.key, "dragging");
 
 	useAnimatedReaction(
 		() => {
@@ -61,10 +63,14 @@ export const useTransitionStartController = ({
 			animateToProgress({
 				target,
 				spec: transitionSpec,
+				emitWillAnimate:
+					kind !== LifecycleTransitionRequestKind.Open ||
+					!animations.entering.get(),
 				animations,
 				targetProgress,
 				animationProgress,
 				onAnimationFinish,
+				isDragging,
 			});
 
 			clearLifecycleTransitionRequest();

package/src/shared/components/screen-lifecycle/index.tsx

@@ -1,4 +1,4 @@
-import { useDescriptors } from "../../providers/screen/descriptors";
+import { useDescriptorsStore } from "../../providers/screen/descriptors";
 import { AnimationStore } from "../../stores/animation.store";
 import { SystemStore } from "../../stores/system.store";
 import { useScreenHistory } from "./hooks/history/use-screen-history";
@@ -15,7 +15,8 @@ interface Props {
  * Reads current/previous descriptors from DescriptorsProvider context.
  */
 export const ScreenLifecycle = ({ children }: Props) => {
-	const { current, previous } = useDescriptors();
+	const current = useDescriptorsStore((store) => store.current);
+	const previous = useDescriptorsStore((store) => store.previous);
 
 	const animations = AnimationStore.getBag(current.route.key);
 	const system = SystemStore.getBag(current.route.key);

package/src/shared/configs/presets.ts

@@ -237,10 +237,10 @@ export const ElasticCard = (
 };
 
 export const SharedIGImage = ({
-	sharedBoundTag,
+	id,
 	...config
 }: Partial<ScreenTransitionConfig> & {
-	sharedBoundTag: string;
+	id: string;
 }): ScreenTransitionConfig => {
 	return {
 		gestureEnabled: true,
@@ -278,11 +278,11 @@ export const SharedIGImage = ({
 
 			const navigationStyles =
 				bounds({
-					id: sharedBoundTag,
+					id,
 				}).navigation.zoom() ?? {};
 
 			// Extract raw style values from bounds result (legacy format)
-			const sourceStyle = navigationStyles[sharedBoundTag] as
+			const sourceStyle = navigationStyles[id] as
 				| Record<string, unknown>
 				| undefined;
 			const containerStyle = navigationStyles[
@@ -347,7 +347,7 @@ export const SharedIGImage = ({
 						pointerEvents: current.gesture.dismissing ? "none" : "auto",
 					},
 				},
-				[sharedBoundTag]: {
+				[id]: {
 					style: {
 						...(sourceStyle ?? {}),
 						transform: [
@@ -384,10 +384,10 @@ export const SharedIGImage = ({
 };
 
 export const SharedAppleMusic = ({
-	sharedBoundTag,
+	id,
 	...config
 }: Partial<ScreenTransitionConfig> & {
-	sharedBoundTag: string;
+	id: string;
 }): ScreenTransitionConfig => {
 	return {
 		enableTransitions: true,
@@ -434,7 +434,7 @@ export const SharedAppleMusic = ({
 			const dragXScale = interpolate(normX, [0, 1], xScaleOuput);
 			const dragYScale = interpolate(normY, [0, 1], yScaleOuput);
 
-			const boundValues = bounds({ id: sharedBoundTag }).values({
+			const boundValues = bounds({ id }).values({
 				method: focused ? "content" : "transform",
 				anchor: "top",
 				scaleMode: "uniform",
@@ -453,7 +453,7 @@ export const SharedAppleMusic = ({
 			 * ===============================
 			 */
 			if (focused) {
-				const maskedValues = bounds({ id: sharedBoundTag }).values({
+				const maskedValues = bounds({ id }).values({
 					space: "absolute",
 					method: "size",
 					target: "fullscreen",
@@ -545,7 +545,7 @@ export const SharedAppleMusic = ({
 			const contentScale = interpolate(progress, [1, 2], [1, 0.9], "clamp");
 
 			return {
-				[sharedBoundTag]: {
+				[id]: {
 					style: {
 						transform: [
 							{ translateX: dragX || 0 },
@@ -593,10 +593,10 @@ export const SharedAppleMusic = ({
 };
 
 export const SharedXImage = ({
-	sharedBoundTag,
+	id,
 	...config
 }: Partial<ScreenTransitionConfig> & {
-	sharedBoundTag: string;
+	id: string;
 }): ScreenTransitionConfig => {
 	return {
 		//@ts-expect-error - Should not lead to any issues
@@ -616,7 +616,7 @@ export const SharedXImage = ({
 
 			const navigationStyles =
 				bounds({
-					id: sharedBoundTag,
+					id,
 				}).navigation.zoom() ?? {};
 			const maskStyle = navigationStyles[NAVIGATION_MASK_ELEMENT_STYLE_ID] as
 				| Record<string, unknown>

package/src/shared/constants.ts

@@ -71,6 +71,7 @@ const DEFAULT_GESTURE_VALUES = {
 	dragging: 0,
 	settling: 0,
 	active: null,
+	initiator: "none",
 	direction: null,
 
 	// Deprecated aliases

package/src/shared/hooks/navigation/use-navigation-helpers.ts

@@ -4,28 +4,29 @@ import { useDescriptorsStore } from "../../providers/screen/descriptors";
 import { useStack } from "./use-stack";
 
 export function useNavigationHelpers() {
-	const current = useDescriptorsStore((store) => store.descriptors.current);
+	const route = useDescriptorsStore((store) => store.current.route);
+	const navigation = useDescriptorsStore((store) => store.current.navigation);
 	const requestStackDismiss = useStack((stack) => stack.requestDismiss);
 
 	const requestDismiss = useCallback((): boolean => {
-		return requestStackDismiss?.({ route: current.route }) ?? false;
-	}, [current.route, requestStackDismiss]);
+		return requestStackDismiss?.({ route }) ?? false;
+	}, [route, requestStackDismiss]);
 
 	const dismissScreen = useCallback((): boolean => {
-		const state = current.navigation.getState();
+		const state = navigation.getState();
 		const routeIndex = state.routes.findIndex(
-			(route) => route.key === current.route.key,
+			(stateRoute) => stateRoute.key === route.key,
 		);
 		const routeStillPresent = routeIndex !== -1;
 		if (!routeStillPresent || routeIndex === 0) return false;
 
-		current.navigation.dispatch({
+		navigation.dispatch({
 			...StackActions.pop(),
-			source: current.route.key,
+			source: route.key,
 			target: state.key,
 		});
 		return true;
-	}, [current]);
+	}, [navigation, route.key]);
 
 	return { dismissScreen, requestDismiss };
 }

package/src/shared/hooks/navigation/use-screen-state.ts

@@ -3,7 +3,7 @@ import { useCallback, useMemo } from "react";
 import { snapDescriptorToIndex } from "../../animation/snap-to";
 import {
 	type BaseDescriptor,
-	useDescriptors,
+	useDescriptorsStore,
 } from "../../providers/screen/descriptors";
 import type { ScreenTransitionConfig } from "../../types/screen.types";
 import type { BaseStackNavigation } from "../../types/stack.types";
@@ -65,7 +65,9 @@ export function useScreenState<
 >(): ScreenState<TNavigation> {
 	const { routes, scenes, routeKeys, focusedIndex } =
 		useStack<StackContextValue>();
-	const { current } = useDescriptors<BaseDescriptor>();
+	const current = useDescriptorsStore(
+		(store) => store.current,
+	) as BaseDescriptor;
 
 	const index = useMemo(
 		() => routeKeys.indexOf(current.route.key),

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

@@ -1,10 +1,4 @@
-import {
-	type ReactNode,
-	useCallback,
-	useContext,
-	useLayoutEffect,
-	useMemo,
-} from "react";
+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";
@@ -34,178 +28,181 @@ export type ScreenAnimationContextResult = {
 	value: ScreenAnimationContextValue;
 };
 
-export const {
-	ScreenAnimationProvider,
-	ScreenAnimationContext,
-	useScreenAnimationContext,
-} = createProvider("ScreenAnimation", {
-	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,
-		screenInterpolatorPropsRevision,
-		selectedInterpolatorOptions,
-		nextInterpolator,
-		currentInterpolator,
-	} = useScreenAnimationPipeline();
-
-	const selfScreenAnimationSource = useMemo<ScreenAnimationSource>(
-		() => ({
-			screenInterpolatorProps,
-			screenInterpolatorPropsRevision,
-		}),
-		[screenInterpolatorProps, screenInterpolatorPropsRevision],
-	);
-
-	const selfScreenAnimationTransitionSource =
-		useMemo<ScreenAnimationTransitionSource>(
-			() => ({
-				...selfScreenAnimationSource,
-				boundsAccessor: createBoundsAccessor(() => {
-					"worklet";
-					return selfScreenAnimationSource.screenInterpolatorProps.get();
+export const { ScreenAnimationProvider, useScreenAnimationStore } =
+	createProvider("ScreenAnimation", {
+		guarded: 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 {
+				screenInterpolatorProps,
+				screenInterpolatorPropsRevision,
+				selectedInterpolatorOptions,
+				nextInterpolator,
+				currentInterpolator,
+			} = useScreenAnimationPipeline();
+
+			const selfScreenAnimationSource = useMemo<ScreenAnimationSource>(
+				() => ({
+					screenInterpolatorProps,
+					screenInterpolatorPropsRevision,
 				}),
-			}),
-			[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,
+				[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;
+							},
 						);
 
-						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 () => {
-					descendantScreenAnimationSources.modify(
-						<T extends ScreenAnimationDescendantSources["value"]>(
-							currentSources: T,
-						): T => {
-							"worklet";
-							return currentSources.filter(
-								(currentSource) => currentSource.source !== source,
-							) as T;
-						},
-					);
+					for (const cleanup of cleanups) {
+						cleanup();
+					}
 				};
-			},
-			[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,
-			screenInterpolatorPropsRevision,
-			selectedInterpolatorOptions,
-			nextInterpolator,
-			currentInterpolator,
-			ancestorScreenAnimationSources,
-			descendantScreenAnimationSources,
-			registerDescendantScreenAnimationSource,
-			ancestorDescendantScreenAnimationRegistrars,
+			}, [
+				ancestorDescendantScreenAnimationRegistrars,
+				selfScreenAnimationTransitionSource,
+			]);
+
+			return {
+				value: {
+					screenInterpolatorProps,
+					screenInterpolatorPropsRevision,
+					selectedInterpolatorOptions,
+					nextInterpolator,
+					currentInterpolator,
+					ancestorScreenAnimationSources,
+					descendantScreenAnimationSources,
+					registerDescendantScreenAnimationSource,
+					ancestorDescendantScreenAnimationRegistrars,
+				},
+			};
 		},
-	};
-});
+	);

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

@@ -1,9 +1,11 @@
 import { useMemo } from "react";
 import { createBoundsAccessor } from "../../../../../utils/bounds";
-import { useScreenAnimationContext } from "../../animation.provider";
+import { useScreenAnimationStore } from "../../animation.provider";
 
 export const useBuildBoundsAccessor = () => {
-	const { screenInterpolatorProps } = useScreenAnimationContext();
+	const screenInterpolatorProps = useScreenAnimationStore(
+		(store) => store.screenInterpolatorProps,
+	);
 	return useMemo(() => {
 		return createBoundsAccessor(() => {
 			"worklet";