react-native-screen-transitions 3.0.0-beta.9 → 3.0.0-rc.2

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

@@ -0,0 +1,290 @@
+import { useFocusEffect } from "@react-navigation/native";
+import { type ReactNode, useCallback, useMemo, useRef } from "react";
+import type { View } from "react-native";
+import {
+	type AnimatedRef,
+	measure,
+	runOnJS,
+	runOnUI,
+	type StyleProps,
+	useAnimatedReaction,
+	useSharedValue,
+} from "react-native-reanimated";
+import type { SharedValue } from "react-native-reanimated/lib/typescript/commonTypes";
+import useStableCallback from "../hooks/use-stable-callback";
+import useStableCallbackValue from "../hooks/use-stable-callback-value";
+import { AnimationStore } from "../stores/animation.store";
+import { BoundStore } from "../stores/bounds.store";
+import { prepareStyleForBounds } from "../utils/bounds/helpers/styles";
+import createProvider from "../utils/create-provider";
+import { type TransitionDescriptor, useKeys } from "./keys.provider";
+
+interface MaybeMeasureAndStoreParams {
+	onPress?: ((...args: unknown[]) => void) | undefined;
+	shouldSetSource?: boolean;
+	shouldSetDestination?: boolean;
+}
+
+interface RegisterBoundsRenderProps {
+	handleInitialLayout: () => void;
+	captureActiveOnPress: () => void;
+}
+
+interface RegisterBoundsProviderProps {
+	sharedBoundTag?: string;
+	animatedRef: AnimatedRef<View>;
+	style: StyleProps;
+	onPress?: ((...args: unknown[]) => void) | undefined;
+	children: (props: RegisterBoundsRenderProps) => ReactNode;
+}
+
+interface RegisterBoundsContextValue {
+	updateSignal: SharedValue<number>;
+}
+
+/**
+ * Gets the parent screen's route key for nested navigators.
+ * Returns undefined if we're not inside a nested navigator.
+ */
+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;
+	}
+
+	return undefined;
+};
+
+/**
+ * Handles initial layout measurement for destination elements.
+ * Only measures if an animation is in progress (local or parent).
+ */
+const useInitialLayoutHandler = (params: {
+	sharedBoundTag?: string;
+	currentScreenKey: string;
+	parentScreenKey?: string;
+	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
+}) => {
+	const {
+		sharedBoundTag,
+		currentScreenKey,
+		parentScreenKey,
+		maybeMeasureAndStore,
+	} = params;
+
+	const isAnimating = AnimationStore.getAnimation(
+		currentScreenKey,
+		"animating",
+	);
+	const isParentAnimating = parentScreenKey
+		? AnimationStore.getAnimation(parentScreenKey, "animating")
+		: null;
+
+	const hasMeasuredOnLayout = useSharedValue(false);
+
+	return useCallback(() => {
+		"worklet";
+		if (!sharedBoundTag || hasMeasuredOnLayout.value) return;
+		if (!isAnimating.value && !isParentAnimating?.value) return;
+
+		maybeMeasureAndStore({
+			shouldSetSource: false,
+			shouldSetDestination: true,
+		});
+
+		hasMeasuredOnLayout.value = true;
+	}, [
+		sharedBoundTag,
+		hasMeasuredOnLayout,
+		isAnimating,
+		isParentAnimating,
+		maybeMeasureAndStore,
+	]);
+};
+
+/**
+ * Measures non-pressable elements when screen becomes blurred.
+ * Captures bounds right before transition starts.
+ */
+const useBlurMeasurement = (params: {
+	sharedBoundTag?: string;
+	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
+}) => {
+	const { sharedBoundTag, maybeMeasureAndStore } = params;
+	const isFocused = useRef(true);
+	const hasCapturedSource = useRef(false);
+
+	useFocusEffect(
+		useCallback(() => {
+			isFocused.current = true;
+			hasCapturedSource.current = false;
+
+			return () => {
+				if (!sharedBoundTag) return;
+				if (hasCapturedSource.current) return;
+
+				isFocused.current = false;
+				runOnUI(maybeMeasureAndStore)({ shouldSetSource: true });
+			};
+		}, [sharedBoundTag, maybeMeasureAndStore]),
+	);
+
+	return {
+		markSourceCaptured: () => {
+			hasCapturedSource.current = true;
+		},
+	};
+};
+
+/**
+ * Syncs child measurements when parent updates.
+ */
+const useParentSyncReaction = (params: {
+	parentContext: RegisterBoundsContextValue | null;
+	maybeMeasureAndStore: (options?: MaybeMeasureAndStoreParams) => void;
+}) => {
+	const { parentContext, maybeMeasureAndStore } = params;
+
+	useAnimatedReaction(
+		() => parentContext?.updateSignal.value,
+		(value) => {
+			"worklet";
+			if (value === 0 || value === undefined) return;
+			maybeMeasureAndStore();
+		},
+	);
+};
+
+const { RegisterBoundsProvider, useRegisterBoundsContext } = createProvider(
+	"RegisterBounds",
+	{ guarded: false },
+)<RegisterBoundsProviderProps, RegisterBoundsContextValue>(
+	({ style, onPress, sharedBoundTag, animatedRef, children }) => {
+		const { current } = useKeys();
+		const currentScreenKey = current.route.key;
+		const parentScreenKey = getParentScreenKey(current);
+
+		// Context & signals
+		const parentContext: RegisterBoundsContextValue | null =
+			useRegisterBoundsContext();
+		const ownSignal = useSharedValue(0);
+		const updateSignal: SharedValue<number> =
+			parentContext?.updateSignal ?? ownSignal;
+
+		const isAnimating = AnimationStore.getAnimation(
+			currentScreenKey,
+			"animating",
+		);
+		const preparedStyles = useMemo(() => prepareStyleForBounds(style), [style]);
+
+		const emitUpdate = useStableCallbackValue(() => {
+			"worklet";
+			const isRoot = !parentContext;
+			if (isRoot) updateSignal.value = updateSignal.value + 1;
+		});
+
+		const maybeMeasureAndStore = useStableCallbackValue(
+			({
+				onPress,
+				shouldSetSource,
+				shouldSetDestination,
+			}: MaybeMeasureAndStoreParams = {}) => {
+				"worklet";
+				if (!sharedBoundTag) return;
+
+				const measured = measure(animatedRef);
+				if (!measured) return;
+
+				emitUpdate();
+
+				// Always register occurrence
+				BoundStore.registerOccurrence(
+					sharedBoundTag,
+					currentScreenKey,
+					measured,
+					preparedStyles,
+				);
+
+				// Set as source (on press or blur)
+				if (shouldSetSource) {
+					if (isAnimating.value) {
+						const existing = BoundStore.getOccurrence(
+							sharedBoundTag,
+							currentScreenKey,
+						);
+						BoundStore.setLinkSource(
+							sharedBoundTag,
+							currentScreenKey,
+							existing.bounds,
+							preparedStyles,
+							parentScreenKey,
+						);
+						return;
+					}
+					BoundStore.setLinkSource(
+						sharedBoundTag,
+						currentScreenKey,
+						measured,
+						preparedStyles,
+						parentScreenKey,
+					);
+				}
+
+				// Set as destination (on mount during animation)
+				if (shouldSetDestination) {
+					BoundStore.setLinkDestination(
+						sharedBoundTag,
+						currentScreenKey,
+						measured,
+						preparedStyles,
+						parentScreenKey,
+					);
+				}
+
+				if (onPress) runOnJS(onPress)();
+			},
+		);
+
+		const handleInitialLayout = useInitialLayoutHandler({
+			sharedBoundTag,
+			currentScreenKey,
+			parentScreenKey,
+			maybeMeasureAndStore,
+		});
+
+		// Side effects
+		const { markSourceCaptured } = useBlurMeasurement({
+			sharedBoundTag,
+			maybeMeasureAndStore,
+		});
+
+		useParentSyncReaction({ parentContext, maybeMeasureAndStore });
+
+		const captureActiveOnPress = useStableCallback(() => {
+			if (!sharedBoundTag) {
+				onPress?.();
+				return;
+			}
+			runOnUI(maybeMeasureAndStore)({ onPress, shouldSetSource: true });
+			markSourceCaptured();
+		});
+
+		return {
+			value: { updateSignal },
+			children: children({ handleInitialLayout, captureActiveOnPress }),
+		};
+	},
+);
+
+export { RegisterBoundsProvider };

package/src/shared/providers/{screen-transition-provider.tsx → screen-transition.provider.tsx}

@@ -2,9 +2,9 @@ import type React from "react";
 import type { ComponentType } from "react";
 import type { ScreenLifecycleProps } from "../components/controllers/screen-lifecycle";
 import { RootTransitionAware } from "../components/root-transition-aware";
-import { ScreenGestureProvider } from "../providers/gestures";
-import { KeysProvider, type TransitionDescriptor } from "../providers/keys";
-import { TransitionStylesProvider } from "../providers/transition-styles";
+import { ScreenGestureProvider } from "./gestures.provider";
+import { KeysProvider, type TransitionDescriptor } from "./keys.provider";
+import { TransitionStylesProvider } from "./transition-styles.provider";
 
 type Props<TDescriptor extends TransitionDescriptor> = {
 	previous?: TDescriptor;

package/src/shared/providers/{transition-styles.tsx → transition-styles.provider.tsx}

@@ -1,38 +1,34 @@
 import { createContext, useContext, useMemo } from "react";
-import { useDerivedValue } from "react-native-reanimated";
+import { type SharedValue, useDerivedValue } from "react-native-reanimated";
 import { NO_STYLES } from "../constants";
 import { _useScreenAnimation } from "../hooks/animation/use-screen-animation";
-import type { TransitionInterpolatedStyle } from "../types/animation";
+import type { TransitionInterpolatedStyle } from "../types/animation.types";
 import { createBounds } from "../utils/bounds";
 
 type Props = {
 	children: React.ReactNode;
 };
 
-const TransitionStylesContext = createContext<ReturnType<
-	typeof useMemo<{
-		stylesMap: ReturnType<typeof useDerivedValue<TransitionInterpolatedStyle>>;
-	}>
-> | null>(null);
+type TransitionStylesContextValue = {
+	stylesMap: SharedValue<TransitionInterpolatedStyle>;
+	ancestorStylesMaps: SharedValue<TransitionInterpolatedStyle>[];
+};
+
+export const TransitionStylesContext =
+	createContext<TransitionStylesContextValue | null>(null);
 
 export function TransitionStylesProvider({ children }: Props) {
+	const parentCtx = useContext(TransitionStylesContext);
+
 	const { screenInterpolatorProps, screenStyleInterpolator } =
 		_useScreenAnimation();
 
 	const stylesMap = useDerivedValue<TransitionInterpolatedStyle>(() => {
 		"worklet";
-
-		/**
-		 * ### Maintainer note
-		 *
-		 * From my understanding, reanimated will serialize the DerivedValue result. Thus resulting in us receiving a `bounds is not a function, it is an object` error. We'll build the bounds function inside here (the final step) and pass it alongside the interpolator instead.
-		 */
 		const props = screenInterpolatorProps.value;
-
 		const bounds = createBounds(props);
 		try {
 			if (!screenStyleInterpolator) return NO_STYLES;
-
 			return screenStyleInterpolator({
 				...props,
 				bounds,
@@ -49,10 +45,16 @@ export function TransitionStylesProvider({ children }: Props) {
 	});
 
 	const value = useMemo(() => {
+		// Build ancestor chain: [parent, grandparent, great-grandparent, ...]
+		const ancestorStylesMaps = parentCtx
+			? [parentCtx.stylesMap, ...parentCtx.ancestorStylesMaps]
+			: [];
+
 		return {
 			stylesMap,
+			ancestorStylesMaps,
 		};
-	}, [stylesMap]);
+	}, [stylesMap, parentCtx]);
 
 	return (
 		<TransitionStylesContext.Provider value={value}>

package/src/shared/stores/{animation-store.ts → animation.store.ts}

@@ -3,7 +3,7 @@ import {
 	makeMutable,
 	type SharedValue,
 } from "react-native-reanimated";
-import type { ScreenKey } from "../types/core";
+import type { ScreenKey } from "../types/core.types";
 
 export type AnimationStoreMap = {
 	progress: SharedValue<number>;

package/src/shared/stores/bounds.store.ts

@@ -0,0 +1,166 @@
+import {
+	type MeasuredDimensions,
+	makeMutable,
+	type StyleProps,
+} from "react-native-reanimated";
+import type { Any } from "../types/utils.types";
+
+type TagID = string;
+type ScreenKey = string;
+
+export type TagData = {
+	bounds: MeasuredDimensions;
+	styles: StyleProps;
+};
+
+type ScreenIdentifier = {
+	screenKey: ScreenKey;
+	parentScreenKey?: ScreenKey;
+};
+
+type TagLink = {
+	source: ScreenIdentifier & TagData;
+	destination: (ScreenIdentifier & TagData) | null;
+};
+
+type TagState = {
+	occurrences: Record<ScreenKey, TagData>;
+	linkStack: TagLink[];
+};
+
+/**
+ * Note on cleanup: We intentionally skip automatic cleanup of old links.
+ * The linkStack grows by one entry per navigation, but `getActiveLink`
+ * finds the correct link via screenKey matching regardless of stack size.
+ * This is unlikely to cause performance issues in typical apps, but if
+ * memory becomes a concern in apps with heavy navigation (hundreds of
+ * transitions), we should consider implementing cleanup on screen unmount using
+ * screenKey filtering.
+ */
+
+const registry = makeMutable<Record<TagID, TagState>>({});
+
+function registerOccurrence(
+	tag: TagID,
+	screenKey: ScreenKey,
+	bounds: MeasuredDimensions,
+	styles: StyleProps = {},
+) {
+	"worklet";
+	registry.modify((state: Any) => {
+		"worklet";
+		if (!state[tag]) {
+			state[tag] = { occurrences: {}, linkStack: [] };
+		}
+		state[tag].occurrences[screenKey] = { bounds, styles };
+		return state;
+	});
+}
+
+function setLinkSource(
+	tag: TagID,
+	screenKey: ScreenKey,
+	bounds: MeasuredDimensions,
+	styles: StyleProps = {},
+	parentScreenKey?: ScreenKey,
+) {
+	"worklet";
+	registry.modify((state: Any) => {
+		"worklet";
+		if (!state[tag]) state[tag] = { occurrences: {}, linkStack: [] };
+
+		// Push new link onto stack
+		state[tag].linkStack.push({
+			source: { screenKey, parentScreenKey, bounds, styles },
+			destination: null,
+		});
+		return state;
+	});
+}
+
+function setLinkDestination(
+	tag: TagID,
+	screenKey: ScreenKey,
+	bounds: MeasuredDimensions,
+	styles: StyleProps = {},
+	parentScreenKey?: ScreenKey,
+) {
+	"worklet";
+	registry.modify((state: Any) => {
+		"worklet";
+		const stack = state[tag]?.linkStack;
+		if (!stack || stack.length === 0) return state;
+
+		// Find the topmost link without a destination
+		for (let i = stack.length - 1; i >= 0; i--) {
+			if (stack[i].destination === null) {
+				stack[i].destination = { screenKey, parentScreenKey, bounds, styles };
+				break;
+			}
+		}
+		return state;
+	});
+}
+
+function getOccurrence(tag: TagID, key: ScreenKey) {
+	"worklet";
+	return registry.value[tag]?.occurrences[key] ?? null;
+}
+
+// Helper to check if a screen identifier matches a given key
+function matchesScreenKey(
+	identifier: ScreenIdentifier | null | undefined,
+	key: ScreenKey,
+): boolean {
+	"worklet";
+	if (!identifier) return false;
+	return identifier.screenKey === key || identifier.parentScreenKey === key;
+}
+
+function getActiveLink(tag: TagID, screenKey?: ScreenKey, isClosing?: boolean) {
+	"worklet";
+	const stack = registry.value[tag]?.linkStack;
+
+	if (!stack || stack.length === 0) {
+		return null;
+	}
+
+	// If screenKey provided, find link involving that screen
+	if (screenKey) {
+		// When closing (backward nav), we want the link where this screen is the DESTINATION
+		// When opening (forward nav), we want the link where this screen is the DESTINATION too
+		// The source is always the "from" screen, destination is the "to" screen
+
+		if (isClosing) {
+			// Backward: find link where I am the destination (I'm going back to source)
+			for (let i = stack.length - 1; i >= 0; i--) {
+				const link = stack[i];
+				if (matchesScreenKey(link.destination, screenKey)) {
+					return link;
+				}
+			}
+		}
+
+		// Forward or fallback: find any link involving this screen
+		for (let i = stack.length - 1; i >= 0; i--) {
+			const link = stack[i];
+			if (
+				matchesScreenKey(link.source, screenKey) ||
+				matchesScreenKey(link.destination, screenKey)
+			) {
+				return link;
+			}
+		}
+		return null;
+	}
+
+	return stack[stack.length - 1] ?? null;
+}
+
+export const BoundStore = {
+	registerOccurrence,
+	setLinkSource,
+	setLinkDestination,
+	getActiveLink,
+	getOccurrence,
+};

package/src/shared/stores/{gesture-store.ts → gesture.store.ts}

@@ -3,8 +3,8 @@ import {
 	makeMutable,
 	type SharedValue,
 } from "react-native-reanimated";
-import type { ScreenKey } from "../types/core";
-import type { GestureDirection } from "../types/gesture";
+import type { ScreenKey } from "../types/core.types";
+import type { GestureDirection } from "../types/gesture.types";
 
 export type GestureKey =
 	| "x"

package/src/shared/types/{animation.ts → animation.types.ts}

@@ -5,14 +5,16 @@ import type {
 	WithTimingConfig,
 } from "react-native-reanimated";
 import type { EdgeInsets } from "react-native-safe-area-context";
-import type { BoundEntry, BoundsAccessor } from "./bounds";
-import type { Layout } from "./core";
-import type { GestureValues } from "./gesture";
+import type { BoundsAccessor } from "./bounds.types";
+import type { Layout } from "./core.types";
+import type { GestureValues } from "./gesture.types";
 
 export interface OverlayInterpolationProps {
 	progress: number;
 	layouts: {
-		/** The `width` and `height` of the screen container. */
+		/**
+		 * The `width` and `height` of the screen container.
+		 */
 		screen: Layout;
 	};
 	insets: EdgeInsets;
@@ -23,37 +25,74 @@ export type ScreenTransitionState = {
 	closing: number;
 	animating: number;
 	gesture: GestureValues;
-	bounds: Record<string, BoundEntry>;
 	route: RouteProp<ParamListBase>;
 };
 
 export interface ScreenInterpolationProps {
-	/** Values for the screen that came before the current one in the navigation stack. */
+	/**
+	 * Values for the screen that came before the current one in the navigation stack.
+	 */
 	previous: ScreenTransitionState | undefined;
-	/** Values for the current screen being interpolated. */
+
+	/**
+	 * Values for the current screen being interpolated.
+	 */
 	current: ScreenTransitionState;
-	/** Values for the screen that comes after the current one in the navigation stack. */
+
+	/**
+	 * Values for the screen that comes after the current one in the navigation stack.
+	 */
 	next: ScreenTransitionState | undefined;
-	/** Layout measurements for the screen. */
+
+	/**
+	 * Layout measurements for the screen.
+	 */
 	layouts: {
-		/** The `width` and `height` of the screen container. */
+		/**
+		 * The `width` and `height` of the screen container.
+		 */
 		screen: Layout;
 	};
-	/** The safe area insets for the screen. */
+
+	/**
+	 * The safe area insets for the screen.
+	 */
 	insets: EdgeInsets;
-	/** The ID of the currently active shared bound (e.g., 'a' when Transition.Pressable has sharedBoundTag='a'). */
-	activeBoundId: string;
-	/** Whether the current screen is the focused (topmost) screen in the stack. */
+
+	/**
+	 * The ID of the currently active shared bound (e.g., 'a' when Transition.Pressable has sharedBoundTag='a').
+	 * @deprecated
+	 */
+	activeBoundId?: never;
+
+	/**
+	 * Whether the current screen is the focused (topmost) screen in the stack.
+	 */
 	focused: boolean;
-	/** Combined progress of current and next screen transitions, ranging from 0-2. */
+
+	/**
+	 * Combined progress of current and next screen transitions, ranging from 0-2.
+	 */
 	progress: number;
-	/** Function that provides access to bounds builders for creating shared element transitions. */
+
+	/**
+	 * Function that provides access to bounds builders for creating shared element transitions.
+	 */
 	bounds: BoundsAccessor;
-	/** The screen state that is currently driving the transition (either current or next, whichever is focused). */
+
+	/**
+	 * The screen state that is currently driving the transition (either current or next, whichever is focused).
+	 */
 	active: ScreenTransitionState;
-	/** Whether the active screen is currently transitioning (either being dragged or animating). */
+
+	/**
+	 * Whether the active screen is currently transitioning (either being dragged or animating).
+	 */
 	isActiveTransitioning: boolean;
-	/** Whether the active screen is in the process of being dismissed/closed. */
+
+	/**
+	 * Whether the active screen is in the process of being dismissed/closed.
+	 */
 	isDismissing: boolean;
 }
 
@@ -66,10 +105,12 @@ export type TransitionInterpolatedStyle = {
 	 * Animated style for the main screen view. Styles are only applied when Transition.View is present.
 	 */
 	contentStyle?: StyleProps;
+
 	/**
 	 * Animated style for a semi-transparent overlay. Styles are only applied when Transition.View is present.
 	 */
 	overlayStyle?: StyleProps;
+
 	/**
 	 * Define your own custom styles by using an id as the key: [id]: StyleProps
 	 */

package/src/shared/types/{bounds.ts → bounds.types.ts}

@@ -1,9 +1,9 @@
 import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
+import type { TagData } from "../stores/bounds.store";
 import type {
 	BoundsBuilderOptions,
 	BoundsReturnType,
-} from "../utils/bounds/_types/builder";
-import type { ScreenPhase } from "./core";
+} from "../utils/bounds/types/builder";
 
 /**
  * Target style computation.
@@ -21,5 +21,5 @@ export type BoundEntry = {
 
 export type BoundsAccessor = {
 	<T extends BoundsBuilderOptions>(options: T): BoundsReturnType<T>;
-	get: (id?: string, phase?: ScreenPhase) => BoundEntry;
+	getOccurrence: (id: string, key: string) => TagData;
 };