react-native-screen-transitions 3.5.2 → 3.6.0-alpha.1

package/src/shared/utils/animation/animate-to-progress.ts

@@ -17,10 +17,29 @@ interface AnimateToProgressProps {
 	animations: AnimationStoreMap;
 	targetProgress: SharedValue<number>;
 	emitWillAnimate?: boolean;
+	markEntering?: boolean;
 	/** Optional initial velocity for spring-based progress (units: progress/sec). */
 	initialVelocity?: number;
 }
 
+const setTransitionLifecycleFlags = (
+	animations: AnimationStoreMap,
+	isClosing: boolean,
+	markEntering: boolean,
+) => {
+	"worklet";
+
+	if (isClosing) {
+		animations.closing.set(TRUE);
+		animations.entering.set(FALSE);
+		return;
+	}
+
+	if (markEntering) {
+		animations.entering.set(TRUE);
+	}
+};
+
 export const animateToProgress = ({
 	target,
 	spec,
@@ -28,6 +47,7 @@ export const animateToProgress = ({
 	animations,
 	targetProgress,
 	emitWillAnimate = true,
+	markEntering = true,
 	initialVelocity,
 }: AnimateToProgressProps) => {
 	"worklet";
@@ -48,56 +68,63 @@ export const animateToProgress = ({
 			? { ...config, velocity: initialVelocity }
 			: config;
 
-	const { progress, willAnimate, animating, closing, entering } = animations;
+	const { progress, willAnimate, progressAnimating, entering } = animations;
 
-	if (emitWillAnimate) {
-		willAnimate.set(TRUE);
-		requestAnimationFrame(() => {
-			"worklet";
-			willAnimate.set(FALSE);
-		});
-	}
+	const startAnimation = () => {
+		"worklet";
+		targetProgress.set(value);
 
-	targetProgress.set(value);
+		const shouldClearEnteringOnFinish =
+			!isClosing && (markEntering || entering.get());
 
-	if (isClosing) {
-		closing.set(TRUE);
-		entering.set(FALSE);
-	} else {
-		entering.set(TRUE);
-	}
+		setTransitionLifecycleFlags(animations, isClosing, markEntering);
 
-	if (!config) {
-		animating.set(FALSE);
-		progress.set(value);
-		if (!isClosing) {
-			entering.set(FALSE);
-		}
-
-		if (onAnimationFinish) {
-			runOnJS(onAnimationFinish)(true);
-		}
-		return;
-	}
-
-	animating.set(TRUE); //<-- Do not move this into the callback
-	progress.set(
-		animate(value, effectiveConfig, (finished) => {
-			"worklet";
-			if (!finished) return;
-
-			if (!isClosing) {
+		if (!config) {
+			progressAnimating.set(FALSE);
+			progress.set(value);
+			if (shouldClearEnteringOnFinish) {
 				entering.set(FALSE);
 			}
 
 			if (onAnimationFinish) {
-				runOnJS(onAnimationFinish)(finished);
+				runOnJS(onAnimationFinish)(true);
 			}
+			return;
+		}
+
+		progressAnimating.set(TRUE); //<-- Do not move this into the callback
+		progress.set(
+			animate(value, effectiveConfig, (finished) => {
+				"worklet";
+				if (!finished) return;
+
+				if (shouldClearEnteringOnFinish) {
+					entering.set(FALSE);
+				}
+
+				if (onAnimationFinish) {
+					runOnJS(onAnimationFinish)(finished);
+				}
+
+				// Delay clearing progress animation by one frame to ensure final frame is painted
+				requestAnimationFrame(() => {
+					progressAnimating.set(FALSE);
+				});
+			}),
+		);
+	};
+
+	if (emitWillAnimate) {
+		setTransitionLifecycleFlags(animations, isClosing, markEntering);
+
+		willAnimate.set(TRUE);
+		requestAnimationFrame(() => {
+			"worklet";
+			willAnimate.set(FALSE);
+			startAnimation();
+		});
+		return;
+	}
 
-			// Delay setting animating=FALSE by one frame to ensure final frame is painted
-			requestAnimationFrame(() => {
-				animating.set(FALSE);
-			});
-		}),
-	);
+	startAnimation();
 };

package/src/shared/utils/animation/emit.ts

@@ -0,0 +1,18 @@
+import type { SharedValue } from "react-native-reanimated";
+
+/**
+ * Emits a one-frame pulse on any shared value, then restores the provided
+ * resting value on the next frame.
+ */
+export const emit = <T>(
+	sharedValue: SharedValue<T>,
+	activeValue: T,
+	restValue: T,
+) => {
+	"worklet";
+	sharedValue.set(activeValue);
+	requestAnimationFrame(() => {
+		"worklet";
+		sharedValue.set(restValue);
+	});
+};

package/src/shared/utils/animation/resolve-snap-transition-spec.ts

@@ -0,0 +1,23 @@
+import { DefaultSnapSpec } from "../../configs/specs";
+import type { TransitionSpec } from "../../types/animation.types";
+
+export type SnapTransitionDirection = "expand" | "collapse";
+
+export const resolveSnapTransitionSpec = (
+	spec: TransitionSpec | undefined,
+	direction: SnapTransitionDirection,
+): TransitionSpec => {
+	"worklet";
+	const config =
+		direction === "collapse"
+			? (spec?.collapse ?? DefaultSnapSpec)
+			: (spec?.expand ?? DefaultSnapSpec);
+
+	// Numeric snap targets are not lifecycle closes. Keep both slots pointed at the
+	// selected snap config so animateToProgress can pick a config without toggling
+	// the route-level closing flag for non-dismiss snap changes.
+	return {
+		open: config,
+		close: config,
+	};
+};

package/src/shared/utils/bounds/helpers/create-bound-tag.ts

@@ -1,6 +1,6 @@
 import type { BoundId } from "../types/options";
 
-export type CreateBoundTagParams = {
+type CreateBoundTagParams = {
 	id?: BoundId;
 	group?: string;
 };

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

@@ -0,0 +1,160 @@
+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,14 +4,14 @@ import {
 	type MeasuredDimensions,
 } from "react-native-reanimated";
 import { ENTER_RANGE, EXIT_RANGE } from "../../../constants";
-import { getMeasuredEntry } from "../../../stores/bounds/internals/registry";
-import type { ScreenInterpolationProps } from "../../../types/animation.types";
+import { getEntry } from "../../../stores/bounds/internals/entries";
+import type { BoundsInterpolationProps } from "../../../types/bounds.types";
 import type { BoundId } from "../types/options";
 import type { LinkAccessor } from "./create-link-accessor";
 import { interpolateLinkStyle } from "./styles/interpolate-link-style";
 
 type InterpolatorParams = {
-	getProps: () => Omit<ScreenInterpolationProps, "bounds">;
+	getProps: () => BoundsInterpolationProps;
 	getLink: LinkAccessor["getLink"];
 };
 
@@ -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,13 +1,19 @@
-import {
-	getActiveLink,
-	getMeasuredEntry,
-} from "../../../stores/bounds/internals/registry";
-import type { MeasuredEntry } 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 { getEntry } from "../../../stores/bounds/internals/entries";
+import { resolveGroupLink } from "../../../stores/bounds/internals/groups";
+import type {
+	MeasuredEntry,
+	ResolvedTransitionPair,
+	TagLink,
+} from "../../../stores/bounds/types";
+import type {
+	BoundsInterpolationProps,
+	BoundsLink,
+	BoundsLinkComputeOptions,
+} from "../../../types/bounds.types";
+import type { BoundId, BoundsOptionsResult } from "../types/options";
+import { prepareBoundStyles } from "./prepare-bound-styles";
 
-type GetProps = () => Omit<ScreenInterpolationProps, "bounds">;
+type GetProps = () => BoundsInterpolationProps;
 
 export type LinkAccessor = {
 	getMeasured: (tag: BoundId, key?: string) => MeasuredEntry | null;
@@ -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,10 +1,10 @@
+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 type { BoundsInterpolationProps } from "../../../types/bounds.types";
 import { DEFAULT_BOUNDS_OPTIONS } from "../constants";
 import type {
 	BoundId,
@@ -14,7 +14,7 @@ import type {
 import { createBoundTag } from "./create-bound-tag";
 import { computeBoundStyles } from "./styles/compute";
 
-type BaseInterpolatorProps = Omit<ScreenInterpolationProps, "bounds">;
+type BaseInterpolatorProps = BoundsInterpolationProps;
 
 type ComputeResolvedBoundsStylesParams<T extends BoundsOptions> = {
 	props: BaseInterpolatorProps;
@@ -24,13 +24,13 @@ type ComputeResolvedBoundsStylesParams<T extends BoundsOptions> = {
 };
 
 type BuildBoundsOptionsParams = {
-	props: Omit<ScreenInterpolationProps, "bounds">;
+	props: BoundsInterpolationProps;
 	id?: BoundId;
 	group?: string;
 	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);