react-native-screen-transitions 4.1.0-alpha.0 → 4.1.0-beta.0

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

@@ -1,344 +0,0 @@
-import { useMemo } from "react";
-import { useWindowDimensions } from "react-native";
-import {
-	type DerivedValue,
-	type SharedValue,
-	useDerivedValue,
-	useSharedValue,
-} from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import {
-	createScreenTransitionState,
-	DEFAULT_SCREEN_TRANSITION_STATE,
-} from "../../../../constants";
-import { AnimationStore } from "../../../../stores/animation.store";
-import type {
-	ScreenInterpolationProps,
-	ScreenStyleInterpolator,
-	ScreenTransitionState,
-} from "../../../../types/animation.types";
-import { useBlankStackStore } from "../../../stack/blank-stack.provider";
-import { useStackCoreStore } from "../../../stack/core.provider";
-import { type BaseDescriptor, useDescriptorsStore } from "../../descriptors";
-import { buildScreenTransitionOptions } from "./build-screen-transition-options";
-import { updateDerivations } from "./derivations";
-import { hasTransitionsEnabled } from "./has-transitions-enabled";
-import { hydrateTransitionState } from "./hydrate-transition-state";
-import type { SelectedInterpolatorOptions } from "./selected-interpolator-options";
-import { readStackProgress, type StackProgressEntry } from "./stack-progress";
-import { useBuildTransitionState } from "./use-build-transition-state";
-import { toPlainRoute, toPlainValue } from "./worklet";
-
-export type ScreenInterpolatorFrame = Omit<
-	ScreenInterpolationProps,
-	"bounds" | "transition"
->;
-
-export interface ScreenAnimationPipeline {
-	screenInterpolatorProps: DerivedValue<ScreenInterpolatorFrame>;
-	selectedInterpolatorOptions: SharedValue<SelectedInterpolatorOptions>;
-	nextInterpolator: ScreenStyleInterpolator | undefined;
-	currentInterpolator: ScreenStyleInterpolator | undefined;
-}
-
-const getInitialSettledProgress = (descriptor: BaseDescriptor) => {
-	const { snapPoints, initialSnapIndex = 0 } = descriptor.options;
-
-	if (!snapPoints?.length) {
-		return 1;
-	}
-
-	const clampedIndex = Math.min(
-		Math.max(0, initialSnapIndex),
-		snapPoints.length - 1,
-	);
-	const snapPoint = snapPoints[clampedIndex];
-
-	return typeof snapPoint === "number" ? snapPoint : 0;
-};
-
-const applyInitialProgress = ({
-	state,
-	dimensions,
-	progress,
-	entering = 0,
-	closing = 0,
-	animating = 0,
-	willAnimate = 0,
-	settled = entering || closing || animating ? 0 : 1,
-}: {
-	state: ScreenTransitionState;
-	dimensions: ScreenInterpolatorFrame["layouts"]["screen"];
-	progress: number;
-	entering?: number;
-	closing?: number;
-	animating?: number;
-	willAnimate?: number;
-	settled?: number;
-}) => {
-	state.progress = progress;
-	state.transitionProgress = progress;
-	state.entering = entering;
-	state.closing = closing;
-	state.animating = animating;
-	state.willAnimate = willAnimate;
-	state.settled = settled;
-	state.layouts.screen = dimensions;
-
-	return state;
-};
-
-const createInitialTransitionState = ({
-	descriptor,
-	dimensions,
-	progress,
-	entering,
-	animating,
-	willAnimate,
-	settled,
-}: {
-	descriptor: BaseDescriptor;
-	dimensions: ScreenInterpolatorFrame["layouts"]["screen"];
-	progress: number;
-	entering?: number;
-	animating?: number;
-	willAnimate?: number;
-	settled?: number;
-}) => {
-	const meta = descriptor.options.meta
-		? (toPlainValue(descriptor.options.meta) as Record<string, unknown>)
-		: undefined;
-	const state = createScreenTransitionState(
-		toPlainRoute(descriptor.route),
-		meta,
-		buildScreenTransitionOptions(descriptor.options),
-	);
-
-	return applyInitialProgress({
-		state,
-		dimensions,
-		progress,
-		entering,
-		animating,
-		willAnimate,
-		settled,
-	});
-};
-
-const createInitialInterpolatorProps = ({
-	dimensions,
-	insets,
-	currentDescriptor,
-	nextDescriptor,
-	prevDescriptor,
-}: {
-	dimensions: ScreenInterpolatorFrame["layouts"]["screen"];
-	insets: ScreenInterpolatorFrame["insets"];
-	currentDescriptor: BaseDescriptor;
-	nextDescriptor?: BaseDescriptor;
-	prevDescriptor?: BaseDescriptor;
-}): ScreenInterpolatorFrame => {
-	const hasIncomingNext = !!nextDescriptor;
-	const isFocusedEntering = !!prevDescriptor && !nextDescriptor;
-	const shouldAnimateInitialMount =
-		!prevDescriptor &&
-		!nextDescriptor &&
-		!!currentDescriptor.options.experimental_animateOnInitialMount;
-	const currentProgress =
-		hasIncomingNext || (!isFocusedEntering && !shouldAnimateInitialMount)
-			? getInitialSettledProgress(currentDescriptor)
-			: 0;
-	const currentEntering =
-		isFocusedEntering || shouldAnimateInitialMount ? 1 : 0;
-	const current = createInitialTransitionState({
-		descriptor: currentDescriptor,
-		dimensions,
-		progress: currentProgress,
-		entering: currentEntering,
-		animating: currentEntering,
-		willAnimate: 0,
-	});
-	const previous = prevDescriptor
-		? createInitialTransitionState({
-				descriptor: prevDescriptor,
-				dimensions,
-				progress: getInitialSettledProgress(prevDescriptor),
-			})
-		: undefined;
-	const next = nextDescriptor
-		? createInitialTransitionState({
-				descriptor: nextDescriptor,
-				dimensions,
-				progress: 0,
-				entering: 1,
-				animating: 1,
-				willAnimate: 0,
-				settled: 0,
-			})
-		: undefined;
-	const frame: ScreenInterpolatorFrame = {
-		layouts: current.layouts,
-		insets,
-		previous,
-		current,
-		next,
-		progress: 0,
-		transitionProgress: 0,
-		stackProgress: 0,
-		focused: true,
-		active: current,
-		inactive: undefined,
-	};
-
-	updateDerivations(frame);
-	frame.stackProgress = frame.progress;
-
-	return frame;
-};
-
-type BuiltTransitionState = NonNullable<
-	ReturnType<typeof useBuildTransitionState>
->;
-
-const hydrateInterpolatorFrame = <TFrame extends ScreenInterpolatorFrame>({
-	frame,
-	dimensions,
-	insets,
-	currentAnimation,
-	nextAnimation,
-	prevAnimation,
-	nextHasTransitions,
-	interpolatorOptions,
-	stackProgressEntries,
-	currentRouteKey,
-}: {
-	frame: TFrame;
-	dimensions: ScreenInterpolatorFrame["layouts"]["screen"];
-	insets: ScreenInterpolatorFrame["insets"];
-	currentAnimation: BuiltTransitionState | undefined;
-	nextAnimation: BuiltTransitionState | undefined;
-	prevAnimation: BuiltTransitionState | undefined;
-	nextHasTransitions: boolean;
-	interpolatorOptions: SelectedInterpolatorOptions;
-	stackProgressEntries: readonly StackProgressEntry[];
-	currentRouteKey: string;
-}): TFrame => {
-	"worklet";
-	const shouldApplyOptionsToCurrent = interpolatorOptions.owner === "current";
-	const shouldApplyOptionsToNext =
-		interpolatorOptions.owner === "next" &&
-		!!nextAnimation &&
-		nextHasTransitions;
-	frame.previous = prevAnimation
-		? hydrateTransitionState(prevAnimation, dimensions)
-		: undefined;
-
-	frame.current = currentAnimation
-		? hydrateTransitionState(
-				currentAnimation,
-				dimensions,
-				shouldApplyOptionsToCurrent ? interpolatorOptions.options : undefined,
-			)
-		: DEFAULT_SCREEN_TRANSITION_STATE;
-
-	frame.next =
-		nextAnimation && nextHasTransitions
-			? hydrateTransitionState(
-					nextAnimation,
-					dimensions,
-					shouldApplyOptionsToNext ? interpolatorOptions.options : undefined,
-				)
-			: undefined;
-
-	frame.layouts = frame.current.layouts;
-	frame.insets = insets;
-
-	updateDerivations(frame);
-
-	frame.stackProgress = readStackProgress(
-		stackProgressEntries,
-		currentRouteKey,
-		frame.progress,
-	);
-
-	return frame;
-};
-
-export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
-	const transitionsAlwaysOn = useStackCoreStore(
-		(store) => store.flags.TRANSITIONS_ALWAYS_ON,
-	);
-	const routeKeys = useBlankStackStore((store) => store.routeKeys);
-	const dimensions = useWindowDimensions();
-	const insets = useSafeAreaInsets();
-	const stackProgressEntries = useMemo(
-		() =>
-			routeKeys.map((routeKey) => ({
-				routeKey,
-				visualProgress: AnimationStore.getValue(routeKey, "visualProgress"),
-			})),
-		[routeKeys],
-	);
-
-	const currDescriptor = useDescriptorsStore(
-		(store) => store.descriptors.current,
-	);
-	const nextDescriptor = useDescriptorsStore((store) => store.descriptors.next);
-	const prevDescriptor = useDescriptorsStore(
-		(store) => store.descriptors.previous,
-	);
-	const currentAnimation = useBuildTransitionState(currDescriptor);
-	const nextAnimation = useBuildTransitionState(nextDescriptor);
-	const prevAnimation = useBuildTransitionState(prevDescriptor);
-	const currentRouteKey = currDescriptor.route.key;
-
-	const nextRouteKey = nextDescriptor?.route?.key;
-	const nextHasTransitions =
-		!!nextRouteKey &&
-		hasTransitionsEnabled(nextDescriptor?.options, transitionsAlwaysOn);
-
-	const initialInterpolatorProps = useMemo(
-		() =>
-			createInitialInterpolatorProps({
-				dimensions,
-				insets,
-				currentDescriptor: currDescriptor,
-				nextDescriptor,
-				prevDescriptor,
-			}),
-		[dimensions, insets, currDescriptor, nextDescriptor, prevDescriptor],
-	);
-
-	const selectedInterpolatorOptions =
-		useSharedValue<SelectedInterpolatorOptions>({
-			owner: "current",
-		});
-	const screenInterpolatorProps = useDerivedValue<ScreenInterpolatorFrame>(
-		() => {
-			"worklet";
-			const interpolatorOptions = selectedInterpolatorOptions.get();
-			return hydrateInterpolatorFrame({
-				frame: { ...initialInterpolatorProps },
-				dimensions,
-				insets,
-				currentAnimation,
-				nextAnimation,
-				prevAnimation,
-				nextHasTransitions,
-				interpolatorOptions,
-				stackProgressEntries,
-				currentRouteKey,
-			});
-		},
-	);
-
-	const nextInterpolator = nextDescriptor?.options.screenStyleInterpolator;
-	const currentInterpolator = currDescriptor.options.screenStyleInterpolator;
-
-	return {
-		screenInterpolatorProps,
-		selectedInterpolatorOptions,
-		nextInterpolator,
-		currentInterpolator,
-	};
-}

package/src/providers/screen/animation/helpers/use-build-transition-state.ts

@@ -1,94 +0,0 @@
-import { useMemo } from "react";
-import type { SharedValue } from "react-native-reanimated";
-import { createScreenTransitionState } from "../../../../constants";
-import { AnimationStore } from "../../../../stores/animation.store";
-import {
-	GestureStore,
-	type GestureStoreMap,
-} from "../../../../stores/gesture.store";
-import { ScrollStore } from "../../../../stores/scroll.store";
-import { SystemStore } from "../../../../stores/system.store";
-import type {
-	BaseStackRoute,
-	Layout,
-	ScreenTransitionState,
-	ScrollMetadataState,
-} from "../../../../types";
-import type { ScreenTransitionOptions } from "../../../../types/animation.types";
-import type { BaseDescriptor } from "../../descriptors";
-import { buildScreenTransitionOptions } from "./build-screen-transition-options";
-import { toPlainRoute, toPlainValue } from "./worklet";
-
-type BuiltState = {
-	transitionProgress: SharedValue<number>;
-	visualProgress: SharedValue<number>;
-	willAnimate: SharedValue<number>;
-	closing: SharedValue<number>;
-	progressAnimating: SharedValue<number>;
-	progressSettled: SharedValue<number>;
-	entering: SharedValue<number>;
-	gesture: GestureStoreMap;
-	route: BaseStackRoute;
-	meta?: Record<string, unknown>;
-	options: ScreenTransitionOptions;
-	optionsSlot: ScreenTransitionOptions;
-	targetProgress: SharedValue<number>;
-	resolvedAutoSnapPoint: SharedValue<number>;
-	measuredContentLayout: SharedValue<Layout | null>;
-	scrollMetadata: SharedValue<ScrollMetadataState | null>;
-	contentLayoutSlot: Layout;
-	hasAutoSnapPoint: boolean;
-	sortedNumericSnapPoints: number[];
-	unwrapped: ScreenTransitionState;
-};
-
-export const useBuildTransitionState = (
-	descriptor: BaseDescriptor | undefined,
-): BuiltState | undefined => {
-	const key = descriptor?.route?.key;
-	const meta = descriptor?.options?.meta;
-	const route = descriptor?.route;
-	const snapPoints = descriptor?.options?.snapPoints;
-
-	return useMemo(() => {
-		if (!key || !route) return undefined;
-
-		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 {
-			transitionProgress: AnimationStore.getValue(key, "transitionProgress"),
-			visualProgress: AnimationStore.getValue(key, "visualProgress"),
-			willAnimate: AnimationStore.getValue(key, "willAnimate"),
-			closing: AnimationStore.getValue(key, "closing"),
-			entering: AnimationStore.getValue(key, "entering"),
-			progressAnimating: AnimationStore.getValue(key, "progressAnimating"),
-			progressSettled: AnimationStore.getValue(key, "progressSettled"),
-			targetProgress: SystemStore.getValue(key, "targetProgress"),
-			resolvedAutoSnapPoint: SystemStore.getValue(key, "resolvedAutoSnapPoint"),
-			measuredContentLayout: SystemStore.getValue(key, "measuredContentLayout"),
-			scrollMetadata: ScrollStore.getValue(key, "metadata"),
-			contentLayoutSlot: { width: 0, height: 0 },
-			hasAutoSnapPoint: snapPoints?.includes("auto") ?? false,
-			sortedNumericSnapPoints,
-			gesture: GestureStore.getBag(key),
-			route: plainRoute,
-			meta: plainMeta,
-			options: transitionOptions,
-			optionsSlot: {},
-			unwrapped: createScreenTransitionState(
-				plainRoute,
-				plainMeta,
-				transitionOptions,
-			),
-		};
-	}, [key, meta, route, snapPoints, descriptor?.options]);
-};

package/src/providers/screen/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/animation/index.tsx

@@ -1,9 +0,0 @@
-export {
-	ScreenAnimationProvider,
-	useOptionalScreenAnimationStore,
-	useScreenAnimationStore,
-} from "./animation.provider";
-export {
-	type ScreenAnimationTarget,
-	useScreenAnimation,
-} from "./use-screen-animation";

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

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

package/src/providers/screen/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 { useOptionalDescriptorsStore } from "../descriptors";
-import { useResolvedTransitionKey } from "../topology";
-import {
-	useOptionalScreenAnimationStore,
-	useScreenAnimationStore,
-} from "./animation.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 = useOptionalDescriptorsStore(
-		(store) => store?.derivations.currentScreenKey ?? null,
-	);
-
-	const localInterpolatorProps = useScreenAnimationStore(
-		(store) => store.screenInterpolatorProps,
-	);
-	const localBoundsAccessor = useScreenAnimationStore(
-		(store) => store.boundsAccessor,
-	);
-
-	const usesLocalStore =
-		target === undefined || (typeof target === "object" && target.depth === 0);
-
-	const screenKey = useResolvedTransitionKey(currentKey, target);
-
-	const keyedInterpolatorProps = useOptionalScreenAnimationStore(
-		usesLocalStore ? null : screenKey,
-		(store) => store.screenInterpolatorProps,
-	);
-	const keyedBoundsAccessor = useOptionalScreenAnimationStore(
-		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;
-}

package/src/providers/screen/descriptors/descriptors.provider.tsx

@@ -1,79 +0,0 @@
-import type { ReactNode } from "react";
-import { useMemo } from "react";
-import type { BaseStackDescriptor } from "../../../types/stack.types";
-import createProvider from "../../../utils/create-provider";
-import { useBlankStackStore } from "../../stack/blank-stack.provider";
-import type { DescriptorDerivations } from "./helpers/derive-descriptor-derivations";
-import { deriveDescriptorDerivations } from "./helpers/derive-descriptor-derivations";
-
-export type BaseDescriptor = BaseStackDescriptor;
-
-export interface DescriptorsContextValue {
-	previous?: BaseDescriptor;
-	current: BaseDescriptor;
-	next?: BaseDescriptor;
-}
-
-export type DescriptorDerivationsContextValue = DescriptorDerivations;
-
-interface DescriptorStoreValue {
-	descriptors: DescriptorsContextValue;
-	derivations: DescriptorDerivationsContextValue;
-	options: BaseDescriptor["options"];
-}
-
-type DescriptorsProviderProps = {
-	children: ReactNode;
-	routeKey: string;
-};
-
-const {
-	DescriptorsProvider,
-	useDescriptorsStore,
-	useOptionalDescriptorsStore,
-} = createProvider("Descriptors", {
-	global: true,
-})<DescriptorsProviderProps, DescriptorStoreValue>(({ routeKey, children }) => {
-	const scene = useBlankStackStore((s) => s.scenesByKey[routeKey]);
-
-	const currentDescriptor = scene.descriptor;
-	const previousDescriptor = scene.previousDescriptor;
-	const nextDescriptor = scene.nextDescriptor;
-	const options = scene.descriptor.options;
-
-	const descriptors = useMemo(() => {
-		return {
-			previous: previousDescriptor,
-			current: currentDescriptor,
-			next: nextDescriptor,
-		};
-	}, [previousDescriptor, currentDescriptor, nextDescriptor]);
-
-	const derivations = useMemo(() => {
-		return deriveDescriptorDerivations({
-			previous: previousDescriptor,
-			current: currentDescriptor,
-			next: nextDescriptor,
-		});
-	}, [previousDescriptor, currentDescriptor, nextDescriptor]);
-
-	const value = useMemo(() => {
-		return {
-			descriptors,
-			derivations,
-			options,
-		};
-	}, [descriptors, derivations, options]);
-
-	return {
-		key: routeKey,
-		value,
-		children,
-	};
-});
-
-export {
-	DescriptorsProvider,
-	useDescriptorsStore,
-	useOptionalDescriptorsStore,
-};

package/src/providers/screen/descriptors/index.tsx

@@ -1,6 +0,0 @@
-export {
-	type BaseDescriptor,
-	DescriptorsProvider,
-	useDescriptorsStore,
-	useOptionalDescriptorsStore,
-} from "./descriptors.provider";