react-native-screen-transitions 4.0.0-alpha.7 → 4.0.0-alpha.9

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

@@ -1,11 +1,12 @@
-import { useMemo } from "react";
+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 { useWalkUpAndRegisterShadowingClaims } from "./ownership/use-walk-up-and-register-shadowing-claims";
+import { GestureOwnershipBridge } from "./ownership/gesture-ownership-bridge";
 import { useBuildPanGesture } from "./pan/use-build-pan-gesture";
 import { useBuildPinchGesture } from "./pinch/use-build-pinch-gesture";
 import {
@@ -13,89 +14,110 @@ import {
 	type GestureCompositionOwner,
 	type GestureContextType,
 	NO_DIRECTION_CLAIMS,
+	type ScreenGestureSource,
 } from "./types";
 
 interface ScreenGestureProviderProps {
 	children: React.ReactNode;
 }
 
-export const { ScreenGestureProvider, useScreenGestureStore: useGestureStore } =
-	createProvider("ScreenGesture", { guarded: false })<
-		ScreenGestureProviderProps,
-		GestureContextType
-	>(
-		(
-			{ children },
-			{ useParentStore },
-		): { value: GestureContextType; children: React.ReactNode } => {
-			const gestureContext = useParentStore();
-			const gestureConfig = useScreenGestureConfig();
-			const currentScreenKey = useDescriptorsStore(
-				(store) => store.derivations.currentScreenKey,
-			);
+type ScreenGestureStoreValue = GestureContextType & {
+	relationshipGestureSources: readonly ScreenGestureSource[];
+};
 
-			const scrollState = ScrollStore.getValue(
-				currentScreenKey,
-				"coordination",
-			);
-
-			// Ancestors read this before activating. If a nested screen claims the same
-			// direction, it writes here so the ancestor can fail and let it take priority.
-			const childDirectionClaims =
-				useSharedValue<DirectionClaimMap>(NO_DIRECTION_CLAIMS);
+const EMPTY_GESTURE_SOURCES: readonly ScreenGestureSource[] = [];
 
-			// The first gesture to activate owns navigation release. Other gestures may
-			// still join as companion trackers during the same simultaneous composition.
-			const gestureCompositionOwner =
-				useSharedValue<GestureCompositionOwner>(null);
+const createScreenGestureProvider = createProvider("ScreenGesture", {
+	global: true,
+})<ScreenGestureProviderProps, ScreenGestureStoreValue>;
 
-			const panGesture = useBuildPanGesture({
+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,
-				gestureConfig,
+				claimedDirections: gestureConfig.participation.claimedDirections,
 				childDirectionClaims,
-				gestureCompositionOwner,
-			});
-
-			const pinchGesture = useBuildPinchGesture({
-				gestureConfig,
-				gestureCompositionOwner,
-			});
-
-			const detectorGesture = useMemo(
-				() => Gesture.Simultaneous(panGesture, pinchGesture),
-				[panGesture, pinchGesture],
-			);
-
-			const value = useMemo<GestureContextType>(
-				() => ({
-					routeKey: currentScreenKey,
-					detectorGesture,
-					panGesture,
-					pinchGesture,
-					scrollState,
-					gestureContext,
-					claimedDirections: gestureConfig.participation.claimedDirections,
-					childDirectionClaims,
-				}),
-				[
-					currentScreenKey,
-					detectorGesture,
-					panGesture,
-					pinchGesture,
-					scrollState,
-					gestureContext,
-					gestureConfig.participation.claimedDirections,
-					childDirectionClaims,
-				],
-			);
-
-			useWalkUpAndRegisterShadowingClaims(
+			}),
+			[
+				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 {
-				value,
-				children,
-			};
-		},
-	);
+		return {
+			key: currentScreenKey,
+			value,
+			children: content,
+		};
+	},
+);

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

@@ -1,31 +1,22 @@
-import { usePreventRemoveContext } from "@react-navigation/native";
 import { useMemo } from "react";
 import { useDescriptorsStore } from "../../descriptors";
-import { useGestureStore } from "../gestures.provider";
 import { resolveScreenGestureConfig } from "../shared/policy";
-import type { ScreenGestureConfig } from "../types";
+import type { ScreenGestureConfig, ScreenGestureSource } from "../types";
 
-export function useScreenGestureConfig(): ScreenGestureConfig {
-	const gestureContext = useGestureStore();
+export function useScreenGestureConfig(
+	ancestorGestures: readonly ScreenGestureSource[],
+): ScreenGestureConfig {
 	const options = useDescriptorsStore((store) => store.options);
 	const isFirstKey = useDescriptorsStore(
 		(store) => store.derivations.isFirstKey,
 	);
-	const currentScreenKey = useDescriptorsStore(
-		(store) => store.derivations.currentScreenKey,
-	);
-	const { preventedRoutes } = usePreventRemoveContext();
-	const isRemovePrevented =
-		preventedRoutes[currentScreenKey]?.preventRemove === true;
-
 	return useMemo(
 		() =>
 			resolveScreenGestureConfig({
 				options,
 				isFirstKey,
-				gestureContext,
-				isRemovePrevented,
+				ancestorGestures,
 			}),
-		[isFirstKey, options, gestureContext, isRemovePrevented],
+		[isFirstKey, options, ancestorGestures],
 	);
 }

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

@@ -2,8 +2,7 @@ import {
 	type ChainTarget,
 	resolveChainTarget,
 } from "../../../../utils/resolve-chain-target";
-import { useGestureStore } from "../gestures.provider";
-import { walkGestureAncestors } from "../shared/ancestors";
+import { useOptionalScreenGestureStore } from "../gestures.provider";
 
 export type ScreenGestureTarget = ChainTarget;
 
@@ -21,13 +20,13 @@ export type ScreenGestureTarget = ChainTarget;
  * ```
  */
 export const useScreenGesture = (target?: ScreenGestureTarget) => {
-	const ctx = useGestureStore();
+	const ctx = useOptionalScreenGestureStore();
 
 	return (
 		resolveChainTarget({
 			target,
 			self: ctx,
-			ancestors: walkGestureAncestors(ctx?.gestureContext),
+			ancestors: ctx?.ancestorGestures ?? [],
 		})?.panGesture ?? null
 	);
 };

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

@@ -1,6 +1,7 @@
 export {
 	ScreenGestureProvider,
-	useGestureStore,
+	useOptionalScreenGestureStore,
+	useScreenGestureStore,
 } from "./gestures.provider";
 export type {
 	DirectionClaim,

package/src/providers/screen/gestures/ownership/{use-walk-up-and-register-shadowing-claims.ts → gesture-ownership-bridge.tsx}

@@ -11,14 +11,13 @@ import {
 	useDescriptorsStore,
 } from "../../../screen/descriptors";
 import { useBlankStackStore } from "../../../stack/blank-stack.provider";
-import { useGestureStore } from "../gestures.provider";
-import { walkGestureAncestors } from "../shared/ancestors";
+import { useScreenGestureStore } from "../gestures.provider";
 import { resolveScreenGestureConfig } from "../shared/policy";
-import type { GestureContextType } from "../types";
+import type { ScreenGestureSource } from "../types";
 import { resolveShadowingClaimDirections } from "./shadowing-claims";
 
 type ShadowedAncestor = {
-	ancestor: GestureContextType;
+	ancestor: ScreenGestureSource;
 	directions: Direction[];
 };
 
@@ -30,9 +29,9 @@ const findShadowedDirections = (
 ) => {
 	const shadowedDirections: Direction[] = [];
 
-	for (const dir of DIRECTIONS) {
-		if (claimedDirections[dir] && ancestorDirections[dir]) {
-			shadowedDirections.push(dir);
+	for (const direction of DIRECTIONS) {
+		if (claimedDirections[direction] && ancestorDirections[direction]) {
+			shadowedDirections.push(direction);
 		}
 	}
 
@@ -40,15 +39,15 @@ const findShadowedDirections = (
 };
 
 const findShadowedAncestors = (
-	parentContext: GestureContextType | null,
+	ancestorGestures: readonly ScreenGestureSource[],
 	claimedDirections: ClaimedDirections,
 ) => {
-	if (!parentContext) {
+	if (ancestorGestures.length === 0) {
 		return NO_SHADOWED_ANCESTORS;
 	}
 
 	const ancestors: ShadowedAncestor[] = [];
-	for (const ancestor of walkGestureAncestors(parentContext)) {
+	for (const ancestor of ancestorGestures) {
 		const directions = findShadowedDirections(
 			claimedDirections,
 			ancestor.claimedDirections,
@@ -70,8 +69,8 @@ const registerShadowingClaims = (
 
 	for (const { ancestor, directions } of shadowedAncestors) {
 		const newClaims = { ...ancestor.childDirectionClaims.get() };
-		for (const dir of directions) {
-			newClaims[dir] = { routeKey: currentScreenKey, isDismissing };
+		for (const direction of directions) {
+			newClaims[direction] = { routeKey: currentScreenKey, isDismissing };
 		}
 		ancestor.childDirectionClaims.set(newClaims);
 	}
@@ -86,10 +85,9 @@ const clearShadowingClaims = (
 		const newClaims = { ...currentClaims };
 		let needsUpdate = false;
 
-		for (const dir of directions) {
-			// Only remove claims written by this screen; a newer descendant may own it now.
-			if (currentClaims[dir]?.routeKey === currentScreenKey) {
-				newClaims[dir] = null;
+		for (const direction of directions) {
+			if (currentClaims[direction]?.routeKey === currentScreenKey) {
+				newClaims[direction] = null;
 				needsUpdate = true;
 			}
 		}
@@ -108,7 +106,7 @@ const getDescriptorIsFirstKey = (descriptor: BaseDescriptor): boolean => {
 
 const getDescriptorClaimedDirections = (
 	descriptor: BaseDescriptor | undefined,
-	gestureContext: GestureContextType | null,
+	ancestorGestures: readonly ScreenGestureSource[],
 ): ClaimedDirections => {
 	if (!descriptor) {
 		return NO_CLAIMS;
@@ -117,55 +115,22 @@ const getDescriptorClaimedDirections = (
 	return resolveScreenGestureConfig({
 		options: descriptor.options,
 		isFirstKey: getDescriptorIsFirstKey(descriptor),
-		gestureContext,
+		ancestorGestures,
 	}).participation.claimedDirections;
 };
 
-/**
- * Registers this screen with ancestors that claim the same direction.
- *
- * Example, when C is top-most:
- * A claims vertical
- * └─ B claims horizontal
- *    └─ C claims vertical
- *
- * C walks up the tree and writes itself into A.childDirectionClaims.vertical.
- * B is skipped because it does not claim vertical.
- */
-export function useWalkUpAndRegisterShadowingClaims(
-	claimedDirections: ClaimedDirections,
-): void {
-	const parentContext = useGestureStore();
+function ActiveGestureOwnershipBridge() {
+	const gestureContext = useScreenGestureStore();
 	const previous = useDescriptorsStore((store) => store.previous);
-	const isTopMostScreen = useDescriptorsStore(
-		(store) => store.derivations.isTopMostScreen,
-	);
-	const currentScreenKey = useDescriptorsStore(
-		(store) => store.derivations.currentScreenKey,
-	);
 	const isCurrentScreenClosing = useBlankStackStore(
-		(store) => store?.scenesByKey[currentScreenKey]?.activity === "closing",
+		(store) =>
+			store.scenesByKey[gestureContext.routeKey]?.activity === "closing",
 	);
-
-	/*
-	 * We want to calculate effective claimed directions as claimedDirections is not enough for us.
-	 * What this solves is lingering claimed directions when a screen is closing.
-	 *
-	 * Overlay claims horizontal
-	 *   └─ A has no local horizontal claim
-	 *   └─ B claims horizontal (closing)
-	 *   └─ C claims horizontal (closing)
-	 *
-	 * Closing screens are still mounted, so they can still block parent gestures.
-	 * But they cannot receive touches anymore.
-	 *
-	 * So when B/C are closing and the user is really touching A, B/C should not
-	 * keep blocking the parent with their own gesture config.
-	 *
-	 * A closing screen should act like the visible screen underneath it:
-	 * - if the screen underneath claims the gesture, keep blocking the parent
-	 * - if the screen underneath does not claim it, let the parent handle it
-	 */
+	const {
+		claimedDirections,
+		ancestorGestures,
+		routeKey: currentScreenKey,
+	} = gestureContext;
 	const effectiveClaimedDirections = useMemo(
 		() =>
 			resolveShadowingClaimDirections({
@@ -173,19 +138,18 @@ export function useWalkUpAndRegisterShadowingClaims(
 				currentClaimedDirections: claimedDirections,
 				previousClaimedDirections: getDescriptorClaimedDirections(
 					previous,
-					parentContext,
+					ancestorGestures,
 				),
 			}),
-		[isCurrentScreenClosing, claimedDirections, previous, parentContext],
+		[isCurrentScreenClosing, claimedDirections, previous, ancestorGestures],
 	);
-
 	const shadowedAncestors = useMemo(
-		() => findShadowedAncestors(parentContext, effectiveClaimedDirections),
-		[parentContext, effectiveClaimedDirections],
+		() => findShadowedAncestors(ancestorGestures, effectiveClaimedDirections),
+		[ancestorGestures, effectiveClaimedDirections],
 	);
 
 	useLayoutEffect(() => {
-		if (!isTopMostScreen || !shadowedAncestors.length) {
+		if (!shadowedAncestors.length) {
 			return;
 		}
 
@@ -194,5 +158,16 @@ export function useWalkUpAndRegisterShadowingClaims(
 		return () => {
 			clearShadowingClaims(shadowedAncestors, currentScreenKey);
 		};
-	}, [shadowedAncestors, currentScreenKey, isTopMostScreen]);
+	}, [shadowedAncestors, currentScreenKey]);
+
+	return null;
+}
+
+/** Keeps gesture ownership subscriptions attached only to participating screens. */
+export function GestureOwnershipBridge() {
+	const isTopMostScreen = useDescriptorsStore(
+		(store) => store.derivations.isTopMostScreen,
+	);
+
+	return isTopMostScreen ? <ActiveGestureOwnershipBridge /> : null;
 }

package/src/providers/screen/gestures/ownership/resolve-ownership.ts

@@ -16,7 +16,6 @@ import type { DirectionClaim } from "../types";
  */
 interface AncestorClaimsContext {
 	claimedDirections: ClaimedDirections;
-	gestureContext: AncestorClaimsContext | null;
 }
 
 /**
@@ -31,12 +30,12 @@ interface AncestorClaimsContext {
  * used in worklets since it's a plain object.
  *
  * @param selfClaims - The directions claimed by the current screen
- * @param gestureContext - The gesture context chain (can be null if no ancestors)
+ * @param ancestors - Nearest-first ancestor gesture values from screen topology.
  * @returns Ownership status for all four directions
  */
 export function resolveOwnership(
 	selfClaims: ClaimedDirections,
-	gestureContext: AncestorClaimsContext | null,
+	ancestors: readonly AncestorClaimsContext[],
 ): DirectionOwnership {
 	const result: DirectionOwnership = { ...NO_OWNERSHIP };
 
@@ -44,7 +43,7 @@ export function resolveOwnership(
 		result[direction] = resolveDirectionOwnership(
 			direction,
 			selfClaims,
-			gestureContext,
+			ancestors,
 		);
 	}
 
@@ -57,7 +56,7 @@ export function resolveOwnership(
 function resolveDirectionOwnership(
 	direction: Direction,
 	selfClaims: ClaimedDirections,
-	gestureContext: AncestorClaimsContext | null,
+	ancestors: readonly AncestorClaimsContext[],
 ): OwnershipStatus {
 	// Check self first
 	if (selfClaims[direction]) {
@@ -65,12 +64,10 @@ function resolveDirectionOwnership(
 	}
 
 	// Walk ancestors looking for a claim
-	let ancestor = gestureContext;
-	while (ancestor) {
+	for (const ancestor of ancestors) {
 		if (ancestor.claimedDirections?.[direction]) {
 			return "ancestor";
 		}
-		ancestor = ancestor.gestureContext;
 	}
 
 	// No one claims this direction

package/src/providers/screen/gestures/pan/activation/pan-activation-decision.ts

@@ -410,7 +410,6 @@ export const resolvePanActivationMoveDecision = ({
 		dimensions,
 		activationState,
 		activationArea: policy.gestureActivationArea,
-		responseDistance: policy.gestureResponseDistance,
 	});
 
 	const offsetFailureDecision = resolveOffsetFailureDecision(offset);

package/src/providers/screen/gestures/pan/activation/pan-activation-rules.ts

@@ -15,7 +15,6 @@ interface ResolveOffsetRulesProps {
 	activationState: GestureActivationState;
 	activationArea?: ResolvedGestureActivationArea;
 	dimensions: Layout;
-	responseDistance?: number;
 }
 
 type NormalizedSides = {
@@ -137,11 +136,10 @@ export function computeEdgeConstraints(
 	initialTouch: { x: number; y: number },
 	dimensions: Layout,
 	sides: NormalizedSides,
-	responseDistance?: number,
 ) {
 	"worklet";
-	const xDist = responseDistance ?? DEFAULT_EDGE_DISTANCE_HORIZONTAL;
-	const yDist = responseDistance ?? DEFAULT_EDGE_DISTANCE_VERTICAL;
+	const xDist = DEFAULT_EDGE_DISTANCE_HORIZONTAL;
+	const yDist = DEFAULT_EDGE_DISTANCE_VERTICAL;
 
 	return {
 		horizontalRight: canActivateFromStartEdge(
@@ -293,7 +291,6 @@ export const resolveOffsetRules = ({
 	activationState,
 	activationArea,
 	dimensions,
-	responseDistance,
 }: ResolveOffsetRulesProps): OffsetRuleResult => {
 	"worklet";
 
@@ -331,7 +328,7 @@ export const resolveOffsetRules = ({
 		horizontalLeft: horizontalGateLeft,
 		verticalDown: verticalGateDown,
 		verticalUp: verticalGateUp,
-	} = computeEdgeConstraints(initialTouch, dimensions, sides, responseDistance);
+	} = computeEdgeConstraints(initialTouch, dimensions, sides);
 
 	const { shouldActivate, shouldFail } = shouldActivateOrFail({
 		deltaX,

package/src/providers/screen/gestures/pan/activation/use-pan-activation.ts

@@ -9,6 +9,7 @@ import { GestureActivationState } from "../../../../../types/gesture.types";
 import type { Direction } from "../../../../../types/ownership.types";
 import { useDescriptorsStore } from "../../../descriptors";
 import type { ScreenOptionsContextValue } from "../../../options";
+import { useCurrentScreenRelationships } from "../../../use-current-screen-relationships";
 import { resolvePanRuntime } from "../../shared/runtime";
 import type {
 	DirectionClaimMap,
@@ -39,9 +40,7 @@ export const usePanActivation = ({
 	const currentScreenKey = useDescriptorsStore(
 		(store) => store.derivations.currentScreenKey,
 	);
-	const parentScreenKey = useDescriptorsStore(
-		(store) => store.derivations.parentScreenKey,
-	);
+	const { parentScreenKey } = useCurrentScreenRelationships();
 
 	const ancestorDismissing = useMemo(() => {
 		if (!parentScreenKey) return null;