react-native-screen-transitions 3.2.0-beta.3 → 3.2.1

package/src/shared/providers/stack/direct.provider.tsx

@@ -4,7 +4,7 @@ import type {
 	StackNavigationState,
 } from "@react-navigation/native";
 import * as React from "react";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { type DerivedValue, useDerivedValue } from "react-native-reanimated";
 import type {
 	NativeStackDescriptor,
@@ -16,6 +16,7 @@ import {
 	type StackContextValue,
 } from "../../hooks/navigation/use-stack";
 import { AnimationStore } from "../../stores/animation.store";
+import { HistoryStore } from "../../stores/history.store";
 import { useStackCoreContext } from "./core.provider";
 
 export interface DirectStackScene {
@@ -216,6 +217,15 @@ function withDirectStack<TProps extends DirectStackProps>(
 	Component: React.ComponentType<DirectStackContextValue>,
 ): React.FC<TProps> {
 	return function DirectStackProvider(props: TProps) {
+		const navigatorKey = props.state.key;
+
+		// Clean up history when navigator unmounts
+		useEffect(() => {
+			return () => {
+				HistoryStore.clearNavigator(navigatorKey);
+			};
+		}, [navigatorKey]);
+
 		const { stackContextValue, ...lifecycleValue } = useDirectStackValue(props);
 
 		return (

package/src/shared/providers/stack/managed.provider.tsx

@@ -1,6 +1,6 @@
 import type { Route } from "@react-navigation/native";
 import * as React from "react";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import {
 	type DerivedValue,
 	type SharedValue,
@@ -11,6 +11,7 @@ import {
 	type StackContextValue,
 } from "../../hooks/navigation/use-stack";
 import { AnimationStore } from "../../stores/animation.store";
+import { HistoryStore } from "../../stores/history.store";
 import type {
 	BaseStackDescriptor,
 	BaseStackNavigation,
@@ -211,6 +212,15 @@ function withManagedStack<
 	return function ManagedStackProvider(
 		props: ManagedStackProps<TDescriptor, TNavigation>,
 	) {
+		const navigatorKey = props.state.key;
+
+		// Clean up history when navigator unmounts
+		useEffect(() => {
+			return () => {
+				HistoryStore.clearNavigator(navigatorKey);
+			};
+		}, [navigatorKey]);
+
 		const { stackContextValue, ...lifecycleValue } = useManagedStackValue<
 			TDescriptor,
 			TNavigation

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

@@ -1,14 +1,11 @@
-import {
-	cancelAnimation,
-	makeMutable,
-	type SharedValue,
-} from "react-native-reanimated";
+import { makeMutable, type SharedValue } from "react-native-reanimated";
 import type { ScreenKey } from "../types/screen.types";
 
 export type AnimationStoreMap = {
 	progress: SharedValue<number>;
-	closing: SharedValue<number>;
 	animating: SharedValue<number>;
+	closing: SharedValue<number>;
+	entering: SharedValue<number>;
 };
 
 const store: Record<ScreenKey, AnimationStoreMap> = {};
@@ -20,7 +17,8 @@ const ensure = (key: ScreenKey) => {
 			progress: makeMutable(0),
 			closing: makeMutable(0),
 			animating: makeMutable(0),
-		};
+			entering: makeMutable(1),
+		} satisfies AnimationStoreMap;
 		store[key] = bag;
 	}
 	return bag;
@@ -28,7 +26,7 @@ const ensure = (key: ScreenKey) => {
 
 function getAnimation(
 	key: ScreenKey,
-	type: "progress" | "closing" | "animating",
+	type: keyof AnimationStoreMap,
 ): SharedValue<number> {
 	return ensure(key)[type];
 }
@@ -39,23 +37,11 @@ function getAll(key: ScreenKey) {
 
 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/history.store.ts

@@ -0,0 +1,201 @@
+import type { ScreenKey } from "../types/screen.types";
+import type { BaseStackDescriptor } from "../types/stack.types";
+
+const HISTORY_LIMIT = 100;
+
+interface HistoryEntry {
+	descriptor: BaseStackDescriptor;
+	navigatorKey: string;
+	timestamp: number;
+}
+
+// Map preserves insertion order - index 0 = oldest, last = most recent
+const history = new Map<ScreenKey, HistoryEntry>();
+const listeners = new Set<() => void>();
+
+// Cached snapshot for useSyncExternalStore
+let cachedSnapshot: ReadonlyMap<ScreenKey, HistoryEntry> = history;
+
+function updateSnapshot(): void {
+	cachedSnapshot = new Map(history);
+}
+
+function notifyListeners(): void {
+	updateSnapshot();
+	listeners.forEach((listener) => {
+		listener();
+	});
+}
+
+/**
+ * Subscribe for useSyncExternalStore compatibility
+ */
+function subscribe(listener: () => void): () => void {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+}
+
+/**
+ * Get current snapshot for useSyncExternalStore
+ */
+function getSnapshot(): ReadonlyMap<ScreenKey, HistoryEntry> {
+	return cachedSnapshot;
+}
+
+/**
+ * Add or move screen to top (most recent).
+ * LRU behavior: if exists, delete and re-add to move to end.
+ * @param descriptor - The screen descriptor
+ * @param navigatorKey - The navigator's key (for cleanup on unmount)
+ * @param historyKey - Optional custom key (defaults to navigatorKey:routeName)
+ */
+function focus(
+	descriptor: BaseStackDescriptor,
+	navigatorKey: string,
+	historyKey?: ScreenKey,
+): void {
+	const key = historyKey ?? `${navigatorKey}:${descriptor.route.name}`;
+
+	// Delete first (if exists) to reset position - this is the LRU "move to top"
+	history.delete(key);
+
+	// Add to end (most recent)
+	history.set(key, {
+		descriptor,
+		navigatorKey,
+		timestamp: Date.now(),
+	});
+
+	// Evict oldest if over limit
+	while (history.size > HISTORY_LIMIT) {
+		const oldestKey = history.keys().next().value;
+		if (oldestKey) {
+			history.delete(oldestKey);
+		}
+	}
+
+	notifyListeners();
+}
+
+/**
+ * Get most recent entry (for forward nav).
+ */
+function getMostRecent(): HistoryEntry | undefined {
+	const entries = Array.from(history.values());
+	return entries[entries.length - 1];
+}
+
+/**
+ * Get N most recent entries (most recent first).
+ */
+function getRecent(n: number): HistoryEntry[] {
+	const entries = Array.from(history.values());
+	return entries.slice(-n).reverse();
+}
+
+/**
+ * Get entry by key.
+ */
+function get(key: ScreenKey): HistoryEntry | undefined {
+	return history.get(key);
+}
+
+/**
+ * Check if key exists.
+ */
+function has(key: ScreenKey): boolean {
+	return history.has(key);
+}
+
+/**
+ * Get all entries for a navigator (in recency order, most recent first).
+ */
+function getByNavigator(navigatorKey: string): HistoryEntry[] {
+	const entries: HistoryEntry[] = [];
+	for (const entry of history.values()) {
+		if (entry.navigatorKey === navigatorKey) {
+			entries.push(entry);
+		}
+	}
+	return entries.reverse();
+}
+
+/**
+ * Get path between two screens (for multi-waypoint interpolation).
+ * Returns keys in order from 'from' to 'to'.
+ */
+function getPath(fromKey: ScreenKey, toKey: ScreenKey): ScreenKey[] {
+	const keys = Array.from(history.keys());
+	const fromIndex = keys.indexOf(fromKey);
+	const toIndex = keys.indexOf(toKey);
+
+	if (fromIndex < 0 || toIndex < 0) return [];
+
+	const start = Math.min(fromIndex, toIndex);
+	const end = Math.max(fromIndex, toIndex);
+	const path = keys.slice(start, end + 1);
+
+	// Return in correct direction
+	return fromIndex > toIndex ? path.reverse() : path;
+}
+
+/**
+ * Clear all entries for a navigator (on unmount).
+ */
+function clearNavigator(navigatorKey: string): void {
+	const keysToRemove: ScreenKey[] = [];
+	for (const [key, entry] of history.entries()) {
+		if (entry.navigatorKey === navigatorKey) {
+			keysToRemove.push(key);
+		}
+	}
+
+	if (keysToRemove.length > 0) {
+		for (const key of keysToRemove) {
+			history.delete(key);
+		}
+		notifyListeners();
+	}
+}
+
+/**
+ * Get current size of history.
+ */
+function size(): number {
+	return history.size;
+}
+
+/**
+ * Convert to array (in recency order, oldest first).
+ */
+function toArray(): HistoryEntry[] {
+	return Array.from(history.values());
+}
+
+/**
+ * Clear all history entries (for testing).
+ * @internal
+ */
+function _reset(): void {
+	history.clear();
+	listeners.clear();
+	cachedSnapshot = new Map();
+}
+
+export const HistoryStore = {
+	focus,
+	getMostRecent,
+	getRecent,
+	get,
+	has,
+	getByNavigator,
+	getPath,
+	clearNavigator,
+	size,
+	toArray,
+	subscribe,
+	getSnapshot,
+	_reset,
+};
+
+export type { HistoryEntry };

package/src/shared/types/animation.types.ts

@@ -40,6 +40,15 @@ export type ScreenTransitionState = {
 	 */
 	closing: number;
 
+	/**
+	 * Whether this screen is in the process of entering.
+	 * - `0`: Screen is closing or inactive
+	 * - `1`: Screen is opening/entering
+	 *
+	 * Use this to trigger different animations when navigating back vs forward.
+	 */
+	entering: number;
+
 	/**
 	 * Whether this screen is currently animating.
 	 * - `0`: No animation in progress

package/src/shared/types/bounds.types.ts

@@ -36,6 +36,7 @@ export type BoundsAccessor = {
 	interpolateBounds: (
 		id: string,
 		property: keyof MeasuredDimensions,
+		fallbackOrTargetKey?: number | string,
 		fallback?: number,
 	) => number;
 };

package/src/shared/types/stack.types.ts

@@ -22,6 +22,7 @@ export interface BaseStackNavigation {
 	};
 	dispatch: (action: any) => void;
 	addListener?: (event: any, callback: any) => () => void;
+	emit?: (event: any) => any;
 }
 
 /**

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

@@ -32,10 +32,13 @@ export const startScreenTransition = ({
 			? { ...config, velocity: initialVelocity }
 			: config;
 
-	const { progress, animating, closing } = animations;
+	const { progress, animating, closing, entering } = animations;
 
 	if (target === "close") {
 		closing.set(TRUE);
+		entering.set(FALSE);
+	} else {
+		entering.set(TRUE);
 	}
 
 	if (!config) {

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

@@ -230,15 +230,41 @@ export const createBounds = (
 	const interpolateBounds = (
 		tag: string,
 		property: keyof MeasuredDimensions,
+		fallbackOrTargetKey?: number | string,
 		fallback?: number,
 	): number => {
 		"worklet";
-		const link = getLink(tag);
 		const entering = !props.next;
 		const range = entering ? ENTER_RANGE : EXIT_RANGE;
 
-		const sourceValue = link?.source?.bounds?.[property] ?? fallback ?? 0;
-		const destValue = link?.destination?.bounds?.[property] ?? fallback ?? 0;
+		// If third param is a string, it's a targetKey (snapshot approach)
+		if (typeof fallbackOrTargetKey === "string") {
+			const targetKey = fallbackOrTargetKey;
+			const currentKey = props.current?.route?.key;
+			const fb = fallback ?? 0;
+
+			const currentSnapshot = currentKey
+				? BoundStore.getSnapshot(tag, currentKey)
+				: null;
+			const targetSnapshot = BoundStore.getSnapshot(tag, targetKey);
+
+			const currentValue = currentSnapshot?.bounds?.[property] ?? fb;
+			const targetValue = targetSnapshot?.bounds?.[property] ?? fb;
+
+			return interpolate(
+				props.progress,
+				range,
+				[targetValue, currentValue],
+				"clamp",
+			);
+		}
+
+		// Otherwise, use link approach (existing behavior)
+		const link = getLink(tag);
+		const fb = fallbackOrTargetKey ?? 0;
+
+		const sourceValue = link?.source?.bounds?.[property] ?? fb;
+		const destValue = link?.destination?.bounds?.[property] ?? fb;
 
 		return interpolate(
 			props.progress,

package/lib/commonjs/shared/utils/read-shared-value.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.readSharedValue = void 0;
-var _reactNativeReanimated = require("react-native-reanimated");
-/**
- * Safely read a SharedValue from the UI thread.
- * Avoids the "cannot read .value inside component render" warning.
- */
-const readSharedValue = exports.readSharedValue = (0, _reactNativeReanimated.executeOnUIRuntimeSync)(sv => {
-  "worklet";
-
-  return sv.value;
-});
-//# sourceMappingURL=read-shared-value.js.map

package/lib/commonjs/shared/utils/read-shared-value.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNativeReanimated","require","readSharedValue","exports","executeOnUIRuntimeSync","sv","value"],"sourceRoot":"../../../../src","sources":["shared/utils/read-shared-value.ts"],"mappings":";;;;;;AAAA,IAAAA,sBAAA,GAAAC,OAAA;AAKA;AACA;AACA;AACA;AACO,MAAMC,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,IAAAE,6CAAsB,EAChDC,EAAkB,IAAQ;EAC7B,SAAS;;EACT,OAAOA,EAAE,CAACC,KAAK;AAChB,CACD,CAAC","ignoreList":[]}

package/lib/module/shared/utils/read-shared-value.js

@@ -1,14 +0,0 @@
-"use strict";
-
-import { executeOnUIRuntimeSync } from "react-native-reanimated";
-
-/**
- * Safely read a SharedValue from the UI thread.
- * Avoids the "cannot read .value inside component render" warning.
- */
-export const readSharedValue = executeOnUIRuntimeSync(sv => {
-  "worklet";
-
-  return sv.value;
-});
-//# sourceMappingURL=read-shared-value.js.map

package/lib/module/shared/utils/read-shared-value.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["executeOnUIRuntimeSync","readSharedValue","sv","value"],"sourceRoot":"../../../../src","sources":["shared/utils/read-shared-value.ts"],"mappings":";;AAAA,SACCA,sBAAsB,QAEhB,yBAAyB;;AAEhC;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAGD,sBAAsB,CAChDE,EAAkB,IAAQ;EAC7B,SAAS;;EACT,OAAOA,EAAE,CAACC,KAAK;AAChB,CACD,CAAC","ignoreList":[]}

package/lib/typescript/shared/utils/read-shared-value.d.ts

@@ -1,7 +0,0 @@
-import { type SharedValue } from "react-native-reanimated";
-/**
- * Safely read a SharedValue from the UI thread.
- * Avoids the "cannot read .value inside component render" warning.
- */
-export declare const readSharedValue: <T>(sv: SharedValue<T>) => T;
-//# sourceMappingURL=read-shared-value.d.ts.map

package/lib/typescript/shared/utils/read-shared-value.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"read-shared-value.d.ts","sourceRoot":"","sources":["../../../../src/shared/utils/read-shared-value.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,WAAW,EAChB,MAAM,yBAAyB,CAAC;AAEjC;;;GAGG;AACH,eAAO,MAAM,eAAe,GAC1B,CAAC,0BAIF,CAAC"}

package/src/shared/utils/read-shared-value.ts

@@ -1,15 +0,0 @@
-import {
-	executeOnUIRuntimeSync,
-	type SharedValue,
-} from "react-native-reanimated";
-
-/**
- * Safely read a SharedValue from the UI thread.
- * Avoids the "cannot read .value inside component render" warning.
- */
-export const readSharedValue = executeOnUIRuntimeSync(
-	<T>(sv: SharedValue<T>): T => {
-		"worklet";
-		return sv.value;
-	},
-);