react-native-screen-transitions 2.4.0 → 2.4.2

package/src/types/bounds.ts

@@ -14,76 +14,12 @@ import type { ScreenPhase } from "./core";
  */
 export type BoundsMethod = "transform" | "size" | "content";
 
-export type BoundsBuilder = {
-	/**
-	 * Include gesture offsets (x/y) in the computed transform for all methods.
-	 * This syncs the focused screen’s gesture deltas with the previous screen’s bound
-	 * to give the shared look while interacting.
-	 */
-	gestures: (options?: { x?: number; y?: number }) => BoundsBuilder;
-
-	/**
-	 * Animate to the full screen bounds as the destination.
-	 * Useful when the next screen does not define a bound for the same id.
-	 */
-	toFullscreen: () => BoundsBuilder;
-
-	/**
-	 * Compute using absolute window coordinates (pageX/pageY).
-	 * No relative delta math—good when elements are unconstrained by parent layout.
-	 */
-	absolute: () => BoundsBuilder;
-
-	/**
-	 * Compute using relative deltas between start/end bounds (dx/dy, scale).
-	 * This makes the math bound-relative; great when elements are within layout constraints.
-	 */
-	relative: () => BoundsBuilder;
-
-	/**
-	 * Select transform method: translate + scaleX/scaleY (no width/height size).
-	 * Note: x/y translation is applied for all methods when applicable.
-	 */
-	transform: () => BoundsBuilder;
-
-	/**
-	 * Select size method: translate + width/height interpolation (no scaleX/scaleY).
-	 */
-	size: () => BoundsBuilder;
-
-	/**
-	 * Select content method: screen-level transform to align destination content
-	 * so its bound matches the source at progress start. This modifies where the
-	 * bound sits within the screen rather than the bound’s own local transform.
-	 */
-	content: () => BoundsBuilder;
-
-	/**
-	 * Select content scale mode: "aspectFill" (fill), "aspectFit" (fit), or "auto" (default).
-	 */
-	contentFill: () => BoundsBuilder;
-
-	/**
-	 * Select content scale mode: "aspectFill" (fill), "aspectFit" (fit), or "auto" (default).
-	 */
-	contentFit: () => BoundsBuilder;
-
-	/**
-	 * Build the final animated style.
-	 * If a method is not explicitly selected via transform/resize/content,
-	 * the provided argument will be used; defaults to "transform".
-	 */
-	build: (method?: BoundsMethod) => StyleProps;
-};
-
 export type BoundEntry = {
 	bounds: MeasuredDimensions;
 	styles: StyleProps;
 };
 
 export type BoundsAccessor = {
-	(id: string): BoundsBuilder;
-	(): BoundsBuilder;
 	<T extends BoundsBuilderOptions>(options: T): BoundsReturnType<T>;
 	get: (id?: string, phase?: ScreenPhase) => BoundEntry;
 };

package/src/types/navigator.ts

@@ -25,6 +25,11 @@ import type {
 import type { ScreenStyleInterpolator, TransitionSpec } from "./animation";
 import type { GestureActivationArea, GestureDirection } from "./gesture";
 
+export type Layout = {
+	width: number;
+	height: number;
+};
+
 export type NativeStackNavigationEventMap = {
 	/**
 	 * Event which fires when a transition animation starts.

package/src/types/utils.ts

@@ -1,3 +1,4 @@
+// biome-ignore lint/suspicious/noExplicitAny: <>
 export type Any = any;
 
 export type Complete<T> = { [K in keyof T]-?: Exclude<T[K], undefined> };

package/src/utils/animation/derivations.ts

@@ -1,25 +1,18 @@
-import type { ScaledSize } from "react-native";
 import { Bounds } from "../../stores/bounds";
 import type { ScreenTransitionState } from "../../types/animation";
-import { createBounds } from "../bounds";
 
 interface DerivationsParams {
 	current: ScreenTransitionState;
 	next?: ScreenTransitionState;
 	previous?: ScreenTransitionState;
-	dimensions: ScaledSize;
 }
 
 /**
  * Additional values to help make defining animations easier.
  */
-export const derivations = ({
-	current,
-	next,
-	previous,
-	dimensions,
-}: DerivationsParams) => {
+export const derivations = ({ current, next, previous }: DerivationsParams) => {
 	"worklet";
+
 	// The combined progress
 	const progress = current.progress + (next?.progress ?? 0);
 
@@ -30,26 +23,16 @@ export const derivations = ({
 	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);
 
-	// bounds api
-	const bounds = createBounds({
-		activeBoundId,
-		current,
-		previous,
-		next,
-		progress,
-		dimensions,
-	});
-
 	return {
 		progress,
 		focused,
 		activeBoundId,
-		bounds,
 		active,
 		isActiveTransitioning,
 		isDismissing,

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

@@ -1,7 +1,7 @@
-import type { ScaledSize } from "react-native";
 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/navigator";
 
 /**
  * Params passed to the builder initializer. No method required here.
@@ -12,7 +12,7 @@ export type BoundsBuilderInitParams = {
 	current: ScreenTransitionState;
 	next?: ScreenTransitionState;
 	progress: number;
-	dimensions: ScaledSize;
+	dimensions: Layout;
 };
 
 export type BoundsAnchor =

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

@@ -1,5 +1,5 @@
-import type { ScaledSize } from "react-native";
 import type { MeasuredDimensions } from "react-native-reanimated";
+import type { Layout } from "../../../types/navigator";
 import type { BoundsAnchor, BoundsScaleMode } from "../_types/builder";
 import type {
 	ContentTransformGeometry,
@@ -109,7 +109,7 @@ export function computeContentTransformGeometry({
 	start: MeasuredDimensions;
 	end: MeasuredDimensions;
 	entering: boolean;
-	dimensions: ScaledSize;
+	dimensions: Layout;
 	anchor?: BoundsAnchor;
 	scaleMode?: BoundsScaleMode;
 }): ContentTransformGeometry {

package/src/utils/bounds/_utils/styles.ts

@@ -1,9 +1,10 @@
 import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
 import { isSharedValue } from "react-native-reanimated";
+import type { Any } from "../../../types/utils";
 
 type AnyStyle = ViewStyle | TextStyle | ImageStyle;
 type StyleValue = StyleProp<AnyStyle>;
-type PlainStyleObject = Record<string, any>;
+type PlainStyleObject = Record<string, Any>;
 
 function mergeStyleArrays<T extends StyleValue>(style: T): T {
 	"worklet";

package/src/utils/bounds/constants.ts

@@ -1,10 +1,10 @@
-import type { ScaledSize } from "react-native";
 import type { MeasuredDimensions } from "react-native-reanimated";
 import type { Complete } from "../../types/utils";
 import type { BoundsBuilderOptions } from "./_types/builder";
+import type { Layout } from "../ ../../../types/navigator";
 
 export const FULLSCREEN_DIMENSIONS = (
-	dimensions: ScaledSize,
+	dimensions: Layout,
 ): MeasuredDimensions => {
 	"worklet";
 	return {

package/src/utils/bounds/index.ts

@@ -1,16 +1,18 @@
-import type { ScaledSize } from "react-native";
 import type { MeasuredDimensions } from "react-native-reanimated";
 import {
-	DEFAULT_BUILDER_OPTIONS,
 	EMPTY_BOUND_HELPER_RESULT,
 	EMPTY_BOUND_HELPER_RESULT_RAW,
 	ENTER_RANGE,
 	EXIT_RANGE,
 	FULLSCREEN_DIMENSIONS,
 } from "../../constants";
-import type { ScreenTransitionState } from "../../types/animation";
-import type { BoundsAccessor, BoundsBuilder } from "../../types/bounds";
+import type {
+	ScreenInterpolationProps,
+	ScreenTransitionState,
+} from "../../types/animation";
+import type { BoundsAccessor } from "../../types/bounds";
 import type { ScreenPhase } from "../../types/core";
+import type { Layout } from "../../types/navigator";
 import type {
 	BoundsBuilderInitParams,
 	BoundsBuilderOptions,
@@ -35,7 +37,7 @@ export interface BuildBoundsAccessorParams {
 	previous?: ScreenTransitionState;
 	next?: ScreenTransitionState;
 	progress: number;
-	dimensions: ScaledSize;
+	dimensions: Layout;
 }
 
 const resolveBounds = (props: {
@@ -44,7 +46,7 @@ const resolveBounds = (props: {
 	current?: ScreenTransitionState;
 	next?: ScreenTransitionState;
 	toRect?: Partial<MeasuredDimensions>;
-	dimensions: ScaledSize;
+	dimensions: Layout;
 	computeOptions: BoundsBuilderOptions;
 }) => {
 	"worklet";
@@ -180,110 +182,38 @@ const computeBoundStyles = (
 			: composeTransformRelative(common);
 };
 
-/**
- * @deprecated Use `createBounds` instead. We'll avoid using the builder pattern for this type of function.
- */
-const buildBoundStyles = (params: BoundsBuilderInitParams): BoundsBuilder => {
+export const createBounds = (
+	props: Omit<ScreenInterpolationProps, "bounds">,
+): BoundsAccessor => {
 	"worklet";
 
-	const cfg: { options: BoundsBuilderOptions } = {
-		options: { ...DEFAULT_BUILDER_OPTIONS },
+	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 builder = (): BoundsBuilder => ({
-		gestures: (options) => {
-			cfg.options.gestures = options;
-			return builder();
-		},
-		toFullscreen: () => {
-			cfg.options.toFullscreen = true;
-			return builder();
-		},
-		absolute: () => {
-			cfg.options.absolute = true;
-			cfg.options.relative = false;
-			return builder();
-		},
-		relative: () => {
-			cfg.options.relative = true;
-			cfg.options.absolute = false;
-			return builder();
-		},
-		transform: () => {
-			cfg.options.method = "transform";
-			return builder();
-		},
-		size: () => {
-			cfg.options.method = "size";
-			return builder();
-		},
-		content: () => {
-			cfg.options.method = "content";
-			return builder();
-		},
-		contentFill: () => {
-			cfg.options.contentScaleMode = "aspectFill";
-			return builder();
-		},
-		contentFit: () => {
-			cfg.options.contentScaleMode = "aspectFit";
-			return builder();
-		},
-
-		build: () => {
-			return computeBoundStyles(params, cfg.options);
-		},
-	});
-
-	return builder();
-};
-
-export const createBounds = ({
-	activeBoundId,
-	current,
-	previous,
-	next,
-	progress,
-	dimensions,
-}: BuildBoundsAccessorParams): BoundsAccessor => {
-	"worklet";
-
-	const bounds: BoundsAccessor = ((params?: string | BoundsBuilderOptions) => {
-		if (typeof params === "object") {
-			const id = params.id ?? activeBoundId;
-
-			return computeBoundStyles(
-				{
-					id,
-					current,
-					previous,
-					next,
-					progress,
-					dimensions,
-				},
-				params,
-			);
-		}
-
-		const id = typeof params === "string" ? params : activeBoundId;
-		return buildBoundStyles({
-			id,
-			current,
-			previous,
-			next,
-			progress,
-			dimensions,
-		});
-	}) as BoundsAccessor;
-
-	bounds.get = (id?: string, phase?: ScreenPhase) =>
-		getBounds({
-			id: id ?? activeBoundId,
+	const get = (id?: string, phase?: ScreenPhase) => {
+		"worklet";
+		return getBounds({
+			id: id ?? props.activeBoundId,
 			phase,
-			current,
-			previous,
-			next,
+			current: props.current,
+			previous: props.previous,
+			next: props.next,
 		});
+	};
 
-	return bounds;
+	return Object.assign(boundsFunction, { get }) as BoundsAccessor;
 };

package/src/utils/gesture/apply-offset-rules.ts

@@ -1,4 +1,3 @@
-import type { ScaledSize } from "react-native";
 import type { GestureStateManagerType } from "react-native-gesture-handler/lib/typescript/handlers/gestures/gestureStateManager";
 import type { SharedValue } from "react-native-reanimated";
 import {
@@ -16,6 +15,7 @@ import {
 	GestureOffsetState,
 	type SideActivation,
 } from "../../types/gesture";
+import type { Layout } from "../../types/navigator";
 
 type Directions = {
 	vertical: boolean;
@@ -31,7 +31,7 @@ interface CheckGestureActivationProps {
 	manager?: GestureStateManagerType;
 	gestureOffsetState: SharedValue<GestureOffsetState>;
 	activationArea?: GestureActivationArea;
-	dimensions: ScaledSize;
+	dimensions: Layout;
 	responseDistance?: number;
 }
 
@@ -88,7 +88,7 @@ function normalizeSides(area?: GestureActivationArea): NormalizedSides {
 
 function computeEdgeConstraints(
 	initialTouch: { x: number; y: number },
-	dimensions: ScaledSize,
+	dimensions: Layout,
 	sides: NormalizedSides,
 	responseDistance?: number,
 ) {

package/src/utils/gesture/check-gesture-activation.ts

@@ -1,4 +1,3 @@
-import type { ScaledSize } from "react-native";
 import type { GestureStateManagerType } from "react-native-gesture-handler/lib/typescript/handlers/gestures/gestureStateManager";
 import type { SharedValue } from "react-native-reanimated";
 import {
@@ -7,6 +6,7 @@ import {
 	GestureOffsetState,
 	type SideActivation,
 } from "../../types/gesture";
+import type { Layout } from "../../types/navigator";
 
 type Directions = {
 	vertical: boolean;
@@ -22,7 +22,7 @@ interface CheckGestureActivationProps {
 	manager?: GestureStateManagerType;
 	gestureOffsetState: SharedValue<GestureOffsetState>;
 	activationArea?: GestureActivationArea;
-	dimensions: ScaledSize;
+	dimensions: Layout;
 	responseDistance?: number;
 }
 
@@ -90,7 +90,7 @@ function normalizeSides(area?: GestureActivationArea): NormalizedSides {
 
 function computeEdgeConstraints(
 	initialTouch: { x: number; y: number },
-	dimensions: ScaledSize,
+	dimensions: Layout,
 	sides: NormalizedSides,
 	responseDistance?: number,
 ) {

package/src/utils/gesture/reset-gesture-values.ts

@@ -31,6 +31,7 @@ export const resetGestureValues = ({
 	const nx =
 		gestures.normalizedX.value ||
 		event.translationX / Math.max(1, dimensions.width);
+
 	const ny =
 		gestures.normalizedY.value ||
 		event.translationY / Math.max(1, dimensions.height);

package/src/utils/gesture/velocity.ts

@@ -41,11 +41,10 @@ const normalize = (velocityPixelsPerSecond: number, screenSize: number) => {
 const calculateRestoreVelocity = (
 	currentValueNormalized: number,
 	baseVelocityNormalized: number,
-	threshold: number = NEAR_ZERO_THRESHOLD,
 ) => {
 	"worklet";
 
-	if (Math.abs(currentValueNormalized) < threshold) return 0;
+	if (Math.abs(currentValueNormalized) < NEAR_ZERO_THRESHOLD) return 0;
 
 	const directionTowardZero = Math.sign(currentValueNormalized) || 1;
 	const clampedVelocity = Math.min(Math.abs(baseVelocityNormalized), 1);