react-native-screen-transitions 3.3.0-rc.2 → 3.3.0

package/src/shared/components/overlay/variations/screen-overlay.tsx

@@ -1,12 +1,24 @@
 import { useMemo } from "react";
+import { snapDescriptorToIndex } from "../../../animation/snap-to";
+import { useOptimisticFocusedIndex } from "../../../hooks/navigation/use-optimistic-focused-index";
 import {
 	type StackDescriptor,
 	type StackScene,
 	useStack,
 } from "../../../hooks/navigation/use-stack";
 import { useKeys } from "../../../providers/screen/keys.provider";
+import type { OverlayProps } from "../../../types/overlay.types";
+import { isScreenOverlayVisible } from "../../../utils/overlay/visibility";
 import { OverlayHost } from "./overlay-host";
 
+type OverlayScreenState = Omit<
+	OverlayProps<StackDescriptor["navigation"]>,
+	"progress" | "overlayAnimation" | "screenAnimation"
+> & {
+	index: number;
+	snapTo: (index: number) => void;
+};
+
 /**
  * Screen overlay component that renders per-screen.
  * Gets current descriptor from keys context.
@@ -17,7 +29,11 @@ import { OverlayHost } from "./overlay-host";
  */
 export function ScreenOverlay() {
 	const { current } = useKeys<StackDescriptor>();
-	const { flags } = useStack();
+	const { flags, routes, optimisticFocusedIndex, routeKeys } = useStack();
+	const focusedIndex = useOptimisticFocusedIndex(
+		optimisticFocusedIndex,
+		routeKeys.length,
+	);
 
 	const options = current.options;
 
@@ -29,14 +45,30 @@ export function ScreenOverlay() {
 		[current],
 	);
 
+	const overlayScreenState = useMemo<OverlayScreenState>(
+		() => ({
+			index: routeKeys.indexOf(current.route.key),
+			options: current.options,
+			routes,
+			focusedRoute: routes[focusedIndex] ?? current.route,
+			focusedIndex,
+			meta: current.options?.meta,
+			navigation: current.navigation,
+			snapTo: (index: number) => {
+				snapDescriptorToIndex(current, index);
+			},
+		}),
+		[current, routeKeys, routes, focusedIndex],
+	);
+
 	// Skip screens without enableTransitions (native-stack only)
 	if (!flags.TRANSITIONS_ALWAYS_ON && !options.enableTransitions) {
 		return null;
 	}
 
-	if (!options.overlayShown || options.overlayMode !== "screen") {
+	if (!isScreenOverlayVisible(options)) {
 		return null;
 	}
 
-	return <OverlayHost scene={scene} />;
+	return <OverlayHost scene={scene} overlayScreenState={overlayScreenState} />;
 }

package/src/shared/components/screen-container.tsx

@@ -25,6 +25,8 @@ export const ScreenContainer = memo(({ children }: Props) => {
 	const { pointerEvents, backdropBehavior } = useBackdropPointerEvents();
 	const gestureContext = useGestureContext();
 
+	const BackdropComponent = current.options.backdropComponent;
+
 	const isBackdropActive =
 		backdropBehavior === "dismiss" || backdropBehavior === "collapse";
 
@@ -101,15 +103,19 @@ export const ScreenContainer = memo(({ children }: Props) => {
 
 	return (
 		<View style={styles.container} pointerEvents={pointerEvents}>
-			<Pressable
-				style={StyleSheet.absoluteFillObject}
-				pointerEvents={isBackdropActive ? "auto" : "none"}
-				onPress={isBackdropActive ? handleBackdropPress : undefined}
-			>
-				<Animated.View
-					style={[StyleSheet.absoluteFillObject, animatedBackdropStyle]}
-				/>
-			</Pressable>
+			{BackdropComponent ? (
+				<BackdropComponent />
+			) : (
+				<Pressable
+					style={StyleSheet.absoluteFillObject}
+					pointerEvents={isBackdropActive ? "auto" : "none"}
+					onPress={isBackdropActive ? handleBackdropPress : undefined}
+				>
+					<Animated.View
+						style={[StyleSheet.absoluteFillObject, animatedBackdropStyle]}
+					/>
+				</Pressable>
+			)}
 			<GestureDetector gesture={gestureContext!.panGesture}>
 				<Animated.View
 					style={[styles.content, animatedContentStyle]}

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

@@ -80,11 +80,12 @@ const useBuildScreenTransitionState = (
 ): BuiltState | undefined => {
 	const key = descriptor?.route?.key;
 	const meta = descriptor?.options?.meta;
+	const route = descriptor?.route;
 
 	return useMemo(() => {
-		if (!key || !descriptor?.route) return undefined;
+		if (!key || !route) return undefined;
 
-		const plainRoute = toPlainRoute(descriptor.route);
+		const plainRoute = toPlainRoute(route);
 		const plainMeta = meta
 			? (toPlainValue(meta) as Record<string, unknown>)
 			: undefined;
@@ -99,7 +100,7 @@ const useBuildScreenTransitionState = (
 			meta: plainMeta,
 			unwrapped: createScreenTransitionState(plainRoute, plainMeta),
 		};
-	}, [key, meta, descriptor]);
+	}, [key, meta, route]);
 };
 
 const hasTransitionsEnabled = (
@@ -135,11 +136,10 @@ export function _useScreenAnimation() {
 		return points ? [...points].sort((a, b) => a - b) : [];
 	}, [currentDescriptor?.options?.snapPoints]);
 
-	const nextHasTransitions = useMemo(() => {
-		return nextDescriptor
-			? hasTransitionsEnabled(nextDescriptor.options, transitionsAlwaysOn)
-			: false;
-	}, [nextDescriptor, transitionsAlwaysOn]);
+	const nextRouteKey = nextDescriptor?.route?.key;
+	const nextHasTransitions =
+		!!nextRouteKey &&
+		hasTransitionsEnabled(nextDescriptor?.options, transitionsAlwaysOn);
 
 	const screenInterpolatorProps = useDerivedValue<
 		Omit<ScreenInterpolationProps, "bounds">

package/src/shared/hooks/gestures/use-build-gestures.tsx

@@ -12,6 +12,7 @@ import { GestureStore, type GestureStoreMap } from "../../stores/gesture.store";
 import type { ClaimedDirections, Direction } from "../../types/ownership.types";
 import { claimsAnyDirection } from "../../utils/gesture/compute-claimed-directions";
 import { resolveOwnership } from "../../utils/gesture/resolve-ownership";
+import { validateSnapPoints } from "../../utils/gesture/validate-snap-points";
 import { useScreenGestureHandlers } from "./use-screen-gesture-handlers";
 
 const DIRECTIONS: Direction[] = [
@@ -94,7 +95,10 @@ export const useBuildGestures = ({
 	const canDismiss = Boolean(
 		isFirstScreen ? false : current.options.gestureEnabled,
 	);
-	const hasSnapPoints = Array.isArray(snapPoints) && snapPoints.length > 0;
+	const { hasSnapPoints } = useMemo(
+		() => validateSnapPoints({ snapPoints, canDismiss }),
+		[snapPoints, canDismiss],
+	);
 	const gestureEnabled = canDismiss || hasSnapPoints;
 
 	const ownershipStatus = useMemo(

package/src/shared/hooks/gestures/use-screen-gesture-handlers.ts

@@ -110,8 +110,6 @@ export const useScreenGestureHandlers = ({
 	canDismiss,
 	handleDismiss,
 	ownershipStatus,
-	claimedDirections,
-	ancestorContext,
 	childDirectionClaims,
 }: UseScreenGestureHandlersProps) => {
 	const dimensions = useWindowDimensions();
@@ -132,6 +130,7 @@ export const useScreenGestureHandlers = ({
 		transitionSpec,
 		snapPoints: rawSnapPoints,
 		expandViaScrollView = true,
+		gestureSnapLocked = false,
 	} = current.options;
 
 	const { hasSnapPoints, snapPoints, minSnapPoint, maxSnapPoint } = useMemo(
@@ -200,11 +199,25 @@ export const useScreenGestureHandlers = ({
 			? "horizontal"
 			: "vertical";
 
+	const isExpandGesture = (swipeDirection: Direction): boolean => {
+		"worklet";
+		if (snapAxis === "horizontal") {
+			return directions.snapAxisInverted
+				? swipeDirection === "horizontal"
+				: swipeDirection === "horizontal-inverted";
+		}
+
+		return directions.snapAxisInverted
+			? swipeDirection === "vertical"
+			: swipeDirection === "vertical-inverted";
+	};
+
 	const initialTouch = useSharedValue({ x: 0, y: 0 });
 	const gestureOffsetState = useSharedValue<GestureOffsetState>(
 		GestureOffsetState.PENDING,
 	);
 	const gestureStartProgress = useSharedValue(1);
+	const lockedSnapPoint = useSharedValue(maxSnapPoint);
 
 	const onTouchesDown = useStableCallbackValue((e: GestureTouchEvent) => {
 		"worklet";
@@ -280,6 +293,15 @@ export const useScreenGestureHandlers = ({
 				return;
 			}
 
+			if (
+				hasSnapPoints &&
+				gestureSnapLocked &&
+				isExpandGesture(swipeDirection)
+			) {
+				manager.fail();
+				return;
+			}
+
 			// Snap sheets can interrupt their own animation; non-snap cannot
 			if (!hasSnapPoints && gestureAnimationValues.isDismissing?.value) {
 				return;
@@ -303,23 +325,19 @@ export const useScreenGestureHandlers = ({
 
 				// Step 7: Expand check for snap sheets
 				if (hasSnapPoints) {
-					const isExpandGesture =
-						(directions.snapAxisInverted && swipeDirection === "vertical") ||
-						(!directions.snapAxisInverted &&
-							swipeDirection === "vertical-inverted") ||
-						(directions.snapAxisInverted && swipeDirection === "horizontal") ||
-						(!directions.snapAxisInverted &&
-							swipeDirection === "horizontal-inverted");
-
-					if (isExpandGesture) {
+					if (isExpandGesture(swipeDirection)) {
 						if (!expandViaScrollView) {
 							manager.fail();
 							return;
 						}
 
+						const effectiveMaxSnapPoint = gestureSnapLocked
+							? lockedSnapPoint.value
+							: maxSnapPoint;
+
 						const canExpandMore =
-							animations.progress.value < maxSnapPoint - EPSILON &&
-							animations.targetProgress.value < maxSnapPoint - EPSILON;
+							animations.progress.value < effectiveMaxSnapPoint - EPSILON &&
+							animations.targetProgress.value < effectiveMaxSnapPoint - EPSILON;
 
 						if (!canExpandMore) {
 							manager.fail();
@@ -336,6 +354,24 @@ export const useScreenGestureHandlers = ({
 
 	const onStart = useStableCallbackValue(() => {
 		"worklet";
+		if (hasSnapPoints && gestureSnapLocked) {
+			let nearest = snapPoints[0] ?? animations.progress.value;
+			let smallestDistance = Math.abs(animations.progress.value - nearest);
+
+			for (let i = 1; i < snapPoints.length; i++) {
+				const point = snapPoints[i];
+				const distance = Math.abs(animations.progress.value - point);
+				if (distance < smallestDistance) {
+					smallestDistance = distance;
+					nearest = point;
+				}
+			}
+
+			lockedSnapPoint.value = nearest;
+		} else {
+			lockedSnapPoint.value = maxSnapPoint;
+		}
+
 		gestureAnimationValues.isDragging.value = TRUE;
 		gestureAnimationValues.isDismissing.value = FALSE;
 		gestureStartProgress.value = animations.progress.value;
@@ -369,10 +405,21 @@ export const useScreenGestureHandlers = ({
 				const baseSign = -1;
 				const sign = directions.snapAxisInverted ? -baseSign : baseSign;
 				const progressDelta = (sign * translation) / dimension;
+				const maxProgressForGesture = gestureSnapLocked
+					? lockedSnapPoint.value
+					: maxSnapPoint;
+				const minProgressForGesture = gestureSnapLocked
+					? canDismiss
+						? 0
+						: lockedSnapPoint.value
+					: minSnapPoint;
 
 				animations.progress.value = Math.max(
-					minSnapPoint,
-					Math.min(maxSnapPoint, gestureStartProgress.value + progressDelta),
+					minProgressForGesture,
+					Math.min(
+						maxProgressForGesture,
+						gestureStartProgress.value + progressDelta,
+					),
 				);
 			} else if (gestureDrivesProgress) {
 				let maxProgress = 0;
@@ -427,7 +474,7 @@ export const useScreenGestureHandlers = ({
 
 				const result = determineSnapTarget({
 					currentProgress: animations.progress.value,
-					snapPoints,
+					snapPoints: gestureSnapLocked ? [lockedSnapPoint.value] : snapPoints,
 					velocity: snapVelocity,
 					dimension: axisDimension,
 					velocityFactor: snapVelocityImpact,

package/src/shared/hooks/gestures/use-scroll-registry.tsx

@@ -17,7 +17,6 @@ import type { LayoutChangeEvent } from "react-native";
 import { Gesture, type GestureType } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
 import { useAnimatedScrollHandler } from "react-native-reanimated";
-import type { ReanimatedScrollEvent } from "react-native-reanimated/lib/typescript/hook/commonTypes";
 import {
 	type GestureContextType,
 	type ScrollConfig,
@@ -76,7 +75,6 @@ function findGestureOwnersForAxis(
 }
 
 interface ScrollProgressHookProps {
-	onScroll?: (event: ReanimatedScrollEvent) => void;
 	onContentSizeChange?: (width: number, height: number) => void;
 	onLayout?: (event: LayoutChangeEvent) => void;
 	direction?: "vertical" | "horizontal";
@@ -125,18 +123,22 @@ export const useScrollRegistry = (props: ScrollProgressHookProps) => {
 		const setIsTouched = () => {
 			"worklet";
 			for (const scrollConfig of scrollConfigs) {
-				if (scrollConfig.value) {
-					scrollConfig.value = { ...scrollConfig.value, isTouched: true };
-				}
+				scrollConfig.modify((v) => {
+					"worklet";
+					if (v) v.isTouched = true;
+					return v;
+				});
 			}
 		};
 
 		const clearIsTouched = () => {
 			"worklet";
 			for (const scrollConfig of scrollConfigs) {
-				if (scrollConfig.value) {
-					scrollConfig.value = { ...scrollConfig.value, isTouched: false };
-				}
+				scrollConfig.modify((v) => {
+					"worklet";
+					if (v) v.isTouched = false;
+					return v;
+				});
 			}
 		};
 
@@ -156,7 +158,6 @@ export const useScrollRegistry = (props: ScrollProgressHookProps) => {
 
 	const scrollHandler = useAnimatedScrollHandler({
 		onScroll: (event) => {
-			props.onScroll?.(event);
 			if (scrollConfigs.length === 0) return;
 
 			const update = (v: any) => {

package/src/shared/hooks/lifecycle/use-close-transition.ts

@@ -47,9 +47,12 @@ const useManagedClose = ({
 	const transitionSpec = current.options.transitionSpec;
 
 	useAnimatedReaction(
-		() => closingRouteKeysShared.value,
-		(keys) => {
-			if (!keys?.includes(routeKey)) return;
+		() => {
+			const keys = closingRouteKeysShared.value;
+			return keys?.includes(routeKey) ?? false;
+		},
+		(isClosing, wasClosing) => {
+			if (!isClosing || wasClosing) return;
 
 			runOnJS(activate)();
 			animateToProgress({

package/src/shared/hooks/lifecycle/use-screen-events.ts

@@ -5,16 +5,27 @@ import type { AnimationStoreMap } from "../../stores/animation.store";
 import { HistoryStore } from "../../stores/history.store";
 import useStableCallback from "../use-stable-callback";
 
+function hasSnapPoints(descriptor: BaseDescriptor): boolean {
+	const snapPoints = descriptor.options?.snapPoints;
+	return Boolean(snapPoints && snapPoints.length > 0);
+}
+
 /**
  * Check if a screen is a leaf (renders visible content) vs a navigator container.
  * Navigator containers have nested state with routes.
  */
 function isLeafScreen(navigation: BaseDescriptor["navigation"]): boolean {
 	const state = navigation.getState();
-	const currentRoute = state.routes[state.index];
+	const index = state?.index ?? -1;
+	const currentRoute = state?.routes?.[index];
+	if (!currentRoute) return false;
 	return !("state" in currentRoute);
 }
 
+function shouldTrackInHistory(descriptor: BaseDescriptor): boolean {
+	return hasSnapPoints(descriptor) || isLeafScreen(descriptor.navigation);
+}
+
 /**
  * Updates the HistoryStore for navigation history tracking.
  */
@@ -29,13 +40,13 @@ export function useScreenEvents(
 	// biome-ignore lint/correctness/useExhaustiveDependencies: Must only run once on mount
 	useEffect(() => {
 		// Check on mount (after paint, nested navs initialized)
-		if (isLeafScreen(current.navigation)) {
+		if (shouldTrackInHistory(current)) {
 			HistoryStore.focus(current, navigatorKey);
 		}
 
 		// Also listen for focus events
 		const unsubscribe = current.navigation.addListener?.("focus", () => {
-			if (isLeafScreen(current.navigation)) {
+			if (shouldTrackInHistory(current)) {
 				HistoryStore.focus(current, navigatorKey);
 			}
 		});
@@ -45,7 +56,7 @@ export function useScreenEvents(
 
 	// When closing starts, focus previous in history
 	const handleBlur = useStableCallback(() => {
-		if (previous && isLeafScreen(previous.navigation)) {
+		if (previous && shouldTrackInHistory(previous)) {
 			const prevNavigatorKey = previous.navigation.getState()?.key ?? "";
 			HistoryStore.focus(previous, prevNavigatorKey);
 		}

package/src/shared/hooks/navigation/use-optimistic-focused-index.ts

@@ -0,0 +1,19 @@
+import { type DerivedValue, useDerivedValue } from "react-native-reanimated";
+import { useSharedValueState } from "../reanimated/use-shared-value-state";
+
+/**
+ * Returns a JS-focused index derived from optimisticFocusedIndex and clamped to route count.
+ * Keeps callers aligned on focus behavior during transitions with closing screens.
+ */
+export function useOptimisticFocusedIndex(
+	optimisticFocusedIndex: DerivedValue<number>,
+	routeCount: number,
+): number {
+	return useSharedValueState(
+		useDerivedValue(() => {
+			const globalIndex = optimisticFocusedIndex.get();
+			if (routeCount <= 0) return 0;
+			return Math.max(0, Math.min(globalIndex, routeCount - 1));
+		}),
+	);
+}

package/src/shared/hooks/navigation/use-screen-state.tsx

@@ -1,13 +1,13 @@
 import type { Route } from "@react-navigation/native";
-import { useMemo } from "react";
-import { useDerivedValue } from "react-native-reanimated";
+import { useCallback, useMemo } from "react";
+import { snapDescriptorToIndex } from "../../animation/snap-to";
 import {
 	type BaseDescriptor,
 	useKeys,
 } from "../../providers/screen/keys.provider";
 import type { ScreenTransitionConfig } from "../../types/screen.types";
 import type { BaseStackNavigation } from "../../types/stack.types";
-import { useSharedValueState } from "../reanimated/use-shared-value-state";
+import { useOptimisticFocusedIndex } from "./use-optimistic-focused-index";
 import { type StackContextValue, useStack } from "./use-stack";
 
 export interface ScreenState<
@@ -47,6 +47,13 @@ export interface ScreenState<
 	 * Navigation object for this screen.
 	 */
 	navigation: TNavigation;
+
+	/**
+	 * Programmatically snap the focused screen to a snap point index.
+	 *
+	 * Scoped to this screen's stack context, avoiding global history ambiguity.
+	 */
+	snapTo: (index: number) => void;
 }
 
 /**
@@ -66,17 +73,24 @@ export function useScreenState<
 		[routeKeys, current.route.key],
 	);
 
-	const focusedIndex = useSharedValueState(
-		useDerivedValue(() => {
-			const globalIndex = optimisticFocusedIndex.get();
-			return Math.max(0, Math.min(globalIndex, routeKeys.length - 1));
-		}),
+	const focusedIndex = useOptimisticFocusedIndex(
+		optimisticFocusedIndex,
+		routeKeys.length,
 	);
 
 	const focusedScene = useMemo(() => {
 		return scenes[focusedIndex] ?? scenes[scenes.length - 1];
 	}, [scenes, focusedIndex]);
 
+	const snapTo = useCallback(
+		(targetIndex: number) => {
+			const descriptor = focusedScene?.descriptor;
+			if (!descriptor) return;
+			snapDescriptorToIndex(descriptor, targetIndex);
+		},
+		[focusedScene],
+	);
+
 	return useMemo(
 		() => ({
 			index,
@@ -86,6 +100,7 @@ export function useScreenState<
 			focusedIndex,
 			meta: focusedScene?.descriptor?.options?.meta,
 			navigation: current.navigation as TNavigation,
+			snapTo,
 		}),
 		[
 			index,
@@ -94,6 +109,7 @@ export function useScreenState<
 			focusedIndex,
 			current.navigation,
 			current.route,
+			snapTo,
 		],
 	);
 }

package/src/shared/hooks/reanimated/use-shared-value-state.ts

@@ -26,7 +26,10 @@ export function useSharedValueState<T>(sharedValue: SharedValue<T>): T {
 
 	useAnimatedReaction(
 		() => sharedValue.value,
-		(value) => runOnJS(setState)(value),
+		(value, previousValue) => {
+			if (Object.is(value, previousValue)) return;
+			runOnJS(setState)(value);
+		},
 	);
 
 	return state;

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

@@ -22,6 +22,7 @@ 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";
 
@@ -159,30 +160,43 @@ export const {
 } = createProvider("ScreenGesture", { guarded: false })<
 	ScreenGestureProviderProps,
 	GestureContextType
->(({ children }) => {
+>(({ children }): { value: GestureContextType; children: React.ReactNode } => {
 	const { current } = useKeys();
 	const { flags } = useStackCoreContext();
-	const ancestorContext = useGestureContext();
-
-	const hasGestures = current.options.gestureEnabled === true;
+	const ancestorContext: GestureContextType | null = useGestureContext();
 	const isIsolated = flags.STACK_TYPE === StackType.COMPONENT;
+	const routeKey = current.route.key;
 
-	const hasSnapPoints =
-		Array.isArray(current.options.snapPoints) &&
-		current.options.snapPoints.length > 0;
+	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(
-				hasGestures,
+				gestureEnabled,
 				current.options.gestureDirection,
 				hasSnapPoints,
 			),
-		[hasGestures, current.options.gestureDirection, hasSnapPoints],
+		[gestureEnabled, 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,
@@ -208,17 +222,30 @@ export const {
 			isIsolated,
 		});
 
-	const value: GestureContextType = {
-		panGesture,
-		panGestureRef,
-		scrollConfig,
-		gestureAnimationValues,
-		ancestorContext,
-		gestureEnabled: hasGestures,
-		isIsolated,
-		claimedDirections,
-		childDirectionClaims,
-	};
+	const value = useMemo<GestureContextType>(
+		() => ({
+			panGesture,
+			panGestureRef,
+			scrollConfig,
+			gestureAnimationValues,
+			ancestorContext,
+			gestureEnabled,
+			isIsolated,
+			claimedDirections,
+			childDirectionClaims,
+		}),
+		[
+			panGesture,
+			panGestureRef,
+			scrollConfig,
+			gestureAnimationValues,
+			ancestorContext,
+			gestureEnabled,
+			isIsolated,
+			claimedDirections,
+			childDirectionClaims,
+		],
+	);
 
 	return {
 		value,