react-native-screen-transitions 2.2.0 → 2.2.1

package/lib/typescript/stores/{bounds.d.ts → bounds/index.d.ts}

@@ -1,32 +1,22 @@
 import { type MeasuredDimensions, type StyleProps } from "react-native-reanimated";
-import type { ScreenTransitionState } from "../types/animation";
-import type { ScreenKey } from "../types/navigator";
+import type { ScreenTransitionState } from "../../types/animation";
+import type { ScreenKey } from "../../types/navigator";
 declare function setBounds(screenId: string, boundId: string, bounds?: MeasuredDimensions | null, styles?: StyleProps): void;
 declare function getBounds(screenId: string): Record<string, {
     bounds: MeasuredDimensions;
     styles: StyleProps;
 }>;
-declare function setActiveBoundId(boundId: string): void;
-declare function getActiveBoundId(): string | null;
 declare function setRouteActive(routeKey: string, boundId: string): void;
 declare function getRouteActive(routeKey: string): string;
-declare function setTransitionHint(fromKey: string, toKey: string, boundId: string): void;
-declare function getTransitionHint(fromKey: string, toKey: string): string | null;
 declare function clear(routeKey: ScreenKey): void;
-declare function clearActive(): void;
 declare function getActiveBound(current: ScreenTransitionState, next: ScreenTransitionState | undefined, previous: ScreenTransitionState | undefined): string;
 export declare const Bounds: {
     setBounds: typeof setBounds;
     getBounds: typeof getBounds;
-    setActiveBoundId: typeof setActiveBoundId;
-    getActiveBoundId: typeof getActiveBoundId;
     setRouteActive: typeof setRouteActive;
     getRouteActive: typeof getRouteActive;
-    setTransitionHint: typeof setTransitionHint;
-    getTransitionHint: typeof getTransitionHint;
     clear: typeof clear;
-    clearActive: typeof clearActive;
     getActiveBound: typeof getActiveBound;
 };
 export {};
-//# sourceMappingURL=bounds.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/stores/bounds/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/stores/bounds/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,kBAAkB,EAEvB,KAAK,UAAU,EACf,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAavD,iBAAS,SAAS,CACjB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,MAAM,EACf,MAAM,GAAE,kBAAkB,GAAG,IAAW,EACxC,MAAM,GAAE,UAAe,QAYvB;AAED,iBAAS,SAAS,CAAC,QAAQ,EAAE,MAAM;YAzBT,kBAAkB;YAAU,UAAU;GA4B/D;AAED,iBAAS,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,QAOxD;AAED,iBAAS,cAAc,CAAC,QAAQ,EAAE,MAAM,UAGvC;AAoBD,iBAAS,KAAK,CAAC,QAAQ,EAAE,SAAS,QAyBjC;AAED,iBAAS,cAAc,CACtB,OAAO,EAAE,qBAAqB,EAC9B,IAAI,EAAE,qBAAqB,GAAG,SAAS,EACvC,QAAQ,EAAE,qBAAqB,GAAG,SAAS,UAW3C;AAED,eAAO,MAAM,MAAM;;;;;;;CAOlB,CAAC"}

package/lib/typescript/stores/utils/reset-stores-for-screen.d.ts

@@ -2,7 +2,5 @@ import type { NativeStackDescriptor } from "../../types/navigator";
 /**
  * Reset all stores for a given screen
  */
-export declare const resetStoresForScreen: (current: NativeStackDescriptor, options?: {
-    clearActive?: boolean;
-}) => void;
+export declare const resetStoresForScreen: (current: NativeStackDescriptor) => void;
 //# sourceMappingURL=reset-stores-for-screen.d.ts.map

package/lib/typescript/stores/utils/reset-stores-for-screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reset-stores-for-screen.d.ts","sourceRoot":"","sources":["../../../../src/stores/utils/reset-stores-for-screen.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAKnE;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAChC,SAAS,qBAAqB,EAC9B,UAAS;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAO,SAQvC,CAAC"}
+{"version":3,"file":"reset-stores-for-screen.d.ts","sourceRoot":"","sources":["../../../../src/stores/utils/reset-stores-for-screen.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAKnE;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAAI,SAAS,qBAAqB,SAIlE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-screen-transitions",
-	"version": "2.2.0",
+	"version": "2.2.1",
 	"description": "Easy screen transitions for React Native and Expo",
 	"author": "Ed",
 	"license": "MIT",
@@ -49,7 +49,7 @@
 		"@testing-library/react-native": "^13.2.0",
 		"@types/react": "~19.0.10",
 		"react-native-builder-bob": "0.39.0",
-		"typescript": "~5.8.3"
+		"typescript": "catalog:"
 	},
 	"react-native-builder-bob": {
 		"source": "src",
@@ -65,5 +65,5 @@
 			]
 		]
 	},
-	"gitHead": "ea83a2b1bc369610cde35850de314c43122ba60c"
+	"gitHead": "888d4df9936ec0e3b8221bea7cd81115e6301693"
 }

package/src/__tests__/bounds.store.test.ts

@@ -0,0 +1,185 @@
+import { beforeEach, describe, expect, it } from "bun:test";
+import { resolveActiveBound } from "../stores/bounds/_utils";
+import type { ScreenTransitionState } from "../types/animation";
+
+type Dim = {
+	x: number;
+	y: number;
+	pageX: number;
+	pageY: number;
+	width: number;
+	height: number;
+};
+
+const getDimensions = (x = 0, y = 0, w = 100, h = 100): Dim => ({
+	x,
+	y,
+	pageX: x,
+	pageY: y,
+	width: w,
+	height: h,
+});
+
+const mockState = (
+	routeKey: string,
+	ids: string[] = [],
+): ScreenTransitionState => {
+	const bounds: Record<
+		string,
+		{ bounds: Dim; styles: Record<string, unknown> }
+	> = {};
+	ids.forEach((id, i) => {
+		bounds[id] = { bounds: getDimensions(i * 10, i * 10), styles: {} };
+	});
+	return {
+		progress: 1,
+		closing: 0,
+		animating: 1,
+		gesture: {
+			x: 0,
+			y: 0,
+			normalizedX: 0,
+			normalizedY: 0,
+			isDismissing: 0,
+			isDragging: 0,
+		},
+		bounds,
+		// @ts-expect-error partial route
+		route: { key: routeKey },
+	};
+};
+
+let cache: Record<string, string>;
+let lastActiveByRoute: Record<string, string>;
+beforeEach(() => {
+	cache = {};
+	lastActiveByRoute = {};
+});
+
+const getPairCache = (from: string, to: string) =>
+	cache[`${from}|${to}`] ?? null;
+const setPairCache = (from: string, to: string, id: string) => {
+	cache[`${from}|${to}`] = id;
+};
+const getRouteActive = (routeKey: string) =>
+	lastActiveByRoute[routeKey] ?? null;
+
+describe("Bounds.getActiveBound - requested id priority and acceptance", () => {
+	it("selects requested id when present only on current (opening)", () => {
+		const A = "A-1";
+		const B = "B-1";
+		const current = mockState(A, ["container"]);
+		const previous = mockState(B, ["icon"]);
+
+		// Opening: fromKey is previous.route.key (B)
+		lastActiveByRoute[B] = "container";
+		const active = resolveActiveBound({
+			current,
+			previous,
+			getPairCache,
+			setPairCache,
+			getRouteActive,
+		});
+
+		expect(active).toBe("container");
+		expect(getPairCache(B, A)).toBeNull();
+	});
+
+	it("selects requested id when present only on other (closing)", () => {
+		const A = "A-2";
+		const B = "B-2";
+		const current = mockState(A, ["icon"]);
+		const next = mockState(B, ["container"]);
+
+		// Closing: fromKey is current.route.key (A)
+		lastActiveByRoute[A] = "container";
+		const active = resolveActiveBound({
+			current,
+			next,
+			getPairCache,
+			setPairCache,
+			getRouteActive,
+		});
+		expect(active).toBe("container");
+		expect(getPairCache(A, B)).toBeNull();
+	});
+});
+
+describe("Bounds.getActiveBound - hint behavior (guarded writes)", () => {
+	it("writes cache only when both sides have the id", () => {
+		const A = "A-3";
+		const B = "B-3";
+		// Both have the same id measured
+		const current = mockState(A, ["container"]);
+		const previous = mockState(B, ["container"]);
+
+		// Opening: fromKey is previous.route.key (B)
+		lastActiveByRoute[B] = "container";
+		const active = resolveActiveBound({
+			current,
+			previous,
+			getPairCache,
+			setPairCache,
+			getRouteActive,
+		});
+		expect(active).toBe("container");
+		expect(getPairCache(B, A)).toBe("container");
+	});
+
+	it("requested id overrides existing cache and updates it when both sides measured", () => {
+		const A = "A-4";
+		const B = "B-4";
+		// Both sides have icon and container
+		// Pre-seed a conflicting cache
+		setPairCache(B, A, "icon");
+
+		const current = mockState(A, ["icon", "container"]);
+		const previous = mockState(B, ["icon", "container"]);
+
+		// Opening: fromKey is previous.route.key (B)
+		lastActiveByRoute[B] = "container";
+		const active = resolveActiveBound({
+			current,
+			previous,
+			getPairCache,
+			setPairCache,
+			getRouteActive,
+		});
+		expect(active).toBe("container");
+		expect(getPairCache(B, A)).toBe("container");
+	});
+});
+
+describe("Bounds.getActiveBound - set intersection and fallbacks", () => {
+	it("falls back to intersection when no request or cache", () => {
+		const A = "A-5";
+		const B = "B-5";
+		const current = mockState(A, ["alpha", "beta"]);
+		const previous = mockState(B, ["beta", "gamma"]);
+
+		const active = resolveActiveBound({
+			current,
+			previous,
+			getPairCache,
+			setPairCache,
+			getRouteActive,
+		});
+		expect(active).toBe("beta");
+	});
+
+	it("when other has a single bound, selects it (no request/cache)", () => {
+		const A = "A-6";
+		const B = "B-6";
+		const current = mockState(A, ["alpha"]);
+		const previous = mockState(B, ["only"]);
+
+		const active = resolveActiveBound({
+			current,
+			previous,
+			getPairCache,
+			setPairCache,
+			getRouteActive,
+		});
+		expect(active).toBe("only");
+	});
+});

package/src/components/bound-capture.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { useKeys } from "../providers/keys";
 import { Bounds } from "../stores/bounds";
 
 interface BoundActivatorProps {
@@ -13,15 +14,17 @@ export const BoundCapture = ({
 	children,
 	measure,
 }: BoundActivatorProps) => {
+	const { current } = useKeys();
+	const routeKey = current.route.key;
 	const tapGesture = useMemo(() => {
 		return Gesture.Tap().onStart(() => {
 			"worklet";
 			if (sharedBoundTag) {
-				Bounds.setActiveBoundId(sharedBoundTag);
+				Bounds.setRouteActive(routeKey, sharedBoundTag);
 				measure();
 			}
 		});
-	}, [sharedBoundTag, measure]);
+	}, [sharedBoundTag, measure, routeKey]);
 
 	if (!sharedBoundTag) return children;
 

package/src/components/controllers/screen-lifecycle.tsx

@@ -24,13 +24,13 @@ export const ScreenLifecycleController = ({
 
 		// Don't run e.preventDefault when the dismissal was on the local root
 		if (requestedDismissOnNavigator) {
-			resetStoresForScreen(current, { clearActive: true });
+			resetStoresForScreen(current);
 			return;
 		}
 
 		// Don't run e.preventDefault when this is the first screen of the stack
 		if (current.navigation.getState().index === 0) {
-			resetStoresForScreen(current, { clearActive: true });
+			resetStoresForScreen(current);
 			return;
 		}
 
@@ -41,7 +41,7 @@ export const ScreenLifecycleController = ({
 
 				// we'll ensure the dispatch is complete before resetting stores
 				requestAnimationFrame(() => {
-					resetStoresForScreen(current, { clearActive: false });
+					resetStoresForScreen(current);
 				});
 			}
 		};

package/src/components/create-transition-aware-component.tsx

@@ -68,6 +68,7 @@ export function createTransitionAwareComponent<P extends object>(
 
 		const { associatedStyles } = useAssociatedStyles({
 			id: sharedBoundTag || styleId,
+			style,
 		});
 
 		const { measureBounds, handleLayout } = useBoundsRegistry({

package/src/components/root-transition-aware.tsx

@@ -13,7 +13,7 @@ type Props = {
 const EMPTY_STYLE = Object.freeze({} as StyleProps);
 
 export const RootTransitionAware = memo(({ children }: Props) => {
-	const stylesMap = useTransitionStyles();
+	const { stylesMap } = useTransitionStyles();
 
 	const animatedContentStyle = useAnimatedStyle(() => {
 		"worklet";

package/src/hooks/animation/use-associated-style.tsx

@@ -1,19 +1,37 @@
-import { useAnimatedStyle } from "react-native-reanimated";
+import {
+	type StyleProps,
+	useAnimatedStyle,
+	useDerivedValue,
+	useSharedValue,
+} from "react-native-reanimated";
 import { useTransitionStyles } from "../../providers/transition-styles";
 
 type Props = {
 	id?: string;
+	style?: StyleProps;
 };
 
 const EMPTY_STYLE = Object.freeze({});
 
 /**
- * This hook is used to get the associated styles for a given styleId.
- * It is used to get the associated styles for a given styleId.
- * It is used to get the associated styles for a given styleId.
+ * This hook is used to get the associated styles for a given styleId / boundTag.
  */
-export const useAssociatedStyles = ({ id }: Props = {}) => {
-	const stylesMap = useTransitionStyles();
+export const useAssociatedStyles = ({ id, style }: Props = {}) => {
+	const { stylesMap } = useTransitionStyles();
+	const showAfterFirstFrame = useSharedValue(false);
+
+	useDerivedValue(() => {
+		"worklet";
+		if (!id) {
+			showAfterFirstFrame.value = true;
+			return;
+		}
+		if (!showAfterFirstFrame.value) {
+			requestAnimationFrame(() => {
+				showAfterFirstFrame.value = true;
+			});
+		}
+	});
 
 	const associatedStyles = useAnimatedStyle(() => {
 		"worklet";
@@ -21,8 +39,25 @@ export const useAssociatedStyles = ({ id }: Props = {}) => {
 		if (!id || !stylesMap) {
 			return EMPTY_STYLE;
 		}
+		const base =
+			(stylesMap.value[id] as Record<string, unknown>) || EMPTY_STYLE;
+
+		let opacity = 1;
+
+		if ("opacity" in base) {
+			opacity = base.opacity as number;
+		}
+		if (style && "opacity" in style) {
+			opacity = style.opacity as number;
+		}
+
+		// Only force opacity to 0 during the initial frame; once ready,
+		// return base unchanged so we never override user-provided opacity.
+		if (!showAfterFirstFrame.value) {
+			return { ...base, opacity: 0 } as Record<string, unknown>;
+		}
 
-		return stylesMap.value[id] || EMPTY_STYLE;
+		return { ...base, opacity };
 	});
 
 	return { associatedStyles };

package/src/hooks/bounds/use-bound-registry.tsx

@@ -10,7 +10,6 @@ import { useKeys } from "../../providers/keys";
 import { Bounds } from "../../stores/bounds";
 import { flattenStyle } from "../../utils/bounds/_utils/flatten-styles";
 import { isBoundsEqual } from "../../utils/bounds/_utils/is-bounds-equal";
-import { useScreenAnimation } from "../animation/use-screen-animation";
 
 interface BoundMeasurerHookProps {
 	sharedBoundTag: string;
@@ -26,7 +25,7 @@ export const useBoundsRegistry = ({
 	style,
 }: BoundMeasurerHookProps) => {
 	const { previous } = useKeys();
-	const interpolatorProps = useScreenAnimation();
+
 	const isMeasured = useSharedValue(false);
 
 	const measureBounds = useCallback(() => {
@@ -36,12 +35,16 @@ export const useBoundsRegistry = ({
 		if (measured) {
 			const key = current.route.key;
 			if (isBoundsEqual({ measured, key, sharedBoundTag })) {
-				Bounds.setRouteActive(key, sharedBoundTag);
+				if (Bounds.getRouteActive(key) === sharedBoundTag) {
+					Bounds.setRouteActive(key, sharedBoundTag);
+				}
 				return;
 			}
 
 			Bounds.setBounds(key, sharedBoundTag, measured, flattenStyle(style));
-			Bounds.setRouteActive(key, sharedBoundTag);
+			if (Bounds.getRouteActive(key) === sharedBoundTag) {
+				Bounds.setRouteActive(key, sharedBoundTag);
+			}
 		}
 	}, [sharedBoundTag, animatedRef, current.route.key, style]);
 
@@ -56,17 +59,11 @@ export const useBoundsRegistry = ({
 		const previousBounds = Bounds.getBounds(previousRouteKey);
 		const hasPreviousBoundForTag = previousBounds[sharedBoundTag];
 
-		if (interpolatorProps.value.current.animating && hasPreviousBoundForTag) {
+		if (hasPreviousBoundForTag) {
 			measureBounds();
 			isMeasured.value = true;
 		}
-	}, [
-		measureBounds,
-		interpolatorProps,
-		sharedBoundTag,
-		previous?.route.key,
-		isMeasured,
-	]);
+	}, [measureBounds, sharedBoundTag, previous?.route.key, isMeasured]);
 
 	return {
 		measureBounds,

package/src/providers/transition-styles.tsx

@@ -10,7 +10,9 @@ type Props = {
 const EMPTY_MAP = Object.freeze({});
 
 const TransitionStylesContext = createContext<ReturnType<
-	typeof useDerivedValue<TransitionInterpolatedStyle>
+	typeof useMemo<{
+		stylesMap: ReturnType<typeof useDerivedValue<TransitionInterpolatedStyle>>;
+	}>
 > | null>(null);
 
 export function TransitionStylesProvider({ children }: Props) {
@@ -32,7 +34,11 @@ export function TransitionStylesProvider({ children }: Props) {
 			: EMPTY_MAP;
 	});
 
-	const value = useMemo(() => stylesMap, [stylesMap]);
+	const value = useMemo(() => {
+		return {
+			stylesMap,
+		};
+	}, [stylesMap]);
 
 	return (
 		<TransitionStylesContext.Provider value={value}>

package/src/stores/bounds/_utils.ts

@@ -0,0 +1,161 @@
+import type { ScreenTransitionState } from "../../types/animation";
+
+type GetCache = (fromKey: string, toKey: string) => string | null;
+type SetCache = (fromKey: string, toKey: string, id: string) => void;
+type GetRouteActive = (routeKey: string) => string | null;
+
+interface ResolveActiveBoundParams {
+	current: ScreenTransitionState;
+	next?: ScreenTransitionState;
+	previous?: ScreenTransitionState;
+	getPairCache: GetCache;
+	setPairCache: SetCache;
+	getRouteActive: GetRouteActive;
+}
+
+export function pairKey(fromKey?: string, toKey?: string) {
+	"worklet";
+	return fromKey && toKey ? `${fromKey}|${toKey}` : "";
+}
+
+const hasBound = (s: ScreenTransitionState | undefined, id?: string | null) => {
+	"worklet";
+	return !!id && !!s && !!s.bounds && !!s.bounds[id];
+};
+
+const getRoutePair = (
+	current: ScreenTransitionState,
+	next: ScreenTransitionState | undefined,
+	previous: ScreenTransitionState | undefined,
+) => {
+	"worklet";
+	const isClosing = !!next;
+	const fromKey = isClosing ? current.route.key : previous?.route.key;
+	const toKey = isClosing ? next?.route.key : current.route.key;
+	const other = next ?? previous;
+	return { fromKey, toKey, other } as const;
+};
+
+const resolveFromPairCache = (
+	fromKey: string | undefined,
+	toKey: string | undefined,
+	other: ScreenTransitionState | undefined,
+	getPairCache: GetCache,
+) => {
+	"worklet";
+	if (fromKey && toKey) {
+		const cached = getPairCache(fromKey, toKey);
+		if (hasBound(other, cached)) return cached as string;
+	}
+	return "";
+};
+
+const resolveFromRequested = (
+	reqId: string | null,
+	current: ScreenTransitionState,
+	other: ScreenTransitionState | undefined,
+) => {
+	"worklet";
+	if (hasBound(other, reqId)) return reqId as string;
+	if (hasBound(current, reqId)) return reqId as string;
+	return "";
+};
+
+const resolveFromInteresection = (
+	current: ScreenTransitionState,
+	other: ScreenTransitionState | undefined,
+	fromKey: string | undefined,
+	getRouteActive: GetRouteActive,
+) => {
+	"worklet";
+	if (!other) return "";
+	const a = Object.keys(current.bounds);
+	const b = Object.keys(other.bounds);
+	const inter = a.filter((k) => b.includes(k));
+	const otherHasAny = b.length > 0;
+	const routeActive = fromKey ? getRouteActive(fromKey) : null;
+
+	if (inter.length > 0) {
+		if (routeActive && inter.includes(routeActive)) return routeActive;
+		return inter[0];
+	}
+
+	if (routeActive && hasBound(other, routeActive)) return routeActive;
+	if (b.length === 1) return b[0];
+
+	if (!otherHasAny) {
+		if (routeActive && hasBound(current, routeActive)) return routeActive;
+		if (a.length === 1) return a[0];
+	}
+
+	return "";
+};
+
+/**
+ * Util function to get the active bound id for a given transition state.
+ *
+ * It will check by ( priority from highest to lowest ):
+ * 1. Requested id
+ * 2. Cache
+ * 3. Intersection
+ */
+export function resolveActiveBound({
+	current,
+	next,
+	previous,
+	getPairCache,
+	setPairCache,
+	getRouteActive,
+}: ResolveActiveBoundParams) {
+	"worklet";
+	const { fromKey, toKey, other } = getRoutePair(current, next, previous);
+
+	// Resolve requested from per-route most recently used (last active bound by route)
+	const requestedId = fromKey ? getRouteActive(fromKey) : null;
+	const byRequested = resolveFromRequested(requestedId, current, other);
+	if (byRequested) {
+		if (
+			fromKey &&
+			toKey &&
+			hasBound(current, byRequested) &&
+			hasBound(other, byRequested)
+		) {
+			setPairCache(fromKey, toKey, byRequested);
+		}
+		return byRequested;
+	}
+
+	const byPairCache = resolveFromPairCache(fromKey, toKey, other, getPairCache);
+	if (byPairCache) {
+		if (
+			fromKey &&
+			toKey &&
+			hasBound(current, byPairCache) &&
+			hasBound(other, byPairCache)
+		) {
+			setPairCache(fromKey, toKey, byPairCache);
+		}
+		return byPairCache;
+	}
+
+	const byIntersection = resolveFromInteresection(
+		current,
+		other,
+		fromKey,
+		getRouteActive,
+	);
+
+	if (byIntersection) {
+		if (
+			fromKey &&
+			toKey &&
+			hasBound(current, byIntersection) &&
+			hasBound(other, byIntersection)
+		) {
+			setPairCache(fromKey, toKey, byIntersection);
+		}
+		return byIntersection;
+	}
+
+	return "";
+}