react-native-screen-transitions 3.3.0 → 3.4.0-alpha.1

package/src/shared/hooks/animation/use-screen-animation.tsx

@@ -1,208 +0,0 @@
-import { useMemo } from "react";
-import { useWindowDimensions } from "react-native";
-import { type SharedValue, useDerivedValue } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import type { NativeStackScreenTransitionConfig } from "../../../native-stack/types";
-import {
-	createScreenTransitionState,
-	DEFAULT_SCREEN_TRANSITION_STATE,
-} from "../../constants";
-import {
-	type BaseDescriptor,
-	useKeys,
-} from "../../providers/screen/keys.provider";
-import { AnimationStore } from "../../stores/animation.store";
-import { GestureStore, type GestureStoreMap } from "../../stores/gesture.store";
-import type {
-	ScreenInterpolationProps,
-	ScreenTransitionState,
-} from "../../types/animation.types";
-import type { ScreenTransitionConfig } from "../../types/screen.types";
-import type { BaseStackRoute } from "../../types/stack.types";
-import { derivations } from "../../utils/animation/derivations";
-import { toPlainRoute, toPlainValue } from "../../utils/animation/worklet";
-import { createBounds } from "../../utils/bounds";
-import { useStack } from "../navigation/use-stack";
-
-type BuiltState = {
-	progress: SharedValue<number>;
-	closing: SharedValue<number>;
-	animating: SharedValue<number>;
-	entering: SharedValue<number>;
-	gesture: GestureStoreMap;
-	route: BaseStackRoute;
-	meta?: Record<string, unknown>;
-	unwrapped: ScreenTransitionState;
-};
-
-/**
- * Computes the animated snap index based on progress and snap points.
- * Returns -1 if no snap points, otherwise interpolates between indices.
- */
-const computeSnapIndex = (progress: number, snapPoints: number[]): number => {
-	"worklet";
-	if (snapPoints.length === 0) return -1;
-	if (progress <= snapPoints[0]) return 0;
-	if (progress >= snapPoints[snapPoints.length - 1])
-		return snapPoints.length - 1;
-
-	for (let i = 0; i < snapPoints.length - 1; i++) {
-		if (progress <= snapPoints[i + 1]) {
-			const t =
-				(progress - snapPoints[i]) / (snapPoints[i + 1] - snapPoints[i]);
-			return i + t;
-		}
-	}
-	return snapPoints.length - 1;
-};
-
-const unwrapInto = (s: BuiltState): ScreenTransitionState => {
-	"worklet";
-	const out = s.unwrapped;
-	out.progress = s.progress.value;
-	out.closing = s.closing.value;
-	out.entering = s.entering.value;
-	out.animating = s.animating.value;
-	out.gesture.x = s.gesture.x.value;
-	out.gesture.y = s.gesture.y.value;
-	out.gesture.normalizedX = s.gesture.normalizedX.value;
-	out.gesture.normalizedY = s.gesture.normalizedY.value;
-	out.gesture.isDismissing = s.gesture.isDismissing.value;
-	out.gesture.isDragging = s.gesture.isDragging.value;
-	out.gesture.direction = s.gesture.direction.value;
-	out.meta = s.meta;
-
-	return out;
-};
-
-const useBuildScreenTransitionState = (
-	descriptor: BaseDescriptor | undefined,
-): BuiltState | undefined => {
-	const key = descriptor?.route?.key;
-	const meta = descriptor?.options?.meta;
-	const route = descriptor?.route;
-
-	return useMemo(() => {
-		if (!key || !route) return undefined;
-
-		const plainRoute = toPlainRoute(route);
-		const plainMeta = meta
-			? (toPlainValue(meta) as Record<string, unknown>)
-			: undefined;
-
-		return {
-			progress: AnimationStore.getAnimation(key, "progress"),
-			closing: AnimationStore.getAnimation(key, "closing"),
-			entering: AnimationStore.getAnimation(key, "entering"),
-			animating: AnimationStore.getAnimation(key, "animating"),
-			gesture: GestureStore.getRouteGestures(key),
-			route: plainRoute,
-			meta: plainMeta,
-			unwrapped: createScreenTransitionState(plainRoute, plainMeta),
-		};
-	}, [key, meta, route]);
-};
-
-const hasTransitionsEnabled = (
-	options: ScreenTransitionConfig | undefined,
-	alwaysOn: boolean,
-) => {
-	if (alwaysOn) return true;
-	return !!(options as NativeStackScreenTransitionConfig)?.enableTransitions;
-};
-
-export function _useScreenAnimation() {
-	const insets = useSafeAreaInsets();
-	const dimensions = useWindowDimensions();
-
-	const { flags, stackProgress: rootStackProgress, routeKeys } = useStack();
-	const transitionsAlwaysOn = flags.TRANSITIONS_ALWAYS_ON;
-
-	const {
-		current: currentDescriptor,
-		next: nextDescriptor,
-		previous: previousDescriptor,
-	} = useKeys();
-
-	const currentAnimation = useBuildScreenTransitionState(currentDescriptor);
-	const nextAnimation = useBuildScreenTransitionState(nextDescriptor);
-	const prevAnimation = useBuildScreenTransitionState(previousDescriptor);
-
-	const currentRouteKey = currentDescriptor?.route?.key;
-	const currentIndex = routeKeys.indexOf(currentRouteKey);
-
-	const sortedSnapPoints = useMemo(() => {
-		const points = currentDescriptor?.options?.snapPoints;
-		return points ? [...points].sort((a, b) => a - b) : [];
-	}, [currentDescriptor?.options?.snapPoints]);
-
-	const nextRouteKey = nextDescriptor?.route?.key;
-	const nextHasTransitions =
-		!!nextRouteKey &&
-		hasTransitionsEnabled(nextDescriptor?.options, transitionsAlwaysOn);
-
-	const screenInterpolatorProps = useDerivedValue<
-		Omit<ScreenInterpolationProps, "bounds">
-	>(() => {
-		"worklet";
-
-		const previous = prevAnimation ? unwrapInto(prevAnimation) : undefined;
-
-		const next =
-			nextAnimation && nextHasTransitions
-				? unwrapInto(nextAnimation)
-				: undefined;
-
-		const current = currentAnimation
-			? unwrapInto(currentAnimation)
-			: DEFAULT_SCREEN_TRANSITION_STATE;
-
-		const { progress, ...helpers } = derivations({
-			previous,
-			current,
-			next,
-		});
-
-		// Compute relative stack progress: total - currentIndex
-		// This gives us the sum of progress values from current screen onwards
-		// Falls back to current progress if index is invalid
-		const stackProgress =
-			currentIndex >= 0 ? rootStackProgress.value - currentIndex : progress;
-
-		const snapIndex = computeSnapIndex(current.progress, sortedSnapPoints);
-
-		return {
-			layouts: { screen: dimensions },
-			insets,
-			previous,
-			current,
-			next,
-			progress,
-			stackProgress,
-			snapIndex,
-			...helpers,
-		};
-	});
-
-	const nextInterpolator = nextDescriptor?.options.screenStyleInterpolator;
-	const currentInterpolator =
-		currentDescriptor?.options.screenStyleInterpolator;
-
-	return {
-		screenInterpolatorProps,
-		nextInterpolator,
-		currentInterpolator,
-	};
-}
-
-export function useScreenAnimation() {
-	const { screenInterpolatorProps } = _useScreenAnimation();
-
-	return useDerivedValue<ScreenInterpolationProps>(() => {
-		const props = screenInterpolatorProps.value;
-		return {
-			...props,
-			bounds: createBounds(props),
-		};
-	});
-}

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

@@ -1,254 +0,0 @@
-/**
- * Gesture System - Core Provider
- *
- * Each screen gets a GestureContext containing:
- * - panGesture: Pan gesture handler for dismiss/snap
- * - scrollConfig: Scroll state for boundary detection
- * - claimedDirections: Which directions this screen handles
- * - childDirectionClaims: Claims registered by descendant screens
- *
- * ScrollView coordination is handled by useScrollRegistry, which finds the
- * gesture owner for the scroll axis and creates appropriate Native gestures.
- */
-
-import { useNavigationState } from "@react-navigation/native";
-import { useEffect, useMemo } from "react";
-import type { GestureType } from "react-native-gesture-handler";
-import type { SharedValue } from "react-native-reanimated";
-import { useSharedValue } from "react-native-reanimated";
-import { useBuildGestures } from "../hooks/gestures/use-build-gestures";
-import { GestureStore, type GestureStoreMap } from "../stores/gesture.store";
-import type { ClaimedDirections, Direction } from "../types/ownership.types";
-import { StackType } from "../types/stack.types";
-import createProvider from "../utils/create-provider";
-import { computeClaimedDirections } from "../utils/gesture/compute-claimed-directions";
-import { validateSnapPoints } from "../utils/gesture/validate-snap-points";
-import { useKeys } from "./screen/keys.provider";
-import { useStackCoreContext } from "./stack/core.provider";
-
-export type ScrollConfig = {
-	x: number;
-	y: number;
-	contentHeight: number;
-	contentWidth: number;
-	layoutHeight: number;
-	layoutWidth: number;
-	isTouched: boolean;
-};
-
-export type DirectionClaim = {
-	routeKey: string;
-	isDismissing: SharedValue<number>;
-} | null;
-
-export type DirectionClaimMap = {
-	vertical: DirectionClaim;
-	"vertical-inverted": DirectionClaim;
-	horizontal: DirectionClaim;
-	"horizontal-inverted": DirectionClaim;
-};
-
-const NO_CLAIMS: DirectionClaimMap = {
-	vertical: null,
-	"vertical-inverted": null,
-	horizontal: null,
-	"horizontal-inverted": null,
-};
-
-const DIRECTIONS: Direction[] = [
-	"vertical",
-	"vertical-inverted",
-	"horizontal",
-	"horizontal-inverted",
-];
-
-/**
- * Registers direction claims on ancestors that this screen shadows.
- * Only registers claims when this screen is the current (topmost) route
- * in its navigator, preventing unfocused screens from blocking gestures.
- */
-function useRegisterDirectionClaims(
-	ancestorContext: GestureContextType | null | undefined,
-	claimedDirections: ClaimedDirections,
-	routeKey: string,
-	isIsolated: boolean,
-	isCurrentRoute: boolean,
-) {
-	useEffect(() => {
-		// Only register claims when this screen is the current route
-		if (!isCurrentRoute || !ancestorContext) {
-			return;
-		}
-
-		const gestureValues = GestureStore.getRouteGestures(routeKey);
-		const isDismissing = gestureValues.isDismissing;
-
-		const claimedAncestors: Array<{
-			ancestor: GestureContextType;
-			directions: Direction[];
-		}> = [];
-
-		let ancestor: GestureContextType | null = ancestorContext;
-		while (ancestor) {
-			if (ancestor.isIsolated !== isIsolated) break;
-
-			const shadowedDirections: Direction[] = [];
-			for (const dir of DIRECTIONS) {
-				if (claimedDirections[dir] && ancestor.claimedDirections?.[dir]) {
-					shadowedDirections.push(dir);
-				}
-			}
-
-			if (shadowedDirections.length > 0) {
-				claimedAncestors.push({ ancestor, directions: shadowedDirections });
-				const newClaims = { ...ancestor.childDirectionClaims.value };
-				for (const dir of shadowedDirections) {
-					newClaims[dir] = { routeKey, isDismissing };
-				}
-				ancestor.childDirectionClaims.value = newClaims;
-			}
-
-			ancestor = ancestor.ancestorContext;
-		}
-
-		return () => {
-			for (const { ancestor, directions } of claimedAncestors) {
-				const currentClaims = ancestor.childDirectionClaims.value;
-				const newClaims = { ...currentClaims };
-				let needsUpdate = false;
-
-				for (const dir of directions) {
-					if (currentClaims[dir]?.routeKey === routeKey) {
-						newClaims[dir] = null;
-						needsUpdate = true;
-					}
-				}
-
-				if (needsUpdate) {
-					ancestor.childDirectionClaims.value = newClaims;
-				}
-			}
-		};
-	}, [
-		ancestorContext,
-		claimedDirections,
-		routeKey,
-		isIsolated,
-		isCurrentRoute,
-	]);
-}
-
-export interface GestureContextType {
-	panGesture: GestureType;
-	panGestureRef: React.MutableRefObject<GestureType | undefined>;
-	scrollConfig: SharedValue<ScrollConfig | null>;
-	gestureAnimationValues: GestureStoreMap;
-	ancestorContext: GestureContextType | null;
-	gestureEnabled: boolean;
-	isIsolated: boolean;
-	claimedDirections: ClaimedDirections;
-	childDirectionClaims: SharedValue<DirectionClaimMap>;
-}
-
-interface ScreenGestureProviderProps {
-	children: React.ReactNode;
-}
-
-export const {
-	ScreenGestureProvider,
-	useScreenGestureContext: useGestureContext,
-} = createProvider("ScreenGesture", { guarded: false })<
-	ScreenGestureProviderProps,
-	GestureContextType
->(({ children }): { value: GestureContextType; children: React.ReactNode } => {
-	const { current } = useKeys();
-	const { flags } = useStackCoreContext();
-	const ancestorContext: GestureContextType | null = useGestureContext();
-	const isIsolated = flags.STACK_TYPE === StackType.COMPONENT;
-	const routeKey = current.route.key;
-
-	const isFirstScreen = useNavigationState((state) => {
-		const index = state.routes.findIndex((route) => route.key === routeKey);
-		return index === 0;
-	});
-
-	const canDismiss = Boolean(
-		isFirstScreen ? false : current.options.gestureEnabled,
-	);
-
-	const { hasSnapPoints } = useMemo(
-		() =>
-			validateSnapPoints({
-				snapPoints: current.options.snapPoints,
-				canDismiss,
-			}),
-		[current.options.snapPoints, canDismiss],
-	);
-
-	const gestureEnabled = canDismiss || hasSnapPoints;
-
-	const claimedDirections = useMemo(
-		() =>
-			computeClaimedDirections(
-				gestureEnabled,
-				current.options.gestureDirection,
-				hasSnapPoints,
-			),
-		[gestureEnabled, current.options.gestureDirection, hasSnapPoints],
-	);
-
-	// Check if this screen is the current (topmost) route in its navigator
-	const isCurrentRoute = useNavigationState(
-		(state) => state.routes[state.index]?.key === routeKey,
-	);
-
-	const scrollConfig = useSharedValue<ScrollConfig | null>(null);
-	const childDirectionClaims = useSharedValue<DirectionClaimMap>(NO_CLAIMS);
-
-	useRegisterDirectionClaims(
-		ancestorContext,
-		claimedDirections,
-		routeKey,
-		isIsolated,
-		isCurrentRoute,
-	);
-
-	const { panGesture, panGestureRef, gestureAnimationValues } =
-		useBuildGestures({
-			scrollConfig,
-			ancestorContext,
-			claimedDirections,
-			childDirectionClaims,
-			isIsolated,
-		});
-
-	const value = useMemo<GestureContextType>(
-		() => ({
-			panGesture,
-			panGestureRef,
-			scrollConfig,
-			gestureAnimationValues,
-			ancestorContext,
-			gestureEnabled,
-			isIsolated,
-			claimedDirections,
-			childDirectionClaims,
-		}),
-		[
-			panGesture,
-			panGestureRef,
-			scrollConfig,
-			gestureAnimationValues,
-			ancestorContext,
-			gestureEnabled,
-			isIsolated,
-			claimedDirections,
-			childDirectionClaims,
-		],
-	);
-
-	return {
-		value,
-		children,
-	};
-});

package/src/shared/providers/screen/keys.provider.tsx

@@ -1,48 +0,0 @@
-import { createContext, useContext, useMemo } from "react";
-import type { BaseStackDescriptor } from "../../types/stack.types";
-
-/**
- * Base descriptor interface - minimal contract for all stack types.
- * This allows blank-stack and native-stack to work with the shared
- * providers without tight coupling to React Navigation.
- */
-export type BaseDescriptor = BaseStackDescriptor;
-
-interface KeysContextType<TDescriptor extends BaseDescriptor = BaseDescriptor> {
-	previous?: TDescriptor;
-	current: TDescriptor;
-	next?: TDescriptor;
-}
-
-const KeysContext = createContext<KeysContextType | undefined>(undefined);
-
-interface KeysProviderProps<TDescriptor extends BaseDescriptor> {
-	children: React.ReactNode;
-	previous?: TDescriptor;
-	current: TDescriptor;
-	next?: TDescriptor;
-}
-
-export function KeysProvider<TDescriptor extends BaseDescriptor>({
-	children,
-	previous,
-	current,
-	next,
-}: KeysProviderProps<TDescriptor>) {
-	const value = useMemo<KeysContextType<TDescriptor>>(
-		() => ({ previous, current, next }),
-		[previous, current, next],
-	);
-
-	return <KeysContext.Provider value={value}>{children}</KeysContext.Provider>;
-}
-
-export function useKeys<
-	TDescriptor extends BaseDescriptor = BaseDescriptor,
->(): KeysContextType<TDescriptor> {
-	const context = useContext(KeysContext);
-	if (context === undefined) {
-		throw new Error("useKeys must be used within a KeysProvider");
-	}
-	return context as KeysContextType<TDescriptor>;
-}

package/src/shared/providers/stack/helpers/active-screens-limit.ts

@@ -1,35 +0,0 @@
-import type {
-	BaseStackDescriptor,
-	BaseStackRoute,
-} from "../../../types/stack.types";
-
-type DescriptorWithDetach = BaseStackDescriptor & {
-	options: { detachPreviousScreen?: boolean };
-};
-
-export function calculateActiveScreensLimit(
-	routes: BaseStackRoute[],
-	descriptors: Record<string, DescriptorWithDetach>,
-): number {
-	if (routes.length === 0) {
-		return 1;
-	}
-
-	let limit = 1;
-
-	for (let i = routes.length - 1; i >= 0; i--) {
-		const route = routes[i];
-
-		const shouldKeepPrevious =
-			descriptors?.[route.key]?.options?.detachPreviousScreen !== true;
-
-		if (shouldKeepPrevious) {
-			limit++;
-			continue;
-		}
-
-		break;
-	}
-
-	return Math.min(limit, routes.length);
-}

package/src/shared/providers/stack/helpers/use-local-routes.tsx

@@ -1,133 +0,0 @@
-import { StackActions } from "@react-navigation/native";
-import { useLayoutEffect, useState } from "react";
-import { useClosingRouteKeys } from "../../../hooks/navigation/use-closing-route-keys";
-import { usePrevious } from "../../../hooks/navigation/use-previous";
-import useStableCallback from "../../../hooks/use-stable-callback";
-import type {
-	BaseStackDescriptor,
-	BaseStackNavigation,
-	BaseStackRoute,
-} from "../../../types/stack.types";
-import { alignRoutesWithLatest } from "../../../utils/navigation/align-routes-with-latest";
-import { areDescriptorsEqual } from "../../../utils/navigation/are-descriptors-equal";
-import { haveSameRouteKeys } from "../../../utils/navigation/have-same-route-keys";
-import { routesAreIdentical } from "../../../utils/navigation/routes-are-identical";
-import { syncRoutesWithRemoved } from "../../../utils/navigation/sync-routes-with-removed";
-import type { ManagedStackProps } from "../managed.provider";
-
-export const useLocalRoutes = <
-	TDescriptor extends BaseStackDescriptor,
-	TNavigation extends BaseStackNavigation,
->(
-	props: ManagedStackProps<TDescriptor, TNavigation>,
-) => {
-	type TRoute = TDescriptor["route"];
-	type TDescriptorMap = Record<string, TDescriptor>;
-
-	const previousRoutes = usePrevious(props.state.routes) ?? [];
-	const closingRouteKeys = useClosingRouteKeys();
-
-	const [localState, setLocalState] = useState(() => ({
-		routes: props.state.routes as TRoute[],
-		descriptors: props.descriptors as TDescriptorMap,
-	}));
-
-	useLayoutEffect(() => {
-		const nextRoutesSnapshot = props.state.routes;
-		const previousRoutesSnapshot = previousRoutes;
-
-		setLocalState((current) => {
-			const routeKeysUnchanged = haveSameRouteKeys(
-				previousRoutesSnapshot,
-				nextRoutesSnapshot,
-			);
-
-			let derivedRoutes: TRoute[];
-			let derivedDescriptors: TDescriptorMap;
-
-			if (routeKeysUnchanged) {
-				const result = alignRoutesWithLatest(
-					current.routes,
-					current.descriptors,
-					nextRoutesSnapshot,
-					props.descriptors,
-				);
-
-				derivedRoutes = result.routes as TRoute[];
-				derivedDescriptors = result.descriptors as TDescriptorMap;
-			} else {
-				const fallbackRoutes =
-					previousRoutesSnapshot.length > 0
-						? previousRoutesSnapshot
-						: current.routes;
-
-				const result = syncRoutesWithRemoved({
-					prevRoutes: fallbackRoutes,
-					prevDescriptors: current.descriptors,
-					nextRoutes: nextRoutesSnapshot,
-					nextDescriptors: props.descriptors,
-					closingRouteKeys,
-				});
-
-				derivedRoutes = result.routes as TRoute[];
-				derivedDescriptors = result.descriptors as TDescriptorMap;
-			}
-
-			const routesChanged = !routesAreIdentical(current.routes, derivedRoutes);
-			const descriptorsChanged = !areDescriptorsEqual(
-				current.descriptors,
-				derivedDescriptors,
-			);
-
-			if (!routesChanged && !descriptorsChanged) {
-				return current;
-			}
-
-			return {
-				routes: routesChanged ? derivedRoutes : current.routes,
-				descriptors: descriptorsChanged
-					? derivedDescriptors
-					: current.descriptors,
-			};
-		});
-	}, [props.state.routes, props.descriptors, previousRoutes, closingRouteKeys]);
-
-	const handleCloseRoute = useStableCallback(
-		({ route }: { route: BaseStackRoute }) => {
-			if (props.state.routes.some((r) => r.key === route.key)) {
-				props.navigation.dispatch({
-					...StackActions.pop(),
-					source: route.key,
-					target: props.state.key,
-				});
-				return;
-			}
-
-			closingRouteKeys.remove(route.key);
-
-			setLocalState((current) => {
-				if (!current.routes.some((candidate) => candidate.key === route.key)) {
-					return current;
-				}
-
-				const nextRoutes = current.routes.filter(
-					(candidate) => candidate.key !== route.key,
-				);
-
-				const nextDescriptors = { ...current.descriptors };
-				delete nextDescriptors[route.key];
-
-				return {
-					routes: nextRoutes,
-					descriptors: nextDescriptors,
-				};
-			});
-		},
-	);
-
-	return {
-		state: localState,
-		handleCloseRoute,
-		closingRouteKeys,
-	};
-};