react-native-screen-transitions 2.2.0 → 2.3.0

package/lib/typescript/stores/bounds/_utils.d.ts

@@ -0,0 +1,24 @@
+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 declare function pairKey(fromKey?: string, toKey?: string): string;
+/**
+ * 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 declare function resolveActiveBound({ current, next, previous, getPairCache, setPairCache, getRouteActive, }: ResolveActiveBoundParams): string;
+export {};
+//# sourceMappingURL=_utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"_utils.d.ts","sourceRoot":"","sources":["../../../../src/stores/bounds/_utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAEnE,KAAK,QAAQ,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;AAClE,KAAK,QAAQ,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;AACrE,KAAK,cAAc,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;AAE1D,UAAU,wBAAwB;IACjC,OAAO,EAAE,qBAAqB,CAAC;IAC/B,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,YAAY,EAAE,QAAQ,CAAC;IACvB,YAAY,EAAE,QAAQ,CAAC;IACvB,cAAc,EAAE,cAAc,CAAC;CAC/B;AAED,wBAAgB,OAAO,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAGvD;AA2ED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,EAClC,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,cAAc,GACd,EAAE,wBAAwB,UAoD1B"}

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/lib/typescript/types/animation.d.ts

@@ -35,6 +35,12 @@ export interface ScreenInterpolationProps {
     progress: number;
     /** A function that returns a bounds builder for the screen. */
     bounds: BoundsAccessor;
+    /** The active screen between current and next. */
+    active: ScreenTransitionState;
+    /** Whether the active screen is transitioning. */
+    isActiveTransitioning: boolean;
+    /** Whether the active screen is dismissing. */
+    isDismissing: boolean;
 }
 export type ScreenStyleInterpolator = (props: ScreenInterpolationProps) => TransitionInterpolatedStyle;
 export type TransitionInterpolatedStyle = {

package/lib/typescript/types/animation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../../src/types/animation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACzE,OAAO,KAAK,EACX,UAAU,EACV,gBAAgB,EAChB,gBAAgB,EAChB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE/C,MAAM,MAAM,qBAAqB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,aAAa,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACnC,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;CAChC,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACxC,yFAAyF;IACzF,QAAQ,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAC5C,OAAO,EAAE,qBAAqB,CAAC;IAC/B,8EAA8E;IAC9E,IAAI,EAAE,qBAAqB,GAAG,SAAS,CAAC;IACxC,0CAA0C;IAC1C,OAAO,EAAE;QACR,wDAAwD;QACxD,MAAM,EAAE;YACP,KAAK,EAAE,MAAM,CAAC;YACd,MAAM,EAAE,MAAM,CAAC;SACf,CAAC;KACF,CAAC;IACF,2CAA2C;IAC3C,MAAM,EAAE,UAAU,CAAC;IACnB,kCAAkC;IAClC,aAAa,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,oDAAoD;IACpD,QAAQ,EAAE,MAAM,CAAC;IACjB,+DAA+D;IAC/D,MAAM,EAAE,cAAc,CAAC;CACvB;AAED,MAAM,MAAM,uBAAuB,GAAG,CACrC,KAAK,EAAE,wBAAwB,KAC3B,2BAA2B,CAAC;AAEjC,MAAM,MAAM,2BAA2B,GAAG;IACzC;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;OAEG;IACH,CAAC,EAAE,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;CACrC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG,gBAAgB,CAAC;AAElE;;GAEG;AACH,MAAM,WAAW,cAAc;IAC9B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,eAAe,CAAC;CACxB"}
+{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../../src/types/animation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACzE,OAAO,KAAK,EACX,UAAU,EACV,gBAAgB,EAChB,gBAAgB,EAChB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE/C,MAAM,MAAM,qBAAqB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,aAAa,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACnC,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;CAChC,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACxC,yFAAyF;IACzF,QAAQ,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAC5C,OAAO,EAAE,qBAAqB,CAAC;IAC/B,8EAA8E;IAC9E,IAAI,EAAE,qBAAqB,GAAG,SAAS,CAAC;IACxC,0CAA0C;IAC1C,OAAO,EAAE;QACR,wDAAwD;QACxD,MAAM,EAAE;YACP,KAAK,EAAE,MAAM,CAAC;YACd,MAAM,EAAE,MAAM,CAAC;SACf,CAAC;KACF,CAAC;IACF,2CAA2C;IAC3C,MAAM,EAAE,UAAU,CAAC;IACnB,kCAAkC;IAClC,aAAa,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,oDAAoD;IACpD,QAAQ,EAAE,MAAM,CAAC;IACjB,+DAA+D;IAC/D,MAAM,EAAE,cAAc,CAAC;IACvB,kDAAkD;IAClD,MAAM,EAAE,qBAAqB,CAAC;IAC9B,kDAAkD;IAClD,qBAAqB,EAAE,OAAO,CAAC;IAC/B,+CAA+C;IAC/C,YAAY,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,uBAAuB,GAAG,CACrC,KAAK,EAAE,wBAAwB,KAC3B,2BAA2B,CAAC;AAEjC,MAAM,MAAM,2BAA2B,GAAG;IACzC;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;OAEG;IACH,CAAC,EAAE,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;CACrC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG,gBAAgB,CAAC;AAElE;;GAEG;AACH,MAAM,WAAW,cAAc;IAC9B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,eAAe,CAAC;CACxB"}

package/lib/typescript/utils/animation/derivations.d.ts

@@ -14,6 +14,9 @@ export declare const derivations: ({ current, next, previous, dimensions, }: Der
     focused: boolean;
     activeBoundId: string;
     bounds: import("../../types/bounds").BoundsAccessor;
+    active: ScreenTransitionState;
+    isActiveTransitioning: boolean;
+    isDismissing: boolean;
 };
 export {};
 //# sourceMappingURL=derivations.d.ts.map

package/lib/typescript/utils/animation/derivations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"derivations.d.ts","sourceRoot":"","sources":["../../../../src/utils/animation/derivations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAGnE,UAAU,iBAAiB;IAC1B,OAAO,EAAE,qBAAqB,CAAC;IAC/B,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,UAAU,EAAE,UAAU,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,0CAKzB,iBAAiB;;;;;CAiBnB,CAAC"}
+{"version":3,"file":"derivations.d.ts","sourceRoot":"","sources":["../../../../src/utils/animation/derivations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAGnE,UAAU,iBAAiB;IAC1B,OAAO,EAAE,qBAAqB,CAAC;IAC/B,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,UAAU,EAAE,UAAU,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,0CAKzB,iBAAiB;;;;;;;;CAoCnB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-screen-transitions",
-	"version": "2.2.0",
+	"version": "2.3.0",
 	"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/configs/presets.ts

@@ -17,16 +17,13 @@ export const SlideFromTop = (
 		gestureEnabled: true,
 		gestureDirection: "vertical-inverted",
 		screenStyleInterpolator: ({
-			current,
-			next,
+			progress,
 			layouts: {
 				screen: { height },
 			},
 		}) => {
 			"worklet";
 
-			const progress = current.progress + (next?.progress ?? 0);
-
 			const y = interpolate(progress, [0, 1, 2], [-height, 0, height]);
 
 			return {
@@ -50,11 +47,9 @@ export const ZoomIn = (
 	return {
 		enableTransitions: true,
 		gestureEnabled: false,
-		screenStyleInterpolator: ({ current, next }) => {
+		screenStyleInterpolator: ({ progress }) => {
 			"worklet";
 
-			const progress = current.progress + (next?.progress ?? 0);
-
 			const scale = interpolate(
 				progress,
 				[0, 1, 2],
@@ -92,16 +87,13 @@ export const SlideFromBottom = (
 		gestureEnabled: true,
 		gestureDirection: "vertical",
 		screenStyleInterpolator: ({
-			current,
-			next,
 			layouts: {
 				screen: { height },
 			},
+			progress,
 		}) => {
 			"worklet";
 
-			const progress = current.progress + (next?.progress ?? 0);
-
 			const y = interpolate(progress, [0, 1, 2], [height, 0, -height]);
 
 			return {
@@ -242,16 +234,12 @@ export const SharedIGImage = (
 			progress,
 			focused,
 			activeBoundId,
-			next,
+			active,
 		}) => {
 			"worklet";
 
-			const normX = focused
-				? current.gesture.normalizedX
-				: (next?.gesture.normalizedX ?? 0);
-			const normY = focused
-				? current.gesture.normalizedY
-				: (next?.gesture.normalizedY ?? 0);
+			const normX = active.gesture.normalizedX;
+			const normY = active.gesture.normalizedY;
 
 			// animations for both bounds
 			const dragX = interpolate(
@@ -369,16 +357,12 @@ export const SharedAppleMusic = (
 			progress,
 			layouts: { screen },
 			current,
-			next,
+			active,
 		}) => {
 			"worklet";
 
-			const normX = focused
-				? current.gesture.normalizedX
-				: (next?.gesture.normalizedX ?? 0);
-			const normY = focused
-				? current.gesture.normalizedY
-				: (next?.gesture.normalizedY ?? 0);
+			const normX = active.gesture.normalizedX;
+			const normY = active.gesture.normalizedY;
 
 			/**
 			 * ===============================

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/animation/use-screen-animation.tsx

@@ -106,7 +106,15 @@ export function _useScreenAnimation() {
 			const current =
 				unwrap(currentAnimation, currentDescriptor?.route.key) ?? FALLBACK;
 
-			const { progress, focused, activeBoundId, bounds } = derivations({
+			const {
+				progress,
+				focused,
+				activeBoundId,
+				bounds,
+				active,
+				isActiveTransitioning,
+				isDismissing,
+			} = derivations({
 				current,
 				next,
 				previous,
@@ -123,6 +131,9 @@ export function _useScreenAnimation() {
 				activeBoundId,
 				progress,
 				bounds,
+				active,
+				isActiveTransitioning,
+				isDismissing,
 			};
 		},
 	);

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