react-native-screen-transitions 3.5.2 → 3.6.0-alpha.1

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

@@ -1,22 +1,19 @@
-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 {
+interface ResolveOffsetRulesProps {
 	initialTouch: { x: number; y: number };
 	touch: { x: number; y: number };
 	directions: GestureDirections;
-	manager?: GestureStateManagerType;
-	gestureOffsetState: SharedValue<GestureOffsetState>;
+	activationState: GestureActivationState;
 	activationArea?: GestureActivationArea;
 	dimensions: Layout;
 	responseDistance?: number;
@@ -32,8 +29,6 @@ type NormalizedSides = {
 interface ShouldActivateOrFailProps {
 	deltaX: number;
 	deltaY: number;
-	hasHorizontal: boolean;
-	hasVertical: boolean;
 	isHorizontalSwipe: boolean;
 	isVerticalSwipe: boolean;
 	allowedRight: boolean;
@@ -57,6 +52,33 @@ interface ReturnValues {
 	isSwipingLeft: boolean;
 }
 
+interface OffsetRuleResult extends ReturnValues {
+	nextActivationState: GestureActivationState;
+}
+
+type ActivationResult = {
+	shouldActivate: boolean;
+	shouldFail: boolean;
+};
+
+interface AxisActivationProps {
+	movement: number;
+	deviation: number;
+	movementThreshold: number;
+	deviationTolerance: number;
+	positiveSwipe: boolean;
+	negativeSwipe: boolean;
+	positiveAllowed: boolean;
+	negativeAllowed: boolean;
+	positiveGate: boolean;
+	negativeGate: boolean;
+}
+
+type BoundaryState = {
+	atStart: boolean;
+	atEnd: boolean;
+};
+
 /**
  * 10 seems like the correct threshold for compatability with nested gestures outside of our package.
  */
@@ -85,6 +107,25 @@ export function normalizeSides(area?: GestureActivationArea): NormalizedSides {
 	};
 }
 
+const canActivateFromStartEdge = (
+	mode: ActivationArea,
+	touchPosition: number,
+	distance: number,
+) => {
+	"worklet";
+	return mode === "screen" || touchPosition <= distance;
+};
+
+const canActivateFromEndEdge = (
+	mode: ActivationArea,
+	touchPosition: number,
+	size: number,
+	distance: number,
+) => {
+	"worklet";
+	return mode === "screen" || touchPosition >= size - distance;
+};
+
 export function computeEdgeConstraints(
 	initialTouch: { x: number; y: number },
 	dimensions: Layout,
@@ -95,14 +136,26 @@ export function computeEdgeConstraints(
 	const xDist = responseDistance ?? DEFAULT_EDGE_DISTANCE_HORIZONTAL;
 	const yDist = responseDistance ?? DEFAULT_EDGE_DISTANCE_VERTICAL;
 
-	const horizontalRight = sides.left === "screen" || initialTouch.x <= xDist; // right swipe checks left edge
-	const horizontalLeft =
-		sides.right === "screen" || initialTouch.x >= dimensions.width - xDist; // left swipe checks right edge
-	const verticalDown = sides.top === "screen" || initialTouch.y <= yDist; // down swipe checks top edge
-	const verticalUp =
-		sides.bottom === "screen" || initialTouch.y >= dimensions.height - yDist; // up swipe checks bottom edge
-
-	return { horizontalRight, horizontalLeft, verticalDown, verticalUp } as const;
+	return {
+		horizontalRight: canActivateFromStartEdge(
+			sides.left,
+			initialTouch.x,
+			xDist,
+		),
+		horizontalLeft: canActivateFromEndEdge(
+			sides.right,
+			initialTouch.x,
+			dimensions.width,
+			xDist,
+		),
+		verticalDown: canActivateFromStartEdge(sides.top, initialTouch.y, yDist),
+		verticalUp: canActivateFromEndEdge(
+			sides.bottom,
+			initialTouch.y,
+			dimensions.height,
+			yDist,
+		),
+	} as const;
 }
 
 export function calculateSwipeDirs(deltaX: number, deltaY: number) {
@@ -126,110 +179,115 @@ export function calculateSwipeDirs(deltaX: number, deltaY: number) {
 	};
 }
 
-export function shouldActivateOrFail(params: ShouldActivateOrFailProps) {
+const shouldFailDirectionalGate = (
+	isDirectionSwipe: boolean,
+	allowed: boolean,
+	gate: boolean,
+) => {
 	"worklet";
+	return isDirectionSwipe && (!allowed || !gate);
+};
 
-	const {
-		deltaX,
-		deltaY,
-		hasHorizontal,
-		hasVertical,
-		isHorizontalSwipe,
-		isVerticalSwipe,
-		allowedRight,
-		allowedLeft,
-		allowedUp,
-		allowedDown,
-		horizontalGateRight,
-		horizontalGateLeft,
-		verticalGateUp,
-		verticalGateDown,
-		isSwipingRight,
-		isSwipingLeft,
-		isSwipingUp,
-		isSwipingDown,
-	} = params;
-
-	let shouldActivate = false;
-	let shouldFail = false;
-
-	if (hasHorizontal && isHorizontalSwipe) {
-		const hasEnoughHorizontalMovement =
-			Math.abs(deltaX) >= GESTURE_ACTIVATION_THRESHOLD_X;
-
-		const hasAcceptableVerticalDeviation =
-			Math.abs(deltaY) <= GESTURE_FAIL_TOLERANCE_X;
-
-		if (hasEnoughHorizontalMovement && hasAcceptableVerticalDeviation) {
-			const rightOk = isSwipingRight && allowedRight && horizontalGateRight;
-			const leftOk = isSwipingLeft && allowedLeft && horizontalGateLeft;
-			if (rightOk || leftOk) {
-				shouldActivate = true;
-			}
-		} else if (!hasAcceptableVerticalDeviation) {
-			shouldFail = true;
-		}
+const resolveAxisActivation = ({
+	movement,
+	deviation,
+	movementThreshold,
+	deviationTolerance,
+	positiveSwipe,
+	negativeSwipe,
+	positiveAllowed,
+	negativeAllowed,
+	positiveGate,
+	negativeGate,
+}: AxisActivationProps): ActivationResult => {
+	"worklet";
+	if (
+		shouldFailDirectionalGate(positiveSwipe, positiveAllowed, positiveGate) ||
+		shouldFailDirectionalGate(negativeSwipe, negativeAllowed, negativeGate) ||
+		Math.abs(deviation) > deviationTolerance
+	) {
+		return { shouldActivate: false, shouldFail: true };
 	}
 
-	if (hasVertical && isVerticalSwipe) {
-		const hasEnoughVerticalMovement =
-			Math.abs(deltaY) >= GESTURE_ACTIVATION_THRESHOLD_Y;
-		const hasAcceptableHorizontalDeviation =
-			Math.abs(deltaX) <= GESTURE_FAIL_TOLERANCE_Y;
-
-		if (hasEnoughVerticalMovement && hasAcceptableHorizontalDeviation) {
-			const upOk = isSwipingUp && allowedUp && verticalGateUp;
-			const downOk = isSwipingDown && allowedDown && verticalGateDown;
-			if (upOk || downOk) {
-				shouldActivate = true;
-			}
-		} else if (!hasAcceptableHorizontalDeviation) {
-			shouldFail = true;
-		}
+	if (Math.abs(movement) < movementThreshold) {
+		return { shouldActivate: false, shouldFail: false };
 	}
 
-	if (hasHorizontal && isHorizontalSwipe) {
-		if ((isSwipingLeft && !allowedLeft) || (isSwipingRight && !allowedRight)) {
-			shouldFail = true;
-		}
-		// If gating prohibits the dominant horizontal swipe, fail early
-		if (
-			(isSwipingRight && allowedRight && !horizontalGateRight) ||
-			(isSwipingLeft && allowedLeft && !horizontalGateLeft)
-		) {
-			shouldFail = true;
-		}
+	return {
+		shouldActivate:
+			(positiveSwipe && positiveAllowed && positiveGate) ||
+			(negativeSwipe && negativeAllowed && negativeGate),
+		shouldFail: false,
+	};
+};
+
+export function shouldActivateOrFail(params: ShouldActivateOrFailProps) {
+	"worklet";
+	const hasHorizontal = params.allowedLeft || params.allowedRight;
+	const hasVertical = params.allowedUp || params.allowedDown;
+
+	if (hasHorizontal && params.isHorizontalSwipe) {
+		return resolveAxisActivation({
+			movement: params.deltaX,
+			deviation: params.deltaY,
+			movementThreshold: GESTURE_ACTIVATION_THRESHOLD_X,
+			deviationTolerance: GESTURE_FAIL_TOLERANCE_X,
+			positiveSwipe: params.isSwipingRight,
+			negativeSwipe: params.isSwipingLeft,
+			positiveAllowed: params.allowedRight,
+			negativeAllowed: params.allowedLeft,
+			positiveGate: params.horizontalGateRight,
+			negativeGate: params.horizontalGateLeft,
+		});
 	}
 
-	if (hasVertical && isVerticalSwipe) {
-		if ((isSwipingUp && !allowedUp) || (isSwipingDown && !allowedDown)) {
-			shouldFail = true;
-		}
-		// If gating prohibits the dominant vertical swipe, fail early
-		if (
-			(isSwipingUp && allowedUp && !verticalGateUp) ||
-			(isSwipingDown && allowedDown && !verticalGateDown)
-		) {
-			shouldFail = true;
-		}
+	if (hasVertical && params.isVerticalSwipe) {
+		return resolveAxisActivation({
+			movement: params.deltaY,
+			deviation: params.deltaX,
+			movementThreshold: GESTURE_ACTIVATION_THRESHOLD_Y,
+			deviationTolerance: GESTURE_FAIL_TOLERANCE_Y,
+			positiveSwipe: params.isSwipingUp,
+			negativeSwipe: params.isSwipingDown,
+			positiveAllowed: params.allowedUp,
+			negativeAllowed: params.allowedDown,
+			positiveGate: params.verticalGateUp,
+			negativeGate: params.verticalGateDown,
+		});
 	}
 
-	return { shouldActivate, shouldFail };
+	return { shouldActivate: false, shouldFail: false };
 }
 
+const getNextActivationState = (
+	activationState: GestureActivationState,
+	shouldActivate: boolean,
+	shouldFail: boolean,
+) => {
+	"worklet";
+	if (shouldActivate) {
+		return GestureActivationState.PASSED;
+	}
+
+	if (shouldFail) {
+		return GestureActivationState.FAILED;
+	}
+
+	return activationState;
+};
+
 /**
  * Since we're using onTouchesMove to activate our pan, faillOffset and activateOffset don't actually work. In that case we'll create this function to use in onTouchesMove which acts simarly to the original functionality.
  */
-export const applyOffsetRules = ({
+export const resolveOffsetRules = ({
 	initialTouch,
 	touch,
 	directions,
-	manager,
-	gestureOffsetState,
+	activationState,
 	activationArea,
 	dimensions,
 	responseDistance,
-}: CheckGestureActivationProps): ReturnValues => {
+}: ResolveOffsetRulesProps): OffsetRuleResult => {
 	"worklet";
 
 	const deltaX = touch.x - initialTouch.x;
@@ -240,9 +298,6 @@ export const applyOffsetRules = ({
 	const allowedRight = directions.horizontal;
 	const allowedLeft = directions.horizontalInverted;
 
-	const hasHorizontal = allowedLeft || allowedRight;
-	const hasVertical = allowedUp || allowedDown;
-
 	const {
 		isSwipingDown,
 		isSwipingUp,
@@ -252,12 +307,13 @@ export const applyOffsetRules = ({
 		isHorizontalSwipe,
 	} = calculateSwipeDirs(deltaX, deltaY);
 
-	if (gestureOffsetState.value !== GestureOffsetState.PENDING) {
+	if (activationState !== GestureActivationState.PENDING) {
 		return {
 			isSwipingDown,
 			isSwipingUp,
 			isSwipingRight,
 			isSwipingLeft,
+			nextActivationState: activationState,
 		};
 	}
 
@@ -273,8 +329,6 @@ export const applyOffsetRules = ({
 	const { shouldActivate, shouldFail } = shouldActivateOrFail({
 		deltaX,
 		deltaY,
-		hasHorizontal,
-		hasVertical,
 		isHorizontalSwipe,
 		isVerticalSwipe,
 		allowedRight,
@@ -291,21 +345,61 @@ export const applyOffsetRules = ({
 		isSwipingDown,
 	});
 
-	if (shouldActivate) {
-		gestureOffsetState.value = GestureOffsetState.PASSED;
-	} else if (shouldFail) {
-		gestureOffsetState.value = GestureOffsetState.FAILED;
-		manager?.fail();
-	}
-
 	return {
 		isSwipingDown,
 		isSwipingUp,
 		isSwipingRight,
 		isSwipingLeft,
+		nextActivationState: getNextActivationState(
+			activationState,
+			shouldActivate,
+			shouldFail,
+		),
 	};
 };
 
+const getScrollBoundaryState = (
+	scrollState: ScrollGestureState,
+	direction: Direction,
+): BoundaryState => {
+	"worklet";
+	const isVerticalDirection =
+		direction === "vertical" || direction === "vertical-inverted";
+
+	const axisState = isVerticalDirection
+		? scrollState.vertical
+		: scrollState.horizontal;
+
+	const maxScrollOffset = Math.max(
+		0,
+		axisState.contentSize - axisState.layoutSize,
+	);
+
+	return {
+		atStart: axisState.offset <= SCROLL_EPILSON,
+		atEnd: axisState.offset >= maxScrollOffset - SCROLL_EPILSON,
+	};
+};
+
+const canYieldAtBoundary = (
+	direction: Direction,
+	{ atStart, atEnd }: BoundaryState,
+) => {
+	"worklet";
+	switch (direction) {
+		case "vertical":
+		case "horizontal":
+			return atStart;
+
+		case "vertical-inverted":
+		case "horizontal-inverted":
+			return atEnd;
+
+		default:
+			return true;
+	}
+};
+
 /**
  * Checks if a ScrollView is at its boundary for the given swipe direction.
  * This is a simplified boundary check that respects axis isolation.
@@ -324,80 +418,32 @@ 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;
-
-	// 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 boundary = getScrollBoundaryState(scrollState, direction);
 
 	// 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 ? boundary.atEnd : boundary.atStart;
 	}
 
-	// Non-sheet screens: each direction has its own boundary
-	switch (direction) {
-		case "vertical":
-			// Swipe down - check if at top of vertical scroll
-			// Even if content isn't scrollable, respect bounce/overscroll state
-			return atTop;
-
-		case "vertical-inverted":
-			// Swipe up - check if at bottom of vertical scroll
-			// Even if content isn't scrollable, respect bounce/overscroll state
-			return atBottom;
-
-		case "horizontal":
-			// Swipe right - check if at left of horizontal scroll
-			// Even if content isn't scrollable, respect bounce/overscroll state
-			return atLeft;
-
-		case "horizontal-inverted":
-			// Swipe left - check if at right of horizontal scroll
-			// Even if content isn't scrollable, respect bounce/overscroll state
-			return atRight;
-
-		default:
-			return true;
-	}
+	return canYieldAtBoundary(direction, boundary);
 }

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

@@ -0,0 +1,132 @@
+import { useCallback, useMemo } from "react";
+import type {
+	GestureStateManager,
+	GestureTouchEvent,
+} from "react-native-gesture-handler";
+import { type SharedValue, useSharedValue } from "react-native-reanimated";
+import { GestureStore } from "../../../../stores/gesture.store";
+import { GestureActivationState } from "../../../../types/gesture.types";
+import { useDescriptorDerivations } from "../../descriptors";
+import type { ScreenOptionsContextValue } from "../../options";
+import { resolvePanRuntime } from "../shared/runtime";
+import type {
+	DirectionClaimMap,
+	GestureDimensions,
+	PanGestureRuntime,
+	ScrollGestureState,
+} from "../types";
+import { resolvePanActivationMoveDecision } from "./pan-activation-decision";
+
+interface UsePanActivationProps {
+	scrollState: SharedValue<ScrollGestureState | null>;
+	childDirectionClaims: SharedValue<DirectionClaimMap>;
+	runtime: SharedValue<PanGestureRuntime>;
+	screenOptions: ScreenOptionsContextValue;
+	dimensions: GestureDimensions;
+}
+
+export const usePanActivation = ({
+	scrollState,
+	childDirectionClaims,
+	runtime,
+	screenOptions,
+	dimensions,
+}: UsePanActivationProps) => {
+	const { currentScreenKey, parentScreenKey } = useDescriptorDerivations();
+
+	const ancestorDismissing = useMemo(() => {
+		if (!parentScreenKey) return null;
+		return GestureStore.peekBag(parentScreenKey)?.dismissing ?? null;
+	}, [parentScreenKey]);
+
+	const initialTouch = useSharedValue({ x: 0, y: 0 });
+
+	const gestureActivationState = useSharedValue<GestureActivationState>(
+		GestureActivationState.PENDING,
+	);
+
+	const onTouchesDown = useCallback(
+		(
+			event: GestureTouchEvent,
+			stateManager: GestureStateManager | undefined,
+		) => {
+			"worklet";
+			const { participation, policy } = resolvePanRuntime(
+				runtime.get(),
+				screenOptions.get(),
+			);
+
+			if (
+				!participation.canTrackGesture ||
+				!policy.enabled ||
+				event.numberOfTouches !== 1
+			) {
+				gestureActivationState.set(GestureActivationState.FAILED);
+				stateManager?.fail();
+				return;
+			}
+
+			const firstTouch = event.changedTouches[0];
+			initialTouch.set({ x: firstTouch.x, y: firstTouch.y });
+			gestureActivationState.set(GestureActivationState.PENDING);
+		},
+		[gestureActivationState, initialTouch, runtime, screenOptions],
+	);
+
+	const onTouchesMove = useCallback(
+		(event: GestureTouchEvent, stateManager: GestureStateManager) => {
+			"worklet";
+
+			const currentActivationState = gestureActivationState.get();
+			const resolvedRuntime = resolvePanRuntime(
+				runtime.get(),
+				screenOptions.get(),
+			);
+			const decision = resolvePanActivationMoveDecision({
+				event,
+				runtime: resolvedRuntime,
+				dimensions,
+				initialTouch: initialTouch.get(),
+				activationState: currentActivationState,
+				ancestorDismissing: Boolean(ancestorDismissing?.get()),
+				childDirectionClaims: childDirectionClaims.get(),
+				currentScreenKey,
+				scrollState: scrollState.get(),
+			});
+
+			if (decision.nextActivationState !== currentActivationState) {
+				gestureActivationState.set(decision.nextActivationState);
+			}
+
+			if (decision.action === "fail") {
+				stateManager.fail();
+				return;
+			}
+
+			if (decision.action === "wait") {
+				return;
+			}
+
+			if (decision.direction) {
+				const { gestures } = resolvedRuntime.stores;
+				gestures.active.set(decision.direction);
+				gestures.direction.set(decision.direction);
+			}
+
+			stateManager.activate();
+		},
+		[
+			ancestorDismissing,
+			childDirectionClaims,
+			currentScreenKey,
+			dimensions,
+			gestureActivationState,
+			initialTouch,
+			runtime,
+			screenOptions,
+			scrollState,
+		],
+	);
+
+	return { onTouchesDown, onTouchesMove };
+};