react-native-screen-transitions 4.0.0-alpha.9 → 4.1.0-alpha.0

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

@@ -1,17 +1,11 @@
 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 { 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";
 
-/**
- * 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 {
@@ -22,7 +16,7 @@ export interface DescriptorsContextValue {
 
 export type DescriptorDerivationsContextValue = DescriptorDerivations;
 
-interface DescriptorStoreValue extends DescriptorsContextValue {
+interface DescriptorStoreValue {
 	descriptors: DescriptorsContextValue;
 	derivations: DescriptorDerivationsContextValue;
 	options: BaseDescriptor["options"];
@@ -30,106 +24,56 @@ interface DescriptorStoreValue extends DescriptorsContextValue {
 
 type DescriptorsProviderProps = {
 	children: ReactNode;
-	previous?: BaseDescriptor;
-	current?: BaseDescriptor;
-	next?: BaseDescriptor;
-	routeKey?: string;
+	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,
-			});
+} = createProvider("Descriptors", {
+	global: true,
+})<DescriptorsProviderProps, DescriptorStoreValue>(({ routeKey, children }) => {
+	const scene = useBlankStackStore((s) => s.scenesByKey[routeKey]);
 
-			return () => {
-				screenTopology.unregister(derivations.currentScreenKey);
-			};
-		}, [derivations.currentScreenKey, parentScreenKey]);
+	const currentDescriptor = scene.descriptor;
+	const previousDescriptor = scene.previousDescriptor;
+	const nextDescriptor = scene.nextDescriptor;
+	const options = scene.descriptor.options;
 
-		useLayoutEffect(() => {
-			if (!isActiveScreen || !parentScreenKey) {
-				return;
-			}
+	const descriptors = useMemo(() => {
+		return {
+			previous: previousDescriptor,
+			current: currentDescriptor,
+			next: nextDescriptor,
+		};
+	}, [previousDescriptor, currentDescriptor, nextDescriptor]);
 
-			return screenTopology.activate({
-				screenKey: derivations.currentScreenKey,
-				parentScreenKey,
-			});
-		}, [isActiveScreen, derivations.currentScreenKey, parentScreenKey]);
+	const derivations = useMemo(() => {
+		return deriveDescriptorDerivations({
+			previous: previousDescriptor,
+			current: currentDescriptor,
+			next: nextDescriptor,
+		});
+	}, [previousDescriptor, currentDescriptor, nextDescriptor]);
 
+	const value = useMemo(() => {
 		return {
-			key: derivations.currentScreenKey,
-			value: {
-				previous: resolvedPrevious,
-				current: resolvedCurrent,
-				next: resolvedNext,
-				descriptors,
-				derivations,
-				options: resolvedCurrent.options,
-			},
-			children,
+			descriptors,
+			derivations,
+			options,
 		};
-	},
-);
+	}, [descriptors, derivations, options]);
+
+	return {
+		key: routeKey,
+		value,
+		children,
+	};
+});
 
-export { DescriptorsProvider, useDescriptorsStore };
+export {
+	DescriptorsProvider,
+	useDescriptorsStore,
+	useOptionalDescriptorsStore,
+};

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

@@ -2,4 +2,5 @@ export {
 	type BaseDescriptor,
 	DescriptorsProvider,
 	useDescriptorsStore,
+	useOptionalDescriptorsStore,
 } from "./descriptors.provider";

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

@@ -1,19 +1,17 @@
-import { Fragment, useMemo } from "react";
+import { 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 { useRegisterGestureOwnership } from "./ownership/use-register-gesture-ownership";
 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,
+	NO_GESTURE_OWNERS,
 	type ScreenGestureSource,
 } from "./types";
 
@@ -21,15 +19,9 @@ 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>;
+})<ScreenGestureProviderProps, GestureContextType>;
 
 export const {
 	ScreenGestureProvider,
@@ -40,28 +32,15 @@ export const {
 		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 gestureConfig = useScreenGestureConfig();
 		const scrollState = ScrollStore.getValue(currentScreenKey, "coordination");
-		const childDirectionClaims =
-			useSharedValue<DirectionClaimMap>(NO_DIRECTION_CLAIMS);
+		const gestureOwners = useSharedValue({ ...NO_GESTURE_OWNERS });
 		const gestureCompositionOwner =
 			useSharedValue<GestureCompositionOwner>(null);
 		const panGesture = useBuildPanGesture({
 			scrollState,
 			gestureConfig,
-			childDirectionClaims,
+			gestureOwners,
 			gestureCompositionOwner,
 		});
 		const pinchGesture = useBuildPinchGesture({
@@ -79,8 +58,6 @@ export const {
 				panGesture,
 				pinchGesture,
 				scrollState,
-				claimedDirections: gestureConfig.participation.claimedDirections,
-				childDirectionClaims,
 			}),
 			[
 				currentScreenKey,
@@ -88,36 +65,18 @@ export const {
 				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],
-		);
+		useRegisterGestureOwnership({
+			claimedDirections: gestureConfig.participation.claimedDirections,
+			owners: gestureOwners,
+			source,
+		});
 
 		return {
 			key: currentScreenKey,
-			value,
-			children: content,
+			value: source,
+			children,
 		};
 	},
 );

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

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

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

@@ -1,10 +1,7 @@
-import {
-	type ChainTarget,
-	resolveChainTarget,
-} from "../../../../utils/resolve-chain-target";
+import { useResolvedTransitionKey } from "../../topology";
 import { useOptionalScreenGestureStore } from "../gestures.provider";
 
-export type ScreenGestureTarget = ChainTarget;
+export type ScreenGestureTarget = { depth: number };
 
 /**
  * Returns a screen navigation pan gesture.
@@ -20,13 +17,16 @@ export type ScreenGestureTarget = ChainTarget;
  * ```
  */
 export const useScreenGesture = (target?: ScreenGestureTarget) => {
-	const ctx = useOptionalScreenGestureStore();
-
-	return (
-		resolveChainTarget({
-			target,
-			self: ctx,
-			ancestors: ctx?.ancestorGestures ?? [],
-		})?.panGesture ?? null
+	const localGesture = useOptionalScreenGestureStore();
+	const usesLocalStore = target === undefined || target.depth === 0;
+	const screenKey = useResolvedTransitionKey(
+		localGesture?.routeKey ?? null,
+		target,
+	);
+	const keyedGesture = useOptionalScreenGestureStore(
+		usesLocalStore ? null : screenKey,
+		(store) => store.panGesture,
 	);
+
+	return usesLocalStore ? (localGesture?.panGesture ?? null) : keyedGesture;
 };

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

@@ -4,8 +4,6 @@ export {
 	useScreenGestureStore,
 } from "./gestures.provider";
 export type {
-	DirectionClaim,
-	DirectionClaimMap,
 	GestureContextType,
 	ScrollGestureAxis,
 	ScrollGestureAxisState,

package/src/providers/screen/gestures/ownership/gesture-ownership-coordinator.ts

@@ -0,0 +1,252 @@
+import type { SharedValue } from "react-native-reanimated";
+import type {
+	ClaimedDirections,
+	Direction,
+} from "../../../../types/ownership.types";
+import { DIRECTIONS } from "../../../../types/ownership.types";
+import { screenTopology } from "../../topology";
+import type { ScreenTopology } from "../../topology/types";
+import type {
+	GestureOwnerMap,
+	PanGesture,
+	PinchGesture,
+	ScreenGestureSource,
+	ScrollGestureAxis,
+	ScrollGestureState,
+} from "../types";
+
+export type GestureOwnershipRegistration = {
+	screenKey: string;
+	source: ScreenGestureSource;
+	claimedDirections: ClaimedDirections;
+	effectiveClaimedDirections: ClaimedDirections;
+	owners: SharedValue<GestureOwnerMap>;
+};
+
+export type ScrollGestureCoordination = {
+	panGestures: PanGesture[];
+	pinchGestures: PinchGesture[];
+	scrollStates: SharedValue<ScrollGestureState | null>[];
+	ownerRouteKeys: string[];
+};
+
+export type GestureOwnershipCoordinator = {
+	register(registration: GestureOwnershipRegistration): void;
+	unregister(screenKey: string): void;
+	getScrollCoordination(
+		screenKey: string,
+		axis: ScrollGestureAxis,
+	): ScrollGestureCoordination;
+	subscribe(screenKey: string, listener: () => void): () => void;
+};
+
+const EMPTY_SCROLL_COORDINATION: ScrollGestureCoordination = {
+	panGestures: [],
+	pinchGestures: [],
+	scrollStates: [],
+	ownerRouteKeys: [],
+};
+
+const createEmptyOwners = (): GestureOwnerMap => ({
+	vertical: null,
+	"vertical-inverted": null,
+	horizontal: null,
+	"horizontal-inverted": null,
+});
+
+const areOwnersEqual = (left: GestureOwnerMap, right: GestureOwnerMap) =>
+	DIRECTIONS.every((direction) => left[direction] === right[direction]);
+
+const areArraysEqual = <T>(left: readonly T[], right: readonly T[]) =>
+	left.length === right.length &&
+	left.every((value, index) => value === right[index]);
+
+const areScrollCoordinationsEqual = (
+	left: ScrollGestureCoordination,
+	right: ScrollGestureCoordination,
+) =>
+	areArraysEqual(left.panGestures, right.panGestures) &&
+	areArraysEqual(left.pinchGestures, right.pinchGestures) &&
+	areArraysEqual(left.scrollStates, right.scrollStates) &&
+	areArraysEqual(left.ownerRouteKeys, right.ownerRouteKeys);
+
+const getAxisDirections = (
+	axis: ScrollGestureAxis,
+): readonly [Direction, Direction] =>
+	axis === "vertical"
+		? ["vertical", "vertical-inverted"]
+		: ["horizontal", "horizontal-inverted"];
+
+export const createGestureOwnershipCoordinator = (
+	topology: ScreenTopology,
+): GestureOwnershipCoordinator => {
+	const registrations = new Map<string, GestureOwnershipRegistration>();
+	const scrollCache = new Map<
+		string,
+		Record<ScrollGestureAxis, ScrollGestureCoordination>
+	>();
+	const listenersByScreenKey = new Map<string, Set<() => void>>();
+
+	const getNearestAncestorOwner = (screenKey: string, direction: Direction) => {
+		const visited = new Set<string>();
+		let candidate: string | null = screenKey;
+
+		while (candidate && !visited.has(candidate)) {
+			visited.add(candidate);
+			if (registrations.get(candidate)?.claimedDirections[direction]) {
+				return candidate;
+			}
+			candidate = topology.getRelationships(candidate).parentScreenKey;
+		}
+
+		return null;
+	};
+
+	const getDeepestActiveOwner = (screenKey: string, direction: Direction) => {
+		const visited = new Set<string>();
+		let candidate: string | null = screenKey;
+		let owner: string | null = null;
+		let isOrigin = true;
+
+		while (candidate && !visited.has(candidate)) {
+			visited.add(candidate);
+			const registration = registrations.get(candidate);
+			const claims = isOrigin
+				? registration?.claimedDirections
+				: registration?.effectiveClaimedDirections;
+			if (claims?.[direction]) owner = candidate;
+
+			candidate = topology.getRelationships(candidate).activeChildScreenKey;
+			isOrigin = false;
+		}
+
+		return owner;
+	};
+
+	const resolveOwners = (screenKey: string): GestureOwnerMap => {
+		const owners = createEmptyOwners();
+		for (const direction of DIRECTIONS) {
+			owners[direction] =
+				getDeepestActiveOwner(screenKey, direction) ??
+				getNearestAncestorOwner(screenKey, direction);
+		}
+		return owners;
+	};
+
+	const resolveScrollCoordination = (
+		screenKey: string,
+		axis: ScrollGestureAxis,
+	): ScrollGestureCoordination => {
+		const ownerKeys: string[] = [];
+		for (const direction of getAxisDirections(axis)) {
+			const ownerKey = getNearestAncestorOwner(screenKey, direction);
+			if (ownerKey && !ownerKeys.includes(ownerKey)) ownerKeys.push(ownerKey);
+		}
+
+		const panGestures: PanGesture[] = [];
+		const scrollStates: SharedValue<ScrollGestureState | null>[] = [];
+		for (const ownerKey of ownerKeys) {
+			const source = registrations.get(ownerKey)?.source;
+			if (!source) continue;
+			panGestures.push(source.panGesture);
+			scrollStates.push(source.scrollState);
+		}
+
+		const pinchGestures: PinchGesture[] = [];
+		const visited = new Set<string>();
+		let candidate: string | null = screenKey;
+		while (candidate && !visited.has(candidate)) {
+			visited.add(candidate);
+			const pinchGesture = registrations.get(candidate)?.source.pinchGesture;
+			if (pinchGesture && !pinchGestures.includes(pinchGesture)) {
+				pinchGestures.push(pinchGesture);
+			}
+			candidate = topology.getRelationships(candidate).parentScreenKey;
+		}
+
+		return {
+			panGestures,
+			pinchGestures,
+			scrollStates,
+			ownerRouteKeys: ownerKeys,
+		};
+	};
+
+	const notify = (screenKey: string) => {
+		for (const listener of listenersByScreenKey.get(screenKey) ?? []) {
+			listener();
+		}
+	};
+
+	const recompute = () => {
+		for (const [screenKey, registration] of registrations) {
+			const nextOwners = resolveOwners(screenKey);
+			if (!areOwnersEqual(registration.owners.get(), nextOwners)) {
+				registration.owners.set(nextOwners);
+			}
+
+			const previousScroll = scrollCache.get(screenKey);
+			const nextScroll = {
+				vertical: resolveScrollCoordination(screenKey, "vertical"),
+				horizontal: resolveScrollCoordination(screenKey, "horizontal"),
+			};
+			const vertical =
+				previousScroll &&
+				areScrollCoordinationsEqual(
+					previousScroll.vertical,
+					nextScroll.vertical,
+				)
+					? previousScroll.vertical
+					: nextScroll.vertical;
+			const horizontal =
+				previousScroll &&
+				areScrollCoordinationsEqual(
+					previousScroll.horizontal,
+					nextScroll.horizontal,
+				)
+					? previousScroll.horizontal
+					: nextScroll.horizontal;
+			if (
+				!previousScroll ||
+				vertical !== previousScroll.vertical ||
+				horizontal !== previousScroll.horizontal
+			) {
+				scrollCache.set(screenKey, { vertical, horizontal });
+				notify(screenKey);
+			}
+		}
+	};
+
+	topology.subscribeResolution(recompute);
+
+	return {
+		register: (registration) => {
+			registrations.set(registration.screenKey, registration);
+			recompute();
+		},
+		unregister: (screenKey) => {
+			if (!registrations.has(screenKey)) return;
+
+			registrations.delete(screenKey);
+			scrollCache.delete(screenKey);
+			recompute();
+			notify(screenKey);
+		},
+		getScrollCoordination: (screenKey, axis) =>
+			scrollCache.get(screenKey)?.[axis] ?? EMPTY_SCROLL_COORDINATION,
+		subscribe: (screenKey, listener) => {
+			const listeners =
+				listenersByScreenKey.get(screenKey) ?? new Set<() => void>();
+			listeners.add(listener);
+			listenersByScreenKey.set(screenKey, listeners);
+
+			return () => {
+				listeners.delete(listener);
+				if (listeners.size === 0) listenersByScreenKey.delete(screenKey);
+			};
+		},
+	};
+};
+
+export const gestureOwnershipCoordinator =
+	createGestureOwnershipCoordinator(screenTopology);

package/src/providers/screen/gestures/ownership/use-gesture-scroll-coordination.ts

@@ -0,0 +1,23 @@
+import { useCallback, useSyncExternalStore } from "react";
+import type { ScrollGestureAxis } from "../types";
+import { gestureOwnershipCoordinator } from "./gesture-ownership-coordinator";
+
+export const useGestureScrollCoordination = (
+	screenKey: string | null,
+	axis: ScrollGestureAxis,
+) => {
+	const subscribe = useCallback(
+		(listener: () => void) =>
+			screenKey
+				? gestureOwnershipCoordinator.subscribe(screenKey, listener)
+				: () => {},
+		[screenKey],
+	);
+	const getSnapshot = useCallback(
+		() =>
+			gestureOwnershipCoordinator.getScrollCoordination(screenKey ?? "", axis),
+		[axis, screenKey],
+	);
+
+	return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+};