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

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,14 +0,0 @@
-import type { SharedValue } from "react-native-reanimated";
-import type { ScreenTransitionTarget } from "../../../types/animation.types";
-import type { BoundsAccessor } from "../../../types/bounds.types";
-import type { ScreenInterpolatorFrame } from "./helpers/pipeline";
-
-export type ScreenInterpolatorPropsRevision = Pick<SharedValue<number>, "get">;
-
-export type ScreenAnimationTarget = ScreenTransitionTarget;
-
-export type ScreenAnimationTransitionSource = {
-	screenInterpolatorProps: SharedValue<ScreenInterpolatorFrame>;
-	screenInterpolatorPropsRevision: ScreenInterpolatorPropsRevision;
-	boundsAccessor: BoundsAccessor;
-};

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

@@ -1,38 +0,0 @@
-import { type DerivedValue, useDerivedValue } from "react-native-reanimated";
-import type {
-	ScreenInterpolationProps,
-	ScreenTransitionTarget,
-} from "../../../types/animation.types";
-import { useScreenAnimationStore } from "./animation.provider";
-import { useBuildTransitionAccessor } from "./helpers/accessors/use-build-transition-accessor";
-import { readScreenAnimationRevisions } from "./helpers/read-screen-animation-revisions";
-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 screenAnimationStore = useScreenAnimationStore();
-
-	const { transitionSources } = screenAnimationStore;
-	const transition = useBuildTransitionAccessor(screenAnimationStore);
-	const transitionTarget = target;
-
-	const animation = useDerivedValue<ScreenInterpolationProps | null>(() => {
-		"worklet";
-		readScreenAnimationRevisions(transitionSources);
-		return transition(transitionTarget);
-	});
-
-	return animation;
-}

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

@@ -1,135 +0,0 @@
-import type { ReactNode } from "react";
-import { useLayoutEffect, useMemo } from "react";
-import { screenTopology } from "../../../factories/screen-topology";
-import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
-import type { BaseStackDescriptor } from "../../../types/stack.types";
-import createProvider from "../../../utils/create-provider";
-import type { DescriptorDerivations } from "./helpers/derive-descriptor-derivations";
-import { deriveDescriptorDerivations } from "./helpers/derive-descriptor-derivations";
-
-/**
- * Base descriptor interface - minimal contract for all stack types.
- * This allows stack implementations to work with the shared providers without
- * tight coupling to React Navigation.
- */
-export type BaseDescriptor = BaseStackDescriptor;
-
-export interface DescriptorsContextValue {
-	previous?: BaseDescriptor;
-	current: BaseDescriptor;
-	next?: BaseDescriptor;
-}
-
-export type DescriptorDerivationsContextValue = DescriptorDerivations;
-
-interface DescriptorStoreValue extends DescriptorsContextValue {
-	descriptors: DescriptorsContextValue;
-	derivations: DescriptorDerivationsContextValue;
-	options: BaseDescriptor["options"];
-}
-
-type DescriptorsProviderProps = {
-	children: ReactNode;
-	previous?: BaseDescriptor;
-	current?: BaseDescriptor;
-	next?: BaseDescriptor;
-	routeKey?: string;
-};
-
-const createDescriptorsProvider = createProvider("Descriptors", {
-	global: true,
-})<DescriptorsProviderProps, DescriptorStoreValue>;
-
-const {
-	DescriptorsProvider,
-	useDescriptorsStore,
-	useOptionalDescriptorsStore,
-}: ReturnType<typeof createDescriptorsProvider> = createDescriptorsProvider(
-	({ previous, current, next, routeKey, children }) => {
-		const parentScreenKey = useOptionalDescriptorsStore(
-			(store) => store?.derivations.currentScreenKey,
-		);
-		const blankStackCurrent = useBlankStackStore((store) =>
-			routeKey ? store.scenesByKey[routeKey]?.descriptor : undefined,
-		);
-		const blankStackPrevious = useBlankStackStore((store) =>
-			routeKey ? store.scenesByKey[routeKey]?.previousDescriptor : undefined,
-		);
-		const blankStackNext = useBlankStackStore((store) =>
-			routeKey ? store.scenesByKey[routeKey]?.nextDescriptor : undefined,
-		);
-		const blankStackFocusedScene = useBlankStackStore(
-			(store) => store.scenes[store.focusedIndex],
-		);
-		const resolvedCurrent = current ?? blankStackCurrent;
-		const resolvedPrevious = previous ?? blankStackPrevious;
-		const resolvedNext = next ?? blankStackNext;
-		const currentScreenKey = current?.route.key ?? routeKey;
-		const focusedScene = blankStackFocusedScene;
-		const isActiveScreen =
-			focusedScene?.route.key === currentScreenKey &&
-			focusedScene?.activity === "active";
-
-		if (!resolvedCurrent) {
-			throw new Error(
-				`Descriptors scene "${routeKey ?? "unknown"}" was not found.`,
-			);
-		}
-
-		const descriptors = useMemo(
-			() => ({
-				previous: resolvedPrevious,
-				current: resolvedCurrent,
-				next: resolvedNext,
-			}),
-			[resolvedPrevious, resolvedCurrent, resolvedNext],
-		);
-
-		const derivations = useMemo(
-			() =>
-				deriveDescriptorDerivations({
-					previous: resolvedPrevious,
-					current: resolvedCurrent,
-					next: resolvedNext,
-				}),
-			[resolvedPrevious, resolvedCurrent, resolvedNext],
-		);
-
-		useLayoutEffect(() => {
-			screenTopology.register({
-				screenKey: derivations.currentScreenKey,
-				parentScreenKey,
-			});
-
-			return () => {
-				screenTopology.unregister(derivations.currentScreenKey);
-			};
-		}, [derivations.currentScreenKey, parentScreenKey]);
-
-		useLayoutEffect(() => {
-			if (!isActiveScreen || !parentScreenKey) {
-				return;
-			}
-
-			return screenTopology.activate({
-				screenKey: derivations.currentScreenKey,
-				parentScreenKey,
-			});
-		}, [isActiveScreen, derivations.currentScreenKey, parentScreenKey]);
-
-		return {
-			key: derivations.currentScreenKey,
-			value: {
-				previous: resolvedPrevious,
-				current: resolvedCurrent,
-				next: resolvedNext,
-				descriptors,
-				derivations,
-				options: resolvedCurrent.options,
-			},
-			children,
-		};
-	},
-);
-
-export { DescriptorsProvider, useDescriptorsStore };

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

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

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

@@ -1,123 +0,0 @@
-import { Fragment, useMemo } from "react";
-import { Gesture } from "react-native-gesture-handler";
-import { useSharedValue } from "react-native-reanimated";
-import { ScrollStore } from "../../../stores/scroll.store";
-import createProvider from "../../../utils/create-provider";
-import { useDescriptorsStore } from "../descriptors";
-import { useCurrentScreenRelationships } from "../use-current-screen-relationships";
-import { useScreenGestureConfig } from "./hooks/use-screen-gesture-config";
-import { GestureOwnershipBridge } from "./ownership/gesture-ownership-bridge";
-import { useBuildPanGesture } from "./pan/use-build-pan-gesture";
-import { useBuildPinchGesture } from "./pinch/use-build-pinch-gesture";
-import {
-	type DirectionClaimMap,
-	type GestureCompositionOwner,
-	type GestureContextType,
-	NO_DIRECTION_CLAIMS,
-	type ScreenGestureSource,
-} from "./types";
-
-interface ScreenGestureProviderProps {
-	children: React.ReactNode;
-}
-
-type ScreenGestureStoreValue = GestureContextType & {
-	relationshipGestureSources: readonly ScreenGestureSource[];
-};
-
-const EMPTY_GESTURE_SOURCES: readonly ScreenGestureSource[] = [];
-
-const createScreenGestureProvider = createProvider("ScreenGesture", {
-	global: true,
-})<ScreenGestureProviderProps, ScreenGestureStoreValue>;
-
-export const {
-	ScreenGestureProvider,
-	useOptionalScreenGestureStore,
-	useScreenGestureStore,
-}: ReturnType<typeof createScreenGestureProvider> = createScreenGestureProvider(
-	({ children }) => {
-		const currentScreenKey = useDescriptorsStore(
-			(store) => store.derivations.currentScreenKey,
-		);
-		const isTopMostScreen = useDescriptorsStore(
-			(store) => store.derivations.isTopMostScreen,
-		);
-		const relationships = useCurrentScreenRelationships();
-		const relationshipAncestorGestures =
-			useOptionalScreenGestureStore(
-				relationships.parentScreenKey,
-				(store) => store.relationshipGestureSources,
-			) ?? EMPTY_GESTURE_SOURCES;
-		const ancestorGestures = isTopMostScreen
-			? relationshipAncestorGestures
-			: EMPTY_GESTURE_SOURCES;
-		const gestureConfig = useScreenGestureConfig(ancestorGestures);
-		const scrollState = ScrollStore.getValue(currentScreenKey, "coordination");
-		const childDirectionClaims =
-			useSharedValue<DirectionClaimMap>(NO_DIRECTION_CLAIMS);
-		const gestureCompositionOwner =
-			useSharedValue<GestureCompositionOwner>(null);
-		const panGesture = useBuildPanGesture({
-			scrollState,
-			gestureConfig,
-			childDirectionClaims,
-			gestureCompositionOwner,
-		});
-		const pinchGesture = useBuildPinchGesture({
-			gestureConfig,
-			gestureCompositionOwner,
-		});
-		const detectorGesture = useMemo(
-			() => Gesture.Simultaneous(panGesture, pinchGesture),
-			[panGesture, pinchGesture],
-		);
-		const source = useMemo<ScreenGestureSource>(
-			() => ({
-				routeKey: currentScreenKey,
-				detectorGesture,
-				panGesture,
-				pinchGesture,
-				scrollState,
-				claimedDirections: gestureConfig.participation.claimedDirections,
-				childDirectionClaims,
-			}),
-			[
-				currentScreenKey,
-				detectorGesture,
-				panGesture,
-				pinchGesture,
-				scrollState,
-				gestureConfig.participation.claimedDirections,
-				childDirectionClaims,
-			],
-		);
-		const relationshipGestureSources = useMemo(
-			() => [source, ...ancestorGestures],
-			[source, ancestorGestures],
-		);
-		const value = useMemo<ScreenGestureStoreValue>(
-			() => ({
-				...source,
-				ancestorGestures,
-				relationshipGestureSources,
-			}),
-			[source, ancestorGestures, relationshipGestureSources],
-		);
-		const content = useMemo(
-			() => (
-				<Fragment>
-					<GestureOwnershipBridge />
-					{children}
-				</Fragment>
-			),
-			[children],
-		);
-
-		return {
-			key: currentScreenKey,
-			value,
-			children: content,
-		};
-	},
-);

package/src/providers/screen/gestures/hooks/use-gesture-sensitivity.ts

@@ -1,132 +0,0 @@
-import { useCallback, useMemo } from "react";
-import type { SharedValue } from "react-native-reanimated";
-import { useSharedValue } from "react-native-reanimated";
-import type { ScreenOptionsContextValue } from "../../options";
-import {
-	applyGestureSensitivity,
-	normalizePinchScale,
-} from "../shared/physics";
-import type { PanGestureEvent, PinchGestureEvent } from "../types";
-
-export interface GestureSensitivityRawChangeState {
-	previousRawValue: SharedValue<number>;
-	adjustedValue: SharedValue<number>;
-}
-
-export const applyGestureSensitivityToRawChange = (
-	rawValue: number,
-	sensitivity: number,
-	state: GestureSensitivityRawChangeState,
-) => {
-	"worklet";
-	const rawChange = rawValue - state.previousRawValue.get();
-
-	// gestureSensitivity can change mid-gesture, so apply it to the latest
-	// raw movement only instead of rescaling the recognizer's cumulative value.
-	const adjustedValue =
-		state.adjustedValue.get() + applyGestureSensitivity(rawChange, sensitivity);
-
-	state.previousRawValue.set(rawValue);
-	state.adjustedValue.set(adjustedValue);
-
-	return adjustedValue;
-};
-
-const resetChangeState = (state: GestureSensitivityRawChangeState) => {
-	"worklet";
-	state.previousRawValue.set(0);
-	state.adjustedValue.set(0);
-};
-
-const useBuildSensitivityChangeState = () => {
-	const previousRawValue = useSharedValue(0);
-	const adjustedValue = useSharedValue(0);
-
-	return useMemo<GestureSensitivityRawChangeState>(
-		() => ({
-			previousRawValue,
-			adjustedValue,
-		}),
-		[previousRawValue, adjustedValue],
-	);
-};
-
-export const usePanGestureSensitivity = (
-	screenOptions: ScreenOptionsContextValue,
-) => {
-	const xSensitivityState = useBuildSensitivityChangeState();
-	const ySensitivityState = useBuildSensitivityChangeState();
-
-	const resetSensitivity = useCallback(() => {
-		"worklet";
-		resetChangeState(xSensitivityState);
-		resetChangeState(ySensitivityState);
-	}, [xSensitivityState, ySensitivityState]);
-
-	const withSensitivity = useCallback(
-		(event: PanGestureEvent): PanGestureEvent => {
-			"worklet";
-			const sensitivity = screenOptions.get().gestureSensitivity;
-
-			return {
-				...event,
-				translationX: applyGestureSensitivityToRawChange(
-					event.translationX,
-					sensitivity,
-					xSensitivityState,
-				),
-				translationY: applyGestureSensitivityToRawChange(
-					event.translationY,
-					sensitivity,
-					ySensitivityState,
-				),
-			};
-		},
-		[screenOptions, xSensitivityState, ySensitivityState],
-	);
-
-	return useMemo(
-		() => ({
-			withSensitivity,
-			resetSensitivity,
-		}),
-		[withSensitivity, resetSensitivity],
-	);
-};
-
-export const usePinchGestureSensitivity = (
-	screenOptions: ScreenOptionsContextValue,
-) => {
-	const scaleSensitivityState = useBuildSensitivityChangeState();
-
-	const resetSensitivity = useCallback(() => {
-		"worklet";
-		resetChangeState(scaleSensitivityState);
-	}, [scaleSensitivityState]);
-
-	const withSensitivity = useCallback(
-		(event: PinchGestureEvent): PinchGestureEvent => {
-			"worklet";
-			const sensitivity = screenOptions.get().gestureSensitivity;
-			const normScale = applyGestureSensitivityToRawChange(
-				normalizePinchScale(event.scale),
-				sensitivity,
-				scaleSensitivityState,
-			);
-
-			return {
-				...event,
-				scale: 1 + normScale,
-			};
-		},
-		[screenOptions, scaleSensitivityState],
-	);
-
-	return useMemo(
-		() => ({
-			withSensitivity,
-			resetSensitivity,
-		}),
-		[withSensitivity, resetSensitivity],
-	);
-};

package/src/providers/screen/gestures/hooks/use-screen-gesture-config.ts

@@ -1,22 +0,0 @@
-import { useMemo } from "react";
-import { useDescriptorsStore } from "../../descriptors";
-import { resolveScreenGestureConfig } from "../shared/policy";
-import type { ScreenGestureConfig, ScreenGestureSource } from "../types";
-
-export function useScreenGestureConfig(
-	ancestorGestures: readonly ScreenGestureSource[],
-): ScreenGestureConfig {
-	const options = useDescriptorsStore((store) => store.options);
-	const isFirstKey = useDescriptorsStore(
-		(store) => store.derivations.isFirstKey,
-	);
-	return useMemo(
-		() =>
-			resolveScreenGestureConfig({
-				options,
-				isFirstKey,
-				ancestorGestures,
-			}),
-		[isFirstKey, options, ancestorGestures],
-	);
-}

package/src/providers/screen/gestures/hooks/use-screen-gesture.ts

@@ -1,32 +0,0 @@
-import {
-	type ChainTarget,
-	resolveChainTarget,
-} from "../../../../utils/resolve-chain-target";
-import { useOptionalScreenGestureStore } from "../gestures.provider";
-
-export type ScreenGestureTarget = ChainTarget;
-
-/**
- * Returns a screen navigation pan gesture.
- * Use this to coordinate child gestures with the navigation gesture.
- *
- * @example
- * ```tsx
- * const screenGesture = useScreenGesture();
- *
- * const myPanGesture = Gesture.Pan()
- *   .requireExternalGestureToFail(screenGesture)
- *   .onUpdate((...) => {});
- * ```
- */
-export const useScreenGesture = (target?: ScreenGestureTarget) => {
-	const ctx = useOptionalScreenGestureStore();
-
-	return (
-		resolveChainTarget({
-			target,
-			self: ctx,
-			ancestors: ctx?.ancestorGestures ?? [],
-		})?.panGesture ?? null
-	);
-};

package/src/providers/screen/gestures/hooks/use-stable-runtime-config.ts

@@ -1,44 +0,0 @@
-import { useLayoutEffect, useMemo } from "react";
-import { type SharedValue, useSharedValue } from "react-native-reanimated";
-import { AnimationStore } from "../../../../stores/animation.store";
-import { GestureStore } from "../../../../stores/gesture.store";
-import { SystemStore } from "../../../../stores/system.store";
-import { useDescriptorsStore } from "../../descriptors";
-import type { GesturePolicy, GestureRuntime } from "../types";
-
-type RuntimeConfigInput<TPolicy extends GesturePolicy> = Omit<
-	GestureRuntime<TPolicy>,
-	"stores"
->;
-
-export function useStableRuntimeConfig<TPolicy extends GesturePolicy>(
-	runtimeConfigInput: RuntimeConfigInput<TPolicy>,
-): SharedValue<GestureRuntime<TPolicy>> {
-	const currentScreenKey = useDescriptorsStore(
-		(store) => store.derivations.currentScreenKey,
-	);
-	const { participation, policy } = runtimeConfigInput;
-
-	const stores = useMemo(() => {
-		return {
-			gestures: GestureStore.getBag(currentScreenKey),
-			animations: AnimationStore.getBag(currentScreenKey),
-			system: SystemStore.getBag(currentScreenKey),
-		};
-	}, [currentScreenKey]);
-
-	const runtimeConfig = useMemo<GestureRuntime<TPolicy>>(() => {
-		return {
-			participation,
-			policy,
-			stores,
-		};
-	}, [participation, policy, stores]);
-	const stableRuntimeConfig = useSharedValue(runtimeConfig);
-
-	useLayoutEffect(() => {
-		stableRuntimeConfig.set(runtimeConfig);
-	}, [stableRuntimeConfig, runtimeConfig]);
-
-	return stableRuntimeConfig;
-}

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

@@ -1,13 +0,0 @@
-export {
-	ScreenGestureProvider,
-	useOptionalScreenGestureStore,
-	useScreenGestureStore,
-} from "./gestures.provider";
-export type {
-	DirectionClaim,
-	DirectionClaimMap,
-	GestureContextType,
-	ScrollGestureAxis,
-	ScrollGestureAxisState,
-	ScrollGestureState,
-} from "./types";