react-native-screen-transitions 3.6.0-alpha.0 → 3.6.0-alpha.2

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

@@ -1,25 +1,241 @@
-export const resolveDirectionalDragTranslation = ({
-	translation,
-	dimension,
-	negativeMax,
-	positiveMax,
-	exponent = 1,
-}: {
-	translation: number;
-	dimension: number;
-	negativeMax: number;
-	positiveMax: number;
-	exponent?: number;
-}) => {
+import type { MeasuredDimensions } from "react-native-reanimated";
+import { EPSILON } from "../../../../constants";
+import type { Layout } from "../../../../types/screen.types";
+import { computeContentTransformGeometry } from "../../helpers/geometry";
+import {
+	DISMISS_SCALE_ORBIT_DEPTH,
+	DRAG_DIRECTIONAL_SCALE_EXPONENT,
+	DRAG_DIRECTIONAL_SCALE_MAX,
+	DRAG_DIRECTIONAL_SCALE_MIN,
+} from "./config";
+
+function clampUnit(value: number) {
+	"worklet";
+	return Math.min(1, Math.max(0, value));
+}
+
+export function mixUnit(from: number, to: number, progress: number) {
+	"worklet";
+	return from + (to - from) * clampUnit(progress);
+}
+
+export function interpolateClamped(
+	value: number,
+	inputStart: number,
+	inputEnd: number,
+	outputStart: number,
+	outputEnd: number,
+) {
+	"worklet";
+	return mixUnit(
+		outputStart,
+		outputEnd,
+		(value - inputStart) / (inputEnd - inputStart),
+	);
+}
+
+export function resolveSafeScale(scale: number) {
+	"worklet";
+	return Math.abs(scale) > EPSILON ? scale : 1;
+}
+
+export const resolveUnitDragTranslation = (
+	translation: number,
+	dimension: number,
+) => {
 	"worklet";
 
 	const baseDistance = Math.max(1, dimension);
-	const clampedMagnitude = Math.min(1, Math.abs(translation) / baseDistance);
-	const curvedMagnitude = clampedMagnitude ** Math.max(1, exponent);
 
-	if (translation < 0) {
-		return -baseDistance * negativeMax * curvedMagnitude;
+	if (translation < -baseDistance) {
+		return -baseDistance;
 	}
 
-	return baseDistance * positiveMax * curvedMagnitude;
+	if (translation > baseDistance) {
+		return baseDistance;
+	}
+
+	return translation;
 };
+
+export function resolveRevealDirectionalDragScale(
+	normalized: number,
+	inverted: boolean,
+) {
+	"worklet";
+
+	const dismissalRelative = inverted ? -normalized : normalized;
+
+	if (dismissalRelative >= 0) {
+		const rawScale = mixUnit(1, DRAG_DIRECTIONAL_SCALE_MIN, dismissalRelative);
+		return rawScale ** DRAG_DIRECTIONAL_SCALE_EXPONENT;
+	}
+
+	const oppositeDrag = Math.min(1, Math.abs(dismissalRelative));
+	return mixUnit(1, DRAG_DIRECTIONAL_SCALE_MAX, oppositeDrag);
+}
+
+export function resolveUniformScale({
+	sourceWidth,
+	sourceHeight,
+	destinationWidth,
+	destinationHeight,
+}: {
+	sourceWidth: number;
+	sourceHeight: number;
+	destinationWidth: number;
+	destinationHeight: number;
+}) {
+	"worklet";
+
+	const sx = sourceWidth / destinationWidth;
+	const sy = sourceHeight / destinationHeight;
+
+	const sourceAspect = sourceWidth / sourceHeight;
+	const destinationAspect = destinationWidth / destinationHeight;
+	const aspectDifference = Math.abs(sourceAspect - destinationAspect);
+
+	return aspectDifference < 0.1 ? Math.max(sx, sy) : Math.min(sx, sy);
+}
+
+export function resolveRevealGestureHandoff(rawDrag: number) {
+	"worklet";
+
+	const clampedRawDrag = clampUnit(rawDrag);
+	const gestureSensitivity = mixUnit(0.8, 0.1, clampedRawDrag);
+
+	const releaseBoost = mixUnit(1, 1.1, clampedRawDrag);
+
+	const releaseSensitivity = interpolateClamped(
+		gestureSensitivity,
+		0.28,
+		0.9,
+		0.7,
+		1,
+	);
+
+	return {
+		gestureSensitivity,
+		gestureReleaseVelocityScale: releaseBoost * releaseSensitivity,
+	};
+}
+
+export function resolveDismissScaleHandoff({
+	progress,
+	releaseScale,
+	targetScale,
+	velocity,
+}: {
+	progress: number;
+	releaseScale: number;
+	targetScale: number;
+	velocity: number;
+}) {
+	"worklet";
+
+	const closeProgress = 1 - progress;
+	const scaleProgress = Math.sin((Math.PI / 2) * closeProgress);
+	const baseScale = releaseScale + (targetScale - releaseScale) * scaleProgress;
+
+	const orbitDepth = DISMISS_SCALE_ORBIT_DEPTH * velocity;
+	const orbitScale = 1 - orbitDepth * Math.sin(Math.PI * closeProgress);
+
+	return baseScale * orbitScale;
+}
+
+function getBoundsCenterX(bounds: MeasuredDimensions) {
+	"worklet";
+	return bounds.pageX + bounds.width / 2;
+}
+
+function getBoundsCenterY(bounds: MeasuredDimensions) {
+	"worklet";
+	return bounds.pageY + bounds.height / 2;
+}
+
+export function resolveRevealContentBaseTransform({
+	progress,
+	sourceBounds,
+	destinationBounds,
+	screenLayout,
+}: {
+	progress: number;
+	sourceBounds: MeasuredDimensions;
+	destinationBounds: MeasuredDimensions;
+	screenLayout: Layout;
+}) {
+	"worklet";
+
+	const geometry = computeContentTransformGeometry({
+		start: sourceBounds,
+		end: destinationBounds,
+		entering: true,
+		dimensions: screenLayout,
+		scaleMode: "uniform",
+	});
+
+	return {
+		translateX: mixUnit(geometry.tx, 0, progress),
+		translateY: mixUnit(geometry.ty, 0, progress),
+		scale: mixUnit(geometry.s, 1, progress),
+	};
+}
+
+export function resolveTrackedSourceElementTransform({
+	sourceBounds,
+	destinationBounds,
+	contentTranslateX,
+	contentTranslateY,
+	contentScale,
+	parentScale,
+	screenWidth,
+	screenHeight,
+}: {
+	sourceBounds: MeasuredDimensions;
+	destinationBounds: MeasuredDimensions;
+	contentTranslateX: number;
+	contentTranslateY: number;
+	contentScale: number;
+	parentScale: number;
+	screenWidth: number;
+	screenHeight: number;
+}) {
+	"worklet";
+
+	const screenCenterX = screenWidth / 2;
+	const screenCenterY = screenHeight / 2;
+	const safeParentScale = Math.max(Math.abs(parentScale), EPSILON);
+	const safeSourceWidth = Math.max(Math.abs(sourceBounds.width), EPSILON);
+	const safeSourceHeight = Math.max(Math.abs(sourceBounds.height), EPSILON);
+
+	const sourceCenterX = getBoundsCenterX(sourceBounds);
+	const sourceCenterY = getBoundsCenterY(sourceBounds);
+	const destinationCenterX = getBoundsCenterX(destinationBounds);
+	const destinationCenterY = getBoundsCenterY(destinationBounds);
+
+	const trackedCenterX =
+		screenCenterX +
+		(destinationCenterX - screenCenterX) * contentScale +
+		contentTranslateX;
+	const trackedCenterY =
+		screenCenterY +
+		(destinationCenterY - screenCenterY) * contentScale +
+		contentTranslateY;
+
+	return {
+		translateX:
+			(trackedCenterX - screenCenterX) / safeParentScale +
+			screenCenterX -
+			sourceCenterX,
+		translateY:
+			(trackedCenterY - screenCenterY) / safeParentScale +
+			screenCenterY -
+			sourceCenterY,
+		scaleX:
+			(destinationBounds.width * contentScale) /
+			(safeSourceWidth * safeParentScale),
+		scaleY:
+			(destinationBounds.height * contentScale) /
+			(safeSourceHeight * safeParentScale),
+	};
+}

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

@@ -5,7 +5,10 @@ import {
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,
 	VISIBLE_STYLE,
 } from "../../../../constants";
-import type { TransitionInterpolatedStyle } from "../../../../types/animation.types";
+import type {
+	ScreenTransitionOptions,
+	TransitionInterpolatedStyle,
+} from "../../../../types/animation.types";
 import { createLinkAccessor } from "../../helpers/create-link-accessor";
 import { getSourceBorderRadius, toNumber } from "../helpers";
 import {
@@ -16,7 +19,7 @@ import {
 	resolveOpacityRangeTuple,
 } from "../math";
 import {
-	ZOOM_DRAG_RESISTANCE,
+	ZOOM_DISMISS_SCALE_ORBIT_DEPTH,
 	ZOOM_FOCUSED_ELEMENT_CLOSE_OPACITY_RANGE,
 	ZOOM_FOCUSED_ELEMENT_OPEN_OPACITY_RANGE,
 	ZOOM_MASK_OUTSET,
@@ -36,6 +39,71 @@ import type { BuildZoomStylesParams, ZoomInterpolatedStyle } from "./types";
 
 const IDENTITY_DRAG_SCALE_OUTPUT = [1, 1] as const;
 
+function resolveZoomGestureHandoff(rawDrag: number) {
+	"worklet";
+
+	const gestureSensitivity = interpolate(rawDrag, [0, 1], [0.7, 0.1], "clamp");
+	const releaseBoost = interpolate(rawDrag, [0, 1], [1, 1.4], "clamp");
+	const releaseSensitivity = interpolate(
+		gestureSensitivity,
+		[0.28, 0.9],
+		[0.7, 1],
+		"clamp",
+	);
+
+	return {
+		gestureSensitivity,
+		gestureReleaseVelocityScale: releaseBoost * releaseSensitivity,
+	};
+}
+
+function resolveZoomGestureOptions({
+	rawDrag,
+	activeOptions,
+}: {
+	rawDrag: number;
+	activeOptions: ScreenTransitionOptions;
+}) {
+	"worklet";
+
+	const { gestureSensitivity, gestureReleaseVelocityScale } =
+		resolveZoomGestureHandoff(rawDrag);
+
+	return {
+		gestureProgressMode: activeOptions.gestureProgressMode ?? "freeform",
+		gestureSensitivity: activeOptions.gestureSensitivity ?? gestureSensitivity,
+		gestureReleaseVelocityScale:
+			activeOptions.gestureReleaseVelocityScale ?? gestureReleaseVelocityScale,
+	};
+}
+
+function resolveZoomDismissScaleHandoff({
+	progress,
+	releaseScale,
+	targetScale,
+	rawDrag,
+}: {
+	progress: number;
+	releaseScale: number;
+	targetScale: number;
+	rawDrag: number;
+}) {
+	"worklet";
+
+	const closeProgress = 1 - progress;
+	const scaleProgress = Math.sin((Math.PI / 2) * closeProgress);
+	const baseScale = releaseScale + (targetScale - releaseScale) * scaleProgress;
+	const orbitDepth = interpolate(
+		rawDrag,
+		[0, 1],
+		[0, ZOOM_DISMISS_SCALE_ORBIT_DEPTH],
+		"clamp",
+	);
+	const orbitScale = 1 - orbitDepth * Math.sin(Math.PI * closeProgress);
+
+	return baseScale * orbitScale;
+}
+
 /* -------------------------------------------------------------------------- */
 /*                             BUILD ZOOM STYLES                              */
 /* -------------------------------------------------------------------------- */
@@ -114,6 +182,11 @@ export function buildZoomStyles({
 		initialGesture === "horizontal" || initialGesture === "horizontal-inverted";
 	const isVerticalDismiss =
 		initialGesture === "vertical" || initialGesture === "vertical-inverted";
+	const rawDrag = isHorizontalDismiss
+		? Math.abs(props.active.gesture.raw.normX)
+		: isVerticalDismiss
+			? Math.abs(props.active.gesture.raw.normY)
+			: 0;
 
 	const horizontalDragTranslation = resolveDragTranslationTuple(
 		zoomOptions?.horizontalDragTranslation,
@@ -122,17 +195,15 @@ export function buildZoomStyles({
 		zoomOptions?.verticalDragTranslation,
 	);
 	const dragX = resolveDirectionalDragTranslation({
-		normalized: normX,
+		translation: props.active.gesture.x,
 		dimension: screenLayout.width,
-		resistance: ZOOM_DRAG_RESISTANCE,
 		negativeMax: horizontalDragTranslation.negativeMax,
 		positiveMax: horizontalDragTranslation.positiveMax,
 		exponent: horizontalDragTranslation.exponent,
 	});
 	const dragY = resolveDirectionalDragTranslation({
-		normalized: normY,
+		translation: props.active.gesture.y,
 		dimension: screenLayout.height,
-		resistance: ZOOM_DRAG_RESISTANCE,
 		negativeMax: verticalDragTranslation.negativeMax,
 		positiveMax: verticalDragTranslation.positiveMax,
 		exponent: verticalDragTranslation.exponent,
@@ -166,6 +237,18 @@ export function buildZoomStyles({
 			})
 		: IDENTITY_DRAG_SCALE_OUTPUT[1];
 	const dragScale = combineScales(dragXScale, dragYScale);
+	const handoffDragScale = props.active.gesture.dismissing
+		? resolveZoomDismissScaleHandoff({
+				progress: props.active.progress,
+				releaseScale: dragScale,
+				targetScale: 1,
+				rawDrag,
+			})
+		: dragScale;
+	const zoomGestureOptions = resolveZoomGestureOptions({
+		rawDrag,
+		activeOptions: props.active.options,
+	});
 
 	/* ----------------------------- Focused Screen ----------------------------- */
 
@@ -220,9 +303,9 @@ export function buildZoomStyles({
 
 		const contentTranslateX = toNumber(contentRaw.translateX) + dragX;
 		const contentTranslateY = toNumber(contentRaw.translateY) + dragY;
-		const contentScale = toNumber(contentRaw.scale, 1) * dragScale;
-		const maskTranslateX = toNumber(maskRaw.translateX) + dragX - left;
-		const maskTranslateY = toNumber(maskRaw.translateY) + dragY - top;
+		const contentScale = contentRaw.scale * handoffDragScale;
+		const maskTranslateX = maskRaw.translateX + dragX - left;
+		const maskTranslateY = maskRaw.translateY + dragY - top;
 
 		const focusedContentStyle = {
 			opacity: zoomOptions?.debug ? 0.5 : focusedFade,
@@ -251,13 +334,16 @@ export function buildZoomStyles({
 					transform: [
 						{ translateX: maskTranslateX },
 						{ translateY: maskTranslateY },
-						{ scale: dragScale },
+						{ scale: handoffDragScale },
 					],
 				},
 			};
 		}
 
-		return focusedStyles;
+		return {
+			options: zoomGestureOptions,
+			...focusedStyles,
+		};
 	}
 
 	/* ---------------------------- Unfocused Screen ---------------------------- */
@@ -318,26 +404,39 @@ export function buildZoomStyles({
 			? unfocusedElementTarget.pageY + unfocusedElementTarget.height / 2
 			: screenLayout.height / 2);
 
+	const unfocusedContentScale = props.active.logicallySettled
+		? 1
+		: unfocusedScale;
+	const shouldTrackGestureTranslation = !props.active.logicallySettled;
+	const shouldTrackGestureScale = !props.active.logicallySettled;
+	const elementGestureScale = shouldTrackGestureScale ? handoffDragScale : 1;
+	const elementGestureX = shouldTrackGestureTranslation ? dragX : 0;
+	const elementGestureY = shouldTrackGestureTranslation ? dragY : 0;
+	const safeUnfocusedContentScale = Math.max(
+		Math.abs(unfocusedContentScale),
+		EPSILON,
+	);
+
 	const scaleShiftX = computeCenterScaleShift({
 		center: elementCenterX,
 		containerCenter: screenLayout.width / 2,
-		scale: dragScale,
+		scale: elementGestureScale,
 	});
 	const scaleShiftY = computeCenterScaleShift({
 		center: elementCenterY,
 		containerCenter: screenLayout.height / 2,
-		scale: dragScale,
+		scale: elementGestureScale,
 	});
 
 	const compensatedGestureX = composeCompensatedTranslation({
-		gesture: dragX,
-		parentScale: unfocusedScale,
+		gesture: elementGestureX,
+		parentScale: unfocusedContentScale,
 		centerShift: scaleShiftX,
 		epsilon: EPSILON,
 	});
 	const compensatedGestureY = composeCompensatedTranslation({
-		gesture: dragY,
-		parentScale: unfocusedScale,
+		gesture: elementGestureY,
+		parentScale: unfocusedContentScale,
 		centerShift: scaleShiftY,
 		epsilon: EPSILON,
 	});
@@ -346,8 +445,12 @@ export function buildZoomStyles({
 		toNumber(elementRaw.translateX) + compensatedGestureX;
 	const elementTranslateY =
 		toNumber(elementRaw.translateY) + compensatedGestureY;
-	const elementScaleX = toNumber(elementRaw.scaleX, 1) * dragScale;
-	const elementScaleY = toNumber(elementRaw.scaleY, 1) * dragScale;
+	const elementScaleX =
+		(toNumber(elementRaw.scaleX, 1) * elementGestureScale) /
+		safeUnfocusedContentScale;
+	const elementScaleY =
+		(toNumber(elementRaw.scaleY, 1) * elementGestureScale) /
+		safeUnfocusedContentScale;
 
 	const resolvedElementStyle = shouldHideUnfocusedElement
 		? {
@@ -382,9 +485,10 @@ export function buildZoomStyles({
 			};
 
 	return {
+		options: zoomGestureOptions,
 		content: {
 			style: {
-				transform: [{ scale: unfocusedScale }],
+				transform: [{ scale: unfocusedContentScale }],
 			},
 		},
 		[buildEffectiveTag]: {

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

@@ -3,13 +3,13 @@ export const ZOOM_SHARED_OPTIONS = Object.freeze({
 	scaleMode: "uniform" as const,
 });
 
-export const ZOOM_DRAG_RESISTANCE = 0.4;
 export const ZOOM_DRAG_DIRECTIONAL_SCALE_MIN = 0.25;
 export const ZOOM_DRAG_DIRECTIONAL_SCALE_MAX = 1.06;
 export const ZOOM_DRAG_DIRECTIONAL_SCALE_EXPONENT = 2;
 export const ZOOM_DRAG_TRANSLATION_NEGATIVE_MAX = 1;
 export const ZOOM_DRAG_TRANSLATION_POSITIVE_MAX = 1;
 export const ZOOM_DRAG_TRANSLATION_EXPONENT = 1;
+export const ZOOM_DISMISS_SCALE_ORBIT_DEPTH = 0.8;
 export const ZOOM_BACKGROUND_SCALE = 0.9375;
 export const ZOOM_FOCUSED_ELEMENT_OPEN_OPACITY_RANGE = [0, 0.5, 0, 1] as const;
 export const ZOOM_FOCUSED_ELEMENT_CLOSE_OPACITY_RANGE = [0.6, 1, 0, 1] as const;

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

@@ -1,25 +1,23 @@
 export const resolveDirectionalDragTranslation = ({
-	normalized,
+	translation,
 	dimension,
-	resistance,
 	negativeMax,
 	positiveMax,
 	exponent = 1,
 }: {
-	normalized: number;
+	translation: number;
 	dimension: number;
-	resistance: number;
 	negativeMax: number;
 	positiveMax: number;
 	exponent?: number;
 }) => {
 	"worklet";
 
-	const clampedMagnitude = Math.min(1, Math.abs(normalized));
+	const baseDistance = Math.max(1, dimension);
+	const clampedMagnitude = Math.min(1, Math.abs(translation) / baseDistance);
 	const curvedMagnitude = clampedMagnitude ** Math.max(1, exponent);
-	const baseDistance = Math.max(0, dimension) * resistance;
 
-	if (normalized < 0) {
+	if (translation < 0) {
 		return -baseDistance * negativeMax * curvedMagnitude;
 	}
 

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

@@ -87,9 +87,8 @@ export type BoundsOptions = {
 
 	/**
 	 * Optional group name for collection/list scenarios.
-	 * When provided, boundaries are tracked as a group and the active member id
-	 * is managed automatically. The internal tag becomes `group:id`.
-	 * Without this, `id` is used directly as the tag (backward compatible).
+	 * When provided, concrete boundary entries use `group:id`, while transition
+	 * links stay keyed by the member `id` inside the active screen pair.
 	 */
 	group?: string;
 

package/src/shared/utils/gesture-progress-mode.ts

@@ -0,0 +1,67 @@
+import type { GestureProgressMode } from "../types/gesture.types";
+
+type GestureProgressModeOptions = {
+	gestureProgressMode?: GestureProgressMode;
+	gestureDrivesProgress?: boolean;
+};
+
+type ResolveGestureProgressModeOptions = GestureProgressModeOptions & {
+	fallback?: GestureProgressMode;
+};
+
+export const isGestureProgressMode = (
+	value: unknown,
+): value is GestureProgressMode => {
+	"worklet";
+	return value === "progress-driven" || value === "freeform";
+};
+
+export const resolveGestureProgressMode = (
+	options: ResolveGestureProgressModeOptions | boolean | undefined,
+): GestureProgressMode => {
+	"worklet";
+	if (typeof options === "boolean" || options === undefined) {
+		return options === false ? "freeform" : "progress-driven";
+	}
+
+	if (isGestureProgressMode(options.gestureProgressMode)) {
+		return options.gestureProgressMode;
+	}
+
+	if (typeof options.gestureDrivesProgress === "boolean") {
+		return options.gestureDrivesProgress ? "progress-driven" : "freeform";
+	}
+
+	return options.fallback ?? "progress-driven";
+};
+
+export const resolveGestureProgressModeFromOptions = (
+	primary: GestureProgressModeOptions | undefined,
+	fallback: GestureProgressModeOptions | undefined,
+	defaultMode: GestureProgressMode = "progress-driven",
+): GestureProgressMode => {
+	"worklet";
+	if (
+		primary &&
+		(isGestureProgressMode(primary.gestureProgressMode) ||
+			typeof primary.gestureDrivesProgress === "boolean")
+	) {
+		return resolveGestureProgressMode({
+			gestureProgressMode: primary.gestureProgressMode,
+			gestureDrivesProgress: primary.gestureDrivesProgress,
+		});
+	}
+
+	return resolveGestureProgressMode({
+		gestureProgressMode: fallback?.gestureProgressMode,
+		gestureDrivesProgress: fallback?.gestureDrivesProgress,
+		fallback: defaultMode,
+	});
+};
+
+export const gestureProgressModeDrivesProgress = (
+	mode: GestureProgressMode,
+) => {
+	"worklet";
+	return mode === "progress-driven";
+};