react-native-screen-transitions 3.0.0-beta.1 → 3.0.0-beta.11

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

@@ -0,0 +1,284 @@
+import {
+	type ReactNode,
+	useCallback,
+	useLayoutEffect,
+	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;
+	next?: TransitionDescriptor;
+	onPress?: () => void;
+	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
+}) => {
+	const { sharedBoundTag, next, onPress, maybeMeasureAndStore } = params;
+	const prevNextRef = useRef(next);
+
+	useLayoutEffect(() => {
+		if (!sharedBoundTag || onPress) return;
+
+		const hadNext = !!prevNextRef.current;
+		const hasNext = !!next;
+
+		// Screen went from focused to blurred
+		if (!hadNext && hasNext) {
+			runOnUI(maybeMeasureAndStore)({ shouldSetSource: true });
+		}
+
+		prevNextRef.current = next;
+	}, [next, sharedBoundTag, onPress, maybeMeasureAndStore]);
+};
+
+/**
+ * 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, next } = 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,
+		});
+
+		const captureActiveOnPress = useStableCallback(() => {
+			if (!sharedBoundTag) {
+				onPress?.();
+				return;
+			}
+			runOnUI(maybeMeasureAndStore)({ onPress, shouldSetSource: true });
+		});
+
+		// Side effects
+		useBlurMeasurement({ sharedBoundTag, next, onPress, maybeMeasureAndStore });
+		useParentSyncReaction({ parentContext, maybeMeasureAndStore });
+
+		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,35 +1,33 @@
 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>;
+	parentStylesMap?: 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;
 
@@ -51,8 +49,9 @@ export function TransitionStylesProvider({ children }: Props) {
 	const value = useMemo(() => {
 		return {
 			stylesMap,
+			parentStylesMap: parentCtx?.stylesMap,
 		};
-	}, [stylesMap]);
+	}, [stylesMap, parentCtx?.stylesMap]);
 
 	return (
 		<TransitionStylesContext.Provider value={value}>

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

@@ -1,5 +1,9 @@
-import { makeMutable, type SharedValue } from "react-native-reanimated";
-import type { ScreenKey } from "../types/core";
+import {
+	cancelAnimation,
+	makeMutable,
+	type SharedValue,
+} from "react-native-reanimated";
+import type { ScreenKey } from "../types/core.types";
 
 export type AnimationStoreMap = {
 	progress: SharedValue<number>;
@@ -22,24 +26,36 @@ const ensure = (key: ScreenKey) => {
 	return bag;
 };
 
-export function getAnimation(
+function getAnimation(
 	key: ScreenKey,
 	type: "progress" | "closing" | "animating",
 ): SharedValue<number> {
 	return ensure(key)[type];
 }
 
-export function getAll(key: ScreenKey) {
+function getAll(key: ScreenKey) {
 	return ensure(key);
 }
 
 function clear(routeKey: ScreenKey) {
 	"worklet";
+	const bag = store[routeKey];
+	if (bag) {
+		cancelAnimation(bag.progress);
+		cancelAnimation(bag.closing);
+		cancelAnimation(bag.animating);
+	}
 	delete store[routeKey];
 }
 
+function debugStoreSize() {
+	console.log("[AnimationStore] Size:", Object.keys(store).length);
+	console.log("[AnimationStore] Keys:", Object.keys(store));
+}
+
 export const AnimationStore = {
 	getAnimation,
 	clear,
 	getAll,
+	debugStoreSize,
 };

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}

@@ -1,6 +1,10 @@
-import { makeMutable, type SharedValue } from "react-native-reanimated";
-import type { ScreenKey } from "../types/core";
-import type { GestureDirection } from "../types/gesture";
+import {
+	cancelAnimation,
+	makeMutable,
+	type SharedValue,
+} from "react-native-reanimated";
+import type { ScreenKey } from "../types/core.types";
+import type { GestureDirection } from "../types/gesture.types";
 
 export type GestureKey =
 	| "x"
@@ -50,6 +54,16 @@ function getRouteGestures(routeKey: ScreenKey) {
 }
 
 function clear(routeKey: ScreenKey) {
+	const bag = store[routeKey];
+	if (bag) {
+		cancelAnimation(bag.x);
+		cancelAnimation(bag.y);
+		cancelAnimation(bag.normalizedX);
+		cancelAnimation(bag.normalizedY);
+		cancelAnimation(bag.isDismissing);
+		cancelAnimation(bag.isDragging);
+		cancelAnimation(bag.direction);
+	}
 	delete store[routeKey];
 }