react-native-screen-transitions 4.1.0-beta.1 → 4.1.0-rc.0

package/src/providers/screen/motion/animation/helpers/hydrate-transition-state/index.ts

@@ -1,230 +0,0 @@
-import type {
-	ScreenTransitionOptions,
-	TransitionInterpolatorOptions,
-} from "../../../../../../types/animation.types";
-import type { Layout } from "../../../../../../types/screen.types";
-import { resolveGestureAffectedProgress } from "./gesture-progress";
-import {
-	computeAnimatedSnapIndex,
-	computeTargetSnapIndex,
-	getResolvedSnapBounds,
-} from "./snap-points";
-import type { BuiltState } from "./types";
-
-const mergeTransitionOptions = (
-	base: ScreenTransitionOptions,
-	effective: TransitionInterpolatorOptions | undefined,
-	slot: ScreenTransitionOptions,
-): ScreenTransitionOptions => {
-	"worklet";
-	if (!effective) {
-		return base;
-	}
-
-	slot.gestureEnabled = effective.gestureEnabled ?? base.gestureEnabled;
-	slot.gestureTracking = base.gestureTracking;
-	slot.gestureDirection = effective.gestureDirection ?? base.gestureDirection;
-	slot.gestureSensitivity =
-		effective.gestureSensitivity ?? base.gestureSensitivity;
-	slot.gestureVelocityImpact =
-		effective.gestureVelocityImpact ?? base.gestureVelocityImpact;
-	slot.gestureSnapVelocityImpact =
-		effective.gestureSnapVelocityImpact ?? base.gestureSnapVelocityImpact;
-	slot.gestureReleaseVelocityScale =
-		effective.gestureReleaseVelocityScale ?? base.gestureReleaseVelocityScale;
-	slot.gestureSnapLocked =
-		effective.gestureSnapLocked ?? base.gestureSnapLocked;
-	slot.sheetSnapBehavior =
-		effective.sheetSnapBehavior ?? base.sheetSnapBehavior;
-	slot.sheetScrollGestureBehavior =
-		effective.sheetScrollGestureBehavior ?? base.sheetScrollGestureBehavior;
-	slot.backdropBehavior = effective.backdropBehavior ?? base.backdropBehavior;
-
-	return slot;
-};
-
-export const hydrateTransitionState = (
-	s: BuiltState,
-	dimensions: Layout,
-	effectiveOptions?: TransitionInterpolatorOptions,
-) => {
-	"worklet";
-	const out = s.unwrapped;
-	const transitionProgress = s.transitionProgress.get();
-	const options = mergeTransitionOptions(
-		s.options,
-		effectiveOptions,
-		s.optionsSlot,
-	);
-	const canDismiss = options.gestureEnabled !== false;
-	const resolvedSnapPoints = [...s.sortedNumericSnapPoints];
-	const resolvedAutoSnapPoint = s.hasAutoSnapPoint
-		? s.resolvedAutoSnapPoint.get()
-		: null;
-	if (resolvedAutoSnapPoint !== null) {
-		resolvedSnapPoints.push(resolvedAutoSnapPoint);
-	}
-	if (canDismiss) {
-		resolvedSnapPoints.push(0);
-	}
-	resolvedSnapPoints.sort((a, b) => a - b);
-	for (let index = resolvedSnapPoints.length - 1; index > 0; index--) {
-		if (resolvedSnapPoints[index] === resolvedSnapPoints[index - 1]) {
-			resolvedSnapPoints.splice(index, 1);
-		}
-	}
-	out.transitionProgress = transitionProgress;
-	out.willAnimate = s.willAnimate.get();
-	out.closing = s.closing.get();
-	out.entering = s.entering.get();
-	out.gesture.x = s.gesture.x.get();
-	out.gesture.y = s.gesture.y.get();
-	out.gesture.normX = s.gesture.normX.get();
-	out.gesture.normY = s.gesture.normY.get();
-	out.gesture.velocity = s.gesture.velocity.get();
-	out.gesture.scale = s.gesture.scale.get();
-	out.gesture.normScale = s.gesture.normScale.get();
-	out.gesture.focalX = s.gesture.focalX.get();
-	out.gesture.focalY = s.gesture.focalY.get();
-	out.gesture.pinchOriginX = s.gesture.pinchOriginX.get();
-	out.gesture.pinchOriginY = s.gesture.pinchOriginY.get();
-	out.gesture.rotation = s.gesture.rotation.get();
-	out.gesture.raw.x = s.gesture.raw.x.get();
-	out.gesture.raw.y = s.gesture.raw.y.get();
-	out.gesture.raw.normX = s.gesture.raw.normX.get();
-	out.gesture.raw.normY = s.gesture.raw.normY.get();
-	out.gesture.raw.scale = s.gesture.raw.scale.get();
-	out.gesture.raw.normScale = s.gesture.raw.normScale.get();
-	out.gesture.raw.rotation = s.gesture.raw.rotation.get();
-	out.gesture.dismissing = s.gesture.dismissing.get();
-	out.gesture.dragging = s.gesture.dragging.get();
-	out.gesture.settling = s.gesture.settling.get();
-	out.gesture.initiator = s.gesture.initiator.get() ?? "none";
-	const handoff = out.gesture.handoff;
-	const useHandoffSnapshot = out.gesture.dismissing;
-
-	handoff.x = useHandoffSnapshot
-		? s.gesture.internal.snapshot.x.get()
-		: out.gesture.x;
-	handoff.y = useHandoffSnapshot
-		? s.gesture.internal.snapshot.y.get()
-		: out.gesture.y;
-	handoff.normX = useHandoffSnapshot
-		? s.gesture.internal.snapshot.normX.get()
-		: out.gesture.normX;
-	handoff.normY = useHandoffSnapshot
-		? s.gesture.internal.snapshot.normY.get()
-		: out.gesture.normY;
-	handoff.velocity = useHandoffSnapshot
-		? s.gesture.internal.snapshot.velocity.get()
-		: out.gesture.velocity;
-	handoff.scale = useHandoffSnapshot
-		? s.gesture.internal.snapshot.scale.get()
-		: out.gesture.scale;
-	handoff.normScale = useHandoffSnapshot
-		? s.gesture.internal.snapshot.normScale.get()
-		: out.gesture.normScale;
-	handoff.focalX = useHandoffSnapshot
-		? s.gesture.internal.snapshot.focalX.get()
-		: out.gesture.focalX;
-	handoff.focalY = useHandoffSnapshot
-		? s.gesture.internal.snapshot.focalY.get()
-		: out.gesture.focalY;
-	handoff.pinchOriginX = useHandoffSnapshot
-		? s.gesture.internal.snapshot.pinchOriginX.get()
-		: out.gesture.pinchOriginX;
-	handoff.pinchOriginY = useHandoffSnapshot
-		? s.gesture.internal.snapshot.pinchOriginY.get()
-		: out.gesture.pinchOriginY;
-	handoff.rotation = useHandoffSnapshot
-		? s.gesture.internal.snapshot.rotation.get()
-		: out.gesture.rotation;
-	handoff.raw.x = useHandoffSnapshot
-		? s.gesture.internal.snapshot.raw.x.get()
-		: out.gesture.raw.x;
-	handoff.raw.y = useHandoffSnapshot
-		? s.gesture.internal.snapshot.raw.y.get()
-		: out.gesture.raw.y;
-	handoff.raw.normX = useHandoffSnapshot
-		? s.gesture.internal.snapshot.raw.normX.get()
-		: out.gesture.raw.normX;
-	handoff.raw.normY = useHandoffSnapshot
-		? s.gesture.internal.snapshot.raw.normY.get()
-		: out.gesture.raw.normY;
-	handoff.raw.scale = useHandoffSnapshot
-		? s.gesture.internal.snapshot.raw.scale.get()
-		: out.gesture.raw.scale;
-	handoff.raw.normScale = useHandoffSnapshot
-		? s.gesture.internal.snapshot.raw.normScale.get()
-		: out.gesture.raw.normScale;
-	handoff.raw.rotation = useHandoffSnapshot
-		? s.gesture.internal.snapshot.raw.rotation.get()
-		: out.gesture.raw.rotation;
-	handoff.active = useHandoffSnapshot
-		? s.gesture.internal.snapshot.active.get()
-		: s.gesture.initiator.get();
-	out.progress = resolveGestureAffectedProgress(
-		transitionProgress,
-		out.gesture,
-		{
-			x: s.gesture.internal.progressDeltaX.get(),
-			y: s.gesture.internal.progressDeltaY.get(),
-		},
-		options.gestureDirection,
-		getResolvedSnapBounds(
-			s.sortedNumericSnapPoints,
-			s.hasAutoSnapPoint ? s.resolvedAutoSnapPoint.get() : null,
-			canDismiss,
-		),
-		resolvedSnapPoints,
-		options.sheetSnapBehavior,
-	);
-
-	if (s.visualProgress.get() !== out.progress) {
-		s.visualProgress.set(out.progress);
-	}
-
-	out.animating = s.progressAnimating.get();
-
-	out.settled = s.progressSettled.get();
-
-	out.meta = s.meta;
-	out.options = options;
-	// navigate() can replace params on a route that is still closing. Its
-	// interpolator must finish with the identity that began that close.
-	if (!out.closing || out.route.key !== s.route.key) out.route = s.route;
-	out.layouts.screen.width = dimensions.width;
-	out.layouts.screen.height = dimensions.height;
-
-	const content = s.measuredContentLayout.get();
-
-	if (content) {
-		s.contentLayoutSlot.width = content.width;
-		s.contentLayoutSlot.height = content.height;
-		out.layouts.content = s.contentLayoutSlot;
-	} else {
-		out.layouts.content = undefined;
-	}
-
-	out.layouts.scroll = s.scrollMetadata.get() ?? undefined;
-
-	const autoSnapPoint = s.resolvedAutoSnapPoint.get();
-	const resolvedAutoSnap =
-		s.hasAutoSnapPoint && autoSnapPoint > 0 ? autoSnapPoint : null;
-
-	out.animatedSnapIndex = computeAnimatedSnapIndex(
-		out.progress,
-		s.sortedNumericSnapPoints,
-		resolvedAutoSnap,
-	);
-
-	const targetProgress = s.targetProgress.get();
-
-	out.snapIndex = computeTargetSnapIndex(
-		targetProgress,
-		s.sortedNumericSnapPoints,
-		resolvedAutoSnap,
-	);
-
-	return out;
-};

package/src/providers/screen/motion/animation/helpers/hydrate-transition-state/snap-points.ts

@@ -1,189 +0,0 @@
-import { EPSILON } from "../../../../../../constants";
-import type { SnapBounds } from "./types";
-
-const getResolvedSnapPointCount = (
-	snapPoints: number[],
-	resolvedAutoSnap: number | null,
-) => {
-	"worklet";
-	return snapPoints.length + (resolvedAutoSnap !== null ? 1 : 0);
-};
-
-const getAutoSnapPointIndex = (
-	snapPoints: number[],
-	resolvedAutoSnap: number,
-) => {
-	"worklet";
-	let index = 0;
-
-	while (index < snapPoints.length && snapPoints[index] <= resolvedAutoSnap) {
-		index++;
-	}
-
-	return index;
-};
-
-const getResolvedSnapPointAt = (
-	snapPoints: number[],
-	resolvedAutoSnap: number | null,
-	autoSnapPointIndex: number,
-	index: number,
-) => {
-	"worklet";
-	if (resolvedAutoSnap === null) {
-		return snapPoints[index];
-	}
-
-	if (index < autoSnapPointIndex) {
-		return snapPoints[index];
-	}
-
-	if (index === autoSnapPointIndex) {
-		return resolvedAutoSnap;
-	}
-
-	return snapPoints[index - 1];
-};
-
-export const getResolvedSnapBounds = (
-	snapPoints: number[],
-	resolvedAutoSnap: number | null,
-	canDismiss = true,
-): SnapBounds | null => {
-	"worklet";
-	const snapPointCount = getResolvedSnapPointCount(
-		snapPoints,
-		resolvedAutoSnap,
-	);
-
-	if (snapPointCount === 0) {
-		return null;
-	}
-
-	const autoSnapPointIndex =
-		resolvedAutoSnap === null
-			? -1
-			: getAutoSnapPointIndex(snapPoints, resolvedAutoSnap);
-	const firstSnapPoint = getResolvedSnapPointAt(
-		snapPoints,
-		resolvedAutoSnap,
-		autoSnapPointIndex,
-		0,
-	);
-	const lastSnapPoint = getResolvedSnapPointAt(
-		snapPoints,
-		resolvedAutoSnap,
-		autoSnapPointIndex,
-		snapPointCount - 1,
-	);
-
-	return {
-		min: canDismiss ? Math.min(0, firstSnapPoint) : firstSnapPoint,
-		max: lastSnapPoint,
-	};
-};
-
-export const computeAnimatedSnapIndex = (
-	progress: number,
-	snapPoints: number[],
-	resolvedAutoSnap: number | null,
-): number => {
-	"worklet";
-	const snapPointCount = getResolvedSnapPointCount(
-		snapPoints,
-		resolvedAutoSnap,
-	);
-
-	if (snapPointCount === 0) return -1;
-
-	const autoSnapPointIndex =
-		resolvedAutoSnap === null
-			? -1
-			: getAutoSnapPointIndex(snapPoints, resolvedAutoSnap);
-	const firstSnapPoint = getResolvedSnapPointAt(
-		snapPoints,
-		resolvedAutoSnap,
-		autoSnapPointIndex,
-		0,
-	);
-	const lastSnapPoint = getResolvedSnapPointAt(
-		snapPoints,
-		resolvedAutoSnap,
-		autoSnapPointIndex,
-		snapPointCount - 1,
-	);
-
-	if (progress <= firstSnapPoint) return 0;
-	if (progress >= lastSnapPoint) return snapPointCount - 1;
-
-	for (let i = 0; i < snapPointCount - 1; i++) {
-		const currentSnapPoint = getResolvedSnapPointAt(
-			snapPoints,
-			resolvedAutoSnap,
-			autoSnapPointIndex,
-			i,
-		);
-		const nextSnapPoint = getResolvedSnapPointAt(
-			snapPoints,
-			resolvedAutoSnap,
-			autoSnapPointIndex,
-			i + 1,
-		);
-
-		if (progress <= nextSnapPoint) {
-			const t =
-				(progress - currentSnapPoint) / (nextSnapPoint - currentSnapPoint);
-			return i + t;
-		}
-	}
-	return snapPointCount - 1;
-};
-
-export const computeTargetSnapIndex = (
-	targetProgress: number,
-	snapPoints: number[],
-	resolvedAutoSnap: number | null,
-): number => {
-	"worklet";
-	const snapPointCount = getResolvedSnapPointCount(
-		snapPoints,
-		resolvedAutoSnap,
-	);
-
-	if (snapPointCount === 0) return -1;
-
-	const autoSnapPointIndex =
-		resolvedAutoSnap === null
-			? -1
-			: getAutoSnapPointIndex(snapPoints, resolvedAutoSnap);
-	const firstSnapPoint = getResolvedSnapPointAt(
-		snapPoints,
-		resolvedAutoSnap,
-		autoSnapPointIndex,
-		0,
-	);
-
-	if (targetProgress <= 0 && Math.abs(firstSnapPoint) > EPSILON) {
-		return -1;
-	}
-
-	let nearestIndex = 0;
-	let smallestDistance = Math.abs(targetProgress - firstSnapPoint);
-
-	for (let i = 1; i < snapPointCount; i++) {
-		const snapPoint = getResolvedSnapPointAt(
-			snapPoints,
-			resolvedAutoSnap,
-			autoSnapPointIndex,
-			i,
-		);
-		const distance = Math.abs(targetProgress - snapPoint);
-
-		if (distance < smallestDistance) {
-			smallestDistance = distance;
-			nearestIndex = i;
-		}
-	}
-
-	return nearestIndex;
-};

package/src/providers/screen/motion/animation/helpers/hydrate-transition-state/types.ts

@@ -1,37 +0,0 @@
-import type { SharedValue } from "react-native-reanimated";
-import type {
-	ScreenTransitionOptions,
-	ScreenTransitionState,
-} from "../../../../../../types/animation.types";
-import type { ScrollMetadataState } from "../../../../../../types/gesture.types";
-import type { Layout } from "../../../../../../types/screen.types";
-import type { BaseStackRoute } from "../../../../../../types/stack.types";
-import type { MotionGestureValues, MotionValues } from "../../../types";
-
-export type MotionAnimationState = MotionValues & {
-	route: BaseStackRoute;
-	meta?: Record<string, unknown>;
-	options: ScreenTransitionOptions;
-	targetProgress: SharedValue<number>;
-	resolvedAutoSnapPoint: SharedValue<number>;
-	measuredContentLayout: SharedValue<Layout | null>;
-	scrollMetadata: SharedValue<ScrollMetadataState | null>;
-	hasAutoSnapPoint: boolean;
-	sortedNumericSnapPoints: number[];
-};
-
-// Each interpolator reader owns its mutable output and option overrides.
-export type BuiltState = Omit<
-	MotionAnimationState,
-	keyof MotionGestureValues
-> & {
-	gesture: MotionGestureValues;
-	optionsSlot: ScreenTransitionOptions;
-	contentLayoutSlot: Layout;
-	unwrapped: ScreenTransitionState;
-};
-
-export type SnapBounds = {
-	min: number;
-	max: number;
-};

package/src/providers/screen/motion/animation/helpers/worklet.ts

@@ -1,47 +0,0 @@
-import type { BaseStackRoute } from "../../../../../types/stack.types";
-
-/**
- * Deep-clones a value, ensuring every object in the tree has Object.prototype.
- * Handles null-prototype objects created by expo-router during deep linking.
- * Non-plain objects (class instances, functions, symbols) are omitted.
- */
-export const toPlainValue = (value: unknown): unknown => {
-	if (value === null || value === undefined) return value;
-
-	const type = typeof value;
-	if (type === "string" || type === "number" || type === "boolean")
-		return value;
-
-	if (type === "function" || type === "symbol") return undefined;
-
-	if (type !== "object") return undefined;
-
-	if (Array.isArray(value)) {
-		return value.map(toPlainValue);
-	}
-
-	const proto = Object.getPrototypeOf(value);
-	if (proto !== Object.prototype && proto !== null) {
-		return undefined;
-	}
-
-	const obj = value as Record<string, unknown>;
-	const result: Record<string, unknown> = {};
-	for (const key of Object.keys(obj)) {
-		result[key] = toPlainValue(obj[key]);
-	}
-	return result;
-};
-
-/**
- * Creates a plain, serializable route object for worklet consumption.
- * Deep-clones params to ensure all nested objects have Object.prototype
- * (expo-router can produce null-prototype objects during deep linking).
- */
-export const toPlainRoute = (route: BaseStackRoute): BaseStackRoute => {
-	return {
-		key: route.key,
-		name: route.name,
-		params: toPlainValue(route.params) as object | undefined,
-	};
-};

package/src/providers/screen/motion/animation/pipeline.ts

@@ -1,40 +0,0 @@
-import { useMemo } from "react";
-import { ScrollStore } from "../../../../stores/scroll.store";
-import { useBuilderStore } from "../../builder";
-import type { MotionValues } from "../types";
-import { buildScreenTransitionOptions } from "./helpers/build-screen-transition-options";
-import type { MotionAnimationState } from "./helpers/hydrate-transition-state/types";
-import { toPlainRoute, toPlainValue } from "./helpers/worklet";
-
-export function useMotionAnimationPipeline(
-	values: MotionValues,
-): MotionAnimationState {
-	const descriptor = useBuilderStore((store) => store.descriptors.current);
-	const route = descriptor.route;
-	const key = route.key;
-	const meta = descriptor.options.meta;
-	const snapPoints = descriptor.options.snapPoints;
-	return useMemo(() => {
-		const plainRoute = toPlainRoute(route);
-		const plainMeta = meta
-			? (toPlainValue(meta) as Record<string, unknown>)
-			: undefined;
-
-		const sortedNumericSnapPoints = (snapPoints ?? [])
-			.filter((p): p is number => typeof p === "number")
-			.sort((a, b) => a - b);
-
-		const transitionOptions = buildScreenTransitionOptions(descriptor.options);
-
-		return {
-			...values,
-			scrollMetadata: ScrollStore.getValue(key, "metadata"),
-			hasAutoSnapPoint:
-				snapPoints?.some((point) => typeof point === "string") ?? false,
-			sortedNumericSnapPoints,
-			route: plainRoute,
-			meta: plainMeta,
-			options: transitionOptions,
-		};
-	}, [key, meta, route, snapPoints, descriptor.options, values]);
-}

package/src/providers/screen/motion/animation/types.ts

@@ -1,3 +0,0 @@
-import type { ScreenTransitionTarget } from "../../../../types/animation.types";
-
-export type ScreenAnimationTarget = ScreenTransitionTarget;

package/src/providers/screen/motion/animation/use-screen-animation.tsx

@@ -1,70 +0,0 @@
-import { type DerivedValue, useDerivedValue } from "react-native-reanimated";
-import type {
-	ScreenInterpolationProps,
-	ScreenTransitionTarget,
-} from "../../../../types/animation.types";
-import { useOptionalBuilderStore } from "../../builder";
-import { useResolvedTransitionKey } from "../../builder/topology";
-import {
-	useOptionalOrchestratorStore,
-	useOrchestratorStore,
-} from "../../orchestrator/orchestrator.provider";
-import type { ScreenAnimationTarget } from "./types";
-
-export type { ScreenAnimationTarget } from "./types";
-
-export function useScreenAnimation(): DerivedValue<ScreenInterpolationProps>;
-export function useScreenAnimation(target: {
-	depth: 0;
-}): DerivedValue<ScreenInterpolationProps>;
-export function useScreenAnimation(
-	target: ScreenTransitionTarget,
-): DerivedValue<ScreenInterpolationProps | null>;
-export function useScreenAnimation(
-	target?: ScreenAnimationTarget,
-):
-	| DerivedValue<ScreenInterpolationProps>
-	| DerivedValue<ScreenInterpolationProps | null> {
-	const currentKey = useOptionalBuilderStore(
-		(store) => store?.derivations.currentScreenKey ?? null,
-	);
-
-	const localInterpolatorProps = useOrchestratorStore(
-		(store) => store.screenInterpolatorProps,
-	);
-	const localBoundsAccessor = useOrchestratorStore(
-		(store) => store.boundsAccessor,
-	);
-
-	const usesLocalStore =
-		target === undefined || (typeof target === "object" && target.depth === 0);
-
-	const screenKey = useResolvedTransitionKey(currentKey, target);
-
-	const keyedInterpolatorProps = useOptionalOrchestratorStore(
-		usesLocalStore ? null : screenKey,
-		(store) => store.screenInterpolatorProps,
-	);
-	const keyedBoundsAccessor = useOptionalOrchestratorStore(
-		usesLocalStore ? null : screenKey,
-		(store) => store.boundsAccessor,
-	);
-
-	const screenInterpolatorProps = usesLocalStore
-		? localInterpolatorProps
-		: keyedInterpolatorProps;
-	const boundsAccessor = usesLocalStore
-		? localBoundsAccessor
-		: keyedBoundsAccessor;
-
-	const animation = useDerivedValue<ScreenInterpolationProps | null>(() => {
-		if (!screenInterpolatorProps || !boundsAccessor) return null;
-
-		return {
-			...screenInterpolatorProps.get(),
-			bounds: boundsAccessor,
-		};
-	});
-
-	return animation;
-}