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

package/src/utils/animation/derivations.ts

@@ -1,40 +0,0 @@
-import { Bounds } from "../../stores/bounds";
-import type { ScreenTransitionState } from "../../types/animation";
-
-interface DerivationsParams {
-	current: ScreenTransitionState;
-	next?: ScreenTransitionState;
-	previous?: ScreenTransitionState;
-}
-
-/**
- * Additional values to help make defining animations easier.
- */
-export const derivations = ({ current, next, previous }: DerivationsParams) => {
-	"worklet";
-
-	// The combined progress
-	const progress = current.progress + (next?.progress ?? 0);
-
-	// Whether the current screen is focused
-	const focused = !next;
-
-	const active = focused ? current : (next ?? current);
-	const isActiveTransitioning = !!(
-		active.gesture.isDragging || active.animating
-	);
-
-	const isDismissing = !!(active.gesture.isDismissing || active.closing);
-
-	// The active bound id
-	const activeBoundId = Bounds.getActiveBound(current, next, previous);
-
-	return {
-		progress,
-		focused,
-		activeBoundId,
-		active,
-		isActiveTransitioning,
-		isDismissing,
-	};
-};

package/src/utils/animation/start-screen-transition.ts

@@ -1,61 +0,0 @@
-import { runOnJS } from "react-native-reanimated";
-import type { AnimationMap } from "../../stores/animations";
-import type { TransitionSpec } from "../../types/animation";
-import { animate } from "./animate";
-
-interface StartScreenTransitionProps {
-	target: "open" | "close";
-	spec?: TransitionSpec;
-	onAnimationFinish?: (finished: boolean) => void;
-	animations: AnimationMap;
-	/** Optional initial velocity for spring-based progress (units: progress/sec). */
-	initialVelocity?: number;
-}
-
-export const startScreenTransition = ({
-	target,
-	spec,
-	onAnimationFinish,
-	animations,
-	initialVelocity,
-}: StartScreenTransitionProps) => {
-	"worklet";
-	const value = target === "open" ? 1 : 0;
-	const config = target === "open" ? spec?.open : spec?.close;
-
-	const isSpringConfig =
-		!!config && !("duration" in config) && !("easing" in config);
-
-	const effectiveConfig =
-		isSpringConfig && typeof initialVelocity === "number"
-			? { ...config, velocity: initialVelocity }
-			: config;
-
-	const { progress, animating, closing } = animations;
-
-	if (target === "close") {
-		closing.value = 1;
-	}
-
-	if (!config) {
-		animating.value = 0;
-		progress.value = value;
-
-		if (onAnimationFinish) {
-			runOnJS(onAnimationFinish)(true);
-		}
-		return;
-	}
-
-	animating.value = 1;
-
-	progress.value = animate(value, effectiveConfig, (finished) => {
-		"worklet";
-		if (finished) {
-			if (onAnimationFinish) {
-				runOnJS(onAnimationFinish)(finished);
-			}
-			animating.value = 0;
-		}
-	});
-};

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

@@ -1,151 +0,0 @@
-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/native-stack.navigator";
-
-/**
- * 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/utils/bounds/_utils/geometry.ts

@@ -1,166 +0,0 @@
-import type { MeasuredDimensions } from "react-native-reanimated";
-import type { Layout } from "../../../types/native-stack.navigator";
-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/utils/bounds/_utils/is-bounds-equal.ts

@@ -1,24 +0,0 @@
-import type { MeasuredDimensions } from "react-native-reanimated";
-import { Bounds } from "../../../stores/bounds";
-
-export const isBoundsEqual = ({
-	measured,
-	key,
-	sharedBoundTag,
-}: {
-	measured: MeasuredDimensions;
-	key: string;
-	sharedBoundTag: string;
-}) => {
-	"worklet";
-	const existing = Bounds.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/utils/bounds/constants.ts

@@ -1,40 +0,0 @@
-import type { MeasuredDimensions } from "react-native-reanimated";
-import type { Complete } from "../../types/utils";
-import type { BoundsBuilderOptions } from "./_types/builder";
-import type { Layout } from "../../types/native-stack.navigator";
-
-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/utils/bounds/index.ts

@@ -1,219 +0,0 @@
-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 { ScreenPhase } from "../../types/core";
-import type { Layout } from "../../types/native-stack.navigator";
-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;
-};