react-native-screen-transitions 3.0.0-rc.1 → 3.0.0-rc.3

package/src/shared/configs/presets.ts

@@ -13,6 +13,7 @@ export const SlideFromTop = (
 	config: Partial<ScreenTransitionConfig> = {},
 ): ScreenTransitionConfig => {
 	return {
+		//@ts-expect-error - Should not lead to any issues
 		enableTransitions: true,
 		gestureEnabled: true,
 		gestureDirection: "vertical-inverted",
@@ -45,6 +46,7 @@ export const ZoomIn = (
 	config: Partial<ScreenTransitionConfig> = {},
 ): ScreenTransitionConfig => {
 	return {
+		//@ts-expect-error - Should not lead to any issues
 		enableTransitions: true,
 		gestureEnabled: false,
 		screenStyleInterpolator: ({ progress }) => {
@@ -83,6 +85,7 @@ export const SlideFromBottom = (
 	config: Partial<ScreenTransitionConfig> = {},
 ): ScreenTransitionConfig => {
 	return {
+		//@ts-expect-error - Should not lead to any issues
 		enableTransitions: true,
 		gestureEnabled: true,
 		gestureDirection: "vertical",
@@ -114,6 +117,7 @@ export const DraggableCard = (
 	config: Partial<ScreenTransitionConfig> = {},
 ): ScreenTransitionConfig => {
 	return {
+		//@ts-expect-error - Should not lead to any issues
 		enableTransitions: true,
 		gestureEnabled: true,
 		gestureDirection: ["horizontal", "vertical"],
@@ -159,6 +163,7 @@ export const ElasticCard = (
 	} = { elasticFactor: 0.5 },
 ): ScreenTransitionConfig => {
 	return {
+		//@ts-expect-error - Should not lead to any issues
 		enableTransitions: true,
 		gestureEnabled: true,
 		gestureDirection: "bidirectional",
@@ -535,7 +540,7 @@ export const SharedAppleMusic = ({
 				damping: 500,
 				mass: 3,
 				overshootClamping: true,
-				//@ts-expect-error
+				//@ts-expect-error - Should not lead to any issues
 				restSpeedThreshold: 0.02,
 			},
 			close: {
@@ -543,7 +548,7 @@ export const SharedAppleMusic = ({
 				damping: 60,
 				mass: 4,
 				overshootClamping: false,
-				//@ts-expect-error
+				//@ts-expect-error - Should not lead to any issues
 				restSpeedThreshold: 0.02,
 				restDisplacementThreshold: 0.002,
 			},
@@ -559,6 +564,7 @@ export const SharedXImage = ({
 	sharedBoundTag: string;
 }): ScreenTransitionConfig => {
 	return {
+		//@ts-expect-error - Should not lead to any issues
 		enableTransitions: true,
 		gestureEnabled: true,
 		gestureDirection: ["vertical", "vertical-inverted"],

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

@@ -3,16 +3,21 @@ import { useMemo } from "react";
 import { useWindowDimensions } from "react-native";
 import { type SharedValue, useDerivedValue } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-
+import type { NativeStackScreenTransitionConfig } from "../../../native-stack/types";
 import { DEFAULT_SCREEN_TRANSITION_STATE } from "../../constants";
-import { type TransitionDescriptor, useKeys } from "../../providers/keys.provider";
-
+import { useFlagsContext } from "../../providers/flags.provider";
+import {
+	type TransitionDescriptor,
+	useKeys,
+} from "../../providers/keys.provider";
 import { AnimationStore } from "../../stores/animation.store";
 import { GestureStore, type GestureStoreMap } from "../../stores/gesture.store";
 import type {
 	ScreenInterpolationProps,
 	ScreenTransitionState,
 } from "../../types/animation.types";
+import type { ScreenTransitionConfig } from "../../types/core.types";
+import type { GestureDirection } from "../../types/gesture.types";
 import { derivations } from "../../utils/animation/derivations";
 import { createBounds } from "../../utils/bounds";
 
@@ -22,30 +27,45 @@ type BuiltState = {
 	animating: SharedValue<number>;
 	gesture: GestureStoreMap;
 	route: RouteProp<ParamListBase>;
+	unwrapped: ScreenTransitionState;
 };
 
-const unwrap = (
-	s: BuiltState | undefined,
-	key: string | undefined,
-): ScreenTransitionState | undefined => {
+const createScreenTransitionState = (
+	route: RouteProp<ParamListBase>,
+): ScreenTransitionState => ({
+	progress: 0,
+	closing: 0,
+	animating: 0,
+	gesture: {
+		x: 0,
+		y: 0,
+		normalizedX: 0,
+		normalizedY: 0,
+		isDismissing: 0,
+		isDragging: 0,
+		direction: null,
+	},
+	route,
+});
+
+const unwrapInto = (s: BuiltState): ScreenTransitionState => {
 	"worklet";
-	if (!s || !key) return undefined;
-
-	return {
-		progress: s.progress.value,
-		closing: s.closing.value,
-		animating: s.animating.value,
-		gesture: {
-			x: s.gesture.x.value,
-			y: s.gesture.y.value,
-			normalizedX: s.gesture.normalizedX.value,
-			normalizedY: s.gesture.normalizedY.value,
-			isDismissing: s.gesture.isDismissing.value,
-			isDragging: s.gesture.isDragging.value,
-			direction: s.gesture.direction.value,
-		},
-		route: s.route,
-	};
+	const out = s.unwrapped;
+	out.progress = s.progress.value;
+	out.closing = s.closing.value;
+	out.animating = s.animating.value;
+	out.gesture.x = s.gesture.x.value;
+	out.gesture.y = s.gesture.y.value;
+	out.gesture.normalizedX = s.gesture.normalizedX.value;
+	out.gesture.normalizedY = s.gesture.normalizedY.value;
+	out.gesture.isDismissing = s.gesture.isDismissing.value;
+	out.gesture.isDragging = s.gesture.isDragging.value;
+	out.gesture.direction = s.gesture.direction.value as Omit<
+		GestureDirection,
+		"bidirectional"
+	> | null;
+
+	return out;
 };
 
 const useBuildScreenTransitionState = (
@@ -62,13 +82,25 @@ const useBuildScreenTransitionState = (
 			animating: AnimationStore.getAnimation(key, "animating"),
 			gesture: GestureStore.getRouteGestures(key),
 			route: descriptor.route,
+			unwrapped: createScreenTransitionState(descriptor.route),
 		};
 	}, [key, descriptor?.route]);
 };
 
+const hasTransitionsEnabled = (
+	options: ScreenTransitionConfig | undefined,
+	alwaysOn: boolean,
+) => {
+	"worklet";
+	if (alwaysOn) return true;
+	return !!(options as NativeStackScreenTransitionConfig)?.enableTransitions;
+};
+
 export function _useScreenAnimation() {
 	const dimensions = useWindowDimensions();
 	const insets = useSafeAreaInsets();
+	const flags = useFlagsContext();
+	const transitionsAlwaysOn = flags?.TRANSITIONS_ALWAYS_ON ?? false;
 
 	const {
 		current: currentDescriptor,
@@ -85,15 +117,17 @@ export function _useScreenAnimation() {
 	>(() => {
 		"worklet";
 
-		const previous = unwrap(prevAnimation, previousDescriptor?.route.key);
+		const previous = prevAnimation ? unwrapInto(prevAnimation) : undefined;
 
-		const next = nextDescriptor?.options?.enableTransitions
-			? unwrap(nextAnimation, nextDescriptor?.route.key)
-			: undefined;
+		const next =
+			nextAnimation &&
+			hasTransitionsEnabled(nextDescriptor?.options, transitionsAlwaysOn)
+				? unwrapInto(nextAnimation)
+				: undefined;
 
-		const current =
-			unwrap(currentAnimation, currentDescriptor?.route.key) ??
-			DEFAULT_SCREEN_TRANSITION_STATE;
+		const current = currentAnimation
+			? unwrapInto(currentAnimation)
+			: DEFAULT_SCREEN_TRANSITION_STATE;
 
 		const helpers = derivations({
 			current,

package/src/shared/hooks/gestures/use-build-gestures.tsx

@@ -26,7 +26,10 @@ import { useKeys } from "../../providers/keys.provider";
 import { AnimationStore } from "../../stores/animation.store";
 import { GestureStore, type GestureStoreMap } from "../../stores/gesture.store";
 
-import { type GestureDirection, GestureOffsetState } from "../../types/gesture.types";
+import {
+	type GestureDirection,
+	GestureOffsetState,
+} from "../../types/gesture.types";
 import { startScreenTransition } from "../../utils/animation/start-screen-transition";
 import { applyOffsetRules } from "../../utils/gesture/check-gesture-activation";
 import { determineDismissal } from "../../utils/gesture/determine-dismissal";

package/src/shared/providers/flags.provider.tsx

@@ -0,0 +1,21 @@
+import createProvider from "../utils/create-provider";
+
+interface FlagsValue {
+	TRANSITIONS_ALWAYS_ON: boolean;
+}
+
+interface FlagsProviderProps {
+	TRANSITIONS_ALWAYS_ON?: boolean;
+	children: React.ReactNode;
+}
+
+const { FlagsProvider, useFlagsContext } = createProvider("Flags", {
+	guarded: false,
+})<FlagsProviderProps, FlagsValue>(
+	({ TRANSITIONS_ALWAYS_ON = false, children }) => ({
+		value: { TRANSITIONS_ALWAYS_ON },
+		children,
+	}),
+);
+
+export { FlagsProvider, useFlagsContext };

package/src/shared/providers/register-bounds.provider.tsx

@@ -43,27 +43,26 @@ interface RegisterBoundsContextValue {
 }
 
 /**
- * Gets the parent screen's route key for nested navigators.
- * Returns undefined if we're not inside a nested navigator.
+ * Builds the full ancestor key chain for nested navigators.
+ * Returns an array of screen keys from immediate parent to root.
+ * [parentKey, grandparentKey, greatGrandparentKey, ...]
  */
-const getParentScreenKey = (current: TransitionDescriptor) => {
-	const parent = current.navigation.getParent();
-	if (!parent) return undefined;
-
-	const parentState = parent.getState();
-	if (!parentState?.routes) return undefined;
-
-	// Check if our route key exists directly in parent's routes
-	const existsInParent = parentState.routes.some(
-		(r) => r.key === current.route.key,
-	);
-
-	// If we don't exist in parent's routes, we're nested inside the focused route
-	if (!existsInParent && parentState.index !== undefined) {
-		return parentState.routes[parentState.index]?.key;
+const getAncestorKeys = (current: TransitionDescriptor): string[] => {
+	const ancestors: string[] = [];
+	let nav = current.navigation.getParent();
+
+	while (nav) {
+		const state = nav.getState();
+		if (state?.routes && state.index !== undefined) {
+			const focusedRoute = state.routes[state.index];
+			if (focusedRoute?.key) {
+				ancestors.push(focusedRoute.key);
+			}
+		}
+		nav = nav.getParent();
 	}
 
-	return undefined;
+	return ancestors;
 };
 
 /**
@@ -73,13 +72,13 @@ const getParentScreenKey = (current: TransitionDescriptor) => {
 const useInitialLayoutHandler = (params: {
 	sharedBoundTag?: string;
 	currentScreenKey: string;
-	parentScreenKey?: string;
+	ancestorKeys: string[];
 	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
 }) => {
 	const {
 		sharedBoundTag,
 		currentScreenKey,
-		parentScreenKey,
+		ancestorKeys,
 		maybeMeasureAndStore,
 	} = params;
 
@@ -87,57 +86,84 @@ const useInitialLayoutHandler = (params: {
 		currentScreenKey,
 		"animating",
 	);
-	const isParentAnimating = parentScreenKey
-		? AnimationStore.getAnimation(parentScreenKey, "animating")
-		: null;
+
+	// Check if any ancestor is animating
+	const ancestorAnimations = ancestorKeys.map((key) =>
+		AnimationStore.getAnimation(key, "animating"),
+	);
 
 	const hasMeasuredOnLayout = useSharedValue(false);
 
 	return useCallback(() => {
 		"worklet";
-		if (!sharedBoundTag || hasMeasuredOnLayout.value) return;
-		if (!isAnimating.value && !isParentAnimating?.value) return;
+		if (!sharedBoundTag || hasMeasuredOnLayout.get()) return;
+
+		// Check if current or any ancestor is animating
+		let isAnyAnimating = isAnimating.get();
+		for (let i = 0; i < ancestorAnimations.length; i++) {
+			if (ancestorAnimations[i].get()) {
+				isAnyAnimating = 1;
+				break;
+			}
+		}
+
+		if (!isAnyAnimating) return;
 
 		maybeMeasureAndStore({
 			shouldSetSource: false,
 			shouldSetDestination: true,
 		});
 
-		hasMeasuredOnLayout.value = true;
+		hasMeasuredOnLayout.set(true);
 	}, [
 		sharedBoundTag,
 		hasMeasuredOnLayout,
 		isAnimating,
-		isParentAnimating,
+		ancestorAnimations,
 		maybeMeasureAndStore,
 	]);
 };
 
+/**
+ * Measures non-pressable elements when screen becomes blurred.
+ * Captures bounds right before transition starts.
+ */
 /**
  * Measures non-pressable elements when screen becomes blurred.
  * Captures bounds right before transition starts.
  */
 const useBlurMeasurement = (params: {
 	sharedBoundTag?: string;
+	ancestorKeys: string[];
 	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
 }) => {
-	const { sharedBoundTag, maybeMeasureAndStore } = params;
-	const isFocused = useRef(true);
+	const { current } = useKeys();
+	const { sharedBoundTag, ancestorKeys, maybeMeasureAndStore } = params;
 	const hasCapturedSource = useRef(false);
 
+	const ancestorClosing = [current.route.key, ...ancestorKeys].map((key) =>
+		AnimationStore.getAnimation(key, "closing"),
+	);
+
+	const maybeMeasureOnBlur = useStableCallbackValue(() => {
+		"worklet";
+
+		// Don't measure if current / any ancestor is closing
+		const isOneClosing = ancestorClosing.some((closing) => closing.get());
+		if (isOneClosing) return;
+
+		maybeMeasureAndStore({ shouldSetSource: true });
+	});
+
 	useFocusEffect(
 		useCallback(() => {
-			isFocused.current = true;
 			hasCapturedSource.current = false;
 
 			return () => {
-				if (!sharedBoundTag) return;
-				if (hasCapturedSource.current) return;
-
-				isFocused.current = false;
-				runOnUI(maybeMeasureAndStore)({ shouldSetSource: true });
+				if (!sharedBoundTag || hasCapturedSource.current) return;
+				runOnUI(maybeMeasureOnBlur)();
 			};
-		}, [sharedBoundTag, maybeMeasureAndStore]),
+		}, [sharedBoundTag, maybeMeasureOnBlur]),
 	);
 
 	return {
@@ -157,7 +183,7 @@ const useParentSyncReaction = (params: {
 	const { parentContext, maybeMeasureAndStore } = params;
 
 	useAnimatedReaction(
-		() => parentContext?.updateSignal.value,
+		() => parentContext?.updateSignal.get(),
 		(value) => {
 			"worklet";
 			if (value === 0 || value === undefined) return;
@@ -173,11 +199,12 @@ const { RegisterBoundsProvider, useRegisterBoundsContext } = createProvider(
 	({ style, onPress, sharedBoundTag, animatedRef, children }) => {
 		const { current } = useKeys();
 		const currentScreenKey = current.route.key;
-		const parentScreenKey = getParentScreenKey(current);
+		const ancestorKeys = useMemo(() => getAncestorKeys(current), [current]);
 
 		// Context & signals
 		const parentContext: RegisterBoundsContextValue | null =
 			useRegisterBoundsContext();
+
 		const ownSignal = useSharedValue(0);
 		const updateSignal: SharedValue<number> =
 			parentContext?.updateSignal ?? ownSignal;
@@ -191,7 +218,7 @@ const { RegisterBoundsProvider, useRegisterBoundsContext } = createProvider(
 		const emitUpdate = useStableCallbackValue(() => {
 			"worklet";
 			const isRoot = !parentContext;
-			if (isRoot) updateSignal.value = updateSignal.value + 1;
+			if (isRoot) updateSignal.set(updateSignal.get() + 1);
 		});
 
 		const maybeMeasureAndStore = useStableCallbackValue(
@@ -208,28 +235,31 @@ const { RegisterBoundsProvider, useRegisterBoundsContext } = createProvider(
 
 				emitUpdate();
 
-				// Always register occurrence
-				BoundStore.registerOccurrence(
+				BoundStore.registerSnapshot(
 					sharedBoundTag,
 					currentScreenKey,
 					measured,
 					preparedStyles,
+					ancestorKeys,
 				);
 
-				// Set as source (on press or blur)
 				if (shouldSetSource) {
-					if (isAnimating.value) {
-						const existing = BoundStore.getOccurrence(
-							sharedBoundTag,
-							currentScreenKey,
-						);
-						BoundStore.setLinkSource(
+					if (isAnimating.get()) {
+						// If animation is already in progress,
+						// lets use the existing measuremenets.
+						const existing = BoundStore.getSnapshot(
 							sharedBoundTag,
 							currentScreenKey,
-							existing.bounds,
-							preparedStyles,
-							parentScreenKey,
 						);
+						if (existing) {
+							BoundStore.setLinkSource(
+								sharedBoundTag,
+								currentScreenKey,
+								existing.bounds,
+								preparedStyles,
+								ancestorKeys,
+							);
+						}
 						return;
 					}
 					BoundStore.setLinkSource(
@@ -237,7 +267,7 @@ const { RegisterBoundsProvider, useRegisterBoundsContext } = createProvider(
 						currentScreenKey,
 						measured,
 						preparedStyles,
-						parentScreenKey,
+						ancestorKeys,
 					);
 				}
 
@@ -248,7 +278,7 @@ const { RegisterBoundsProvider, useRegisterBoundsContext } = createProvider(
 						currentScreenKey,
 						measured,
 						preparedStyles,
-						parentScreenKey,
+						ancestorKeys,
 					);
 				}
 
@@ -259,7 +289,7 @@ const { RegisterBoundsProvider, useRegisterBoundsContext } = createProvider(
 		const handleInitialLayout = useInitialLayoutHandler({
 			sharedBoundTag,
 			currentScreenKey,
-			parentScreenKey,
+			ancestorKeys,
 			maybeMeasureAndStore,
 		});
 
@@ -267,6 +297,7 @@ const { RegisterBoundsProvider, useRegisterBoundsContext } = createProvider(
 		const { markSourceCaptured } = useBlurMeasurement({
 			sharedBoundTag,
 			maybeMeasureAndStore,
+			ancestorKeys,
 		});
 
 		useParentSyncReaction({ parentContext, maybeMeasureAndStore });