react-native-screen-transitions 3.4.0-alpha.0 → 3.4.0-alpha.1

package/src/shared/utils/bounds/helpers/math.ts

@@ -1,161 +0,0 @@
-type CombinedScaleMode = "multiply" | "average" | "max" | "min";
-
-export const clamp = (value: number, min: number, max: number): number => {
-	"worklet";
-	const lower = min < max ? min : max;
-	const upper = max > min ? max : min;
-
-	if (value < lower) return lower;
-	if (value > upper) return upper;
-
-	return value;
-};
-
-export const clamp01 = (value: number): number => {
-	"worklet";
-	return clamp(value, 0, 1);
-};
-
-export const lerp = (from: number, to: number, t: number): number => {
-	"worklet";
-	return from + (to - from) * t;
-};
-
-export const safeDivide = (
-	numerator: number,
-	denominator: number,
-	fallback = 0,
-): number => {
-	"worklet";
-	if (denominator === 0) return fallback;
-	return numerator / denominator;
-};
-
-export const inverseLerp = (
-	value: number,
-	inMin: number,
-	inMax: number,
-): number => {
-	"worklet";
-	return safeDivide(value - inMin, inMax - inMin, 0);
-};
-
-export const mapRangeClamped = (
-	value: number,
-	inMin: number,
-	inMax: number,
-	outMin: number,
-	outMax: number,
-): number => {
-	"worklet";
-	const t = clamp01(inverseLerp(value, inMin, inMax));
-	return lerp(outMin, outMax, t);
-};
-
-export const applyPowerCurve = (value: number, exponent: number): number => {
-	"worklet";
-	const safeExponent = exponent > 0 ? exponent : 1;
-	const magnitude = Math.abs(value) ** safeExponent;
-	return value < 0 ? -magnitude : magnitude;
-};
-
-export const normalizedToTranslation = ({
-	normalized,
-	dimension,
-	resistance,
-}: {
-	normalized: number;
-	dimension: number;
-	resistance: number;
-}): number => {
-	"worklet";
-	const distance = Math.max(0, dimension) * resistance;
-	return mapRangeClamped(normalized, -1, 1, -distance, distance);
-};
-
-export const normalizedToScale = ({
-	normalized,
-	outputRange,
-	exponent = 1,
-	positiveOnly = true,
-}: {
-	normalized: number;
-	outputRange: readonly [number, number];
-	exponent?: number;
-	positiveOnly?: boolean;
-}): number => {
-	"worklet";
-	const [outputStart, outputEnd] = outputRange;
-	const raw = positiveOnly
-		? mapRangeClamped(normalized, 0, 1, outputStart, outputEnd)
-		: mapRangeClamped(normalized, -1, 1, outputStart, outputEnd);
-
-	return applyPowerCurve(raw, exponent);
-};
-
-export const combineScales = (
-	scaleX: number,
-	scaleY: number,
-	mode: CombinedScaleMode = "multiply",
-): number => {
-	"worklet";
-
-	switch (mode) {
-		case "average":
-			return (scaleX + scaleY) / 2;
-		case "max":
-			return Math.max(scaleX, scaleY);
-		case "min":
-			return Math.min(scaleX, scaleY);
-		default:
-			return scaleX * scaleY;
-	}
-};
-
-export const computeCenterScaleShift = ({
-	center,
-	containerCenter,
-	scale,
-}: {
-	center: number;
-	containerCenter: number;
-	scale: number;
-}): number => {
-	"worklet";
-	return (center - containerCenter) * (scale - 1);
-};
-
-export const compensateTranslationForParentScale = ({
-	translation,
-	parentScale,
-	epsilon,
-}: {
-	translation: number;
-	parentScale: number;
-	epsilon: number;
-}): number => {
-	"worklet";
-	const safeParentScale = Math.max(parentScale, epsilon);
-	return safeDivide(translation, safeParentScale, translation);
-};
-
-export const composeCompensatedTranslation = ({
-	gesture,
-	parentScale,
-	centerShift = 0,
-	epsilon,
-}: {
-	gesture: number;
-	parentScale: number;
-	centerShift?: number;
-	epsilon: number;
-}): number => {
-	"worklet";
-	return (
-		compensateTranslationForParentScale({
-			translation: gesture,
-			parentScale,
-			epsilon,
-		}) + centerShift
-	);
-};

package/src/shared/utils/bounds/helpers/navigation-accessor.ts

@@ -1,61 +0,0 @@
-import type { ScreenInterpolationProps } from "../../../types/animation.types";
-import type { BoundsNavigationOptions } from "../../../types/bounds.types";
-import { buildNavigationStyles } from "../sugar/navigation";
-import type { BoundsOptions } from "../types/options";
-import type { ResolveBoundTagParams } from "./resolve-bound-tag";
-
-type NavigationAccessorParams = {
-	id?: string;
-	group?: string;
-	getProps: () => Omit<ScreenInterpolationProps, "bounds">;
-	resolveBoundTag: (params: ResolveBoundTagParams) => string | undefined;
-	computeRaw: (
-		overrides?: Partial<BoundsOptions>,
-		frameProps?: Omit<ScreenInterpolationProps, "bounds">,
-	) => Record<string, unknown>;
-	zoomBaseOptions?: Pick<BoundsOptions, "anchor" | "scaleMode" | "target">;
-};
-
-export const createNavigationAccessor = ({
-	id,
-	group,
-	getProps,
-	resolveBoundTag,
-	computeRaw,
-	zoomBaseOptions,
-}: NavigationAccessorParams) => {
-	"worklet";
-
-	const resolvedId = id ?? "";
-
-	const computeNavigationPresetStyles = (
-		preset: "zoom",
-		navigationOptions?: BoundsNavigationOptions,
-	) => {
-		"worklet";
-		const frameProps = getProps();
-		return buildNavigationStyles({
-			id: resolvedId,
-			group,
-			preset,
-			navigationOptions,
-			props: frameProps,
-			resolveTag: resolveBoundTag,
-			computeRaw: (overrides) =>
-				computeRaw(
-					{
-						...(overrides ?? {}),
-						raw: true,
-					},
-					frameProps,
-				),
-		});
-	};
-
-	return {
-		zoom: () => {
-			"worklet";
-			return computeNavigationPresetStyles("zoom", zoomBaseOptions);
-		},
-	};
-};

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

@@ -1,74 +0,0 @@
-import { BoundStore } from "../../../../stores/bounds";
-import type { BoundsNavigationOptions } from "../../../../types/bounds.types";
-import type { BoundsOptions } from "../../types/options";
-import type { ResolveTag } from "./types";
-
-export const toNumber = (value: unknown, fallback = 0): number => {
-	"worklet";
-	return typeof value === "number" ? value : fallback;
-};
-
-export const resolveNavigationConfig = ({
-	id,
-	group,
-	navigationOptions,
-	currentRouteKey,
-	resolveTag,
-	defaultAnchor,
-}: {
-	id: string;
-	group?: string;
-	navigationOptions?: BoundsNavigationOptions;
-	currentRouteKey?: string;
-	resolveTag: ResolveTag;
-	defaultAnchor: BoundsOptions["anchor"] | undefined;
-}): {
-	resolvedTag: string;
-	sharedOptions: Partial<BoundsOptions>;
-	explicitTarget: BoundsOptions["target"] | undefined;
-} | null => {
-	"worklet";
-	const resolvedTag = resolveTag({ id, group });
-	if (!resolvedTag) return null;
-
-	// Try direct boundary config for the current screen first.
-	const boundaryConfig = currentRouteKey
-		? BoundStore.getBoundaryConfig(resolvedTag, currentRouteKey)
-		: null;
-
-	// Fallback: when the current screen has no Boundary (e.g. a zoom detail
-	// screen without a destination element), inherit config from the link's
-	// source screen so that props like scaleMode propagate to both sides.
-	let effectiveConfig = boundaryConfig;
-	if (!effectiveConfig) {
-		// For no-destination navigation zoom, the focused route won't appear in
-		// a completed link yet. Fall back to the latest unscoped link so source
-		// boundary defaults (anchor/scaleMode/target) still propagate.
-		const scopedLink = currentRouteKey
-			? BoundStore.getActiveLink(resolvedTag, currentRouteKey)
-			: null;
-		const link = scopedLink ?? BoundStore.getActiveLink(resolvedTag);
-		if (link?.source) {
-			effectiveConfig = BoundStore.getBoundaryConfig(
-				resolvedTag,
-				link.source.screenKey,
-			);
-		}
-	}
-
-	const sharedOptions: Partial<BoundsOptions> = {
-		...(navigationOptions ?? {}),
-		anchor:
-			navigationOptions?.anchor ?? effectiveConfig?.anchor ?? defaultAnchor,
-		scaleMode:
-			navigationOptions?.scaleMode ?? effectiveConfig?.scaleMode ?? "uniform",
-	};
-
-	const explicitTarget = navigationOptions?.target ?? effectiveConfig?.target;
-
-	return {
-		resolvedTag,
-		sharedOptions,
-		explicitTarget,
-	};
-};

package/src/shared/utils/bounds/sugar/navigation/index.ts

@@ -1,14 +0,0 @@
-import { NO_STYLES } from "../../../../constants";
-import type { BuildNavigationStylesParams } from "./types";
-import { buildZoomNavigationStyles } from "./zoom";
-
-export const buildNavigationStyles = (params: BuildNavigationStylesParams) => {
-	"worklet";
-
-	switch (params.preset) {
-		case "zoom":
-			return buildZoomNavigationStyles(params);
-		default:
-			return NO_STYLES;
-	}
-};

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

@@ -1,26 +0,0 @@
-import type { ScreenInterpolationProps } from "../../../../types/animation.types";
-import type {
-	BoundsNavigationOptions,
-	BoundsNavigationPreset,
-} from "../../../../types/bounds.types";
-import type { BoundsOptions } from "../../types/options";
-
-export type ResolveTag = (params: {
-	id?: string;
-	group?: string;
-}) => string | undefined;
-
-export type ComputeRaw = (
-	overrides: Partial<BoundsOptions>,
-	frameProps?: Omit<ScreenInterpolationProps, "bounds">,
-) => Record<string, unknown>;
-
-export type BuildNavigationStylesParams = {
-	id: string;
-	group?: string;
-	preset: BoundsNavigationPreset;
-	navigationOptions?: BoundsNavigationOptions;
-	props: Omit<ScreenInterpolationProps, "bounds">;
-	resolveTag: ResolveTag;
-	computeRaw: ComputeRaw;
-};

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

@@ -1,348 +0,0 @@
-import { interpolate } from "react-native-reanimated";
-import {
-	EPSILON,
-	NAVIGATION_CONTAINER_STYLE_ID,
-	NAVIGATION_MASK_STYLE_ID,
-	NO_STYLES,
-} from "../../../../constants";
-import { BoundStore } from "../../../../stores/bounds";
-import type { TransitionInterpolatedStyle } from "../../../../types/animation.types";
-import type { Layout } from "../../../../types/screen.types";
-import { interpolateClamped } from "../../helpers/interpolate";
-import {
-	combineScales,
-	composeCompensatedTranslation,
-	computeCenterScaleShift,
-	normalizedToScale,
-	normalizedToTranslation,
-} from "../../helpers/math";
-import type { BoundsOptions } from "../../types/options";
-import { resolveNavigationConfig, toNumber } from "./helpers";
-import type { BuildNavigationStylesParams } from "./types";
-
-const DRAG_RESISTANCE = 0.4;
-const DIRECTIONAL_DRAG_SCALE_OUTPUT = [1, 0.25] as const;
-const IDENTITY_DRAG_SCALE_OUTPUT = [1, 1] as const;
-
-const getZoomContentTarget = ({
-	explicitTarget,
-	resolvedTag,
-	currentRouteKey,
-	previousRouteKey,
-	nextRouteKey,
-	entering,
-	screenLayout,
-	anchor,
-}: {
-	explicitTarget: BoundsOptions["target"] | undefined;
-	resolvedTag: string;
-	currentRouteKey?: string;
-	previousRouteKey?: string;
-	nextRouteKey?: string;
-	entering: boolean;
-	screenLayout: Layout;
-	anchor: BoundsOptions["anchor"] | undefined;
-}) => {
-	"worklet";
-	if (explicitTarget !== undefined) return explicitTarget;
-
-	const resolvedPair = BoundStore.resolveTransitionPair(resolvedTag, {
-		currentScreenKey: currentRouteKey,
-		previousScreenKey: previousRouteKey,
-		nextScreenKey: nextRouteKey,
-		entering,
-	});
-	const sourceBounds = resolvedPair.sourceBounds;
-	const screenWidth = screenLayout.width;
-
-	if (!sourceBounds || sourceBounds.width <= 0 || screenWidth <= 0) {
-		return "fullscreen" as const;
-	}
-
-	const height = (sourceBounds.height / sourceBounds.width) * screenWidth;
-	let horizontalAnchor: "leading" | "center" | "trailing";
-	switch (anchor) {
-		case "topLeading":
-		case "leading":
-		case "bottomLeading":
-			horizontalAnchor = "leading";
-			break;
-		case "topTrailing":
-		case "trailing":
-		case "bottomTrailing":
-			horizontalAnchor = "trailing";
-			break;
-		default:
-			horizontalAnchor = "center";
-			break;
-	}
-
-	let verticalAnchor: "top" | "center" | "bottom";
-	switch (anchor) {
-		case "topLeading":
-		case "top":
-		case "topTrailing":
-			verticalAnchor = "top";
-			break;
-		case "bottomLeading":
-		case "bottom":
-		case "bottomTrailing":
-			verticalAnchor = "bottom";
-			break;
-		default:
-			verticalAnchor = "center";
-			break;
-	}
-	const x =
-		horizontalAnchor === "leading"
-			? 0
-			: horizontalAnchor === "trailing"
-				? screenLayout.width - screenWidth
-				: (screenLayout.width - screenWidth) / 2;
-	const y =
-		verticalAnchor === "top"
-			? 0
-			: verticalAnchor === "bottom"
-				? screenLayout.height - height
-				: (screenLayout.height - height) / 2;
-
-	return {
-		x,
-		y,
-		pageX: x,
-		pageY: y,
-		width: screenWidth,
-		height,
-	};
-};
-
-export const buildZoomNavigationStyles = ({
-	id,
-	group,
-	navigationOptions,
-	props,
-	resolveTag,
-	computeRaw,
-}: BuildNavigationStylesParams): TransitionInterpolatedStyle => {
-	"worklet";
-
-	const focused = props.focused;
-	const progress = props.progress;
-	const currentRouteKey = props.current?.route.key;
-	const previousRouteKey = props.previous?.route.key;
-	const nextRouteKey = props.next?.route.key;
-	const entering = !props.next;
-	const screenLayout = props.layouts.screen;
-
-	const normX = props.active.gesture.normX;
-	const normY = props.active.gesture.normY;
-	const initialDirection = props.active.gesture.direction;
-
-	const xScaleOutput =
-		initialDirection === "horizontal"
-			? DIRECTIONAL_DRAG_SCALE_OUTPUT
-			: IDENTITY_DRAG_SCALE_OUTPUT;
-	const yScaleOutput =
-		initialDirection === "vertical"
-			? DIRECTIONAL_DRAG_SCALE_OUTPUT
-			: IDENTITY_DRAG_SCALE_OUTPUT;
-
-	const dragX = normalizedToTranslation({
-		normalized: normX,
-		dimension: screenLayout.width,
-		resistance: DRAG_RESISTANCE,
-	});
-	const dragY = normalizedToTranslation({
-		normalized: normY,
-		dimension: screenLayout.height,
-		resistance: DRAG_RESISTANCE,
-	});
-	const dragXScale = normalizedToScale({
-		normalized: normX,
-		outputRange: xScaleOutput,
-		exponent: 2,
-	});
-	const dragYScale = normalizedToScale({
-		normalized: normY,
-		outputRange: yScaleOutput,
-		exponent: 2,
-	});
-	const dragScale = combineScales(dragXScale, dragYScale);
-
-	const resolvedConfig = resolveNavigationConfig({
-		id,
-		group,
-		navigationOptions,
-		currentRouteKey,
-		resolveTag,
-		defaultAnchor: "top",
-	});
-
-	if (!resolvedConfig) return NO_STYLES;
-
-	const { resolvedTag, sharedOptions, explicitTarget } = resolvedConfig;
-
-	if (focused) {
-		const contentTarget = getZoomContentTarget({
-			explicitTarget,
-			resolvedTag,
-			currentRouteKey,
-			previousRouteKey,
-			nextRouteKey,
-			entering,
-			screenLayout,
-			anchor: sharedOptions.anchor,
-		});
-
-		const contentRaw = computeRaw({
-			...sharedOptions,
-			method: "content",
-			target: contentTarget,
-		});
-
-		const maskRaw = computeRaw({
-			...sharedOptions,
-			method: "size",
-			space: "absolute",
-			target: "fullscreen",
-		});
-
-		const focusedFade = props.active?.closing
-			? interpolate(progress, [0.6, 1], [0, 1], "clamp")
-			: interpolate(progress, [0, 0.5], [0, 1], "clamp");
-		const maskWidth = Math.max(1, toNumber(maskRaw.width));
-		const maskHeight = Math.max(1, toNumber(maskRaw.height));
-		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;
-		const maskTranslateY = toNumber(maskRaw.translateY) + dragY;
-
-		return {
-			[NAVIGATION_CONTAINER_STYLE_ID]: {
-				style: {
-					opacity: focusedFade,
-					transform: [
-						{ translateX: contentTranslateX },
-						{ translateY: contentTranslateY },
-						{ scale: contentScale },
-					],
-				},
-			},
-			[NAVIGATION_MASK_STYLE_ID]: {
-				style: {
-					width: maskWidth,
-					height: maskHeight,
-					transform: [
-						{ translateX: maskTranslateX },
-						{ translateY: maskTranslateY },
-						{ scale: dragScale },
-					],
-					borderRadius: 12,
-				},
-			},
-			// Signal the destination boundary to stay visible during the transition.
-			// Without this, useAssociatedStyles enters "waiting-first-style" mode
-			// (opacity: 0) because it detects previous-screen evidence but never
-			// receives a resolved style for this tag.
-			[resolvedTag]: {
-				style: { opacity: 1 },
-			},
-		};
-	}
-
-	const unfocusedFade = props.active?.closing
-		? interpolate(progress, [1.6, 2], [1, 0], "clamp")
-		: interpolate(progress, [1, 1.5], [1, 0], "clamp");
-	const unfocusedScale = interpolateClamped(progress, [1, 2], [1, 0.95]);
-	const isUnfocusedIdle = props.active.settled === 1;
-
-	const elementTarget =
-		sharedOptions.scaleMode === "match"
-			? ("fullscreen" as const)
-			: getZoomContentTarget({
-					explicitTarget,
-					resolvedTag,
-					currentRouteKey,
-					previousRouteKey,
-					nextRouteKey,
-					entering,
-					screenLayout,
-					anchor: sharedOptions.anchor,
-				});
-
-	const elementRaw = computeRaw({
-		...sharedOptions,
-		method: "transform",
-		space: "relative",
-		target: elementTarget,
-	});
-
-	// Keep compensation tied to the element target's center. In `scaleMode: "match"`
-	// this target is fullscreen, so the center offset should resolve to zero.
-	const elementCenterY =
-		typeof elementTarget === "object"
-			? elementTarget.pageY + elementTarget.height / 2
-			: screenLayout.height / 2;
-
-	const scaleShiftY = computeCenterScaleShift({
-		center: elementCenterY,
-		containerCenter: screenLayout.height / 2,
-		scale: dragScale,
-	});
-
-	const compensatedGestureX = composeCompensatedTranslation({
-		gesture: dragX,
-		parentScale: unfocusedScale,
-		epsilon: EPSILON,
-	});
-	// dragY is measured in screen space and must be unscaled by the parent
-	// content shrink, while scaleShiftY is already in the parent's local space.
-	const compensatedGestureY = composeCompensatedTranslation({
-		gesture: dragY,
-		parentScale: unfocusedScale,
-		centerShift: scaleShiftY,
-		epsilon: EPSILON,
-	});
-	const elementTranslateX =
-		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 resolvedElementStyle = isUnfocusedIdle
-		? {
-				transform: [
-					{ translateX: 0 },
-					{ translateY: 0 },
-					{ scaleX: 1 },
-					{ scaleY: 1 },
-				],
-				opacity: 0,
-				zIndex: 0,
-				elevation: 0,
-			}
-		: {
-				transform: [
-					{ translateX: elementTranslateX },
-					{ translateY: elementTranslateY },
-					{ scaleX: elementScaleX },
-					{ scaleY: elementScaleY },
-				],
-				opacity: unfocusedFade,
-				zIndex: 9999,
-				elevation: 9999,
-			};
-
-	return {
-		content: {
-			style: {
-				transform: [{ scale: unfocusedScale }],
-			},
-		},
-		[resolvedTag]: {
-			style: resolvedElementStyle,
-		},
-	};
-};