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

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

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

@@ -1,6 +1,6 @@
 import type { AnimatedProps } from "react-native-reanimated";
-import type { ScreenStyleInterpolator, TransitionSpec } from "./animation";
-import type { GestureActivationArea, GestureDirection } from "./gesture";
+import type { ScreenStyleInterpolator, TransitionSpec } from "./animation.types";
+import type { GestureActivationArea, GestureDirection } from "./gesture.types";
 
 export type Layout = {
 	width: number;
@@ -62,34 +62,42 @@ export type ScreenTransitionConfig = {
 	 * The user-provided function to calculate styles based on animation progress.
 	 */
 	screenStyleInterpolator?: ScreenStyleInterpolator;
+
 	/**
 	 * The Reanimated animation config for opening and closing transitions.
 	 */
 	transitionSpec?: TransitionSpec;
+
 	/**
 	 * Whether the gesture is enabled.
 	 */
 	gestureEnabled?: boolean;
+
 	/**
 	 * The direction of the swipe gesture used to dismiss the screen.
 	 */
 	gestureDirection?: GestureDirection | GestureDirection[];
+
 	/**
 	 * How much the gesture's final velocity impacts the dismiss decision.
 	 */
 	gestureVelocityImpact?: number;
+
 	/**
 	 * Distance threshold for gesture recognition throughout the screen.
 	 */
 	gestureResponseDistance?: number;
+
 	/**
 	 * Whether the gesture drives the progress.
 	 */
 	gestureDrivesProgress?: boolean;
+
 	/**
 	 * The area of the screen where the gesture is activated.
 	 */
 	gestureActivationArea?: GestureActivationArea;
+
 	/**
 	 * Whether to enable transitions. It sets the presentation to containedTransparentModal, animation none, and headerShown to false.
 	 */

package/src/shared/utils/animation/derivations.ts

@@ -1,16 +1,14 @@
-import { BoundStore } from "../../stores/bound-store";
-import type { ScreenTransitionState } from "../../types/animation";
+import type { ScreenTransitionState } from "../../types/animation.types";
 
 interface DerivationsParams {
 	current: ScreenTransitionState;
 	next?: ScreenTransitionState;
-	previous?: ScreenTransitionState;
 }
 
 /**
  * Additional values to help make defining animations easier.
  */
-export const derivations = ({ current, next, previous }: DerivationsParams) => {
+export const derivations = ({ current, next }: DerivationsParams) => {
 	"worklet";
 
 	// The combined progress
@@ -26,13 +24,9 @@ export const derivations = ({ current, next, previous }: DerivationsParams) => {
 
 	const isDismissing = !!(active.gesture.isDismissing || active.closing);
 
-	// The active bound id
-	const activeBoundId = BoundStore.getActiveBound(current, next, previous);
-
 	return {
 		progress,
 		focused,
-		activeBoundId,
 		active,
 		isActiveTransitioning,
 		isDismissing,

package/src/shared/utils/animation/start-screen-transition.ts

@@ -1,6 +1,6 @@
 import { runOnJS } from "react-native-reanimated";
-import type { AnimationStoreMap } from "../../stores/animation-store";
-import type { TransitionSpec } from "../../types/animation";
+import type { AnimationStoreMap } from "../../stores/animation.store";
+import type { TransitionSpec } from "../../types/animation.types";
 import { animate } from "./animate";
 
 interface StartScreenTransitionProps {

package/src/shared/utils/bounds/constants.ts

@@ -1,7 +1,7 @@
 import type { MeasuredDimensions } from "react-native-reanimated";
-import type { Layout } from "../../types/core";
-import type { Complete } from "../../types/utils";
-import type { BoundsBuilderOptions } from "./_types/builder";
+import type { Layout } from "../../types/core.types";
+import type { Complete } from "../../types/utils.types";
+import type { BoundsBuilderOptions } from "./types/builder";
 
 export const FULLSCREEN_DIMENSIONS = (
 	dimensions: Layout,

package/src/shared/utils/bounds/{_utils → helpers}/geometry.ts

@@ -1,10 +1,10 @@
 import type { MeasuredDimensions } from "react-native-reanimated";
-import type { Layout } from "../../../types/core";
-import type { BoundsAnchor, BoundsScaleMode } from "../_types/builder";
+import type { Layout } from "../../../types/core.types";
+import type { BoundsAnchor, BoundsScaleMode } from "../types/builder";
 import type {
 	ContentTransformGeometry,
 	RelativeGeometry,
-} from "../_types/geometry";
+} from "../types/geometry";
 
 /**
  * Get the anchor point coordinates for a given bound

package/src/shared/utils/bounds/{_utils → helpers}/is-bounds-equal.ts

@@ -1,5 +1,5 @@
 import type { MeasuredDimensions } from "react-native-reanimated";
-import { BoundStore } from "../../../stores/bound-store";
+import { BoundStore } from "../../../stores/bounds.store";
 
 export const isBoundsEqual = ({
 	measured,
@@ -11,9 +11,9 @@ export const isBoundsEqual = ({
 	sharedBoundTag: string;
 }) => {
 	"worklet";
-	const existing = BoundStore.getBounds(key)?.[sharedBoundTag]?.bounds;
+	const existing = BoundStore.getOccurrence(sharedBoundTag, key)?.bounds;
 	return (
-		existing &&
+		!!existing &&
 		existing.width === measured.width &&
 		existing.height === measured.height &&
 		existing.pageX === measured.pageX &&

package/src/shared/utils/bounds/{_utils → helpers}/style-composers.ts

@@ -3,11 +3,11 @@ import {
 	type MeasuredDimensions,
 	type StyleProps,
 } from "react-native-reanimated";
-import type { BoundsBuilderOptions } from "../_types/builder";
+import type { BoundsBuilderOptions } from "../types/builder";
 import type {
 	ContentTransformGeometry,
 	RelativeGeometry,
-} from "../_types/geometry";
+} from "../types/geometry";
 
 /**
  * Element-level (relative) params shared by size/transform composers.

package/src/shared/utils/bounds/{_utils → helpers}/styles.ts

@@ -1,6 +1,6 @@
 import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
 import { isSharedValue } from "react-native-reanimated";
-import type { Any } from "../../../types/utils";
+import type { Any } from "../../../types/utils.types";
 
 type AnyStyle = ViewStyle | TextStyle | ImageStyle;
 type StyleValue = StyleProp<AnyStyle>;