react-native-screen-transitions 3.9.0-beta.3 → 4.0.0-alpha.0

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

@@ -1,272 +0,0 @@
-import type { MeasuredDimensions } from "react-native-reanimated";
-import { EPSILON } from "../../../../constants";
-import type { Layout } from "../../../../types/screen.types";
-import { computeContentTransformGeometry } from "../../helpers/geometry";
-import {
-	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);
-
-	if (translation < -baseDistance) {
-		return -baseDistance;
-	}
-
-	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,
-	maxSensitivity,
-}: {
-	rawDrag: number;
-	maxSensitivity: number;
-}) {
-	"worklet";
-
-	const clampedRawDrag = clampUnit(rawDrag);
-	const gestureSensitivity = mixUnit(maxSensitivity, 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,
-	velocityDepth,
-}: {
-	progress: number;
-	releaseScale: number;
-	targetScale: number;
-	velocity: number;
-	velocityDepth: number;
-}) {
-	"worklet";
-
-	const closeProgress = 1 - progress;
-	const easeIn = 1 - Math.cos((Math.PI / 2) * closeProgress);
-	const scaleProgress = easeIn ** 2;
-	const baseScale = releaseScale + (targetScale - releaseScale) * scaleProgress;
-
-	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;
-}
-
-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

@@ -1,311 +0,0 @@
-import { interpolate } from "react-native-reanimated";
-import {
-	EPSILON,
-	NAVIGATION_MASK_ELEMENT_STYLE_ID,
-} from "../../../../constants";
-import { createBoundsAccessorCore } from "../../helpers/create-bounds-accessor-core";
-import { getSourceBorderRadius } from "../helpers";
-import { resolveRevealContentBaseTransform } from "../reveal/math";
-import {
-	ZOOM_BACKDROP_MAX_OPACITY,
-	ZOOM_BACKGROUND_SCALE,
-	ZOOM_FOCUSED_ELEMENT_CLOSE_OPACITY_RANGE,
-	ZOOM_FOCUSED_ELEMENT_OPEN_OPACITY_RANGE,
-	ZOOM_SCREEN_A_FADE_END,
-	ZOOM_SHARED_OPTIONS,
-	ZOOM_UNFOCUSED_ELEMENT_CLOSE_OPACITY_RANGE,
-	ZOOM_UNFOCUSED_ELEMENT_OPEN_OPACITY_RANGE,
-} from "./config";
-import { resolveZoomDragState, resolveZoomTrackedGestureScale } from "./drag";
-import {
-	resolveZoomBackdropOpacity,
-	resolveZoomPinchFocalOffset,
-	resolveZoomTrackedSourceTransform,
-} from "./helpers";
-import {
-	resolveZoomNavigationMaskStyle,
-	ZOOM_NAVIGATION_MASK_BORDER_RADIUS,
-} from "./mask";
-import {
-	getZoomContentTarget,
-	resolveZoomTrackingContentTarget,
-} from "./targets";
-import type { BuildZoomStylesParams, ZoomInterpolatedStyle } from "./types";
-
-export function buildZoomStyles({
-	tag,
-	props,
-	zoomOptions,
-}: BuildZoomStylesParams): ZoomInterpolatedStyle {
-	"worklet";
-
-	if (!tag) {
-		return {};
-	}
-
-	const target = zoomOptions?.target;
-	const keepFocusedVisible = zoomOptions?.keepFocusedVisible === true;
-	const expandedBorderRadius = Math.max(
-		0,
-		zoomOptions?.borderRadius ?? ZOOM_NAVIGATION_MASK_BORDER_RADIUS,
-	);
-	const backgroundScale = zoomOptions?.backgroundScale ?? ZOOM_BACKGROUND_SCALE;
-	const backdropColor = zoomOptions?.backdropColor ?? "black";
-	const maxBackdropOpacity =
-		zoomOptions?.backdropOpacity ?? ZOOM_BACKDROP_MAX_OPACITY;
-
-	const {
-		active,
-		current,
-		focused,
-		transitionProgress,
-		layouts: { screen: screenLayout },
-	} = props;
-
-	const activeTransitionProgress = active.transitionProgress;
-
-	const bounds = createBoundsAccessorCore({
-		getProps: () => props,
-	});
-
-	const scopedBounds = bounds(tag);
-	const link = scopedBounds.link();
-	const sourceBounds = link?.source?.bounds;
-
-	if (!link || !sourceBounds) {
-		if (target !== "bound") {
-			scopedBounds.values({
-				scaleMode: ZOOM_SHARED_OPTIONS.scaleMode,
-				anchor: ZOOM_SHARED_OPTIONS.anchor,
-				method: "content",
-				target: target ?? "fullscreen",
-				progress: transitionProgress,
-			});
-		}
-
-		return {};
-	}
-
-	const zoomContentTarget = getZoomContentTarget({
-		explicitTarget: target,
-		screenLayout,
-		link,
-	});
-	const trackingContentTarget = resolveZoomTrackingContentTarget({
-		contentTarget: zoomContentTarget,
-		link,
-		screenLayout,
-	});
-
-	if (!trackingContentTarget) {
-		return {};
-	}
-
-	const drag = resolveZoomDragState({
-		gesture: active.gesture,
-		activeTransitionProgress,
-		screenLayout,
-		sourceBounds,
-		trackingContentTarget,
-		dragOptions: zoomOptions?.drag,
-	});
-
-	const trackedGestureScale = resolveZoomTrackedGestureScale({
-		drag,
-		activeTransitionProgress,
-		screenLayout,
-		sourceBounds,
-		trackingContentTarget,
-	});
-
-	const focalGesture = drag.isDismissing
-		? active.gesture.handoff
-		: active.gesture;
-
-	const focalProgress = drag.isDismissing ? activeTransitionProgress : 1;
-	const pinchFocalOffset =
-		active.gesture.handoff.active === "pinch-in"
-			? resolveZoomPinchFocalOffset({
-					gestureScale: drag.isDismissing
-						? focalGesture.scale
-						: trackedGestureScale,
-					pinchOriginX: focalGesture.pinchOriginX,
-					pinchOriginY: focalGesture.pinchOriginY,
-					progress: focalProgress,
-					rotation: drag.isDismissing ? focalGesture.rotation : drag.rotation,
-					screenLayout,
-				})
-			: { x: 0, y: 0 };
-
-	if (focused) {
-		const sourceBorderRadius = getSourceBorderRadius(link);
-		const navigationMaskEnabled = current.options.navigationMaskEnabled;
-		const backdropOpacity = resolveZoomBackdropOpacity({
-			transitionProgress,
-			dismissalDrag: drag.dismissNorm,
-			fadeEnd: ZOOM_SCREEN_A_FADE_END,
-			maxOpacity: maxBackdropOpacity,
-		});
-
-		const contentRaw = scopedBounds.values({
-			scaleMode: ZOOM_SHARED_OPTIONS.scaleMode,
-			anchor: target === "bound" ? "center" : ZOOM_SHARED_OPTIONS.anchor,
-			method: "content",
-			target: zoomContentTarget,
-			progress: transitionProgress,
-		});
-
-		const focusedOpacityRange = active.closing
-			? ZOOM_FOCUSED_ELEMENT_CLOSE_OPACITY_RANGE
-			: ZOOM_FOCUSED_ELEMENT_OPEN_OPACITY_RANGE;
-
-		const focusedFade = interpolate(
-			transitionProgress,
-			[focusedOpacityRange[0], focusedOpacityRange[1]],
-			[focusedOpacityRange[2], focusedOpacityRange[3]],
-			"clamp",
-		);
-
-		const contentBaseTranslateX = contentRaw.translateX;
-		const contentBaseTranslateY = contentRaw.translateY;
-		const contentBaseScale = contentRaw.scale;
-
-		const contentTranslateX =
-			contentBaseTranslateX +
-			drag.dragX +
-			pinchFocalOffset.x * contentBaseScale;
-		const contentTranslateY =
-			contentBaseTranslateY +
-			drag.dragY +
-			pinchFocalOffset.y * contentBaseScale;
-		const contentScale = drag.isDismissing
-			? drag.dismissContentScale
-			: contentBaseScale * drag.gestureScale;
-
-		return {
-			options: {
-				gestureReleaseVelocityScale: 0.5,
-			},
-			backdrop: {
-				style: {
-					backgroundColor: backdropColor,
-					opacity: backdropOpacity,
-				},
-			},
-			content: {
-				style: {
-					...(keepFocusedVisible ? {} : { opacity: focusedFade }),
-					transform: [
-						{ translateX: contentTranslateX },
-						{ translateY: contentTranslateY },
-						{ scale: contentScale },
-						{ rotateZ: `${drag.rotation}rad` },
-					],
-					borderRadius: interpolate(
-						transitionProgress,
-						[0, 1],
-						[sourceBorderRadius, active.animating ? expandedBorderRadius : 0],
-						"clamp",
-					),
-					overflow: "hidden" as const,
-				},
-			},
-			[NAVIGATION_MASK_ELEMENT_STYLE_ID]: navigationMaskEnabled
-				? resolveZoomNavigationMaskStyle({
-						scopedBounds,
-						link,
-						sourceBounds,
-						screenLayout,
-						transitionProgress,
-						drag,
-						contentTransform: contentRaw,
-						sourceBorderRadius,
-						expandedBorderRadius,
-						active,
-					})
-				: {},
-		};
-	}
-
-	const unfocusedOpacityRange = active.closing
-		? ZOOM_UNFOCUSED_ELEMENT_CLOSE_OPACITY_RANGE
-		: ZOOM_UNFOCUSED_ELEMENT_OPEN_OPACITY_RANGE;
-	const unfocusedFade = interpolate(
-		transitionProgress,
-		[unfocusedOpacityRange[0], unfocusedOpacityRange[1]],
-		[unfocusedOpacityRange[2], unfocusedOpacityRange[3]],
-		"clamp",
-	);
-	const unfocusedScale = interpolate(
-		transitionProgress,
-		[1, 2],
-		[1, backgroundScale],
-		"clamp",
-	);
-
-	const shouldHideSource = !active.closing && unfocusedFade <= EPSILON;
-	const unfocusedContentScale = active.settled ? 1 : unfocusedScale;
-	const unfocusedContent = {
-		style: {
-			transform: [{ scale: unfocusedContentScale }],
-		},
-	};
-
-	// To avoid measuring a component from a bad position,
-	// we'll want to hide + reset this component when the animation has reached a visual settling point
-	if (shouldHideSource || active.settled) {
-		return {
-			content: unfocusedContent,
-			[link.id]: {
-				style: {
-					transform: [
-						{ translateX: 0 },
-						{ translateY: 0 },
-						{ scaleX: 1 },
-						{ scaleY: 1 },
-					],
-					opacity: shouldHideSource ? 0 : unfocusedFade,
-				},
-			},
-		};
-	}
-
-	const trackedContentBaseScale = resolveRevealContentBaseTransform({
-		progress: activeTransitionProgress,
-		sourceBounds,
-		destinationBounds: trackingContentTarget,
-		screenLayout,
-	}).scale;
-	const trackedDragX =
-		drag.dragX + pinchFocalOffset.x * trackedContentBaseScale;
-	const trackedDragY =
-		drag.dragY + pinchFocalOffset.y * trackedContentBaseScale;
-
-	const trackedSourceElement = resolveZoomTrackedSourceTransform({
-		progress: activeTransitionProgress,
-		sourceBounds,
-		destinationBounds: trackingContentTarget,
-		screenLayout,
-		dragX: trackedDragX,
-		dragY: trackedDragY,
-		gestureScale: trackedGestureScale,
-		parentScale: unfocusedContentScale,
-		rotation: drag.rotation,
-	});
-
-	return {
-		content: unfocusedContent,
-		[link.id]: {
-			style: {
-				transform: [
-					{ translateX: trackedSourceElement.translateX },
-					{ translateY: trackedSourceElement.translateY },
-					{ rotateZ: `${drag.rotation}rad` },
-					{ scaleX: trackedSourceElement.scaleX },
-					{ scaleY: trackedSourceElement.scaleY },
-				],
-				opacity: unfocusedFade,
-			},
-		},
-	};
-}

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

@@ -1,23 +0,0 @@
-export const ZOOM_SHARED_OPTIONS = Object.freeze({
-	anchor: "top" as const,
-	scaleMode: "uniform" as const,
-});
-
-export const ZOOM_DISMISS_VELOCITY_DEPTH = 1.0;
-export const ZOOM_BACKGROUND_SCALE = 0.9375;
-// Keep the previous screen visible beneath the zoom instead of reaching black.
-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;
-export const ZOOM_UNFOCUSED_ELEMENT_OPEN_OPACITY_RANGE = [
-	1.27, 1.4, 1, 0,
-] as const;
-// On close, red is prepared behind opaque blue before blue fades away.
-export const ZOOM_FOCUSED_ELEMENT_CLOSE_OPACITY_RANGE = [
-	0.13, 0.7, 0, 1,
-] as const;
-export const ZOOM_UNFOCUSED_ELEMENT_CLOSE_OPACITY_RANGE = [
-	1.7, 2, 1, 0,
-] as const;