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

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

@@ -9,6 +9,7 @@ import {
 	CONTENT_ENTERING_OPACITY_OUTPUT,
 	CONTENT_ENTERING_OPACITY_RANGE,
 	CONTENT_SHADOW_OPACITY_OUTPUT,
+	DISMISS_SCALE_ORBIT_DEPTH,
 	DRAG_MASK_HEIGHT_COLLAPSE_END,
 	HORIZONTAL_DRAG_MASK_COLLAPSE_SCALE,
 	IDENTITY_DRAG_SCALE_OUTPUT,
@@ -21,6 +22,7 @@ import {
 import {
 	interpolateClamped,
 	mixUnit,
+	resolveAspectRatioMaskHeight,
 	resolveDismissScaleHandoff,
 	resolveRevealContentBaseTransform,
 	resolveRevealDirectionalDragScale,
@@ -39,6 +41,7 @@ import type { BuildRevealStylesParams, RevealInterpolatedStyle } from "./types";
 export function buildRevealStyles({
 	tag,
 	props,
+	revealOptions,
 }: BuildRevealStylesParams): RevealInterpolatedStyle {
 	"worklet";
 
@@ -53,6 +56,19 @@ export function buildRevealStyles({
 		progress,
 		layouts: { screen: screenLayout },
 	} = props;
+	const borderRadius = revealOptions?.borderRadius ?? REVEAL_BORDER_RADIUS;
+	const borderContinuous = revealOptions?.borderContinuous ?? true;
+	const maxSensitivity = revealOptions?.maxSensitivity ?? 0.8;
+	const velocityDepth =
+		revealOptions?.velocityDepth ?? DISMISS_SCALE_ORBIT_DEPTH;
+	const gestureProgressMode = revealOptions?.gestureProgressMode ?? "freeform";
+	const disablePointerEventsTillElementTransition =
+		revealOptions?.disablePointerEventsTillElementTransition ?? true;
+	const maskSizingMode = revealOptions?.maskSizingMode ?? "auto";
+	const usesTransformMask =
+		maskSizingMode === "auto"
+			? REVEAL_USES_TRANSFORM_MASK
+			: maskSizingMode === "transform";
 
 	const boundsAccessor = createLinkAccessor(() => props);
 	const link = boundsAccessor.getLink(tag);
@@ -79,15 +95,15 @@ export function buildRevealStyles({
 			? Math.abs(props.active.gesture.raw.normY)
 			: 0;
 
-	const dragX =
-		props.active.gesture.x === 0
-			? 0
-			: resolveUnitDragTranslation(props.active.gesture.x, screenLayout.width);
+	const dragX = resolveUnitDragTranslation(
+		props.active.gesture.x,
+		screenLayout.width,
+	);
 
-	const dragY =
-		props.active.gesture.y === 0
-			? 0
-			: resolveUnitDragTranslation(props.active.gesture.y, screenLayout.height);
+	const dragY = resolveUnitDragTranslation(
+		props.active.gesture.y,
+		screenLayout.height,
+	);
 
 	const dragXScale = isHorizontalDismiss
 		? resolveRevealDirectionalDragScale(
@@ -130,9 +146,12 @@ export function buildRevealStyles({
 
 		const maskBorderRadius = mixUnit(
 			sourceBorderRadius,
-			REVEAL_BORDER_RADIUS,
+			borderRadius,
 			progress,
 		);
+		const maskBorderCurve = borderContinuous
+			? ("continuous" as const)
+			: undefined;
 
 		const maskSizeMultiplier = props.active.closing
 			? mixUnit(0.9, 1, props.active.progress)
@@ -148,19 +167,23 @@ export function buildRevealStyles({
 		if (props.active.gesture.dismissing) {
 			const contentTargetBounds =
 				initialDestinationTarget ?? link.destination.bounds;
+
 			const sourceContentScale = resolveUniformScale({
 				sourceWidth: link.source.bounds.width,
 				sourceHeight: link.source.bounds.height,
 				destinationWidth: contentTargetBounds.width,
 				destinationHeight: contentTargetBounds.height,
 			});
+
 			contentScale = resolveDismissScaleHandoff({
 				progress: props.active.progress,
 				releaseScale: dragScale,
 				targetScale: sourceContentScale,
 				velocity: props.active.gesture.velocity,
+				velocityDepth,
 			});
 		}
+
 		const contentTranslateX = contentRaw.translateX + dragX;
 		const contentTranslateY = contentRaw.translateY + dragY;
 
@@ -190,10 +213,13 @@ export function buildRevealStyles({
 					)
 				: 0;
 
-		const minMaskHeight = Math.min(
+		const maskAspectBounds = link.initialSource?.bounds ?? link.source.bounds;
+		const minMaskHeight = resolveAspectRatioMaskHeight({
+			maskWidth,
 			maskHeight,
-			Math.max(maskWidth, link.source.bounds.height),
-		);
+			targetWidth: maskAspectBounds.width,
+			targetHeight: maskAspectBounds.height,
+		});
 
 		const renderedMaskHeight = interpolateClamped(
 			maskHeightCollapseDrag,
@@ -242,12 +268,12 @@ export function buildRevealStyles({
 			compensatedMaskTranslateX + (maskWidth - maskBaseWidth) / 2;
 		const transformMaskTranslateY =
 			compensatedMaskTranslateY + (renderedMaskHeight - maskBaseHeight) / 2;
-		const maskElementStyle = REVEAL_USES_TRANSFORM_MASK
+		const maskElementStyle = usesTransformMask
 			? {
 					width: maskBaseWidth,
 					height: maskBaseHeight,
 					borderRadius: props.active.settled ? 0 : maskBorderRadius,
-					borderCurve: "continuous" as const,
+					borderCurve: maskBorderCurve,
 					transform: [
 						{ translateX: transformMaskTranslateX },
 						{ translateY: transformMaskTranslateY },
@@ -259,7 +285,7 @@ export function buildRevealStyles({
 					width: maskWidth,
 					height: renderedMaskHeight,
 					borderRadius: props.active.settled ? 0 : maskBorderRadius,
-					borderCurve: "continuous" as const,
+					borderCurve: maskBorderCurve,
 					transform: [
 						{ translateX: compensatedMaskTranslateX },
 						{ translateY: compensatedMaskTranslateY },
@@ -295,11 +321,14 @@ export function buildRevealStyles({
 			: 0;
 
 		const { gestureSensitivity, gestureReleaseVelocityScale } =
-			resolveRevealGestureHandoff(rawDrag);
+			resolveRevealGestureHandoff({
+				rawDrag,
+				maxSensitivity,
+			});
 
 		return {
 			options: {
-				gestureProgressMode: "freeform",
+				gestureProgressMode,
 				gestureSensitivity,
 				gestureReleaseVelocityScale,
 			},
@@ -374,6 +403,7 @@ export function buildRevealStyles({
 			releaseScale: dragScale,
 			targetScale: trackingTargetScale,
 			velocity: props.active.gesture.velocity,
+			velocityDepth,
 		});
 	}
 	const trackingContentTranslateX =
@@ -393,18 +423,20 @@ export function buildRevealStyles({
 
 	return {
 		options: {
-			gestureProgressMode: "freeform",
+			gestureProgressMode,
 		},
 		content: {
 			style: {
 				transform: [{ scale: unfocusedContentScale }],
 			},
-			props: {
-				pointerEvents:
-					props.active.progress <= CLOSE_SOURCE_HANDOFF_PROGRESS
-						? "auto"
-						: "none",
-			},
+			props: disablePointerEventsTillElementTransition
+				? {
+						pointerEvents:
+							props.active.progress <= CLOSE_SOURCE_HANDOFF_PROGRESS
+								? "auto"
+								: "none",
+					}
+				: undefined,
 		},
 		[link.id]: {
 			style: {

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

@@ -3,7 +3,6 @@ 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,
@@ -98,11 +97,17 @@ export function resolveUniformScale({
 	return aspectDifference < 0.1 ? Math.max(sx, sy) : Math.min(sx, sy);
 }
 
-export function resolveRevealGestureHandoff(rawDrag: number) {
+export function resolveRevealGestureHandoff({
+	rawDrag,
+	maxSensitivity,
+}: {
+	rawDrag: number;
+	maxSensitivity: number;
+}) {
 	"worklet";
 
 	const clampedRawDrag = clampUnit(rawDrag);
-	const gestureSensitivity = mixUnit(0.8, 0.1, clampedRawDrag);
+	const gestureSensitivity = mixUnit(maxSensitivity, 0.1, clampedRawDrag);
 
 	const releaseBoost = mixUnit(1, 1.1, clampedRawDrag);
 
@@ -125,11 +130,13 @@ export function resolveDismissScaleHandoff({
 	releaseScale,
 	targetScale,
 	velocity,
+	velocityDepth,
 }: {
 	progress: number;
 	releaseScale: number;
 	targetScale: number;
 	velocity: number;
+	velocityDepth: number;
 }) {
 	"worklet";
 
@@ -137,12 +144,35 @@ export function resolveDismissScaleHandoff({
 	const scaleProgress = Math.sin((Math.PI / 2) * closeProgress);
 	const baseScale = releaseScale + (targetScale - releaseScale) * scaleProgress;
 
-	const orbitDepth = DISMISS_SCALE_ORBIT_DEPTH * velocity;
+	const orbitDepth = velocityDepth * velocity;
 	const orbitScale = 1 - orbitDepth * Math.sin(Math.PI * closeProgress);
 
 	return baseScale * orbitScale;
 }
 
+export function resolveAspectRatioMaskHeight({
+	maskWidth,
+	maskHeight,
+	targetWidth,
+	targetHeight,
+}: {
+	maskWidth: number;
+	maskHeight: number;
+	targetWidth: number;
+	targetHeight: number;
+}) {
+	"worklet";
+
+	const safeMaskWidth = Math.max(1, Math.abs(maskWidth));
+	const safeMaskHeight = Math.max(1, Math.abs(maskHeight));
+	const safeTargetWidth = Math.max(Math.abs(targetWidth), EPSILON);
+	const safeTargetHeight = Math.max(Math.abs(targetHeight), EPSILON);
+	const targetAspectHeight =
+		safeMaskWidth * (safeTargetHeight / safeTargetWidth);
+
+	return Math.min(safeMaskHeight, Math.max(1, targetAspectHeight));
+}
+
 function getBoundsCenterX(bounds: MeasuredDimensions) {
 	"worklet";
 	return bounds.pageX + bounds.width / 2;

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

@@ -4,6 +4,7 @@ import {
 } from "../../../../constants";
 import type {
 	BoundsInterpolationProps,
+	BoundsNavigationRevealOptions,
 	BoundsNavigationRevealStyle,
 } from "../../../../types/bounds.types";
 
@@ -15,4 +16,5 @@ export type RevealInterpolatedStyle = BoundsNavigationRevealStyle & {
 export type BuildRevealStylesParams = {
 	tag?: string;
 	props: BoundsInterpolationProps;
+	revealOptions?: BoundsNavigationRevealOptions;
 };

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

@@ -168,7 +168,7 @@ export function buildZoomStyles({
 			style: VISIBLE_STYLE,
 		},
 	} satisfies TransitionInterpolatedStyle;
-	const focusedContentSlot = props.current.layouts.navigationMaskEnabled
+	const focusedContentSlot = props.current.options.navigationMaskEnabled
 		? NAVIGATION_MASK_CONTAINER_STYLE_ID
 		: "content";
 
@@ -325,7 +325,7 @@ export function buildZoomStyles({
 			...sourceVisibilityStyle,
 		};
 
-		if (props.current.layouts.navigationMaskEnabled) {
+		if (props.current.options.navigationMaskEnabled) {
 			focusedStyles[NAVIGATION_MASK_ELEMENT_STYLE_ID] = {
 				style: {
 					width: maskWidth,