react-native-screen-transitions 3.3.0-rc.3 → 3.4.0-alpha.0

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

@@ -1,227 +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 { 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 }) => {
-	const { current } = useKeys();
-	const { flags } = useStackCoreContext();
-	const ancestorContext = useGestureContext();
-
-	const hasGestures = current.options.gestureEnabled === true;
-	const isIsolated = flags.STACK_TYPE === StackType.COMPONENT;
-
-	const hasSnapPoints =
-		Array.isArray(current.options.snapPoints) &&
-		current.options.snapPoints.length > 0;
-
-	const claimedDirections = useMemo(
-		() =>
-			computeClaimedDirections(
-				hasGestures,
-				current.options.gestureDirection,
-				hasSnapPoints,
-			),
-		[hasGestures, current.options.gestureDirection, hasSnapPoints],
-	);
-
-	const routeKey = current.route.key;
-
-	// 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: GestureContextType = {
-		panGesture,
-		panGestureRef,
-		scrollConfig,
-		gestureAnimationValues,
-		ancestorContext,
-		gestureEnabled: hasGestures,
-		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,
-	};
-};

package/src/shared/stores/bounds.store.ts

@@ -1,257 +0,0 @@
-import {
-	type MeasuredDimensions,
-	makeMutable,
-	type StyleProps,
-} from "react-native-reanimated";
-
-type TagID = string;
-type ScreenKey = string;
-
-export type Snapshot = {
-	bounds: MeasuredDimensions;
-	styles: StyleProps;
-};
-
-type ScreenIdentifier = {
-	screenKey: ScreenKey;
-	ancestorKeys?: ScreenKey[];
-};
-
-type TagLink = {
-	source: ScreenIdentifier & Snapshot;
-	destination: (ScreenIdentifier & Snapshot) | null;
-};
-
-type TagState = {
-	snapshots: Record<ScreenKey, Snapshot & { ancestorKeys?: ScreenKey[] }>;
-	linkStack: TagLink[];
-};
-
-const registry = makeMutable<Record<TagID, TagState>>({});
-
-function registerSnapshot(
-	tag: TagID,
-	screenKey: ScreenKey,
-	bounds: MeasuredDimensions,
-	styles: StyleProps = {},
-	ancestorKeys?: ScreenKey[],
-) {
-	"worklet";
-	registry.modify((state: any) => {
-		"worklet";
-		if (!state[tag]) {
-			state[tag] = { snapshots: {}, linkStack: [] };
-		}
-		state[tag].snapshots[screenKey] = { bounds, styles, ancestorKeys };
-		return state;
-	});
-}
-
-function setLinkSource(
-	tag: TagID,
-	screenKey: ScreenKey,
-	bounds: MeasuredDimensions,
-	styles: StyleProps = {},
-	ancestorKeys?: ScreenKey[],
-) {
-	"worklet";
-	registry.modify((state: any) => {
-		"worklet";
-		if (!state[tag]) state[tag] = { snapshots: {}, linkStack: [] };
-
-		state[tag].linkStack.push({
-			source: { screenKey, ancestorKeys, bounds, styles },
-			destination: null,
-		});
-		return state;
-	});
-}
-
-function updateLinkSource(
-	tag: TagID,
-	screenKey: ScreenKey,
-	bounds: MeasuredDimensions,
-	styles: StyleProps = {},
-	ancestorKeys?: ScreenKey[],
-) {
-	"worklet";
-	registry.modify((state: any) => {
-		"worklet";
-		const stack = state[tag]?.linkStack;
-		if (!stack || stack.length === 0) return state;
-
-		let targetIndex = -1;
-
-		// Prefer the most recent completed link first.
-		// NOTE: matchesScreenKey is inlined here to avoid a Reanimated
-		// workletization crash caused by nested worklet function calls
-		// inside registry.modify callbacks.
-		for (let i = stack.length - 1; i >= 0; i--) {
-			const link = stack[i];
-			const src = link.source;
-			const srcMatches =
-				src &&
-				(src.screenKey === screenKey ||
-					(src.ancestorKeys?.includes(screenKey) ?? false));
-			if (link.destination && srcMatches) {
-				targetIndex = i;
-				break;
-			}
-		}
-
-		// Fallback to pending links when no completed link matches.
-		if (targetIndex === -1) {
-			for (let i = stack.length - 1; i >= 0; i--) {
-				const src = stack[i].source;
-				if (
-					src &&
-					(src.screenKey === screenKey ||
-						(src.ancestorKeys?.includes(screenKey) ?? false))
-				) {
-					targetIndex = i;
-					break;
-				}
-			}
-		}
-
-		if (targetIndex !== -1) {
-			stack[targetIndex].source = { screenKey, ancestorKeys, bounds, styles };
-		}
-
-		return state;
-	});
-}
-
-function setLinkDestination(
-	tag: TagID,
-	screenKey: ScreenKey,
-	bounds: MeasuredDimensions,
-	styles: StyleProps = {},
-	ancestorKeys?: ScreenKey[],
-) {
-	"worklet";
-	registry.modify((state: any) => {
-		"worklet";
-		const stack = state[tag]?.linkStack;
-		if (!stack || stack.length === 0) return state;
-
-		// Find the topmost link without a destination
-		for (let i = stack.length - 1; i >= 0; i--) {
-			if (stack[i].destination === null) {
-				stack[i].destination = { screenKey, ancestorKeys, bounds, styles };
-				break;
-			}
-		}
-		return state;
-	});
-}
-
-/**
- * Helper to check if a screen identifier matches a given key.
- * Checks both direct screenKey match and ancestor chain.
- */
-function matchesScreenKey(
-	identifier: ScreenIdentifier | null | undefined,
-	key: ScreenKey,
-): boolean {
-	"worklet";
-	if (!identifier) return false;
-
-	// Direct match
-	if (identifier.screenKey === key) return true;
-
-	// Check ancestor chain
-	return identifier.ancestorKeys?.includes(key) ?? false;
-}
-
-/**
- * Get snapshot by tag and optional key.
- * If key is provided, supports ancestor matching - if the key matches any ancestor
- * of a stored snapshot, that snapshot will be returned.
- * If key is omitted, returns the most recently registered snapshot.
- */
-function getSnapshot(tag: TagID, key: ScreenKey): Snapshot | null {
-	"worklet";
-	const tagState = registry.value[tag];
-	if (!tagState) return null;
-
-	// Direct match in occurrences
-	if (tagState.snapshots[key]) {
-		const snap = tagState.snapshots[key];
-		return { bounds: snap.bounds, styles: snap.styles };
-	}
-
-	// Ancestor match
-	for (const screenKey in tagState.snapshots) {
-		const snap = tagState.snapshots[screenKey];
-		if (snap.ancestorKeys?.includes(key)) {
-			return { bounds: snap.bounds, styles: snap.styles };
-		}
-	}
-
-	return null;
-}
-
-function getActiveLink(tag: TagID, screenKey?: ScreenKey): TagLink | null {
-	"worklet";
-	const stack = registry.value[tag]?.linkStack;
-
-	if (!stack || stack.length === 0) {
-		return null;
-	}
-
-	// If screenKey provided, find link involving that screen
-	if (screenKey) {
-		for (let i = stack.length - 1; i >= 0; i--) {
-			const link = stack[i];
-			if (!link.destination) continue;
-
-			const isSource = matchesScreenKey(link.source, screenKey);
-			const isDestination = matchesScreenKey(link.destination, screenKey);
-
-			if (isSource || isDestination) {
-				// If I match the source, I'm closing (going back to where I came from)
-				return link;
-			}
-		}
-		return null;
-	}
-
-	const lastLink = stack[stack.length - 1];
-	return lastLink ? lastLink : null;
-}
-
-/**
- * Clear all snapshots and links for a screen across all tags.
- * Called when a screen unmounts.
- */
-function clear(screenKey: ScreenKey) {
-	"worklet";
-	registry.modify((state: any) => {
-		"worklet";
-		for (const tag in state) {
-			// Remove snapshot
-			if (state[tag].snapshots[screenKey]) {
-				delete state[tag].snapshots[screenKey];
-			}
-
-			// Remove links involving this screen
-			state[tag].linkStack = state[tag].linkStack.filter((link: TagLink) => {
-				const sourceMatches = matchesScreenKey(link.source, screenKey);
-				const destMatches = matchesScreenKey(link.destination, screenKey);
-				return !sourceMatches && !destMatches;
-			});
-		}
-		return state;
-	});
-}
-
-export const BoundStore = {
-	registerSnapshot,
-	setLinkSource,
-	setLinkDestination,
-	updateLinkSource,
-	getActiveLink,
-	getSnapshot,
-	clear,
-};