react-native-screen-transitions 3.5.1 → 3.6.0-alpha.0

package/src/shared/utils/bounds/helpers/create-bounds-accessor-core.ts

@@ -0,0 +1,159 @@
+import type {
+	BoundsInterpolationProps,
+	BoundsScopedAccessors,
+} from "../../../types/bounds.types";
+import type { BoundsOptions, BoundsOptionsResult } from "../types/options";
+import { createBoundTag } from "./create-bound-tag";
+import { createInterpolators } from "./create-interpolators";
+import { createLinkAccessor } from "./create-link-accessor";
+import { prepareBoundStyles } from "./prepare-bound-styles";
+
+type BoundsComputeResult<T extends BoundsOptions> = BoundsOptionsResult<T> &
+	BoundsScopedAccessors;
+
+type BoundsCompute = <T extends BoundsOptions>(
+	options: T,
+) => BoundsComputeResult<T>;
+
+type BoundsAccessorCore = BoundsCompute &
+	ReturnType<typeof createLinkAccessor> &
+	ReturnType<typeof createInterpolators>;
+
+type ExtendBoundsResultParams<T extends BoundsOptions> = {
+	target: BoundsComputeResult<T>;
+	props: BoundsInterpolationProps;
+	tag: string | undefined;
+};
+
+type CreateBoundsAccessorCoreParams = {
+	getProps: () => BoundsInterpolationProps;
+	extendResult?: <T extends BoundsOptions>(
+		params: ExtendBoundsResultParams<T>,
+	) => void;
+};
+
+const createBoundsAccessorParts = ({
+	getProps,
+	extendResult,
+}: CreateBoundsAccessorCoreParams) => {
+	"worklet";
+
+	const { getMeasured, getSnapshot, getLink } = createLinkAccessor(getProps);
+	const { interpolateStyle, interpolateBounds } = createInterpolators({
+		getProps,
+		getLink,
+	});
+
+	const computeBounds = (<T extends BoundsOptions>(
+		params?: T,
+	): BoundsComputeResult<T> => {
+		"worklet";
+		const props = getProps();
+		const options = (params ?? { id: "" }) as T;
+		const tag = createBoundTag({
+			id: options.id,
+			group: options.group,
+		});
+		const computed = prepareBoundStyles({
+			props,
+			options,
+		});
+		const scopedTag = tag ?? "";
+		const target = Object.isExtensible(computed) ? computed : { ...computed };
+
+		Object.defineProperties(target, {
+			getMeasured: {
+				value: (key?: string) => {
+					"worklet";
+					return getMeasured(scopedTag, key);
+				},
+				enumerable: false,
+				configurable: true,
+			},
+			getSnapshot: {
+				value: (key?: string) => {
+					"worklet";
+					return getSnapshot(scopedTag, key);
+				},
+				enumerable: false,
+				configurable: true,
+			},
+			getLink: {
+				value: () => {
+					"worklet";
+					return getLink(scopedTag);
+				},
+				enumerable: false,
+				configurable: true,
+			},
+			interpolateStyle: {
+				value: (
+					property: Parameters<typeof interpolateStyle>[1],
+					fallback?: number,
+				) => {
+					"worklet";
+					return interpolateStyle(scopedTag, property, fallback);
+				},
+				enumerable: false,
+				configurable: true,
+			},
+			interpolateBounds: {
+				value: (
+					property: Parameters<typeof interpolateBounds>[1],
+					fallbackOrTargetKey?: Parameters<typeof interpolateBounds>[2],
+					fallback?: number,
+				) => {
+					"worklet";
+					return interpolateBounds(
+						scopedTag,
+						property,
+						fallbackOrTargetKey,
+						fallback,
+					);
+				},
+				enumerable: false,
+				configurable: true,
+			},
+		});
+
+		extendResult?.({
+			target: target as BoundsComputeResult<T>,
+			props,
+			tag,
+		});
+
+		return target as BoundsComputeResult<T>;
+	}) as BoundsCompute;
+
+	return {
+		computeBounds,
+		getMeasured,
+		getSnapshot,
+		getLink,
+		interpolateStyle,
+		interpolateBounds,
+	};
+};
+
+export const createBoundsAccessorCore = (
+	params: CreateBoundsAccessorCoreParams,
+): BoundsAccessorCore => {
+	"worklet";
+
+	const {
+		computeBounds,
+		getMeasured,
+		getSnapshot,
+		getLink,
+		interpolateStyle,
+		interpolateBounds,
+	} = createBoundsAccessorParts(params);
+
+	return Object.assign(computeBounds, {
+		getMeasured,
+		getSnapshot,
+		getLink,
+		interpolateStyle,
+		interpolateBounds,
+	}) as BoundsAccessorCore;
+};

package/src/shared/utils/bounds/helpers/create-interpolators.ts

@@ -4,7 +4,7 @@ import {
 	type MeasuredDimensions,
 } from "react-native-reanimated";
 import { ENTER_RANGE, EXIT_RANGE } from "../../../constants";
-import { getMeasuredEntry } from "../../../stores/bounds/internals/registry";
+import { getEntry } from "../../../stores/bounds/internals/entries";
 import type { ScreenInterpolationProps } from "../../../types/animation.types";
 import type { BoundId } from "../types/options";
 import type { LinkAccessor } from "./create-link-accessor";
@@ -50,13 +50,13 @@ export const createInterpolators = ({
 		const fb = fallback ?? 0;
 		const normalizedTag = String(tag);
 
-		const currentMeasuredEntry = currentKey
-			? getMeasuredEntry(normalizedTag, currentKey)
+		const currentEntry = currentKey
+			? getEntry(normalizedTag, currentKey)
 			: null;
-		const targetMeasuredEntry = getMeasuredEntry(normalizedTag, targetKey);
+		const targetEntry = getEntry(normalizedTag, targetKey);
 
-		const currentValue = currentMeasuredEntry?.bounds?.[property] ?? fb;
-		const targetValue = targetMeasuredEntry?.bounds?.[property] ?? fb;
+		const currentValue = currentEntry?.bounds?.[property] ?? fb;
+		const targetValue = targetEntry?.bounds?.[property] ?? fb;
 
 		return interpolate(
 			props.progress,

package/src/shared/utils/bounds/helpers/create-link-accessor.ts

@@ -1,11 +1,17 @@
-import {
-	getActiveLink,
-	getMeasuredEntry,
-} from "../../../stores/bounds/internals/registry";
-import type { MeasuredEntry } from "../../../stores/bounds/types";
+import { getEntry } from "../../../stores/bounds/internals/entries";
+import { resolveGroupLink } from "../../../stores/bounds/internals/groups";
+import type {
+	MeasuredEntry,
+	ResolvedTransitionPair,
+	TagLink,
+} from "../../../stores/bounds/types";
 import type { ScreenInterpolationProps } from "../../../types/animation.types";
-import type { BoundsLink } from "../../../types/bounds.types";
-import type { BoundId } from "../types/options";
+import type {
+	BoundsLink,
+	BoundsLinkComputeOptions,
+} from "../../../types/bounds.types";
+import type { BoundId, BoundsOptionsResult } from "../types/options";
+import { prepareBoundStyles } from "./prepare-bound-styles";
 
 type GetProps = () => Omit<ScreenInterpolationProps, "bounds">;
 
@@ -15,13 +21,26 @@ export type LinkAccessor = {
 	getLink: (tag: BoundId) => BoundsLink | null;
 };
 
+const toResolvedPair = (link: TagLink): ResolvedTransitionPair => {
+	"worklet";
+	return {
+		sourceBounds: link.source.bounds,
+		destinationBounds: link.destination?.bounds ?? null,
+		sourceStyles: link.source.styles,
+		destinationStyles: link.destination?.styles ?? null,
+		sourceScreenKey: link.source.screenKey,
+		destinationScreenKey: link.destination?.screenKey ?? null,
+	};
+};
+
 export const createLinkAccessor = (getProps: GetProps): LinkAccessor => {
 	"worklet";
 
 	const getMeasured = (tag: BoundId, key?: string): MeasuredEntry | null => {
 		"worklet";
 		if (!key) return null;
-		return getMeasuredEntry(String(tag), key);
+		const entry = getEntry(String(tag), key);
+		return entry?.bounds ? (entry as MeasuredEntry) : null;
 	};
 
 	const getSnapshot = (tag: BoundId, key?: string): MeasuredEntry | null => {
@@ -32,15 +51,51 @@ export const createLinkAccessor = (getProps: GetProps): LinkAccessor => {
 	const getLink = (tag: BoundId): BoundsLink | null => {
 		"worklet";
 		const props = getProps();
-		const link = getActiveLink(String(tag), props.current?.route.key);
+		const stringTag = String(tag);
+		const screenKey = props.current?.route.key;
+		const resolved = resolveGroupLink({
+			tag: stringTag,
+			screenKey,
+		});
+		const selectedTag = resolved.tag;
+		const link = resolved.link;
+
 		if (!link) return null;
+		const resolvedPair = toResolvedPair(link);
+
 		return {
+			id: selectedTag,
 			source: link.source
 				? { bounds: link.source.bounds, styles: link.source.styles }
 				: null,
 			destination: link.destination
 				? { bounds: link.destination.bounds, styles: link.destination.styles }
 				: null,
+			initialSource: link.initialSource
+				? {
+						bounds: link.initialSource.bounds,
+						styles: link.initialSource.styles,
+					}
+				: null,
+			initialDestination: link.initialDestination
+				? {
+						bounds: link.initialDestination.bounds,
+						styles: link.initialDestination.styles,
+					}
+				: null,
+			compute: <T extends BoundsLinkComputeOptions>(
+				computeOptions: T,
+			): BoundsOptionsResult<T & { id: string }> => {
+				"worklet";
+				return prepareBoundStyles({
+					props,
+					options: {
+						...computeOptions,
+						id: selectedTag,
+					} as T & { id: string },
+					resolvedPair,
+				});
+			},
 		};
 	};
 

package/src/shared/utils/bounds/helpers/prepare-bound-styles.ts

@@ -1,8 +1,8 @@
+import { getEntry } from "../../../stores/bounds/internals/entries";
 import {
 	getGroupActiveId,
 	setGroupActiveId,
 } from "../../../stores/bounds/internals/groups";
-import { getEntryConfig } from "../../../stores/bounds/internals/registry";
 import type { ResolvedTransitionPair } from "../../../stores/bounds/types";
 import type { ScreenInterpolationProps } from "../../../types/animation.types";
 import { DEFAULT_BOUNDS_OPTIONS } from "../constants";
@@ -30,7 +30,7 @@ type BuildBoundsOptionsParams = {
 	overrides?: Partial<BoundsOptions>;
 };
 
-export const buildBoundsOptions = ({
+const buildBoundsOptions = ({
 	props,
 	id,
 	group,
@@ -42,7 +42,9 @@ export const buildBoundsOptions = ({
 	const currentScreenKey = props.current?.route.key;
 
 	const boundaryConfig =
-		tag && currentScreenKey ? getEntryConfig(tag, currentScreenKey) : null;
+		tag && currentScreenKey
+			? (getEntry(tag, currentScreenKey)?.boundaryConfig ?? null)
+			: null;
 
 	const resolved = {
 		...DEFAULT_BOUNDS_OPTIONS,

package/src/shared/utils/bounds/helpers/styles/composers.ts

@@ -320,10 +320,13 @@ export function composeTransformRelative(
 		};
 	}
 
+	const offsetX = computeOptions.offset?.x ?? computeOptions.gestures?.x ?? 0;
+	const offsetY = computeOptions.offset?.y ?? computeOptions.gestures?.y ?? 0;
+
 	return {
 		transform: [
-			{ translateX: computeOptions.gestures?.x ?? 0 },
-			{ translateY: computeOptions.gestures?.y ?? 0 },
+			{ translateX: offsetX },
+			{ translateY: offsetY },
 			{ translateX },
 			{ translateY },
 			{ scaleX },

package/src/shared/utils/bounds/helpers/styles/styles.ts

@@ -1,11 +1,8 @@
-import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
 import { isSharedValue } from "react-native-reanimated";
 
-type AnyStyle = ViewStyle | TextStyle | ImageStyle;
-type StyleValue = StyleProp<AnyStyle>;
 type PlainStyleObject = Record<string, any>;
 
-function mergeStyleArrays<T extends StyleValue>(style: T): T {
+function mergeStyleArrays(style: unknown): unknown {
 	"worklet";
 
 	// Early returns for non-objects
@@ -21,12 +18,12 @@ function mergeStyleArrays<T extends StyleValue>(style: T): T {
 	// Merge array of styles into single object
 	const merged: PlainStyleObject = {};
 	for (let i = 0; i < style.length; i++) {
-		const currentStyle = mergeStyleArrays(style[i] as StyleValue);
+		const currentStyle = mergeStyleArrays(style[i]);
 		if (currentStyle && typeof currentStyle === "object") {
 			Object.assign(merged, currentStyle);
 		}
 	}
-	return merged as T;
+	return merged;
 }
 
 function stripNonSerializable<T>(value: T): T | undefined {
@@ -56,9 +53,7 @@ function stripNonSerializable<T>(value: T): T | undefined {
 	return value;
 }
 
-export function prepareStyleForBounds(
-	style: StyleValue | undefined,
-): PlainStyleObject {
+export function prepareStyleForBounds(style: unknown): PlainStyleObject {
 	if (!style) return {};
 
 	const flattened = mergeStyleArrays(style);

package/src/shared/utils/bounds/index.ts

@@ -3,65 +3,40 @@ import type {
 	BoundsInterpolationProps,
 	BoundsNavigationZoomOptions,
 } from "../../types/bounds.types";
-import { createBoundTag } from "./helpers/create-bound-tag";
-import { createInterpolators } from "./helpers/create-interpolators";
-import { createLinkAccessor } from "./helpers/create-link-accessor";
-import { prepareBoundStyles } from "./helpers/prepare-bound-styles";
-import type { BoundsOptions } from "./types/options";
-import { buildZoomStyles } from "./zoom/build";
+import { createBoundsAccessorCore } from "./helpers/create-bounds-accessor-core";
+import { buildRevealStyles } from "./navigation/reveal/build";
+import { buildZoomStyles } from "./navigation/zoom/build";
 
 export const createBoundsAccessor = (
 	getProps: () => BoundsInterpolationProps,
 ): BoundsAccessor => {
 	"worklet";
 
-	const computeBounds = (params?: BoundsOptions) => {
-		"worklet";
-		const props = getProps();
-		const options = (params ?? { id: "" }) as BoundsOptions;
-		const computed = prepareBoundStyles({
-			props,
-			options,
-		});
-		// Navigation helpers are intentionally opinionated. Only the resolved
-		// tag from `id`/`group` is allowed to flow into `navigation.zoom()`;
-		// base bounds overrides like `target`, `anchor`, or `scaleMode` must not.
-		const tag = createBoundTag({
-			id: options.id,
-			group: options.group,
-		});
-
-		const target = Object.isExtensible(computed) ? computed : { ...computed };
-
-		Object.defineProperty(target, "navigation", {
-			value: {
-				zoom: (zoomOptions?: BoundsNavigationZoomOptions) => {
-					"worklet";
-					return buildZoomStyles({
-						props,
-						tag,
-						zoomOptions,
-					});
-				},
-			},
-			enumerable: false,
-			configurable: true,
-		});
-
-		return target;
-	};
-
-	const { getMeasured, getSnapshot, getLink } = createLinkAccessor(getProps);
-	const { interpolateStyle, interpolateBounds } = createInterpolators({
+	return createBoundsAccessorCore({
 		getProps,
-		getLink,
-	});
-
-	return Object.assign(computeBounds, {
-		getMeasured,
-		getSnapshot,
-		getLink,
-		interpolateStyle,
-		interpolateBounds,
+		extendResult: ({ target, props, tag }) => {
+			"worklet";
+			Object.defineProperty(target, "navigation", {
+				value: {
+					zoom: (zoomOptions?: BoundsNavigationZoomOptions) => {
+						"worklet";
+						return buildZoomStyles({
+							props,
+							tag,
+							zoomOptions,
+						});
+					},
+					reveal: () => {
+						"worklet";
+						return buildRevealStyles({
+							props,
+							tag,
+						});
+					},
+				},
+				enumerable: false,
+				configurable: true,
+			});
+		},
 	}) as BoundsAccessor;
 };

package/src/shared/utils/bounds/navigation/helpers.ts

@@ -0,0 +1,14 @@
+import type { BoundsLink } from "../../../types/bounds.types";
+
+export function getSourceBorderRadius(link: BoundsLink): number {
+	"worklet";
+
+	return typeof link.source?.styles.borderRadius === "number"
+		? link.source.styles.borderRadius
+		: 0;
+}
+
+export const toNumber = (value: unknown, fallback = 0): number => {
+	"worklet";
+	return typeof value === "number" ? value : fallback;
+};

package/src/shared/utils/bounds/{zoom → navigation}/math.ts

@@ -1,8 +1,8 @@
 import { interpolate } from "react-native-reanimated";
 
-export type CombinedScaleMode = "multiply" | "average" | "max" | "min";
+type CombinedScaleMode = "multiply" | "average" | "max" | "min";
 
-export const clamp = (value: number, min: number, max: number): number => {
+const clamp = (value: number, min: number, max: number): number => {
 	"worklet";
 	const lower = min < max ? min : max;
 	const upper = max > min ? max : min;
@@ -13,17 +13,17 @@ export const clamp = (value: number, min: number, max: number): number => {
 	return value;
 };
 
-export const clamp01 = (value: number): number => {
+const clamp01 = (value: number): number => {
 	"worklet";
 	return clamp(value, 0, 1);
 };
 
-export const lerp = (from: number, to: number, t: number): number => {
+const lerp = (from: number, to: number, t: number): number => {
 	"worklet";
 	return from + (to - from) * t;
 };
 
-export const safeDivide = (
+const safeDivide = (
 	numerator: number,
 	denominator: number,
 	fallback = 0,
@@ -33,16 +33,12 @@ export const safeDivide = (
 	return numerator / denominator;
 };
 
-export const inverseLerp = (
-	value: number,
-	inMin: number,
-	inMax: number,
-): number => {
+const inverseLerp = (value: number, inMin: number, inMax: number): number => {
 	"worklet";
 	return safeDivide(value - inMin, inMax - inMin, 0);
 };
 
-export const mapRangeClamped = (
+const mapRangeClamped = (
 	value: number,
 	inMin: number,
 	inMax: number,
@@ -54,28 +50,14 @@ export const mapRangeClamped = (
 	return lerp(outMin, outMax, t);
 };
 
-export const applyPowerCurve = (value: number, exponent: number): number => {
+const applyPowerCurve = (value: number, exponent: number): number => {
 	"worklet";
 	const safeExponent = exponent > 0 ? exponent : 1;
 	const magnitude = Math.abs(value) ** safeExponent;
 	return value < 0 ? -magnitude : magnitude;
 };
 
-export const normalizedToTranslation = ({
-	normalized,
-	dimension,
-	resistance,
-}: {
-	normalized: number;
-	dimension: number;
-	resistance: number;
-}): number => {
-	"worklet";
-	const distance = Math.max(0, dimension) * resistance;
-	return mapRangeClamped(normalized, -1, 1, -distance, distance);
-};
-
-export const normalizedToScale = ({
+const normalizedToScale = ({
 	normalized,
 	outputRange,
 	exponent = 1,
@@ -127,7 +109,7 @@ export const computeCenterScaleShift = ({
 	return (center - containerCenter) * (scale - 1);
 };
 
-export const compensateTranslationForParentScale = ({
+const compensateTranslationForParentScale = ({
 	translation,
 	parentScale,
 	epsilon,
@@ -192,34 +174,6 @@ export const resolveDirectionalDragScale = ({
 	return interpolate(oppositeDrag, [0, 1], [1, growMax], "clamp");
 };
 
-export const resolveDirectionalDragTranslation = ({
-	normalized,
-	dimension,
-	resistance,
-	negativeMax,
-	positiveMax,
-	exponent = 1,
-}: {
-	normalized: number;
-	dimension: number;
-	resistance: number;
-	negativeMax: number;
-	positiveMax: number;
-	exponent?: number;
-}) => {
-	"worklet";
-
-	const clampedMagnitude = Math.min(1, Math.abs(normalized));
-	const curvedMagnitude = clampedMagnitude ** Math.max(1, exponent);
-	const baseDistance = Math.max(0, dimension) * resistance;
-
-	if (normalized < 0) {
-		return -baseDistance * negativeMax * curvedMagnitude;
-	}
-
-	return baseDistance * positiveMax * curvedMagnitude;
-};
-
 export const resolveOpacityRangeTuple = ({
 	value,
 	fallback,