react-native-screen-transitions 3.9.0-beta.3 → 3.9.0

package/lib/typescript/shared/utils/bounds/navigation/zoom/config.d.ts

@@ -6,8 +6,8 @@ export declare const ZOOM_DISMISS_VELOCITY_DEPTH = 1;
 export declare const ZOOM_BACKGROUND_SCALE = 0.9375;
 export declare const ZOOM_BACKDROP_MAX_OPACITY = 0.45;
 export declare const ZOOM_SCREEN_A_FADE_END = 0.54;
-export declare const ZOOM_FOCUSED_ELEMENT_OPEN_OPACITY_RANGE: readonly [0, 0.4, 0, 1];
-export declare const ZOOM_UNFOCUSED_ELEMENT_OPEN_OPACITY_RANGE: readonly [1.27, 1.4, 1, 0];
+export declare const ZOOM_FOCUSED_ELEMENT_OPEN_OPACITY_RANGE: readonly [0, 0.28, 0, 1];
+export declare const ZOOM_UNFOCUSED_ELEMENT_OPEN_OPACITY_RANGE: readonly [1.08, 1.32, 1, 0];
 export declare const ZOOM_FOCUSED_ELEMENT_CLOSE_OPACITY_RANGE: readonly [0.13, 0.7, 0, 1];
 export declare const ZOOM_UNFOCUSED_ELEMENT_CLOSE_OPACITY_RANGE: readonly [1.7, 2, 1, 0];
 //# sourceMappingURL=config.d.ts.map

package/lib/typescript/shared/utils/bounds/navigation/zoom/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/utils/bounds/navigation/zoom/config.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB;;;EAG9B,CAAC;AAEH,eAAO,MAAM,2BAA2B,IAAM,CAAC;AAC/C,eAAO,MAAM,qBAAqB,SAAS,CAAC;AAE5C,eAAO,MAAM,yBAAyB,OAAO,CAAC;AAE9C,eAAO,MAAM,sBAAsB,OAAO,CAAC;AAE3C,eAAO,MAAM,uCAAuC,yBAA0B,CAAC;AAC/E,eAAO,MAAM,yCAAyC,4BAE5C,CAAC;AAEX,eAAO,MAAM,wCAAwC,4BAE3C,CAAC;AACX,eAAO,MAAM,0CAA0C,yBAE7C,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/utils/bounds/navigation/zoom/config.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB;;;EAG9B,CAAC;AAEH,eAAO,MAAM,2BAA2B,IAAM,CAAC;AAC/C,eAAO,MAAM,qBAAqB,SAAS,CAAC;AAE5C,eAAO,MAAM,yBAAyB,OAAO,CAAC;AAE9C,eAAO,MAAM,sBAAsB,OAAO,CAAC;AAG3C,eAAO,MAAM,uCAAuC,0BAA2B,CAAC;AAChF,eAAO,MAAM,yCAAyC,6BAE5C,CAAC;AAEX,eAAO,MAAM,wCAAwC,4BAE3C,CAAC;AACX,eAAO,MAAM,0CAA0C,yBAE7C,CAAC"}

package/lib/typescript/shared/utils/bounds/navigation/zoom/helpers.d.ts

@@ -1,5 +1,6 @@
 import type { MeasuredDimensions } from "react-native-reanimated";
 import type { Layout } from "../../../../types/screen.types";
+import type { BoundsAnchor } from "../../types/options";
 export declare function resolveZoomBackdropOpacity({ transitionProgress, dismissalDrag, fadeEnd, maxOpacity, }: {
     transitionProgress: number;
     dismissalDrag: number;
@@ -17,7 +18,7 @@ export declare function resolveZoomPinchFocalOffset({ gestureScale, pinchOriginX
     x: number;
     y: number;
 };
-export declare function resolveZoomTrackedSourceTransform({ progress, sourceBounds, destinationBounds, screenLayout, dragX, dragY, gestureScale, parentScale, rotation, }: {
+export declare function resolveZoomTrackedSourceTransform({ progress, sourceBounds, destinationBounds, screenLayout, dragX, dragY, gestureScale, parentScale, rotation, anchor, }: {
     progress: number;
     sourceBounds: MeasuredDimensions;
     destinationBounds: MeasuredDimensions;
@@ -27,6 +28,7 @@ export declare function resolveZoomTrackedSourceTransform({ progress, sourceBoun
     gestureScale: number;
     parentScale: number;
     rotation?: number;
+    anchor?: BoundsAnchor;
 }): {
     scaleX: number;
     scaleY: number;

package/lib/typescript/shared/utils/bounds/navigation/zoom/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/utils/bounds/navigation/zoom/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAM7D,wBAAgB,0BAA0B,CAAC,EAC1C,kBAAkB,EAClB,aAAa,EACb,OAAO,EACP,UAAU,GACV,EAAE;IACF,kBAAkB,EAAE,MAAM,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACnB,UAUA;AAED,wBAAgB,2BAA2B,CAAC,EAC3C,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,YAAY,GACZ,EAAE;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;CACrB;;;EAmBA;AAED,wBAAgB,iCAAiC,CAAC,EACjD,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,KAAK,EACL,KAAK,EACL,YAAY,EACZ,WAAW,EACX,QAAY,GACZ,EAAE;IACF,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,kBAAkB,CAAC;IACjC,iBAAiB,EAAE,kBAAkB,CAAC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;;;;;EAgEA"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/utils/bounds/navigation/zoom/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAMxD,wBAAgB,0BAA0B,CAAC,EAC1C,kBAAkB,EAClB,aAAa,EACb,OAAO,EACP,UAAU,GACV,EAAE;IACF,kBAAkB,EAAE,MAAM,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACnB,UAUA;AAED,wBAAgB,2BAA2B,CAAC,EAC3C,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,YAAY,GACZ,EAAE;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;CACrB;;;EAmBA;AAED,wBAAgB,iCAAiC,CAAC,EACjD,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,KAAK,EACL,KAAK,EACL,YAAY,EACZ,WAAW,EACX,QAAY,EACZ,MAAM,GACN,EAAE;IACF,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,kBAAkB,CAAC;IACjC,iBAAiB,EAAE,kBAAkB,CAAC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC;CACtB;;;;;EAkEA"}

package/lib/typescript/shared/utils/bounds/navigation/zoom/mask.d.ts

@@ -2,6 +2,7 @@ import type { MeasuredDimensions } from "react-native-reanimated";
 import type { ScreenTransitionState, TransitionSlotStyle } from "../../../../types/animation.types";
 import type { BoundsLink, BoundsScopedAccessor } from "../../../../types/bounds.types";
 import type { Layout } from "../../../../types/screen.types";
+import type { BoundsAnchor } from "../../types/options";
 import type { ZoomDragState } from "./drag";
 export declare const ZOOM_NAVIGATION_MASK_BORDER_RADIUS = 64;
 interface ZoomNavigationMaskStyleProps {
@@ -19,7 +20,8 @@ interface ZoomNavigationMaskStyleProps {
     sourceBorderRadius: number;
     expandedBorderRadius: number;
     active: ScreenTransitionState;
+    anchor: BoundsAnchor;
 }
-export declare function resolveZoomNavigationMaskStyle({ scopedBounds, link, sourceBounds, screenLayout, transitionProgress, drag, contentTransform, sourceBorderRadius, expandedBorderRadius, active, }: ZoomNavigationMaskStyleProps): TransitionSlotStyle;
+export declare function resolveZoomNavigationMaskStyle({ scopedBounds, link, sourceBounds, screenLayout, transitionProgress, drag, contentTransform, sourceBorderRadius, expandedBorderRadius, active, anchor, }: ZoomNavigationMaskStyleProps): TransitionSlotStyle;
 export {};
 //# sourceMappingURL=mask.d.ts.map

package/lib/typescript/shared/utils/bounds/navigation/zoom/mask.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mask.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/utils/bounds/navigation/zoom/mask.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE,OAAO,KAAK,EACX,qBAAqB,EACrB,mBAAmB,EACnB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EACX,UAAU,EACV,oBAAoB,EACpB,MAAM,gCAAgC,CAAC;AACxC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAQ7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,eAAO,MAAM,kCAAkC,KAAK,CAAC;AAGrD,UAAU,4BAA4B;IACrC,YAAY,EAAE,oBAAoB,CAAC;IACnC,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,kBAAkB,CAAC;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,IAAI,EAAE,aAAa,CAAC;IACpB,gBAAgB,EAAE;QACjB,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC;KACd,CAAC;IACF,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,MAAM,EAAE,qBAAqB,CAAC;CAC9B;AAED,wBAAgB,8BAA8B,CAAC,EAC9C,YAAY,EACZ,IAAI,EACJ,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,IAAI,EACJ,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,MAAM,GACN,EAAE,4BAA4B,GAAG,mBAAmB,CA8EpD"}
+{"version":3,"file":"mask.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/utils/bounds/navigation/zoom/mask.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE,OAAO,KAAK,EACX,qBAAqB,EACrB,mBAAmB,EACnB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EACX,UAAU,EACV,oBAAoB,EACpB,MAAM,gCAAgC,CAAC;AACxC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAQxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,eAAO,MAAM,kCAAkC,KAAK,CAAC;AAGrD,UAAU,4BAA4B;IACrC,YAAY,EAAE,oBAAoB,CAAC;IACnC,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,kBAAkB,CAAC;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,IAAI,EAAE,aAAa,CAAC;IACpB,gBAAgB,EAAE;QACjB,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC;KACd,CAAC;IACF,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,MAAM,EAAE,qBAAqB,CAAC;IAC9B,MAAM,EAAE,YAAY,CAAC;CACrB;AAED,wBAAgB,8BAA8B,CAAC,EAC9C,YAAY,EACZ,IAAI,EACJ,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,IAAI,EACJ,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,MAAM,EACN,MAAM,GACN,EAAE,4BAA4B,GAAG,mBAAmB,CA8EpD"}

package/lib/typescript/shared/utils/bounds/navigation/zoom/targets.d.ts

@@ -1,12 +1,18 @@
 import type { MeasuredDimensions } from "react-native-reanimated";
 import type { BoundsLink, BoundsNavigationZoomOptions } from "../../../../types/bounds.types";
 import type { Layout } from "../../../../types/screen.types";
+import type { BoundsAnchor } from "../../types/options";
 type ZoomContentTarget = Exclude<BoundsNavigationZoomOptions["target"], undefined>;
 export declare function getZoomContentTarget({ explicitTarget, screenLayout, link, }: {
     explicitTarget: BoundsNavigationZoomOptions["target"];
     screenLayout: Layout;
     link: BoundsLink;
 }): ZoomContentTarget;
+export declare function getZoomContentAnchor({ explicitTarget, screenLayout, link, }: {
+    explicitTarget: BoundsNavigationZoomOptions["target"];
+    screenLayout: Layout;
+    link: BoundsLink;
+}): BoundsAnchor;
 export declare function resolveZoomTrackingContentTarget({ contentTarget, link, screenLayout, }: {
     contentTarget: ZoomContentTarget;
     link: BoundsLink;

package/lib/typescript/shared/utils/bounds/navigation/zoom/targets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"targets.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/utils/bounds/navigation/zoom/targets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,KAAK,EACX,UAAU,EACV,2BAA2B,EAC3B,MAAM,gCAAgC,CAAC;AACxC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAE7D,KAAK,iBAAiB,GAAG,OAAO,CAC/B,2BAA2B,CAAC,QAAQ,CAAC,EACrC,SAAS,CACT,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACpC,cAAc,EACd,YAAY,EACZ,IAAI,GACJ,EAAE;IACF,cAAc,EAAE,2BAA2B,CAAC,QAAQ,CAAC,CAAC;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,UAAU,CAAC;CACjB,GAAG,iBAAiB,CAwBpB;AAED,wBAAgB,gCAAgC,CAAC,EAChD,aAAa,EACb,IAAI,EACJ,YAAY,GACZ,EAAE;IACF,aAAa,EAAE,iBAAiB,CAAC;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;CACrB,GAAG,kBAAkB,GAAG,SAAS,CAmBjC"}
+{"version":3,"file":"targets.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/utils/bounds/navigation/zoom/targets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,KAAK,EACX,UAAU,EACV,2BAA2B,EAC3B,MAAM,gCAAgC,CAAC;AACxC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD,KAAK,iBAAiB,GAAG,OAAO,CAC/B,2BAA2B,CAAC,QAAQ,CAAC,EACrC,SAAS,CACT,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACpC,cAAc,EACd,YAAY,EACZ,IAAI,GACJ,EAAE;IACF,cAAc,EAAE,2BAA2B,CAAC,QAAQ,CAAC,CAAC;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,UAAU,CAAC;CACjB,GAAG,iBAAiB,CAiDpB;AAED,wBAAgB,oBAAoB,CAAC,EACpC,cAAc,EACd,YAAY,EACZ,IAAI,GACJ,EAAE;IACF,cAAc,EAAE,2BAA2B,CAAC,QAAQ,CAAC,CAAC;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,UAAU,CAAC;CACjB,GAAG,YAAY,CAsBf;AAED,wBAAgB,gCAAgC,CAAC,EAChD,aAAa,EACb,IAAI,EACJ,YAAY,GACZ,EAAE;IACF,aAAa,EAAE,iBAAiB,CAAC;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;CACrB,GAAG,kBAAkB,GAAG,SAAS,CAmBjC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-screen-transitions",
-	"version": "3.9.0-beta.3",
+	"version": "3.9.0",
 	"description": "Easy screen transitions for React Native and Expo",
 	"author": "Ed",
 	"license": "MIT",
@@ -85,7 +85,7 @@
 		"react-native-reanimated": ">=3.16.0 || >=4.0.0-",
 		"react-native-safe-area-context": "*",
 		"react-native-screens": ">=4.4.0",
-		"react-native-teleport": ">=1.1.0 <2.0.0"
+		"react-native-teleport": ">=1.1.0 <1.1.11"
 	},
 	"peerDependenciesMeta": {
 		"react-native-teleport": {

package/src/shared/components/boundary/portal/components/boundary-portal/components/portal-boundary-host.tsx

@@ -48,7 +48,7 @@ export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 		// Strict per-member lookup - a fallback member's source rect would
 		// misplace this host's teleported content.
 		const link = getLink(host.pairKey, host.boundaryId);
-		if (!link?.source || !link.destination) {
+		if (!link?.source) {
 			return NO_STYLES;
 		}
 
@@ -95,7 +95,7 @@ export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 	const contentFrameStyle = useAnimatedStyle(() => {
 		"worklet";
 		const link = getLink(host.pairKey, host.boundaryId);
-		if (!link?.source || !link.destination) {
+		if (!link?.source) {
 			return NO_STYLES;
 		}
 

package/src/shared/components/boundary/portal/utils/ownership.ts

@@ -196,7 +196,7 @@ export const resolveBoundaryPortalOwnership = ({
 	const linkKey = getLinkKeyFromTag(boundaryId);
 	const link = getPairLink(pairsState, sourcePairKey, linkKey);
 
-	if (link?.status !== "complete") {
+	if (!link?.source) {
 		return pendingSignal(sourcePairKey);
 	}
 
@@ -220,6 +220,10 @@ export const resolveBoundaryPortalOwnership = ({
 		};
 	}
 
+	if (link.status !== "complete") {
+		return pendingSignal(sourcePairKey);
+	}
+
 	let hostScreenKey = link.destination.screenKey;
 	let ownerPairKey = sourcePairKey;
 	const seenScreenKeys: ScreenKey[] = [

package/src/shared/configs/index.ts

@@ -8,12 +8,13 @@ import {
 	SlideFromTop,
 	ZoomIn,
 } from "./presets";
-import { DefaultSnapSpec, DefaultSpec, FlingSpec } from "./specs";
+import { DefaultSnapSpec, DefaultSpec, FlingSpec, Zoom } from "./specs";
 
 export const Specs = {
 	DefaultSpec,
 	DefaultSnapSpec,
 	FlingSpec,
+	Zoom,
 };
 
 export const Presets = {

package/src/shared/configs/specs.ts

@@ -1,4 +1,5 @@
 import type { WithSpringConfig } from "react-native-reanimated";
+import type { TransitionSpec } from "../types/animation.types";
 
 export const DefaultSpec: WithSpringConfig = {
 	stiffness: 1000,
@@ -22,3 +23,25 @@ export const FlingSpec: WithSpringConfig = {
 	overshootClamping: false,
 	energyThreshold: 6e-9,
 };
+
+/**
+ * Paired spring configuration tuned for navigation zoom transitions.
+ */
+export const Zoom = {
+	open: {
+		stiffness: 1000,
+		damping: 500,
+		mass: 3,
+		overshootClamping: false,
+		// @ts-expect-error Reanimated v3 spring config support.
+		restSpeedThreshold: 0.02,
+	},
+	close: {
+		stiffness: 1100,
+		damping: 98,
+		mass: 3,
+		overshootClamping: false,
+		// @ts-expect-error Reanimated v3 spring config support.
+		restSpeedThreshold: 0.02,
+	},
+} satisfies TransitionSpec;

package/src/shared/utils/bounds/navigation/reveal/math.ts

@@ -2,6 +2,7 @@ import type { MeasuredDimensions } from "react-native-reanimated";
 import { EPSILON } from "../../../../constants";
 import type { Layout } from "../../../../types/screen.types";
 import { computeContentTransformGeometry } from "../../helpers/geometry";
+import type { BoundsAnchor } from "../../types/options";
 import {
 	DRAG_DIRECTIONAL_SCALE_EXPONENT,
 	DRAG_DIRECTIONAL_SCALE_MAX,
@@ -189,11 +190,13 @@ export function resolveRevealContentBaseTransform({
 	sourceBounds,
 	destinationBounds,
 	screenLayout,
+	anchor,
 }: {
 	progress: number;
 	sourceBounds: MeasuredDimensions;
 	destinationBounds: MeasuredDimensions;
 	screenLayout: Layout;
+	anchor?: BoundsAnchor;
 }) {
 	"worklet";
 
@@ -202,6 +205,7 @@ export function resolveRevealContentBaseTransform({
 		end: destinationBounds,
 		entering: true,
 		dimensions: screenLayout,
+		anchor,
 		scaleMode: "uniform",
 	});
 

package/src/shared/utils/bounds/navigation/zoom/build.ts

@@ -27,6 +27,7 @@ import {
 	ZOOM_NAVIGATION_MASK_BORDER_RADIUS,
 } from "./mask";
 import {
+	getZoomContentAnchor,
 	getZoomContentTarget,
 	resolveZoomTrackingContentTarget,
 } from "./targets";
@@ -91,6 +92,11 @@ export function buildZoomStyles({
 		screenLayout,
 		link,
 	});
+	const zoomContentAnchor = getZoomContentAnchor({
+		explicitTarget: target,
+		screenLayout,
+		link,
+	});
 	const trackingContentTarget = resolveZoomTrackingContentTarget({
 		contentTarget: zoomContentTarget,
 		link,
@@ -149,7 +155,7 @@ export function buildZoomStyles({
 
 		const contentRaw = scopedBounds.values({
 			scaleMode: ZOOM_SHARED_OPTIONS.scaleMode,
-			anchor: target === "bound" ? "center" : ZOOM_SHARED_OPTIONS.anchor,
+			anchor: zoomContentAnchor,
 			method: "content",
 			target: zoomContentTarget,
 			progress: transitionProgress,
@@ -222,6 +228,7 @@ export function buildZoomStyles({
 						sourceBorderRadius,
 						expandedBorderRadius,
 						active,
+						anchor: zoomContentAnchor,
 					})
 				: {},
 		};
@@ -291,6 +298,7 @@ export function buildZoomStyles({
 		gestureScale: trackedGestureScale,
 		parentScale: unfocusedContentScale,
 		rotation: drag.rotation,
+		anchor: zoomContentAnchor,
 	});
 
 	return {

package/src/shared/utils/bounds/navigation/zoom/config.ts

@@ -9,10 +9,11 @@ export const ZOOM_BACKGROUND_SCALE = 0.9375;
 export const ZOOM_BACKDROP_MAX_OPACITY = 0.45;
 // Geometry-aligned native frames reach their darkest point around here.
 export const ZOOM_SCREEN_A_FADE_END = 0.54;
-// Open uses a tight owner handoff after red has traveled about one quarter.
-export const ZOOM_FOCUSED_ELEMENT_OPEN_OPACITY_RANGE = [0, 0.4, 0, 1] as const;
+// Native starts revealing the destination immediately while the source begins
+// handing ownership over in the first tenth of the opening travel.
+export const ZOOM_FOCUSED_ELEMENT_OPEN_OPACITY_RANGE = [0, 0.28, 0, 1] as const;
 export const ZOOM_UNFOCUSED_ELEMENT_OPEN_OPACITY_RANGE = [
-	1.27, 1.4, 1, 0,
+	1.08, 1.32, 1, 0,
 ] as const;
 // On close, red is prepared behind opaque blue before blue fades away.
 export const ZOOM_FOCUSED_ELEMENT_CLOSE_OPACITY_RANGE = [

package/src/shared/utils/bounds/navigation/zoom/helpers.ts

@@ -1,6 +1,7 @@
 import type { MeasuredDimensions } from "react-native-reanimated";
 import { EPSILON } from "../../../../constants";
 import type { Layout } from "../../../../types/screen.types";
+import type { BoundsAnchor } from "../../types/options";
 import {
 	resolveRevealContentBaseTransform,
 	resolveTrackedSourceElementTransform,
@@ -73,6 +74,7 @@ export function resolveZoomTrackedSourceTransform({
 	gestureScale,
 	parentScale,
 	rotation = 0,
+	anchor,
 }: {
 	progress: number;
 	sourceBounds: MeasuredDimensions;
@@ -83,6 +85,7 @@ export function resolveZoomTrackedSourceTransform({
 	gestureScale: number;
 	parentScale: number;
 	rotation?: number;
+	anchor?: BoundsAnchor;
 }) {
 	"worklet";
 
@@ -91,12 +94,14 @@ export function resolveZoomTrackedSourceTransform({
 		sourceBounds,
 		destinationBounds,
 		screenLayout,
+		anchor,
 	});
 	const collapsedContentScale = resolveRevealContentBaseTransform({
 		progress: 0,
 		sourceBounds,
 		destinationBounds,
 		screenLayout,
+		anchor,
 	}).scale;
 	const contentScale = contentBaseTransform.scale * gestureScale;
 	const safeCollapsedContentScale = Math.max(

package/src/shared/utils/bounds/navigation/zoom/mask.ts

@@ -9,6 +9,7 @@ import type {
 	BoundsScopedAccessor,
 } from "../../../../types/bounds.types";
 import type { Layout } from "../../../../types/screen.types";
+import type { BoundsAnchor } from "../../types/options";
 import { toNumber } from "../helpers";
 import { DRAG_MASK_HEIGHT_COLLAPSE_END } from "../reveal/config";
 import {
@@ -36,6 +37,7 @@ interface ZoomNavigationMaskStyleProps {
 	sourceBorderRadius: number;
 	expandedBorderRadius: number;
 	active: ScreenTransitionState;
+	anchor: BoundsAnchor;
 }
 
 export function resolveZoomNavigationMaskStyle({
@@ -49,12 +51,13 @@ export function resolveZoomNavigationMaskStyle({
 	sourceBorderRadius,
 	expandedBorderRadius,
 	active,
+	anchor,
 }: ZoomNavigationMaskStyleProps): TransitionSlotStyle {
 	"worklet";
 
 	const maskRaw = scopedBounds.values({
 		scaleMode: ZOOM_SHARED_OPTIONS.scaleMode,
-		anchor: ZOOM_SHARED_OPTIONS.anchor,
+		anchor,
 		method: "size",
 		space: "absolute",
 		target: "fullscreen",

package/src/shared/utils/bounds/navigation/zoom/targets.ts

@@ -4,6 +4,7 @@ import type {
 	BoundsNavigationZoomOptions,
 } from "../../../../types/bounds.types";
 import type { Layout } from "../../../../types/screen.types";
+import type { BoundsAnchor } from "../../types/options";
 
 type ZoomContentTarget = Exclude<
 	BoundsNavigationZoomOptions["target"],
@@ -27,11 +28,36 @@ export function getZoomContentTarget({
 
 	const sourceBounds = link.source?.bounds;
 	const screenWidth = screenLayout.width;
+	const screenHeight = screenLayout.height;
 
-	if (!sourceBounds || sourceBounds.width <= 0 || screenWidth <= 0) {
+	if (
+		!sourceBounds ||
+		sourceBounds.width <= 0 ||
+		sourceBounds.height <= 0 ||
+		screenWidth <= 0 ||
+		screenHeight <= 0
+	) {
 		return "fullscreen";
 	}
 
+	const sourceAspectRatio = sourceBounds.width / sourceBounds.height;
+	const screenAspectRatio = screenWidth / screenHeight;
+
+	// Zoom keeps one edge of the virtual destination attached to the source.
+	// A wide source fills the destination width and follows its top edge. A
+	// narrow source fills the destination height instead, so it follows the
+	// destination's leading edge rather than taking a long vertical path.
+	if (sourceAspectRatio < screenAspectRatio) {
+		return {
+			x: 0,
+			y: 0,
+			pageX: 0,
+			pageY: 0,
+			width: (sourceBounds.width / sourceBounds.height) * screenHeight,
+			height: screenHeight,
+		};
+	}
+
 	const height = (sourceBounds.height / sourceBounds.width) * screenWidth;
 
 	return {
@@ -44,6 +70,38 @@ export function getZoomContentTarget({
 	};
 }
 
+export function getZoomContentAnchor({
+	explicitTarget,
+	screenLayout,
+	link,
+}: {
+	explicitTarget: BoundsNavigationZoomOptions["target"];
+	screenLayout: Layout;
+	link: BoundsLink;
+}): BoundsAnchor {
+	"worklet";
+
+	if (explicitTarget !== undefined) {
+		return explicitTarget === "bound" ? "center" : "top";
+	}
+
+	const sourceBounds = link.source?.bounds;
+	if (
+		!sourceBounds ||
+		sourceBounds.width <= 0 ||
+		sourceBounds.height <= 0 ||
+		screenLayout.width <= 0 ||
+		screenLayout.height <= 0
+	) {
+		return "top";
+	}
+
+	return sourceBounds.width / sourceBounds.height <
+		screenLayout.width / screenLayout.height
+		? "leading"
+		: "top";
+}
+
 export function resolveZoomTrackingContentTarget({
 	contentTarget,
 	link,