react-native-screen-transitions 2.0.2 → 2.0.3

package/src/utils/bounds/style-composers.ts

@@ -0,0 +1,172 @@
+import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
+import type { BoundsBuilderOptions } from "./_types/builder";
+import type {
+	ContentTransformGeometry,
+	RelativeGeometry,
+} from "./_types/geometry";
+
+/**
+ * Common interpolation helper signature used by composers.
+ * It maps from a -> b over the already-determined progress range.
+ */
+export type Interp = (a: number, b: number) => number;
+
+/**
+ * Element-level (relative) params shared by size/transform composers.
+ * - start/end: absolute window bounds of the element in previous/next phases
+ * - geometry: relative deltas and scales between start/end (dx, dy, scaleX, scaleY, ...)
+ * - interp: function to interpolate between numbers using the correct progress range
+ */
+export type ElementComposeParams = {
+	start: MeasuredDimensions;
+	end: MeasuredDimensions;
+	geometry: RelativeGeometry;
+	interp: Interp;
+	computeOptions: BoundsBuilderOptions;
+};
+
+/**
+ * Screen-level content transform params (for aligning destination bound to source).
+ * - start/end: absolute window bounds for the shared id (source/destination)
+ * - geometry: precomputed screen-level tx/ty/sx/sy plus ranges/entering
+ * - interp: function to interpolate between numbers using the correct progress range
+ */
+export type ContentComposeParams = {
+	start: MeasuredDimensions;
+	end: MeasuredDimensions;
+	geometry: ContentTransformGeometry;
+	interp: Interp;
+	computeOptions: BoundsBuilderOptions;
+};
+
+export function composeSizeAbsolute(params: ElementComposeParams): StyleProps {
+	"worklet";
+	const { start, end, geometry, interp } = params;
+
+	if (geometry.entering) {
+		return {
+			width: interp(start.width, end.width),
+			height: interp(start.height, end.height),
+			transform: [
+				{ translateX: interp(start.pageX, end.pageX) },
+				{ translateY: interp(start.pageY, end.pageY) },
+			],
+		} satisfies StyleProps;
+	}
+
+	return {
+		width: interp(end.width, start.width),
+		height: interp(end.height, start.height),
+		transform: [
+			{ translateX: interp(end.pageX, start.pageX) },
+			{ translateY: interp(end.pageY, start.pageY) },
+		],
+	};
+}
+
+export function composeSizeRelative(params: ElementComposeParams): StyleProps {
+	"worklet";
+	const { start, end, geometry, interp } = params;
+
+	if (geometry.entering) {
+		return {
+			transform: [
+				{ translateX: interp(geometry.dx, 0) },
+				{ translateY: interp(geometry.dy, 0) },
+			],
+			width: interp(start.width, end.width),
+			height: interp(start.height, end.height),
+		};
+	}
+
+	return {
+		transform: [
+			{ translateX: interp(0, -geometry.dx) },
+			{ translateY: interp(0, -geometry.dy) },
+		],
+		width: interp(end.width, start.width),
+		height: interp(end.height, start.height),
+	};
+}
+
+export function composeTransformAbsolute(
+	params: ElementComposeParams,
+): StyleProps {
+	"worklet";
+	const { start, end, geometry, interp } = params;
+
+	if (geometry.entering) {
+		return {
+			transform: [
+				{ translateX: interp(start.pageX, end.pageX) },
+				{ translateY: interp(start.pageY, end.pageY) },
+				{ scaleX: interp(geometry.scaleX, 1) },
+				{ scaleY: interp(geometry.scaleY, 1) },
+			],
+		};
+	}
+
+	return {
+		transform: [
+			{ translateX: interp(end.pageX, start.pageX) },
+			{ translateY: interp(end.pageY, start.pageY) },
+			{ scaleX: interp(1, 1 / geometry.scaleX) },
+			{ scaleY: interp(1, 1 / geometry.scaleY) },
+		],
+	};
+}
+
+export function composeTransformRelative(
+	params: ElementComposeParams,
+): StyleProps {
+	"worklet";
+	const { geometry, computeOptions, interp } = params;
+
+	if (geometry.entering) {
+		return {
+			transform: [
+				{ translateX: computeOptions.gestures?.x ?? 0 },
+				{ translateY: computeOptions.gestures?.y ?? 0 },
+				{ translateX: interp(geometry.dx, 0) },
+				{ translateY: interp(geometry.dy, 0) },
+				{ scaleX: interp(geometry.scaleX, 1) },
+				{ scaleY: interp(geometry.scaleY, 1) },
+			],
+		};
+	}
+
+	return {
+		transform: [
+			{ translateX: computeOptions.gestures?.x ?? 0 },
+			{ translateY: computeOptions.gestures?.y ?? 0 },
+			{ translateX: interp(0, -geometry.dx) },
+			{ translateY: interp(0, -geometry.dy) },
+			{ scaleX: interp(1, 1 / geometry.scaleX) },
+			{ scaleY: interp(1, 1 / geometry.scaleY) },
+		],
+	};
+}
+
+export function composeContentStyle(params: ContentComposeParams): StyleProps {
+	"worklet";
+	const { geometry, interp } = params;
+	const { s, tx, ty, entering } = geometry;
+
+	if (entering) {
+		return {
+			transform: [
+				{ translateX: interp(tx, 0) },
+				{ translateY: interp(ty, 0) },
+				{ scale: interp(s, 1) },
+			],
+		};
+	}
+
+	return {
+		transform: [
+			{ translateX: interp(0, tx) },
+			{ translateY: interp(0, ty) },
+			{ scale: interp(1, s) },
+		],
+	};
+}

package/src/utils/gesture/apply-gesture-activation-criteria.ts

@@ -0,0 +1,109 @@
+import type { PanGesture } from "react-native-gesture-handler";
+import type { ScreenTransitionConfig } from "../../types/navigator";
+
+interface GestureActivationOptions {
+	gestureDirection:
+		| ScreenTransitionConfig["gestureDirection"]
+		| Array<ScreenTransitionConfig["gestureDirection"]>;
+	gestureResponseDistance: number;
+	panGesture: PanGesture;
+}
+
+/**
+ * rngh requires this type instead a number[]. We're returning a num[] which is still correct, this is just to remove the type error.
+ */
+type OffsetErrorTypeBugFix = [start: number, end: number];
+
+export const applyGestureActivationCriteria = ({
+	gestureDirection,
+	gestureResponseDistance,
+	panGesture,
+}: GestureActivationOptions) => {
+	const directions = Array.isArray(gestureDirection)
+		? gestureDirection
+		: [gestureDirection];
+
+	if (directions.includes("bidirectional")) {
+		return {
+			activeOffsetX: [
+				-gestureResponseDistance,
+				gestureResponseDistance,
+			] as OffsetErrorTypeBugFix,
+			activeOffsetY: [
+				-gestureResponseDistance,
+				gestureResponseDistance,
+			] as OffsetErrorTypeBugFix,
+		};
+	}
+
+	const allowedDown = directions.includes("vertical");
+	const allowedUp = directions.includes("vertical-inverted");
+	const allowedRight = directions.includes("horizontal");
+	const allowedLeft = directions.includes("horizontal-inverted");
+
+	const toleranceX = 15;
+	const toleranceY = 20;
+	const dist = gestureResponseDistance;
+
+	const result: {
+		activeOffsetX?: number | [number, number];
+		failOffsetX?: number | OffsetErrorTypeBugFix;
+		activeOffsetY?: number | [number, number];
+		failOffsetY?: number | OffsetErrorTypeBugFix;
+	} = {};
+
+	const hasHorizontal = allowedLeft || allowedRight;
+	if (hasHorizontal) {
+		if (allowedLeft && allowedRight) {
+			result.activeOffsetX = [-dist, dist];
+		} else if (allowedLeft) {
+			result.activeOffsetX = -dist;
+		} else if (allowedRight) {
+			result.activeOffsetX = dist;
+		}
+
+		if (allowedRight && !allowedLeft) {
+			result.failOffsetX = -dist;
+		} else if (allowedLeft && !allowedRight) {
+			result.failOffsetX = dist;
+		}
+	} else {
+		result.failOffsetX = [-toleranceX, toleranceX] as OffsetErrorTypeBugFix;
+	}
+
+	const hasVertical = allowedUp || allowedDown;
+	if (hasVertical) {
+		if (allowedUp && allowedDown) {
+			result.activeOffsetY = [-dist, dist];
+		} else if (allowedUp) {
+			result.activeOffsetY = -dist;
+		} else if (allowedDown) {
+			result.activeOffsetY = dist;
+		}
+
+		if (allowedDown && !allowedUp) {
+			result.failOffsetY = -dist;
+		} else if (allowedUp && !allowedDown) {
+			result.failOffsetY = dist;
+		}
+	} else {
+		result.failOffsetY = [-toleranceY, toleranceY] as OffsetErrorTypeBugFix;
+	}
+
+	if (result?.activeOffsetX) {
+		panGesture.activeOffsetX(result.activeOffsetX);
+	}
+	if (result?.activeOffsetY) {
+		panGesture.activeOffsetY(result.activeOffsetY);
+	}
+	if (result?.failOffsetX) {
+		panGesture.failOffsetX(result.failOffsetX);
+	}
+	if (result?.failOffsetY) {
+		panGesture.failOffsetY(result.failOffsetY);
+	}
+
+	panGesture.enableTrackpadTwoFingerGesture(true);
+
+	return panGesture;
+};

package/src/utils/gesture/map-gesture-to-progress.ts

@@ -0,0 +1,11 @@
+/**
+ * Utility function to map raw gesture translation to a progress value.
+ */
+export const mapGestureToProgress = (
+	translation: number,
+	dimension: number,
+) => {
+	"worklet";
+	const rawProgress = translation / dimension;
+	return Math.max(0, Math.min(1, rawProgress));
+};

package/src/utils/gesture/normalize-gesture-translation.ts

@@ -0,0 +1,20 @@
+import type { GestureDirection } from "../../types/gesture";
+
+/**
+ * Utility function to normalize gesture translation based on direction.
+ */
+export const normalizeGestureTranslation = (
+	translation: number,
+	gestureDirection: GestureDirection,
+) => {
+	"worklet";
+	const isInverted = gestureDirection.includes("inverted");
+
+	const translated = Math.abs(translation) * (isInverted ? -1 : 1);
+
+	if (isInverted) {
+		return Math.min(0, translated);
+	}
+
+	return Math.max(0, translated);
+};

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from "./animation/animate";