react-native-screen-transitions 4.0.0-alpha.0 → 4.0.0-alpha.10

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

@@ -3,9 +3,12 @@ import {
 	EPSILON,
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,
 } from "../../../../constants";
+import { getVisualScrollAxisDelta } from "../../../../stores/scroll.store";
+import type { ScrollMetadataState } from "../../../../types/gesture.types";
 import { createBoundsAccessorCore } from "../../helpers/create-bounds-accessor-core";
+import { computeContentTransformGeometry } from "../../helpers/geometry";
 import { getSourceBorderRadius } from "../helpers";
-import { resolveRevealContentBaseTransform } from "../reveal/math";
+import { resolveRevealContentBaseTransformFromGeometry } from "../reveal/math";
 import {
 	ZOOM_BACKDROP_MAX_OPACITY,
 	ZOOM_BACKGROUND_SCALE,
@@ -16,7 +19,7 @@ import {
 	ZOOM_UNFOCUSED_ELEMENT_CLOSE_OPACITY_RANGE,
 	ZOOM_UNFOCUSED_ELEMENT_OPEN_OPACITY_RANGE,
 } from "./config";
-import { resolveZoomDragState, resolveZoomTrackedGestureScale } from "./drag";
+import { resolveZoomDragState } from "./drag";
 import {
 	resolveZoomBackdropOpacity,
 	resolveZoomPinchFocalOffset,
@@ -107,23 +110,31 @@ export function buildZoomStyles({
 		return {};
 	}
 
+	const isDismissing = active.gesture.dismissing === 1;
+	const dismissalTrackingGeometry = isDismissing
+		? computeContentTransformGeometry({
+				start: sourceBounds,
+				end: trackingContentTarget,
+				entering: true,
+				dimensions: screenLayout,
+				anchor: zoomContentAnchor,
+				scaleMode: "uniform",
+			})
+		: null;
+	const dismissalCollapsedContentScale = dismissalTrackingGeometry
+		? resolveRevealContentBaseTransformFromGeometry({
+				geometry: dismissalTrackingGeometry,
+				progress: 0,
+			}).scale
+		: 1;
 	const drag = resolveZoomDragState({
 		gesture: active.gesture,
 		activeTransitionProgress,
 		screenLayout,
-		sourceBounds,
-		trackingContentTarget,
+		collapsedContentScale: dismissalCollapsedContentScale,
 		dragOptions: zoomOptions?.drag,
 	});
 
-	const trackedGestureScale = resolveZoomTrackedGestureScale({
-		drag,
-		activeTransitionProgress,
-		screenLayout,
-		sourceBounds,
-		trackingContentTarget,
-	});
-
 	const focalGesture = drag.isDismissing
 		? active.gesture.handoff
 		: active.gesture;
@@ -134,7 +145,7 @@ export function buildZoomStyles({
 			? resolveZoomPinchFocalOffset({
 					gestureScale: drag.isDismissing
 						? focalGesture.scale
-						: trackedGestureScale,
+						: drag.gestureScale,
 					pinchOriginX: focalGesture.pinchOriginX,
 					pinchOriginY: focalGesture.pinchOriginY,
 					progress: focalProgress,
@@ -144,6 +155,28 @@ export function buildZoomStyles({
 			: { x: 0, y: 0 };
 
 	if (focused) {
+		const capturedSourceScroll = (
+			sourceBounds as typeof sourceBounds & {
+				scroll?: ScrollMetadataState | null;
+			}
+		).scroll;
+		const liveSourceScroll = props.inactive?.layouts.scroll;
+		const sourceScrollWeight =
+			keepFocusedVisible && (active.entering || active.closing)
+				? 1 - Math.min(Math.max(activeTransitionProgress, 0), 1)
+				: 0;
+		const sourceScrollDeltaX =
+			getVisualScrollAxisDelta(
+				liveSourceScroll,
+				capturedSourceScroll,
+				"horizontal",
+			) * sourceScrollWeight;
+		const sourceScrollDeltaY =
+			getVisualScrollAxisDelta(
+				liveSourceScroll,
+				capturedSourceScroll,
+				"vertical",
+			) * sourceScrollWeight;
 		const sourceBorderRadius = getSourceBorderRadius(link);
 		const navigationMaskEnabled = current.options.navigationMaskEnabled;
 		const backdropOpacity = resolveZoomBackdropOpacity({
@@ -179,11 +212,13 @@ export function buildZoomStyles({
 		const contentTranslateX =
 			contentBaseTranslateX +
 			drag.dragX +
-			pinchFocalOffset.x * contentBaseScale;
+			pinchFocalOffset.x * contentBaseScale -
+			sourceScrollDeltaX;
 		const contentTranslateY =
 			contentBaseTranslateY +
 			drag.dragY +
-			pinchFocalOffset.y * contentBaseScale;
+			pinchFocalOffset.y * contentBaseScale -
+			sourceScrollDeltaY;
 		const contentScale = drag.isDismissing
 			? drag.dismissContentScale
 			: contentBaseScale * drag.gestureScale;
@@ -277,19 +312,39 @@ export function buildZoomStyles({
 		};
 	}
 
-	const trackedContentBaseScale = resolveRevealContentBaseTransform({
-		progress: activeTransitionProgress,
-		sourceBounds,
-		destinationBounds: trackingContentTarget,
-		screenLayout,
-	}).scale;
+	const trackingGeometry =
+		dismissalTrackingGeometry ??
+		computeContentTransformGeometry({
+			start: sourceBounds,
+			end: trackingContentTarget,
+			entering: true,
+			dimensions: screenLayout,
+			anchor: zoomContentAnchor,
+			scaleMode: "uniform",
+		});
+	const trackedContentBaseTransform =
+		resolveRevealContentBaseTransformFromGeometry({
+			geometry: trackingGeometry,
+			progress: activeTransitionProgress,
+		});
+	const collapsedContentScale = drag.isDismissing
+		? dismissalCollapsedContentScale
+		: resolveRevealContentBaseTransformFromGeometry({
+				geometry: trackingGeometry,
+				progress: 0,
+			}).scale;
+	const trackedGestureScale = drag.isDismissing
+		? drag.dismissContentScale / trackedContentBaseTransform.scale
+		: drag.gestureScale;
+	const trackedContentBaseScale = trackedContentBaseTransform.scale;
 	const trackedDragX =
 		drag.dragX + pinchFocalOffset.x * trackedContentBaseScale;
 	const trackedDragY =
 		drag.dragY + pinchFocalOffset.y * trackedContentBaseScale;
 
 	const trackedSourceElement = resolveZoomTrackedSourceTransform({
-		progress: activeTransitionProgress,
+		contentBaseTransform: trackedContentBaseTransform,
+		collapsedContentScale,
 		sourceBounds,
 		destinationBounds: trackingContentTarget,
 		screenLayout,
@@ -298,7 +353,6 @@ export function buildZoomStyles({
 		gestureScale: trackedGestureScale,
 		parentScale: unfocusedContentScale,
 		rotation: drag.rotation,
-		anchor: zoomContentAnchor,
 	});
 
 	return {

package/src/utils/bounds/navigation/zoom/drag.ts

@@ -1,11 +1,9 @@
-import type { MeasuredDimensions } from "react-native-reanimated";
 import { EPSILON } from "../../../../constants";
 import type {
 	BoundsInterpolationProps,
 	BoundsNavigationZoomDragOptions,
 } from "../../../../types/bounds.types";
 import type { Layout } from "../../../../types/screen.types";
-import { resolveRevealContentBaseTransform } from "../reveal/math";
 import { ZOOM_DISMISS_VELOCITY_DEPTH } from "./config";
 
 const ZOOM_DRAG_SCALE_EXPONENT = 2;
@@ -169,15 +167,13 @@ export function resolveZoomDragState({
 	gesture,
 	activeTransitionProgress,
 	screenLayout,
-	sourceBounds,
-	trackingContentTarget,
+	collapsedContentScale,
 	dragOptions,
 }: {
 	gesture: ZoomGesture;
 	activeTransitionProgress: number;
 	screenLayout: Layout;
-	sourceBounds: MeasuredDimensions;
-	trackingContentTarget: MeasuredDimensions;
+	collapsedContentScale: number;
 	dragOptions?: BoundsNavigationZoomDragOptions;
 }): ZoomDragState {
 	"worklet";
@@ -266,16 +262,10 @@ export function resolveZoomDragState({
 	let dismissContentScale = gestureScale;
 
 	if (isDismissing) {
-		const targetContentScale = resolveRevealContentBaseTransform({
-			progress: 0,
-			sourceBounds,
-			destinationBounds: trackingContentTarget,
-			screenLayout,
-		}).scale;
 		dismissContentScale = resolveZoomDismissContentScale({
 			transitionRemaining: activeTransitionProgress,
 			releaseScale: gestureScale,
-			targetScale: targetContentScale,
+			targetScale: collapsedContentScale,
 			velocity: gestureHandoff.velocity,
 			velocityDepth:
 				ZOOM_DISMISS_VELOCITY_DEPTH *
@@ -296,32 +286,3 @@ export function resolveZoomDragState({
 		rotation,
 	};
 }
-
-export function resolveZoomTrackedGestureScale({
-	drag,
-	activeTransitionProgress,
-	screenLayout,
-	sourceBounds,
-	trackingContentTarget,
-}: {
-	drag: ZoomDragState;
-	activeTransitionProgress: number;
-	screenLayout: Layout;
-	sourceBounds: MeasuredDimensions;
-	trackingContentTarget: MeasuredDimensions;
-}) {
-	"worklet";
-
-	if (!drag.isDismissing) {
-		return drag.gestureScale;
-	}
-
-	const trackedContentBaseScale = resolveRevealContentBaseTransform({
-		progress: activeTransitionProgress,
-		sourceBounds,
-		destinationBounds: trackingContentTarget,
-		screenLayout,
-	}).scale;
-
-	return drag.dismissContentScale / trackedContentBaseScale;
-}

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

@@ -1,11 +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,
-} from "../reveal/math";
+import { resolveTrackedSourceElementTransform } from "../reveal/math";
 
 export function resolveZoomBackdropOpacity({
 	transitionProgress,
@@ -65,44 +61,34 @@ export function resolveZoomPinchFocalOffset({
 }
 
 export function resolveZoomTrackedSourceTransform({
-	progress,
 	sourceBounds,
 	destinationBounds,
 	screenLayout,
+	contentBaseTransform,
+	collapsedContentScale,
 	dragX,
 	dragY,
 	gestureScale,
 	parentScale,
 	rotation = 0,
-	anchor,
 }: {
-	progress: number;
 	sourceBounds: MeasuredDimensions;
 	destinationBounds: MeasuredDimensions;
 	screenLayout: Layout;
+	contentBaseTransform: {
+		translateX: number;
+		translateY: number;
+		scale: number;
+	};
+	collapsedContentScale: number;
 	dragX: number;
 	dragY: number;
 	gestureScale: number;
 	parentScale: number;
 	rotation?: number;
-	anchor?: BoundsAnchor;
 }) {
 	"worklet";
 
-	const contentBaseTransform = resolveRevealContentBaseTransform({
-		progress,
-		sourceBounds,
-		destinationBounds,
-		screenLayout,
-		anchor,
-	});
-	const collapsedContentScale = resolveRevealContentBaseTransform({
-		progress: 0,
-		sourceBounds,
-		destinationBounds,
-		screenLayout,
-		anchor,
-	}).scale;
 	const contentScale = contentBaseTransform.scale * gestureScale;
 	const safeCollapsedContentScale = Math.max(
 		Math.abs(collapsedContentScale),

package/src/utils/bounds/types/options.ts

@@ -141,17 +141,18 @@ type RawContentReturn = RawMotionRotation & {
 };
 
 // Conditional return type based on options
-export type BoundsOptionsResult<T extends BoundsOptions> = T["raw"] extends true
-	? T["method"] extends "size"
-		? T["space"] extends "absolute"
-			? RawSizeAbsoluteReturn
-			: RawSizeRelativeReturn
-		: T["method"] extends "content"
-			? RawContentReturn
-			: T["space"] extends "absolute"
-				? RawTransformAbsoluteReturn
-				: RawTransformRelativeReturn
-	: StyleProps;
+export type BoundsOptionsResult<T extends BoundsInternalOptions> =
+	T["raw"] extends true
+		? T["method"] extends "size"
+			? T["space"] extends "absolute"
+				? RawSizeAbsoluteReturn
+				: RawSizeRelativeReturn
+			: T["method"] extends "content"
+				? RawContentReturn
+				: T["space"] extends "absolute"
+					? RawTransformAbsoluteReturn
+					: RawTransformRelativeReturn
+		: StyleProps;
 
 export type BoundsOptions = {
 	/**
@@ -207,13 +208,6 @@ export type BoundsOptions = {
 	 */
 	progress?: number;
 
-	/**
-	 * The x/y offsets to apply to the bounds.
-	 *
-	 * @deprecated Use `offset` instead.
-	 */
-	gestures?: { x?: number; y?: number };
-
 	/**
 	 * How the bounds should be scaled between each other.
 	 * @default "match"
@@ -234,16 +228,10 @@ export type BoundsOptions = {
 	 * returned `scale` is applied to the generated width and height.
 	 */
 	motion?: BoundsMotion;
-
-	/**
-	 * If true, the raw values will be returned instead of the computed values.
-	 *
-	 * @deprecated Use `bounds(id).values(options)` instead of passing `raw`.
-	 * @default false
-	 */
-	raw?: boolean;
 };
 
+export type BoundsInternalOptions = BoundsOptions & { raw?: boolean };
+
 export type BoundsIdentity = {
 	id: BoundId;
 	group?: string;
@@ -251,17 +239,10 @@ export type BoundsIdentity = {
 
 export type BoundsIdentityInput = BoundId | BoundsIdentity;
 
-export type BoundsComputeOptions = Omit<BoundsOptions, "group" | "id" | "raw">;
+export type BoundsComputeOptions = Omit<BoundsOptions, "group" | "id">;
 
 export type BoundsStyleResult = StyleProps;
 
 export type BoundsValuesResult<
 	T extends BoundsComputeOptions = BoundsComputeOptions,
 > = BoundsOptionsResult<T & { id: BoundId; raw: true }>;
-
-/**
- * @deprecated Use {@linkcode BoundsValuesResult}.
- */
-export type BoundsMathResult<
-	T extends BoundsComputeOptions = BoundsComputeOptions,
-> = BoundsValuesResult<T>;