react-native-screen-transitions 2.0.2 → 2.0.4

package/src/types/utils.ts

@@ -0,0 +1,3 @@
+export type Any = any;
+
+export type Complete<T> = { [K in keyof T]-?: Exclude<T[K], undefined> };

package/src/utils/animation/animate.ts

@@ -0,0 +1,28 @@
+import {
+	type WithSpringConfig,
+	type WithTimingConfig,
+	withSpring,
+	withTiming,
+} from "react-native-reanimated";
+import type {
+	AnimatableValue,
+	AnimationCallback,
+} from "react-native-reanimated/lib/typescript/commonTypes";
+
+export const animate = <T extends AnimatableValue>(
+	toValue: T,
+	config?: WithSpringConfig | WithTimingConfig,
+	callback?: AnimationCallback,
+) => {
+	"worklet";
+	const isSpring =
+		typeof config === "object" &&
+		!("duration" in config) &&
+		!("easing" in config);
+
+	if (!isSpring) {
+		return withTiming(toValue, config, callback);
+	}
+
+	return withSpring(toValue, config, callback);
+};

package/src/utils/animation/run-transition.ts

@@ -0,0 +1,49 @@
+import { runOnJS } from "react-native-reanimated";
+import type { AnimationMap } from "../../stores/animations";
+import type { TransitionSpec } from "../../types/animation";
+import { animate } from "./animate";
+
+interface RunTransitionProps {
+	target: "open" | "close";
+	spec?: TransitionSpec;
+	onFinish?: (finished: boolean) => void;
+	animations: AnimationMap;
+}
+
+export const runTransition = ({
+	target,
+	spec,
+	onFinish,
+	animations,
+}: RunTransitionProps) => {
+	"worklet";
+	const value = target === "open" ? 1 : 0;
+	const config = target === "open" ? spec?.open : spec?.close;
+
+	const { progress, animating, closing } = animations;
+
+	if (target === "close") {
+		closing.value = 1;
+	}
+
+	if (!config) {
+		animating.value = 0;
+		progress.value = value;
+
+		if (onFinish) {
+			runOnJS(onFinish)(true);
+		}
+		return;
+	}
+
+	animating.value = 1;
+	progress.value = animate(value, config, (finished) => {
+		"worklet";
+		if (finished) {
+			animating.value = 0;
+			if (onFinish) {
+				runOnJS(onFinish)(finished);
+			}
+		}
+	});
+};

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

@@ -0,0 +1,35 @@
+import type { ScaledSize } from "react-native";
+import type { ScreenTransitionState } from "../../../types/animation";
+import type { BoundsMethod } from "../../../types/bounds";
+
+/**
+ * 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: ScaledSize;
+};
+
+/**
+ * Params used internally for final computation. Method is required.
+ */
+export type BoundsComputeParams = BoundsBuilderInitParams & {
+	method: BoundsMethod;
+};
+
+/**
+ * Builder options that affect how math is applied.
+ * Method is not an option; it's tracked separately by the builder.
+ */
+export type BoundsBuilderOptions = {
+	gestures?: { x?: number; y?: number };
+	toFullscreen?: boolean;
+	absolute?: boolean;
+	relative?: boolean;
+	method?: BoundsMethod;
+	contentScaleMode?: "aspectFill" | "aspectFit" | "auto";
+};

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

@@ -0,0 +1,17 @@
+export type GeometryBase = {
+	ranges: readonly [number, number];
+	entering: boolean;
+};
+
+export type RelativeGeometry = GeometryBase & {
+	dx: number;
+	dy: number;
+	scaleX: number;
+	scaleY: number;
+};
+
+export type ContentTransformGeometry = GeometryBase & {
+	tx: number;
+	ty: number;
+	s: number;
+};

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

@@ -0,0 +1,10 @@
+import type { ScreenPhase } from '../../../types/core';
+import type { ScreenTransitionState } from '../../../types/animation';
+
+export type GetBoundsParams = {
+  id: string | null;
+  phase?: ScreenPhase;
+  previous?: ScreenTransitionState;
+  current: ScreenTransitionState;
+  next?: ScreenTransitionState;
+};

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

@@ -0,0 +1,184 @@
+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/constants.ts

@@ -0,0 +1,25 @@
+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';
+
+export const FULLSCREEN_DIMENSIONS = (dimensions: ScaledSize): MeasuredDimensions => {
+  'worklet';
+  return {
+    x: 0,
+    y: 0,
+    pageX: 0,
+    pageY: 0,
+    width: dimensions.width,
+    height: dimensions.height,
+  };
+};
+
+export const DEFAULT_BUILDER_OPTIONS: Complete<BoundsBuilderOptions> = Object.freeze({
+  gestures: { x: 0, y: 0 },
+  toFullscreen: false,
+  absolute: false,
+  relative: true,
+  method: 'transform',
+  contentScaleMode: 'auto',
+});

package/src/utils/bounds/flatten-styles.ts

@@ -0,0 +1,21 @@
+export function flattenStyle<TStyleProp>(style: TStyleProp): TStyleProp {
+	"worklet";
+	if (style === null || typeof style !== "object") {
+		return style;
+	}
+
+	if (!Array.isArray(style)) {
+		return style;
+	}
+
+	const result: { [key: string]: TStyleProp } = {};
+	for (let i = 0, styleLength = style.length; i < styleLength; ++i) {
+		const computedStyle = flattenStyle(style[i]);
+		if (computedStyle) {
+			for (const key in computedStyle) {
+				result[key] = computedStyle[key];
+			}
+		}
+	}
+	return result as TStyleProp;
+}

package/src/utils/bounds/geometry.ts

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,56 @@
+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/index.ts

@@ -0,0 +1,46 @@
+import type { ScaledSize } from "react-native";
+import type { ScreenPhase } from "../../types/core";
+import type { ScreenTransitionState } from "../../types/animation";
+import { buildBoundStyles } from "./build-bound-styles";
+import { getBounds } from "./get-bounds";
+
+export interface BuildBoundsAccessorParams {
+	activeBoundId: string | null;
+	current: ScreenTransitionState;
+	previous?: ScreenTransitionState;
+	next?: ScreenTransitionState;
+	progress: number;
+	dimensions: ScaledSize;
+}
+
+export const buildBoundsAccessor = ({
+	activeBoundId,
+	current,
+	previous,
+	next,
+	progress,
+	dimensions,
+}: BuildBoundsAccessorParams) => {
+	"worklet";
+
+	const bounds = (id?: string) =>
+		buildBoundStyles({
+			id: id ?? activeBoundId,
+			previous,
+			current,
+			next,
+			progress,
+			dimensions,
+		});
+
+	return Object.assign(bounds, {
+		get: (id?: string, phase?: ScreenPhase) =>
+			getBounds({
+				id: id ?? activeBoundId,
+				phase,
+				current,
+				previous,
+				next,
+			}),
+	});
+};