react-native-screen-transitions 2.4.2 → 3.0.0-beta.0

package/src/shared/utils/bounds/_types/builder.ts

@@ -0,0 +1,151 @@
+import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
+import type { ScreenTransitionState } from "../../../types/animation";
+import type { BoundsMethod } from "../../../types/bounds";
+import type { Layout } from "../../../types/core";
+
+/**
+ * Params passed to the builder initializer. No method required here.
+ */
+export type BoundsBuilderInitParams = {
+	id: string | null;
+	previous?: ScreenTransitionState;
+	current: ScreenTransitionState;
+	next?: ScreenTransitionState;
+	progress: number;
+	dimensions: Layout;
+};
+
+export type BoundsAnchor =
+	| "topLeading"
+	| "top"
+	| "topTrailing"
+	| "leading"
+	| "center"
+	| "trailing"
+	| "bottomLeading"
+	| "bottom"
+	| "bottomTrailing";
+
+export type BoundsScaleMode = "match" | "none" | "uniform";
+
+export type BoundsTarget = "bound" | "fullscreen" | MeasuredDimensions;
+
+export type BoundsSpace = "relative" | "absolute";
+
+export type BoundsComputeParams = BoundsBuilderInitParams;
+
+export type RawSizeAbsoluteReturn = {
+	width: number;
+	height: number;
+	translateX: number;
+	translateY: number;
+};
+
+export type RawSizeRelativeReturn = {
+	translateX: number;
+	translateY: number;
+	width: number;
+	height: number;
+};
+
+export type RawTransformAbsoluteReturn = {
+	translateX: number;
+	translateY: number;
+	scaleX: number;
+	scaleY: number;
+};
+
+export type RawTransformRelativeReturn = {
+	translateX: number;
+	translateY: number;
+	scaleX: number;
+	scaleY: number;
+};
+
+export type RawContentReturn = {
+	translateX: number;
+	translateY: number;
+	scale: number;
+};
+
+// Conditional return type based on options
+export type BoundsReturnType<T extends BoundsBuilderOptions> =
+	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 BoundsBuilderOptions = {
+	/**
+	 * @deprecated Use `content.scaleMode` instead.
+	 */
+	toFullscreen?: boolean;
+	/**
+	 * @deprecated Use `content.anchor` instead.
+	 */
+	absolute?: boolean;
+	/**
+	 * @deprecated Use `content.anchor` instead.
+	 */
+	relative?: boolean;
+	/**
+	 * @deprecated Use `scaleMode` instead.
+	 */
+	contentScaleMode?: "aspectFill" | "aspectFit" | "auto";
+
+	/**
+	 * The ID of the bound to compute bounds for. If not provided, uses the active bound ID.
+	 */
+	id?: string;
+
+	/**
+	 * The method to use to compute the bounds.
+	 *
+	 * - "transform": translates and scales (scaleX/scaleY), no width/height size
+	 * - "size": translates and sizes (width/height), no scaleX/scaleY
+	 * - "content": screen-level content transform that aligns the destination screen
+	 *   so the target bound matches the source at progress start
+	 * @default "transform"
+	 */
+	method?: BoundsMethod;
+
+	/**
+	 * The space to use to compute the bounds.
+	 *
+	 * - "relative": the bounds are computed with relative deltas, constrained by parent layout
+	 * - "absolute": the bounds are computed with absolute coordinates, unconstrained by parent layout
+	 * @default "relative"
+	 */
+	space?: BoundsSpace;
+	/**
+	 * Whether the bound should target the screen or the bound.
+	 * @default "bound"
+	 */
+	target?: BoundsTarget;
+	/**
+	 * The gesture offsets to apply to the bounds.
+	 */
+	gestures?: { x?: number; y?: number };
+	/**
+	 * How the bounds should be scaled between each other.
+	 * @default "match"
+	 */
+	scaleMode?: BoundsScaleMode;
+	/**
+	 * Where the bounds should be anchored between each other.
+	 * @default "center"
+	 */
+	anchor?: BoundsAnchor;
+	/**
+	 * If true, the raw values will be returned instead of the computed values.
+	 * @default false
+	 */
+	raw?: boolean;
+};

package/src/shared/utils/bounds/_utils/geometry.ts

@@ -0,0 +1,166 @@
+import type { MeasuredDimensions } from "react-native-reanimated";
+import type { Layout } from "../../../types/core";
+import type { BoundsAnchor, BoundsScaleMode } from "../_types/builder";
+import type {
+	ContentTransformGeometry,
+	RelativeGeometry,
+} from "../_types/geometry";
+
+/**
+ * Get the anchor point coordinates for a given bound
+ */
+function getAnchorPoint(
+	bounds: MeasuredDimensions,
+	anchor: BoundsAnchor = "center",
+): { x: number; y: number } {
+	"worklet";
+
+	const { pageX, pageY, width, height } = bounds;
+
+	switch (anchor) {
+		case "topLeading":
+			return { x: pageX, y: pageY };
+		case "top":
+			return { x: pageX + width / 2, y: pageY };
+		case "topTrailing":
+			return { x: pageX + width, y: pageY };
+		case "leading":
+			return { x: pageX, y: pageY + height / 2 };
+		case "center":
+			return { x: pageX + width / 2, y: pageY + height / 2 };
+		case "trailing":
+			return { x: pageX + width, y: pageY + height / 2 };
+		case "bottomLeading":
+			return { x: pageX, y: pageY + height };
+		case "bottom":
+			return { x: pageX + width / 2, y: pageY + height };
+		case "bottomTrailing":
+			return { x: pageX + width, y: pageY + height };
+		default:
+			// Default to center
+			return { x: pageX + width / 2, y: pageY + height / 2 };
+	}
+}
+
+/**
+ * Relative geometry between start/end bounds.
+ */
+export function computeRelativeGeometry({
+	start,
+	end,
+	entering,
+	anchor = "center",
+	scaleMode = "match",
+}: {
+	start: MeasuredDimensions;
+	end: MeasuredDimensions;
+	entering: boolean;
+	anchor?: BoundsAnchor;
+	scaleMode?: BoundsScaleMode;
+}): RelativeGeometry {
+	"worklet";
+
+	let scaleX: number;
+	let scaleY: number;
+
+	if (scaleMode === "none") {
+		scaleX = 1;
+		scaleY = 1;
+	} else if (scaleMode === "uniform") {
+		const sx = start.width / end.width;
+		const sy = start.height / end.height;
+
+		const startAspect = start.width / start.height;
+		const endAspect = end.width / end.height;
+		const aspectDifference = Math.abs(startAspect - endAspect);
+
+		const scale = aspectDifference < 0.1 ? Math.max(sx, sy) : Math.min(sx, sy);
+		scaleX = scale;
+		scaleY = scale;
+	} else {
+		scaleX = start.width / end.width;
+		scaleY = start.height / end.height;
+	}
+
+	const startAnchor = getAnchorPoint(start, anchor);
+	const endAnchor = getAnchorPoint(end, anchor);
+
+	const endCenter = getAnchorPoint(end, "center");
+	const anchorOffsetX = endAnchor.x - endCenter.x;
+	const anchorOffsetY = endAnchor.y - endCenter.y;
+
+	const dx = startAnchor.x - endCenter.x - anchorOffsetX * scaleX;
+	const dy = startAnchor.y - endCenter.y - anchorOffsetY * scaleY;
+
+	return { dx, dy, scaleX, scaleY, entering };
+}
+/**
+ * Computes the transform to apply to the entire destination screen so that
+ * its bound (end) matches the source bound (start) at progress start.
+ */
+export function computeContentTransformGeometry({
+	start,
+	end,
+	entering,
+	dimensions,
+	anchor = "center",
+	scaleMode = "uniform",
+}: {
+	start: MeasuredDimensions;
+	end: MeasuredDimensions;
+	entering: boolean;
+	dimensions: Layout;
+	anchor?: BoundsAnchor;
+	scaleMode?: BoundsScaleMode;
+}): ContentTransformGeometry {
+	"worklet";
+
+	// Calculate scale based on how much we need to scale the screen
+	// so that the end element matches the start element's size
+	let s: number;
+
+	if (scaleMode === "none") {
+		s = 1;
+	} else if (scaleMode === "uniform") {
+		const sx = start.width / end.width;
+		const sy = start.height / end.height;
+
+		const startAspect = start.width / start.height;
+		const endAspect = end.width / end.height;
+		const aspectDifference = Math.abs(startAspect - endAspect);
+
+		s = aspectDifference < 0.1 ? Math.max(sx, sy) : Math.min(sx, sy);
+	} else {
+		// For "match" mode on full screen, we need uniform scale
+		const sx = start.width / end.width;
+		const sy = start.height / end.height;
+		s = (sx + sy) / 2;
+	}
+
+	// Get anchor points
+	const startAnchor = getAnchorPoint(start, anchor);
+	const endAnchor = getAnchorPoint(end, anchor);
+
+	// Screen center (scaling origin)
+	const screenCenterX = dimensions.width / 2;
+	const screenCenterY = dimensions.height / 2;
+
+	// How far the end anchor is from screen center
+	const endOffsetFromScreenCenterX = endAnchor.x - screenCenterX;
+	const endOffsetFromScreenCenterY = endAnchor.y - screenCenterY;
+
+	// After scaling the screen from its center, the end anchor moves to:
+	const scaledEndAnchorX = screenCenterX + endOffsetFromScreenCenterX * s;
+	const scaledEndAnchorY = screenCenterY + endOffsetFromScreenCenterY * s;
+
+	// Translation to align scaled end anchor with start anchor
+	const tx = startAnchor.x - scaledEndAnchorX;
+	const ty = startAnchor.y - scaledEndAnchorY;
+
+	return {
+		tx,
+		ty,
+		s,
+		entering,
+	};
+}

package/src/shared/utils/bounds/_utils/is-bounds-equal.ts

@@ -0,0 +1,24 @@
+import type { MeasuredDimensions } from "react-native-reanimated";
+import { BoundStore } from "../../../stores/bound-store";
+
+export const isBoundsEqual = ({
+	measured,
+	key,
+	sharedBoundTag,
+}: {
+	measured: MeasuredDimensions;
+	key: string;
+	sharedBoundTag: string;
+}) => {
+	"worklet";
+	const existing = BoundStore.getBounds(key)?.[sharedBoundTag]?.bounds;
+	return (
+		existing &&
+		existing.width === measured.width &&
+		existing.height === measured.height &&
+		existing.pageX === measured.pageX &&
+		existing.pageY === measured.pageY &&
+		existing.x === measured.x &&
+		existing.y === measured.y
+	);
+};

package/src/shared/utils/bounds/constants.ts

@@ -0,0 +1,40 @@
+import type { MeasuredDimensions } from "react-native-reanimated";
+import type { Layout } from "../../types/core";
+import type { Complete } from "../../types/utils";
+import type { BoundsBuilderOptions } from "./_types/builder";
+
+export const FULLSCREEN_DIMENSIONS = (
+	dimensions: Layout,
+): MeasuredDimensions => {
+	"worklet";
+	return {
+		x: 0,
+		y: 0,
+		pageX: 0,
+		pageY: 0,
+		width: dimensions.width,
+		height: dimensions.height,
+	};
+};
+
+export const DEFAULT_BUILDER_OPTIONS: Complete<
+	Omit<BoundsBuilderOptions, "id">
+> = Object.freeze({
+	gestures: { x: 0, y: 0 },
+	toFullscreen: false,
+	absolute: false,
+	relative: true,
+	method: "transform",
+	contentScaleMode: "auto",
+	space: "relative",
+	target: "bound",
+	/**
+	 * Controls how elements scale during transitions
+	 * - "match": Scale to match destination bounds (default for center anchor)
+	 * - "none": No scaling, maintain original size (default for non-center anchors)
+	 * - "uniform": Scale uniformly (maintain aspect ratio)
+	 */
+	scaleMode: "match",
+	anchor: "center",
+	raw: false,
+} as const);

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

@@ -0,0 +1,218 @@
+import type { MeasuredDimensions } from "react-native-reanimated";
+import {
+	EMPTY_BOUND_HELPER_RESULT,
+	EMPTY_BOUND_HELPER_RESULT_RAW,
+	ENTER_RANGE,
+	EXIT_RANGE,
+	FULLSCREEN_DIMENSIONS,
+} from "../../constants";
+import type {
+	ScreenInterpolationProps,
+	ScreenTransitionState,
+} from "../../types/animation";
+import type { BoundsAccessor } from "../../types/bounds";
+import type { Layout, ScreenPhase } from "../../types/core";
+import type {
+	BoundsBuilderInitParams,
+	BoundsBuilderOptions,
+} from "./_types/builder";
+import {
+	computeContentTransformGeometry,
+	computeRelativeGeometry,
+} from "./_utils/geometry";
+import { getBounds } from "./_utils/get-bounds";
+import {
+	composeContentStyle,
+	composeSizeAbsolute,
+	composeSizeRelative,
+	composeTransformAbsolute,
+	composeTransformRelative,
+	type ElementComposeParams,
+} from "./_utils/style-composers";
+
+export interface BuildBoundsAccessorParams {
+	activeBoundId: string | null;
+	current: ScreenTransitionState;
+	previous?: ScreenTransitionState;
+	next?: ScreenTransitionState;
+	progress: number;
+	dimensions: Layout;
+}
+
+const resolveBounds = (props: {
+	id: string;
+	previous?: ScreenTransitionState;
+	current?: ScreenTransitionState;
+	next?: ScreenTransitionState;
+	toRect?: Partial<MeasuredDimensions>;
+	dimensions: Layout;
+	computeOptions: BoundsBuilderOptions;
+}) => {
+	"worklet";
+	const entering = !props.next;
+
+	const fullscreen = FULLSCREEN_DIMENSIONS(props.dimensions);
+
+	const startPhase: ScreenPhase = entering ? "previous" : "current";
+	const endPhase: ScreenPhase = entering ? "current" : "next";
+
+	const getPhaseBounds = (phase?: ScreenPhase) => {
+		"worklet";
+		switch (phase) {
+			case "previous":
+				return props.previous?.bounds?.[props.id]?.bounds;
+			case "current":
+				return props.current?.bounds?.[props.id]?.bounds;
+			case "next":
+				return props.next?.bounds?.[props.id]?.bounds;
+			default:
+				return null;
+		}
+	};
+
+	const start = getPhaseBounds(startPhase);
+	let end = getPhaseBounds(endPhase);
+
+	const isFullscreen =
+		props.computeOptions.target === "fullscreen" ||
+		props.computeOptions.toFullscreen;
+
+	if (isFullscreen) {
+		end = fullscreen;
+	}
+
+	const customTarget = props.computeOptions.target;
+
+	if (typeof customTarget === "object") {
+		end = customTarget;
+	}
+
+	return {
+		start,
+		end,
+		entering,
+	};
+};
+
+const computeBoundStyles = (
+	{
+		id,
+		previous,
+		current,
+		next,
+		progress,
+		dimensions,
+	}: BoundsBuilderInitParams,
+	computeOptions: BoundsBuilderOptions = {},
+) => {
+	"worklet";
+	if (!id) {
+		if (computeOptions.raw) {
+			return EMPTY_BOUND_HELPER_RESULT_RAW;
+		}
+		return EMPTY_BOUND_HELPER_RESULT;
+	}
+
+	const { start, end, entering } = resolveBounds({
+		id,
+		previous,
+		current,
+		next,
+		computeOptions,
+		dimensions,
+	});
+
+	if (!start || !end) {
+		if (computeOptions.raw) {
+			return EMPTY_BOUND_HELPER_RESULT_RAW;
+		}
+		return EMPTY_BOUND_HELPER_RESULT;
+	}
+
+	const ranges: readonly [number, number] = entering ? ENTER_RANGE : EXIT_RANGE;
+
+	if (computeOptions.method === "content") {
+		const geometry = computeContentTransformGeometry({
+			start,
+			end,
+			entering,
+			dimensions,
+			anchor: computeOptions.anchor,
+			scaleMode: computeOptions.scaleMode,
+		});
+
+		return composeContentStyle({
+			start,
+			progress,
+			ranges,
+			end,
+			geometry,
+			computeOptions,
+		});
+	}
+
+	const geometry = computeRelativeGeometry({
+		start,
+		end,
+		entering,
+		anchor: computeOptions.anchor,
+		scaleMode: computeOptions.scaleMode,
+	});
+
+	const common: ElementComposeParams = {
+		start,
+		end,
+		progress,
+		ranges,
+		geometry,
+		computeOptions,
+	};
+
+	const isSize = computeOptions.method === "size";
+	const isAbs =
+		computeOptions.space === "absolute" || !!computeOptions.absolute;
+
+	return isSize
+		? isAbs
+			? composeSizeAbsolute(common)
+			: composeSizeRelative(common)
+		: isAbs
+			? composeTransformAbsolute(common)
+			: composeTransformRelative(common);
+};
+
+export const createBounds = (
+	props: Omit<ScreenInterpolationProps, "bounds">,
+): BoundsAccessor => {
+	"worklet";
+
+	const boundsFunction = (params?: BoundsBuilderOptions) => {
+		"worklet";
+		const id = params?.id ?? props.activeBoundId;
+
+		return computeBoundStyles(
+			{
+				id,
+				current: props.current,
+				previous: props.previous,
+				next: props.next,
+				progress: props.progress,
+				dimensions: props.layouts.screen,
+			},
+			params,
+		);
+	};
+
+	const get = (id?: string, phase?: ScreenPhase) => {
+		"worklet";
+		return getBounds({
+			id: id ?? props.activeBoundId,
+			phase,
+			current: props.current,
+			previous: props.previous,
+			next: props.next,
+		});
+	};
+
+	return Object.assign(boundsFunction, { get }) as BoundsAccessor;
+};