react-native-screen-transitions 2.0.6 → 2.1.0

package/lib/typescript/utils/bounds/get-bounds.d.ts

@@ -1,4 +0,0 @@
-import type { BoundEntry } from '../../types/bounds';
-import type { GetBoundsParams } from './_types/get-bounds';
-export declare const getBounds: (props: GetBoundsParams) => BoundEntry;
-//# sourceMappingURL=get-bounds.d.ts.map

package/lib/typescript/utils/bounds/get-bounds.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-bounds.d.ts","sourceRoot":"","sources":["../../../../src/utils/bounds/get-bounds.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAc3D,eAAO,MAAM,SAAS,GAAI,OAAO,eAAe,KAAG,UAuClD,CAAC"}

package/lib/typescript/utils/bounds/style-composers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style-composers.d.ts","sourceRoot":"","sources":["../../../../src/utils/bounds/style-composers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,KAAK,EACX,wBAAwB,EACxB,gBAAgB,EAChB,MAAM,mBAAmB,CAAC;AAE3B;;;GAGG;AACH,MAAM,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;AAEtD;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG;IAClC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,GAAG,EAAE,kBAAkB,CAAC;IACxB,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,oBAAoB,CAAC;CACrC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG;IAClC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,GAAG,EAAE,kBAAkB,CAAC;IACxB,QAAQ,EAAE,wBAAwB,CAAC;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,oBAAoB,CAAC;CACrC,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,oBAAoB,GAAG,UAAU,CAuB5E;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,oBAAoB,GAAG,UAAU,CAuB5E;AAED,wBAAgB,wBAAwB,CACvC,MAAM,EAAE,oBAAoB,GAC1B,UAAU,CAuBZ;AAED,wBAAgB,wBAAwB,CACvC,MAAM,EAAE,oBAAoB,GAC1B,UAAU,CA2BZ;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,oBAAoB,GAAG,UAAU,CAsB5E"}

package/lib/typescript/utils/gesture/apply-gesture-activation-criteria.d.ts

@@ -1,17 +0,0 @@
-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 declare const applyGestureActivationCriteria: ({ gestureDirection, gestureResponseDistance, panGesture, }: GestureActivationOptions) => import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture | {
-    activeOffsetX: OffsetErrorTypeBugFix;
-    activeOffsetY: OffsetErrorTypeBugFix;
-};
-export {};
-//# sourceMappingURL=apply-gesture-activation-criteria.d.ts.map

package/lib/typescript/utils/gesture/apply-gesture-activation-criteria.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"apply-gesture-activation-criteria.d.ts","sourceRoot":"","sources":["../../../../src/utils/gesture/apply-gesture-activation-criteria.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAEpE,UAAU,wBAAwB;IACjC,gBAAgB,EACb,sBAAsB,CAAC,kBAAkB,CAAC,GAC1C,KAAK,CAAC,sBAAsB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACrD,uBAAuB,EAAE,MAAM,CAAC;IAChC,UAAU,EAAE,UAAU,CAAC;CACvB;AAED;;GAEG;AACH,KAAK,qBAAqB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC;AAE1D,eAAO,MAAM,8BAA8B,GAAI,4DAI5C,wBAAwB;mBAUnB,qBAAqB;mBAIrB,qBAAqB;CA0E5B,CAAC"}

package/lib/typescript/utils/gesture/normalize-gesture-translation.d.ts

@@ -1,6 +0,0 @@
-import type { GestureDirection } from "../../types/gesture";
-/**
- * Utility function to normalize gesture translation based on direction.
- */
-export declare const normalizeGestureTranslation: (translation: number, gestureDirection: GestureDirection) => number;
-//# sourceMappingURL=normalize-gesture-translation.d.ts.map

package/lib/typescript/utils/gesture/normalize-gesture-translation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"normalize-gesture-translation.d.ts","sourceRoot":"","sources":["../../../../src/utils/gesture/normalize-gesture-translation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D;;GAEG;AACH,eAAO,MAAM,2BAA2B,GACvC,aAAa,MAAM,EACnB,kBAAkB,gBAAgB,WAYlC,CAAC"}

package/src/hooks/gestures/use-scroll-progress.tsx

@@ -1,60 +0,0 @@
-import { useCallback } from "react";
-import type { LayoutChangeEvent } from "react-native";
-import { useAnimatedScrollHandler } from "react-native-reanimated";
-import type { ReanimatedScrollEvent } from "react-native-reanimated/lib/typescript/hook/commonTypes";
-import { useGestureContext } from "../../providers/gestures";
-
-interface ScrollProgressHookProps {
-	onScroll?: (event: ReanimatedScrollEvent) => void;
-	onContentSizeChange?: (width: number, height: number) => void;
-	onLayout?: (event: LayoutChangeEvent) => void;
-}
-
-export const useScrollProgress = (props: ScrollProgressHookProps) => {
-	const { scrollProgress } = useGestureContext();
-	const scrollHandler = useAnimatedScrollHandler({
-		onScroll: (event) => {
-			props.onScroll?.(event);
-			scrollProgress.modify((v) => {
-				"worklet";
-				v.x = event.contentOffset.x;
-				v.y = event.contentOffset.y;
-				return v;
-			});
-		},
-	});
-
-	const onContentSizeChange = useCallback(
-		(width: number, height: number) => {
-			props.onContentSizeChange?.(width, height);
-
-			scrollProgress.modify((v) => {
-				"worklet";
-				v.contentWidth = width;
-				v.contentHeight = height;
-				return v;
-			});
-		},
-		[scrollProgress, props.onContentSizeChange],
-	);
-
-	const onLayout = useCallback(
-		(event: LayoutChangeEvent) => {
-			props.onLayout?.(event);
-			const { width, height } = event.nativeEvent.layout;
-			scrollProgress.modify((v) => {
-				"worklet";
-				v.layoutHeight = height;
-				v.layoutWidth = width;
-				return v;
-			});
-		},
-		[scrollProgress, props.onLayout],
-	);
-
-	return {
-		scrollHandler,
-		onContentSizeChange,
-		onLayout,
-	};
-};

package/src/utils/bounds/build-bound-styles.ts

@@ -1,184 +0,0 @@
-import type { ScaledSize } from "react-native";
-import { interpolate, type MeasuredDimensions } from "react-native-reanimated";
-import type { ScreenTransitionState } from "../../types/animation";
-import type { BoundsBuilder } from "../../types/bounds";
-import type { ScreenPhase } from "../../types/core";
-import type {
-	BoundsBuilderInitParams,
-	BoundsBuilderOptions,
-} from "./_types/builder";
-import { DEFAULT_BUILDER_OPTIONS, FULLSCREEN_DIMENSIONS } from "./constants";
-import {
-	computeContentTransformGeometry,
-	computeRelativeGeometry,
-} from "./geometry";
-import {
-	composeContentStyle,
-	composeSizeAbsolute,
-	composeSizeRelative,
-	composeTransformAbsolute,
-	composeTransformRelative,
-	type ElementComposeParams,
-} from "./style-composers";
-
-function resolveBounds(props: {
-	id: string;
-	previous?: ScreenTransitionState;
-	current?: ScreenTransitionState;
-	next?: ScreenTransitionState;
-	toRect?: Partial<MeasuredDimensions>;
-	dimensions: ScaledSize;
-	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 resolve = (phase?: ScreenPhase) => {
-		"worklet";
-		if (phase === "previous") return props.previous?.bounds?.[props.id]?.bounds;
-		if (phase === "current") return props.current?.bounds?.[props.id]?.bounds;
-		if (phase === "next") return props.next?.bounds?.[props.id]?.bounds;
-		return null;
-	};
-
-	const start = resolve(startPhase);
-	let end = resolve(endPhase);
-
-	if (props.computeOptions.toFullscreen) {
-		end = fullscreen;
-	}
-
-	return {
-		start,
-		end,
-		entering,
-	};
-}
-
-const computeBoundStyles = (
-	{
-		id,
-		previous,
-		current,
-		next,
-		progress,
-		dimensions,
-	}: BoundsBuilderInitParams,
-	computeOptions: BoundsBuilderOptions = {},
-) => {
-	"worklet";
-	if (!id) return {};
-
-	const { start, end, entering } = resolveBounds({
-		id,
-		previous,
-		current,
-		next,
-		computeOptions: computeOptions,
-		dimensions,
-	});
-
-	if (!start || !end) return {};
-
-	const relativeGeometry = computeRelativeGeometry({ start, end, entering });
-
-	const interp = (a: number, b: number) =>
-		interpolate(progress, relativeGeometry.ranges, [a, b]);
-
-	const common: ElementComposeParams = {
-		start,
-		end,
-		interp,
-		geometry: relativeGeometry,
-		computeOptions,
-	};
-
-	const isSize = computeOptions.method === "size";
-	const isAbs = !!computeOptions.absolute;
-
-	if (computeOptions.method === "content") {
-		const contentGeometry = computeContentTransformGeometry({
-			start,
-			end,
-			entering,
-			dimensions,
-			contentScaleMode: computeOptions.contentScaleMode ?? "auto",
-		});
-
-		return composeContentStyle({
-			...common,
-			geometry: contentGeometry,
-			computeOptions,
-		});
-	}
-
-	return isSize
-		? isAbs
-			? composeSizeAbsolute(common)
-			: composeSizeRelative(common)
-		: isAbs
-			? composeTransformAbsolute(common)
-			: composeTransformRelative(common);
-};
-
-export function buildBoundStyles(
-	params: BoundsBuilderInitParams,
-): BoundsBuilder {
-	"worklet";
-
-	const cfg: { options: BoundsBuilderOptions } = {
-		options: { ...DEFAULT_BUILDER_OPTIONS },
-	};
-
-	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();
-}

package/src/utils/bounds/geometry.ts

@@ -1,113 +0,0 @@
-import type { ScaledSize } from "react-native";
-import type { MeasuredDimensions } from "react-native-reanimated";
-import type { BoundsBuilderOptions } from "./_types/builder";
-import type {
-	ContentTransformGeometry,
-	RelativeGeometry,
-} from "./_types/geometry";
-
-/**
- * Relative geometry between start/end bounds.
- */
-export function computeRelativeGeometry({
-	start,
-	end,
-	entering,
-}: {
-	start: MeasuredDimensions;
-	end: MeasuredDimensions;
-	entering: boolean;
-}): RelativeGeometry {
-	"worklet";
-	const startCenterX = start.pageX + start.width / 2;
-	const startCenterY = start.pageY + start.height / 2;
-	const endCenterX = end.pageX + end.width / 2;
-	const endCenterY = end.pageY + end.height / 2;
-
-	const dx = startCenterX - endCenterX;
-	const dy = startCenterY - endCenterY;
-
-	const scaleX = start.width / end.width;
-	const scaleY = start.height / end.height;
-
-	const ranges: readonly [number, number] = entering ? [0, 1] : [1, 2];
-
-	return { dx, dy, scaleX, scaleY, ranges, 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,
-	contentScaleMode,
-}: {
-	start: MeasuredDimensions;
-	end: MeasuredDimensions;
-	entering: boolean;
-	dimensions: ScaledSize;
-	contentScaleMode: BoundsBuilderOptions["contentScaleMode"];
-}): ContentTransformGeometry {
-	"worklet";
-
-	const parent = {
-		x: 0,
-		y: 0,
-		width: dimensions.width,
-		height: dimensions.height,
-	};
-
-	const startCenterX = start.pageX + start.width / 2;
-	const startCenterY = start.pageY + start.height / 2;
-
-	const childCenterX = end.pageX + end.width / 2;
-	const childCenterY = end.pageY + end.height / 2;
-
-	const parentCenterX = parent.x + parent.width / 2;
-	const parentCenterY = parent.y + parent.height / 2;
-
-	const safe = (v: number) => (v === 0 ? 1e-6 : v);
-
-	const sx = safe(start.width) / safe(end.width);
-	const sy = safe(start.height) / safe(end.height);
-
-	let s: number;
-
-	if (contentScaleMode === "aspectFit") {
-		s = Math.min(sx, sy);
-	} else if (contentScaleMode === "aspectFill") {
-		s = Math.max(sx, sy);
-	} else {
-		const startAspect = start.width / start.height;
-		const endAspect = end.width / end.height;
-		const aspectDifference = Math.abs(startAspect - endAspect);
-
-		if (aspectDifference < 0.1) {
-			s = Math.max(sx, sy);
-		} else {
-			s = Math.min(sx, sy);
-		}
-	}
-
-	const offsetX = startCenterX - parentCenterX;
-	const offsetY = startCenterY - parentCenterY;
-
-	const centerOffsetX = (parentCenterX - childCenterX) * s;
-	const centerOffsetY = (parentCenterY - childCenterY) * s;
-
-	const tx = offsetX + centerOffsetX;
-	const ty = offsetY + centerOffsetY;
-
-	const ranges: readonly [number, number] = entering ? [0, 1] : [1, 2];
-
-	return {
-		tx,
-		ty,
-		s,
-		ranges,
-		entering,
-	};
-}

package/src/utils/bounds/get-bounds.ts

@@ -1,56 +0,0 @@
-import type { BoundEntry } from '../../types/bounds';
-
-import type { GetBoundsParams } from './_types/get-bounds';
-
-const fallbackBounds = {
-  bounds: {
-    width: 0,
-    height: 0,
-    x: 0,
-    y: 0,
-    pageX: 0,
-    pageY: 0,
-  },
-  styles: {},
-};
-
-export const getBounds = (props: GetBoundsParams): BoundEntry => {
-  'worklet';
-  const boundId = props.id;
-  const phase = props.phase;
-
-  if (phase && boundId) {
-    let phaseBounds = null;
-
-    if (phase === 'current') {
-      phaseBounds = props.current?.bounds[boundId];
-    } else if (phase === 'next') {
-      phaseBounds = props.next?.bounds[boundId];
-    } else {
-      phaseBounds = props.previous?.bounds[boundId];
-    }
-
-    if (!phaseBounds) {
-      return fallbackBounds;
-    }
-
-    return {
-      bounds: phaseBounds.bounds,
-      styles: phaseBounds?.styles,
-    };
-  }
-
-  if (!props.next && boundId) {
-    const previousBounds = props.previous?.bounds[boundId];
-
-    return previousBounds || fallbackBounds;
-  }
-
-  if (boundId) {
-    const nextBounds = props.next?.bounds[boundId];
-
-    return nextBounds || fallbackBounds;
-  }
-
-  return fallbackBounds;
-};

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

@@ -1,172 +0,0 @@
-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) },
-		],
-	};
-}