react-native-screen-transitions 2.0.6 → 2.1.0

package/lib/typescript/utils/bounds/_utils/is-bounds-equal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-bounds-equal.d.ts","sourceRoot":"","sources":["../../../../../src/utils/bounds/_utils/is-bounds-equal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAGlE,eAAO,MAAM,aAAa,GAAI,oCAI3B;IACF,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,cAAc,EAAE,MAAM,CAAC;CACvB,YAYA,CAAC"}

package/lib/typescript/utils/bounds/{style-composers.d.ts → _utils/style-composers.d.ts}

@@ -1,11 +1,6 @@
-import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
-import type { BoundsBuilderOptions } from "./_types/builder";
-import type { ContentTransformGeometry, RelativeGeometry } from "./_types/geometry";
-/**
- * Common interpolation helper signature used by composers.
- * It maps from a -> b over the already-determined progress range.
- */
-export type Interp = (a: number, b: number) => number;
+import { type MeasuredDimensions, type StyleProps } from "react-native-reanimated";
+import type { BoundsBuilderOptions } from "../_types/builder";
+import type { ContentTransformGeometry, RelativeGeometry } from "../_types/geometry";
 /**
  * Element-level (relative) params shared by size/transform composers.
  * - start/end: absolute window bounds of the element in previous/next phases
@@ -16,7 +11,8 @@ export type ElementComposeParams = {
     start: MeasuredDimensions;
     end: MeasuredDimensions;
     geometry: RelativeGeometry;
-    interp: Interp;
+    progress: number;
+    ranges: readonly [number, number];
     computeOptions: BoundsBuilderOptions;
 };
 /**
@@ -29,7 +25,8 @@ export type ContentComposeParams = {
     start: MeasuredDimensions;
     end: MeasuredDimensions;
     geometry: ContentTransformGeometry;
-    interp: Interp;
+    progress: number;
+    ranges: readonly [number, number];
     computeOptions: BoundsBuilderOptions;
 };
 export declare function composeSizeAbsolute(params: ElementComposeParams): StyleProps;

package/lib/typescript/utils/bounds/_utils/style-composers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-composers.d.ts","sourceRoot":"","sources":["../../../../../src/utils/bounds/_utils/style-composers.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,kBAAkB,EACvB,KAAK,UAAU,EACf,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EACX,wBAAwB,EACxB,gBAAgB,EAChB,MAAM,oBAAoB,CAAC;AAE5B;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG;IAClC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,GAAG,EAAE,kBAAkB,CAAC;IACxB,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,cAAc,EAAE,oBAAoB,CAAC;CACrC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG;IAClC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,GAAG,EAAE,kBAAkB,CAAC;IACxB,QAAQ,EAAE,wBAAwB,CAAC;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,cAAc,EAAE,oBAAoB,CAAC;CACrC,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,oBAAoB,GAAG,UAAU,CAgC5E;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,oBAAoB,GAAG,UAAU,CAkC5E;AAED,wBAAgB,wBAAwB,CACvC,MAAM,EAAE,oBAAoB,GAC1B,UAAU,CA6BZ;AAED,wBAAgB,wBAAwB,CACvC,MAAM,EAAE,oBAAoB,GAC1B,UAAU,CAoCZ;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,oBAAoB,GAAG,UAAU,CA+B5E"}

package/lib/typescript/utils/bounds/constants.d.ts

@@ -1,7 +1,7 @@
-import type { ScaledSize } from 'react-native';
-import type { MeasuredDimensions } from 'react-native-reanimated';
-import type { Complete } from '../../types/utils';
-import type { BoundsBuilderOptions } from './_types/builder';
+import type { ScaledSize } from "react-native";
+import type { MeasuredDimensions } from "react-native-reanimated";
+import type { Complete } from "../../types/utils";
+import type { BoundsBuilderOptions } from "./_types/builder";
 export declare const FULLSCREEN_DIMENSIONS: (dimensions: ScaledSize) => MeasuredDimensions;
-export declare const DEFAULT_BUILDER_OPTIONS: Complete<BoundsBuilderOptions>;
+export declare const DEFAULT_BUILDER_OPTIONS: Complete<Omit<BoundsBuilderOptions, "id">>;
 //# sourceMappingURL=constants.d.ts.map

package/lib/typescript/utils/bounds/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/utils/bounds/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE7D,eAAO,MAAM,qBAAqB,GAAI,YAAY,UAAU,KAAG,kBAU9D,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAAC,oBAAoB,CAOjE,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/utils/bounds/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE7D,eAAO,MAAM,qBAAqB,GACjC,YAAY,UAAU,KACpB,kBAUF,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAC7C,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAmBtB,CAAC"}

package/lib/typescript/utils/bounds/index.d.ts

@@ -1,6 +1,6 @@
 import type { ScaledSize } from "react-native";
-import type { ScreenPhase } from "../../types/core";
 import type { ScreenTransitionState } from "../../types/animation";
+import type { BoundsAccessor } from "../../types/bounds";
 export interface BuildBoundsAccessorParams {
     activeBoundId: string | null;
     current: ScreenTransitionState;
@@ -9,7 +9,5 @@ export interface BuildBoundsAccessorParams {
     progress: number;
     dimensions: ScaledSize;
 }
-export declare const buildBoundsAccessor: ({ activeBoundId, current, previous, next, progress, dimensions, }: BuildBoundsAccessorParams) => ((id?: string) => import("../../types/bounds").BoundsBuilder) & {
-    get: (id?: string, phase?: ScreenPhase) => import("../../types/bounds").BoundEntry;
-};
+export declare const createBounds: ({ activeBoundId, current, previous, next, progress, dimensions, }: BuildBoundsAccessorParams) => BoundsAccessor;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/bounds/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAInE,MAAM,WAAW,yBAAyB;IACzC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,OAAO,EAAE,qBAAqB,CAAC;IAC/B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,UAAU,CAAC;CACvB;AAED,eAAO,MAAM,mBAAmB,GAAI,mEAOjC,yBAAyB,YAGN,MAAM;eAWf,MAAM,UAAU,WAAW;CASvC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/bounds/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACnE,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,oBAAoB,CAAC;AAqBxE,MAAM,WAAW,yBAAyB;IACzC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,OAAO,EAAE,qBAAqB,CAAC;IAC/B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,UAAU,CAAC;CACvB;AAwND,eAAO,MAAM,YAAY,GAAI,mEAO1B,yBAAyB,KAAG,cAyC9B,CAAC"}

package/lib/typescript/utils/gesture/apply-offset-rules.d.ts

@@ -0,0 +1,38 @@
+import type { ScaledSize } from "react-native";
+import type { GestureStateManagerType } from "react-native-gesture-handler/lib/typescript/handlers/gestures/gestureStateManager";
+import type { SharedValue } from "react-native-reanimated";
+import { type GestureActivationArea, GestureOffsetState } from "../../types/gesture";
+type Directions = {
+    vertical: boolean;
+    verticalInverted: boolean;
+    horizontal: boolean;
+    horizontalInverted: boolean;
+};
+interface CheckGestureActivationProps {
+    initialTouch: {
+        x: number;
+        y: number;
+    };
+    touch: {
+        x: number;
+        y: number;
+    };
+    directions: Directions;
+    manager?: GestureStateManagerType;
+    gestureOffsetState: SharedValue<GestureOffsetState>;
+    activationArea?: GestureActivationArea;
+    dimensions: ScaledSize;
+    responseDistance?: number;
+}
+interface ReturnValues {
+    isSwipingDown: boolean;
+    isSwipingUp: boolean;
+    isSwipingRight: boolean;
+    isSwipingLeft: boolean;
+}
+/**
+ * Since we're using onTouchesMove to activate our pan, faillOffset and activateOffset don't actually work. In that case we'll create this function to use in onTouchesMove which acts simarly to the original functionality.
+ */
+export declare const applyOffsetRules: ({ initialTouch, touch, directions, manager, gestureOffsetState, activationArea, dimensions, responseDistance, }: CheckGestureActivationProps) => ReturnValues;
+export {};
+//# sourceMappingURL=apply-offset-rules.d.ts.map

package/lib/typescript/utils/gesture/apply-offset-rules.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"apply-offset-rules.d.ts","sourceRoot":"","sources":["../../../../src/utils/gesture/apply-offset-rules.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mFAAmF,CAAC;AACjI,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAEN,KAAK,qBAAqB,EAC1B,kBAAkB,EAElB,MAAM,qBAAqB,CAAC;AAE7B,KAAK,UAAU,GAAG;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,kBAAkB,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,UAAU,2BAA2B;IACpC,YAAY,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,kBAAkB,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACpD,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,UAAU,EAAE,UAAU,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B;AA8BD,UAAU,YAAY;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;CACvB;AAiKD;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,iHAS9B,2BAA2B,KAAG,YA+EhC,CAAC"}

package/lib/typescript/utils/gesture/check-gesture-activation.d.ts

@@ -0,0 +1,38 @@
+import type { ScaledSize } from "react-native";
+import type { GestureStateManagerType } from "react-native-gesture-handler/lib/typescript/handlers/gestures/gestureStateManager";
+import type { SharedValue } from "react-native-reanimated";
+import { type GestureActivationArea, GestureOffsetState } from "../../types/gesture";
+type Directions = {
+    vertical: boolean;
+    verticalInverted: boolean;
+    horizontal: boolean;
+    horizontalInverted: boolean;
+};
+interface CheckGestureActivationProps {
+    initialTouch: {
+        x: number;
+        y: number;
+    };
+    touch: {
+        x: number;
+        y: number;
+    };
+    directions: Directions;
+    manager?: GestureStateManagerType;
+    gestureOffsetState: SharedValue<GestureOffsetState>;
+    activationArea?: GestureActivationArea;
+    dimensions: ScaledSize;
+    responseDistance?: number;
+}
+interface ReturnValues {
+    isSwipingDown: boolean;
+    isSwipingUp: boolean;
+    isSwipingRight: boolean;
+    isSwipingLeft: boolean;
+}
+/**
+ * Since we're using onTouchesMove to activate our pan, faillOffset and activateOffset don't actually work. In that case we'll create this function to use in onTouchesMove which acts simarly to the original functionality.
+ */
+export declare const applyOffsetRules: ({ initialTouch, touch, directions, manager, gestureOffsetState, activationArea, dimensions, responseDistance, }: CheckGestureActivationProps) => ReturnValues;
+export {};
+//# sourceMappingURL=check-gesture-activation.d.ts.map

package/lib/typescript/utils/gesture/check-gesture-activation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"check-gesture-activation.d.ts","sourceRoot":"","sources":["../../../../src/utils/gesture/check-gesture-activation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mFAAmF,CAAC;AACjI,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAEN,KAAK,qBAAqB,EAC1B,kBAAkB,EAElB,MAAM,qBAAqB,CAAC;AAE7B,KAAK,UAAU,GAAG;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,kBAAkB,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,UAAU,2BAA2B;IACpC,YAAY,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,kBAAkB,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACpD,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,UAAU,EAAE,UAAU,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B;AA8BD,UAAU,YAAY;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;CACvB;AAiKD;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,iHAS9B,2BAA2B,KAAG,YA2EhC,CAAC"}

package/lib/typescript/utils/gesture/determine-dismissal.d.ts

@@ -0,0 +1,25 @@
+interface DetermineDismissalProps {
+    event: {
+        translationX: number;
+        translationY: number;
+        velocityX: number;
+        velocityY: number;
+    };
+    directions: {
+        vertical: boolean;
+        verticalInverted: boolean;
+        horizontal: boolean;
+        horizontalInverted: boolean;
+    };
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    gestureVelocityImpact: number;
+}
+export declare const determineDismissal: ({ event, directions, dimensions, gestureVelocityImpact, }: DetermineDismissalProps) => {
+    shouldDismiss: boolean;
+    velocity: number;
+};
+export {};
+//# sourceMappingURL=determine-dismissal.d.ts.map

package/lib/typescript/utils/gesture/determine-dismissal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"determine-dismissal.d.ts","sourceRoot":"","sources":["../../../../src/utils/gesture/determine-dismissal.ts"],"names":[],"mappings":"AAOA,UAAU,uBAAuB;IAChC,KAAK,EAAE;QACN,YAAY,EAAE,MAAM,CAAC;QACrB,YAAY,EAAE,MAAM,CAAC;QACrB,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,UAAU,EAAE;QACX,QAAQ,EAAE,OAAO,CAAC;QAClB,gBAAgB,EAAE,OAAO,CAAC;QAC1B,UAAU,EAAE,OAAO,CAAC;QACpB,kBAAkB,EAAE,OAAO,CAAC;KAC5B,CAAC;IACF,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,qBAAqB,EAAE,MAAM,CAAC;CAC9B;AAuCD,eAAO,MAAM,kBAAkB,GAAI,2DAKhC,uBAAuB;;;CAgEzB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-screen-transitions",
-	"version": "2.0.6",
+	"version": "2.1.0",
 	"description": "Easy screen transitions for React Native and Expo",
 	"author": "Ed",
 	"license": "MIT",
@@ -65,5 +65,5 @@
 			]
 		]
 	},
-	"gitHead": "888d4df9936ec0e3b8221bea7cd81115e6301693"
+	"gitHead": "92afaa07f6b9c279851d6aef805ecbfefdbcc4df"
 }

package/src/__tests__/geometry.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, it } from "bun:test";
 import {
 	computeContentTransformGeometry,
 	computeRelativeGeometry,
-} from "../utils/bounds/geometry";
+} from "../utils/bounds/_utils/geometry";
 
 describe("computeRelativeGeometry", () => {
 	it("calculates correct relative geometry when entering", () => {
@@ -29,7 +29,6 @@ describe("computeRelativeGeometry", () => {
 		expect(result.dy).toBe(-180); // center diff Y
 		expect(result.scaleX).toBe(0.5); // width ratio
 		expect(result.scaleY).toBe(0.5); // height ratio
-		expect(result.ranges).toEqual([0, 1]);
 		expect(result.entering).toBe(true);
 	});
 
@@ -39,7 +38,6 @@ describe("computeRelativeGeometry", () => {
 
 		const result = computeRelativeGeometry({ start, end, entering: false });
 
-		expect(result.ranges).toEqual([1, 2]);
 		expect(result.entering).toBe(false);
 	});
 });
@@ -47,7 +45,7 @@ describe("computeRelativeGeometry", () => {
 describe("computeContentTransformGeometry", () => {
 	const dimensions = { width: 375, height: 812, scale: 1, fontScale: 1 };
 
-	it("calculates transform with aspectFit mode", () => {
+	it("uniform chooses min scale when aspect ratio differs significantly", () => {
 		const start = {
 			x: 0,
 			y: 0,
@@ -63,15 +61,15 @@ describe("computeContentTransformGeometry", () => {
 			end,
 			entering: true,
 			dimensions,
-			contentScaleMode: "aspectFit",
+			anchor: "center",
+			scaleMode: "uniform",
 		});
 
 		expect(result.s).toBe(0.5);
 		expect(result.entering).toBe(true);
-		expect(result.ranges).toEqual([0, 1]);
 	});
 
-	it("calculates transform with aspectFill mode", () => {
+	it("calculates transform with match mode (average of sx/sy)", () => {
 		const start = {
 			x: 0,
 			y: 0,
@@ -87,13 +85,16 @@ describe("computeContentTransformGeometry", () => {
 			end,
 			entering: true,
 			dimensions,
-			contentScaleMode: "aspectFill",
+			anchor: "center",
+			// match mode uses the average of sx and sy
+			scaleMode: "match",
 		});
 
-		expect(result.s).toBe(2);
+		// sx = 100/200 = 0.5, sy = 100/50 = 2 -> (0.5 + 2) / 2 = 1.25
+		expect(result.s).toBeCloseTo(1.25, 5);
 	});
 
-	it("handles auto mode based on aspect ratio difference", () => {
+	it("uniform chooses max scale when aspect ratios are similar", () => {
 		const start = { x: 0, y: 0, pageX: 0, pageY: 0, width: 100, height: 100 };
 		const end = { x: 0, y: 0, pageX: 0, pageY: 0, width: 200, height: 195 };
 
@@ -102,7 +103,8 @@ describe("computeContentTransformGeometry", () => {
 			end,
 			entering: true,
 			dimensions,
-			contentScaleMode: "auto",
+			anchor: "center",
+			scaleMode: "uniform",
 		});
 
 		expect(result.s).toBeCloseTo(0.512, 2);
@@ -118,7 +120,8 @@ describe("computeContentTransformGeometry", () => {
 			end,
 			entering: true,
 			dimensions,
-			contentScaleMode: "aspectFit",
+			anchor: "center",
+			scaleMode: "uniform",
 		});
 
 		expect(result.s).toBeDefined();

package/src/components/{bounds-activator.tsx → bound-capture.tsx}

@@ -8,7 +8,7 @@ interface BoundActivatorProps {
 	measure: () => void;
 }
 
-export const BoundActivator = ({
+export const BoundCapture = ({
 	sharedBoundTag,
 	children,
 	measure,

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

@@ -1,4 +1,5 @@
 import { useEffect, useLayoutEffect } from "react";
+import { useParentGestureRegistry } from "../../hooks/gestures/use-parent-gesture-registry";
 import useStableCallback from "../../hooks/use-stable-callback";
 import { useKeys } from "../../providers/keys";
 import { Animations } from "../../stores/animations";
@@ -23,21 +24,25 @@ export const ScreenLifecycleController = ({
 
 		// Don't run e.preventDefault when the dismissal was on the local root
 		if (requestedDismissOnNavigator) {
-			resetStoresForScreen(current);
+			resetStoresForScreen(current, { clearActive: true });
 			return;
 		}
 
 		// Don't run e.preventDefault when this is the first screen of the stack
 		if (current.navigation.getState().index === 0) {
-			resetStoresForScreen(current);
+			resetStoresForScreen(current, { clearActive: true });
 			return;
 		}
 
 		e.preventDefault();
 		const onFinish = (finished: boolean) => {
 			if (finished) {
-				resetStoresForScreen(current);
 				current.navigation.dispatch(e.data.action);
+
+				// we'll ensure the dispatch is complete before resetting stores
+				requestAnimationFrame(() => {
+					resetStoresForScreen(current, { clearActive: false });
+				});
 			}
 		};
 
@@ -57,8 +62,6 @@ export const ScreenLifecycleController = ({
 		});
 	});
 
-	useLayoutEffect(handleInitialize, []);
-
 	useEffect(() => {
 		const unsubscribe = current.navigation.addListener(
 			"beforeRemove",
@@ -68,5 +71,10 @@ export const ScreenLifecycleController = ({
 		return unsubscribe;
 	}, [current.navigation, handleBeforeRemove]);
 
+	useLayoutEffect(handleInitialize, []);
+
+	// important for t.a scrollviews inside nested navigators.
+	useParentGestureRegistry();
+
 	return children;
 };

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

@@ -4,13 +4,13 @@ import type { View } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
 import Animated, { runOnUI, useAnimatedRef } from "react-native-reanimated";
 import { useAssociatedStyles } from "../hooks/animation/use-associated-style";
-import { useBoundMeasurer } from "../hooks/bounds/use-bound-measurer";
-import { useScrollProgress } from "../hooks/gestures/use-scroll-progress";
+import { useBoundsRegistry } from "../hooks/bounds/use-bound-registry";
+import { useScrollRegistry } from "../hooks/gestures/use-scroll-registry";
 import { useGestureContext } from "../providers/gestures";
 import { useKeys } from "../providers/keys";
 import type { TransitionAwareProps } from "../types/core";
 import type { Any } from "../types/utils";
-import { BoundActivator } from "./bounds-activator";
+import { BoundCapture } from "./bound-capture";
 
 interface CreateTransitionAwareComponentOptions {
 	isScrollable?: boolean;
@@ -29,11 +29,10 @@ export function createTransitionAwareComponent<P extends object>(
 		TransitionAwareProps<P>
 	>((props: Any, ref) => {
 		const { nativeGesture } = useGestureContext();
-
-		const { scrollHandler, onContentSizeChange, onLayout } = useScrollProgress({
+		const { scrollHandler, onContentSizeChange, onLayout } = useScrollRegistry({
 			onScroll: props.onScroll,
 			onContentSizeChange: props.onContentSizeChange,
-			onLayout: props.onLayout, // Add this line to pass through onLayout
+			onLayout: props.onLayout,
 		});
 
 		return (
@@ -64,7 +63,7 @@ export function createTransitionAwareComponent<P extends object>(
 			id: sharedBoundTag || styleId,
 		});
 
-		const { measureAndSet, measureOnLayout } = useBoundMeasurer({
+		const { measureBounds, handleLayout } = useBoundsRegistry({
 			sharedBoundTag,
 			animatedRef,
 			current,
@@ -72,21 +71,28 @@ export function createTransitionAwareComponent<P extends object>(
 		});
 
 		if (isScrollable) {
-			return <ScrollableInner {...(props as Any)} ref={ref} />;
+			return (
+				<ScrollableInner
+					{...(props as Any)}
+					ref={ref}
+					measureBounds={measureBounds}
+					handleLayout={handleLayout}
+				/>
+			);
 		}
 
 		return (
-			<BoundActivator sharedBoundTag={sharedBoundTag} measure={measureAndSet}>
+			<BoundCapture sharedBoundTag={sharedBoundTag} measure={measureBounds}>
 				<AnimatedComponent
 					{...(rest as Any)}
 					ref={animatedRef}
 					style={[style, associatedStyles]}
 					onPress={onPress}
-					onLayout={runOnUI(measureOnLayout)}
+					onLayout={runOnUI(handleLayout)}
 				>
 					{children}
 				</AnimatedComponent>
-			</BoundActivator>
+			</BoundCapture>
 		);
 	});
 

package/src/components/integrations/masked-view.tsx

@@ -0,0 +1,56 @@
+import { type StyleProp, StyleSheet, View, type ViewStyle } from "react-native";
+import { createTransitionAwareComponent } from "../create-transition-aware-component";
+
+const TransitionView = createTransitionAwareComponent(View);
+
+let LazyMaskedView = View;
+
+try {
+	LazyMaskedView = require("@react-native-masked-view/masked-view").default;
+} catch (_) {
+	// noop
+}
+
+const MASK_STYLE_ID = "_ROOT_MASKED";
+const CONTAINER_STYLE_ID = "_ROOT_CONTAINER";
+
+export default function MaskedView({
+	children,
+	style: userStyles = {},
+}: {
+	children: React.ReactNode;
+	style?: StyleProp<ViewStyle>;
+}) {
+	if (LazyMaskedView === View) {
+		return children;
+	}
+
+	return (
+		<LazyMaskedView
+			style={styles.root}
+			// @ts-expect-error
+			maskElement={
+				<TransitionView styleId={MASK_STYLE_ID} style={styles.rootMask} />
+			}
+		>
+			<TransitionView
+				styleId={CONTAINER_STYLE_ID}
+				style={[styles.rootContainer, userStyles]}
+			>
+				{children}
+			</TransitionView>
+		</LazyMaskedView>
+	);
+}
+
+const styles = StyleSheet.create({
+	root: {
+		flex: 1,
+	},
+	rootMask: {
+		backgroundColor: "white",
+	},
+	rootContainer: {
+		flex: 1,
+	},
+});

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

@@ -1,50 +1,42 @@
 import { memo } from "react";
-import { StyleSheet } from "react-native";
-import Animated, { useAnimatedStyle } from "react-native-reanimated";
-import { _useScreenAnimation } from "../hooks/animation/use-screen-animation";
+import { StyleSheet, View } from "react-native";
+import Animated, {
+	type StyleProps,
+	useAnimatedStyle,
+} from "react-native-reanimated";
+import { useTransitionStyles } from "../providers/transition-styles";
 
-interface RootTransitionAwareProps {
+type Props = {
 	children: React.ReactNode;
-}
+};
 
-export const RootTransitionAware = memo(
-	({ children }: RootTransitionAwareProps) => {
-		const { screenInterpolatorProps, screenStyleInterpolator } =
-			_useScreenAnimation();
+const EMPTY_STYLE = Object.freeze({} as StyleProps);
 
-		const animatedContentStyle = useAnimatedStyle(() => {
-			"worklet";
-			if (!screenStyleInterpolator) {
-				return {};
-			}
-			const props = screenInterpolatorProps.value;
-			return screenStyleInterpolator(props).contentStyle || {};
-		});
+export const RootTransitionAware = memo(({ children }: Props) => {
+	const stylesMap = useTransitionStyles();
 
-		const animatedOverlayStyle = useAnimatedStyle(() => {
-			"worklet";
-			if (!screenStyleInterpolator) {
-				return {};
-			}
-			return (
-				screenStyleInterpolator(screenInterpolatorProps.value).overlayStyle ||
-				{}
-			);
-		});
+	const animatedContentStyle = useAnimatedStyle(() => {
+		"worklet";
+		return stylesMap.value.contentStyle || EMPTY_STYLE;
+	});
 
-		return (
-			<Animated.View style={styles.container}>
-				<Animated.View
-					style={[StyleSheet.absoluteFillObject, animatedOverlayStyle]}
-					pointerEvents="none"
-				/>
-				<Animated.View style={[styles.content, animatedContentStyle]}>
-					{children}
-				</Animated.View>
+	const animatedOverlayStyle = useAnimatedStyle(() => {
+		"worklet";
+		return stylesMap.value.overlayStyle || EMPTY_STYLE;
+	});
+
+	return (
+		<View style={styles.container}>
+			<Animated.View
+				style={[StyleSheet.absoluteFillObject, animatedOverlayStyle]}
+				pointerEvents="none"
+			/>
+			<Animated.View style={[styles.content, animatedContentStyle]}>
+				{children}
 			</Animated.View>
-		);
-	},
-);
+		</View>
+	);
+});
 
 const styles = StyleSheet.create({
 	container: {

package/src/configs/index.ts

@@ -1,14 +1,26 @@
-import { DraggableCard, ElasticCard, SlideFromBottom, SlideFromTop, ZoomIn } from './presets';
-import { DefaultSpec } from './specs';
+import {
+	DraggableCard,
+	ElasticCard,
+	SharedAppleMusic,
+	SharedIGImage,
+	SharedXImage,
+	SlideFromBottom,
+	SlideFromTop,
+	ZoomIn,
+} from "./presets";
+import { DefaultSpec } from "./specs";
 
 export const specs = {
-  DefaultSpec,
+	DefaultSpec,
 };
 
 export const presets = {
-  SlideFromTop,
-  ZoomIn,
-  SlideFromBottom,
-  DraggableCard,
-  ElasticCard,
+	SlideFromTop,
+	ZoomIn,
+	SlideFromBottom,
+	DraggableCard,
+	ElasticCard,
+	SharedIGImage,
+	SharedAppleMusic,
+	SharedXImage,
 };