react-native-screen-transitions 3.5.1 → 3.6.0-alpha.0

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

@@ -0,0 +1,84 @@
+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 { useDescriptorDerivations } from "../descriptors";
+import { useBuildPanGesture } from "./builders/use-build-pan-gesture";
+import { useBuildPinchGesture } from "./builders/use-build-pinch-gesture";
+import { useScreenGestureConfig } from "./hooks/use-screen-gesture-config";
+import { useWalkUpAndRegisterShadowingClaims } from "./ownership/use-walk-up-and-register-shadowing-claims";
+import {
+	type DirectionClaimMap,
+	type GestureContextType,
+	NO_CLAIMS,
+} from "./types";
+
+interface ScreenGestureProviderProps {
+	children: React.ReactNode;
+}
+
+export const {
+	ScreenGestureProvider,
+	useScreenGestureContext: useGestureContext,
+} = createProvider("ScreenGesture", { guarded: false })<
+	ScreenGestureProviderProps,
+	GestureContextType
+>(({ children }): { value: GestureContextType; children: React.ReactNode } => {
+	const gestureContext = useGestureContext();
+	const gestureConfig = useScreenGestureConfig();
+	const { currentScreenKey } = useDescriptorDerivations();
+
+	const scrollState = ScrollStore.getValue(currentScreenKey, "state");
+
+	// 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_CLAIMS);
+
+	const panGesture = useBuildPanGesture({
+		scrollState,
+		gestureConfig,
+		childDirectionClaims,
+	});
+
+	const pinchGesture = useBuildPinchGesture({
+		gestureConfig,
+	});
+
+	const detectorGesture = useMemo(
+		() => Gesture.Race(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(
+		gestureConfig.participation.claimedDirections,
+	);
+
+	return {
+		value,
+		children,
+	};
+});

package/src/shared/providers/{gestures → screen/gestures}/helpers/gesture-activation.ts

@@ -1,22 +1,20 @@
-import type { GestureStateManagerType } from "react-native-gesture-handler/lib/typescript/handlers/gestures/gestureStateManager";
 import type { SharedValue } from "react-native-reanimated";
-import type { GestureDirections } from "../../../types/gesture.types";
+import type { GestureDirections } from "../../../../types/gesture.types";
 import {
 	type ActivationArea,
 	type GestureActivationArea,
-	GestureOffsetState,
+	GestureActivationState,
 	type SideActivation,
-} from "../../../types/gesture.types";
-import type { Direction } from "../../../types/ownership.types";
-import type { Layout } from "../../../types/screen.types";
-import type { ScrollConfig } from "../types";
+} from "../../../../types/gesture.types";
+import type { Direction } from "../../../../types/ownership.types";
+import type { Layout } from "../../../../types/screen.types";
+import type { ScrollGestureState } from "../types";
 
 interface CheckGestureActivationProps {
 	initialTouch: { x: number; y: number };
 	touch: { x: number; y: number };
 	directions: GestureDirections;
-	manager?: GestureStateManagerType;
-	gestureOffsetState: SharedValue<GestureOffsetState>;
+	gestureActivationState: SharedValue<GestureActivationState>;
 	activationArea?: GestureActivationArea;
 	dimensions: Layout;
 	responseDistance?: number;
@@ -224,8 +222,7 @@ export const applyOffsetRules = ({
 	initialTouch,
 	touch,
 	directions,
-	manager,
-	gestureOffsetState,
+	gestureActivationState,
 	activationArea,
 	dimensions,
 	responseDistance,
@@ -252,7 +249,7 @@ export const applyOffsetRules = ({
 		isHorizontalSwipe,
 	} = calculateSwipeDirs(deltaX, deltaY);
 
-	if (gestureOffsetState.value !== GestureOffsetState.PENDING) {
+	if (gestureActivationState.get() !== GestureActivationState.PENDING) {
 		return {
 			isSwipingDown,
 			isSwipingUp,
@@ -292,10 +289,9 @@ export const applyOffsetRules = ({
 	});
 
 	if (shouldActivate) {
-		gestureOffsetState.value = GestureOffsetState.PASSED;
+		gestureActivationState.set(GestureActivationState.PASSED);
 	} else if (shouldFail) {
-		gestureOffsetState.value = GestureOffsetState.FAILED;
-		manager?.fail();
+		gestureActivationState.set(GestureActivationState.FAILED);
 	}
 
 	return {
@@ -324,55 +320,44 @@ export const applyOffsetRules = ({
  * The rule: "when the ScrollView can't scroll any further in the direction
  * the sheet came from, yield to the gesture."
  *
- * @param scrollConfig - The current scroll state
+ * @param scrollState - The current scroll coordination state
  * @param direction - The swipe direction to check
  * @param snapAxisInverted - For snap point sheets, whether the axis is inverted (top sheet / left drawer)
  * @returns true if at boundary (gesture should activate), false otherwise
  */
 export function checkScrollBoundary(
-	scrollConfig: ScrollConfig | null,
+	scrollState: ScrollGestureState | null,
 	direction: Direction,
 	snapAxisInverted?: boolean,
 ): boolean {
 	"worklet";
 
-	if (!scrollConfig) {
+	if (!scrollState) {
 		// No scroll config means no ScrollView - allow gesture
 		return true;
 	}
 
-	const {
-		x: scrollX,
-		y: scrollY,
-		contentWidth,
-		contentHeight,
-		layoutWidth,
-		layoutHeight,
-	} = scrollConfig;
+	const isVerticalDirection =
+		direction === "vertical" || direction === "vertical-inverted";
+
+	const axisState = isVerticalDirection
+		? scrollState.vertical
+		: scrollState.horizontal;
 
 	// Calculate max scroll values
-	const maxScrollX = Math.max(0, contentWidth - layoutWidth);
-	const maxScrollY = Math.max(0, contentHeight - layoutHeight);
-	const atTop = scrollY <= SCROLL_EPILSON;
-	const atBottom = scrollY >= maxScrollY - SCROLL_EPILSON;
-	const atLeft = scrollX <= SCROLL_EPILSON;
-	const atRight = scrollX >= maxScrollX - SCROLL_EPILSON;
+	const maxScrollOffset = Math.max(
+		0,
+		axisState.contentSize - axisState.layoutSize,
+	);
+	const atStart = axisState.offset <= SCROLL_EPILSON;
+	const atEnd = axisState.offset >= maxScrollOffset - SCROLL_EPILSON;
 
 	// For snap point sheets (snapAxisInverted is defined), boundary depends on sheet origin
 	// Even if content isn't scrollable, respect bounce/overscroll state
 	if (snapAxisInverted !== undefined) {
-		const isVerticalDirection =
-			direction === "vertical" || direction === "vertical-inverted";
-
-		if (isVerticalDirection) {
-			// Bottom sheet (not inverted): boundary at scroll top
-			// Top sheet (inverted): boundary at scroll bottom
-			return snapAxisInverted ? atBottom : atTop;
-		}
-		// Horizontal direction
-		// Right drawer (not inverted): boundary at scroll left
-		// Left drawer (inverted): boundary at scroll right
-		return snapAxisInverted ? atRight : atLeft;
+		// Bottom sheet / right drawer (not inverted): boundary at scroll start
+		// Top sheet / left drawer (inverted): boundary at scroll end
+		return snapAxisInverted ? atEnd : atStart;
 	}
 
 	// Non-sheet screens: each direction has its own boundary
@@ -380,22 +365,22 @@ export function checkScrollBoundary(
 		case "vertical":
 			// Swipe down - check if at top of vertical scroll
 			// Even if content isn't scrollable, respect bounce/overscroll state
-			return atTop;
+			return atStart;
 
 		case "vertical-inverted":
 			// Swipe up - check if at bottom of vertical scroll
 			// Even if content isn't scrollable, respect bounce/overscroll state
-			return atBottom;
+			return atEnd;
 
 		case "horizontal":
 			// Swipe right - check if at left of horizontal scroll
 			// Even if content isn't scrollable, respect bounce/overscroll state
-			return atLeft;
+			return atStart;
 
 		case "horizontal-inverted":
 			// Swipe left - check if at right of horizontal scroll
 			// Even if content isn't scrollable, respect bounce/overscroll state
-			return atRight;
+			return atEnd;
 
 		default:
 			return true;

package/src/shared/providers/screen/gestures/helpers/gesture-directions.ts

@@ -0,0 +1,205 @@
+import type {
+	ActiveGesture,
+	GestureDirection,
+	GestureDirections,
+	PanGestureDirection,
+	PinchGestureDirection,
+	ResolvedPanGestureDirection,
+	SnapPanAxis,
+	SnapPanAxisConfig,
+	SnapPanDirectionConfig,
+	SnapPinchDirectionConfig,
+} from "../../../../types/gesture.types";
+import type { Direction } from "../../../../types/ownership.types";
+
+interface GetPanActivationDirectionsProps {
+	gestureDirection: GestureDirection | GestureDirection[];
+	hasSnapPoints: boolean;
+}
+
+const isPinchGestureDirection = (
+	direction: GestureDirection,
+): direction is PinchGestureDirection => {
+	"worklet";
+	return direction === "pinch-in" || direction === "pinch-out";
+};
+
+const isPanGestureDirection = (
+	direction: GestureDirection,
+): direction is PanGestureDirection => {
+	"worklet";
+	return !isPinchGestureDirection(direction);
+};
+
+export const isResolvedPanGestureDirection = (
+	gesture: ActiveGesture | null,
+): gesture is ResolvedPanGestureDirection => {
+	"worklet";
+	return (
+		gesture === "horizontal" ||
+		gesture === "horizontal-inverted" ||
+		gesture === "vertical" ||
+		gesture === "vertical-inverted"
+	);
+};
+
+export const getPanGestureDirections = (
+	gestureDirection: GestureDirection | GestureDirection[],
+): PanGestureDirection[] => {
+	"worklet";
+	const directions = Array.isArray(gestureDirection)
+		? gestureDirection
+		: [gestureDirection];
+	const panDirections: PanGestureDirection[] = [];
+
+	for (const direction of directions) {
+		if (isPanGestureDirection(direction)) {
+			panDirections.push(direction);
+		}
+	}
+
+	return panDirections;
+};
+
+export const getPinchGestureDirections = (
+	gestureDirection: GestureDirection | GestureDirection[],
+): PinchGestureDirection[] => {
+	"worklet";
+	const directions = Array.isArray(gestureDirection)
+		? gestureDirection
+		: [gestureDirection];
+	const pinchDirections: PinchGestureDirection[] = [];
+
+	for (const direction of directions) {
+		if (isPinchGestureDirection(direction)) {
+			pinchDirections.push(direction);
+		}
+	}
+
+	return pinchDirections;
+};
+
+const getOppositePanDirection = (
+	direction: ResolvedPanGestureDirection,
+): ResolvedPanGestureDirection => {
+	"worklet";
+	switch (direction) {
+		case "horizontal":
+			return "horizontal-inverted";
+		case "horizontal-inverted":
+			return "horizontal";
+		case "vertical":
+			return "vertical-inverted";
+		case "vertical-inverted":
+			return "vertical";
+	}
+};
+
+const getPanDirectionAxis = (
+	direction: ResolvedPanGestureDirection,
+): SnapPanAxis => {
+	"worklet";
+	return direction === "horizontal" || direction === "horizontal-inverted"
+		? "horizontal"
+		: "vertical";
+};
+
+const setSnapPanAxisConfig = (
+	config: SnapPanDirectionConfig,
+	direction: ResolvedPanGestureDirection,
+) => {
+	"worklet";
+	const axis = getPanDirectionAxis(direction);
+
+	if (config[axis]) return;
+
+	config[axis] = {
+		collapse: direction,
+		expand: getOppositePanDirection(direction),
+		inverted:
+			direction === "horizontal-inverted" || direction === "vertical-inverted",
+		progressSign:
+			direction === "horizontal-inverted" || direction === "vertical-inverted"
+				? 1
+				: -1,
+	};
+};
+
+export const getPanSnapAxisDirections = (
+	gestureDirection: GestureDirection | GestureDirection[],
+): SnapPanDirectionConfig => {
+	"worklet";
+	const config: SnapPanDirectionConfig = {
+		horizontal: null,
+		vertical: null,
+	};
+
+	for (const direction of getPanGestureDirections(gestureDirection)) {
+		if (direction === "bidirectional") {
+			setSnapPanAxisConfig(config, "horizontal");
+			setSnapPanAxisConfig(config, "vertical");
+			continue;
+		}
+
+		setSnapPanAxisConfig(config, direction);
+	}
+
+	return config;
+};
+
+export const getSnapPinchDirectionConfig = (
+	gestureDirection: GestureDirection | GestureDirection[],
+): SnapPinchDirectionConfig => {
+	"worklet";
+	const pinchDirection = getPinchGestureDirections(gestureDirection)[0];
+
+	if (!pinchDirection) return null;
+
+	return {
+		collapse: pinchDirection,
+		expand: pinchDirection === "pinch-in" ? "pinch-out" : "pinch-in",
+	};
+};
+
+export const getPanActivationDirections = ({
+	gestureDirection,
+	hasSnapPoints,
+}: GetPanActivationDirectionsProps): GestureDirections => {
+	"worklet";
+	const panDirections = getPanGestureDirections(gestureDirection);
+
+	if (hasSnapPoints) {
+		const snapAxisDirections = getPanSnapAxisDirections(gestureDirection);
+
+		return {
+			vertical: !!snapAxisDirections.vertical,
+			verticalInverted: !!snapAxisDirections.vertical,
+			horizontal: !!snapAxisDirections.horizontal,
+			horizontalInverted: !!snapAxisDirections.horizontal,
+		};
+	}
+
+	const isBidirectional = panDirections.includes("bidirectional");
+
+	return {
+		vertical: panDirections.includes("vertical") || isBidirectional,
+		verticalInverted:
+			panDirections.includes("vertical-inverted") || isBidirectional,
+		horizontal: panDirections.includes("horizontal") || isBidirectional,
+		horizontalInverted:
+			panDirections.includes("horizontal-inverted") || isBidirectional,
+	};
+};
+
+export const getPanSnapAxisConfigForDirection = (
+	snapAxisDirections: SnapPanDirectionConfig,
+	direction: Direction,
+): { axis: SnapPanAxis; config: SnapPanAxisConfig } | null => {
+	"worklet";
+	const axis = getPanDirectionAxis(direction);
+	const config = snapAxisDirections[axis];
+
+	if (!config) return null;
+
+	return { axis, config };
+};