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

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

@@ -1,4 +1,3 @@
-import type { SharedValue } from "react-native-reanimated";
 import type { GestureDirections } from "../../../../types/gesture.types";
 import {
 	type ActivationArea,
@@ -10,11 +9,11 @@ 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;
-	gestureActivationState: SharedValue<GestureActivationState>;
+	activationState: GestureActivationState;
 	activationArea?: GestureActivationArea;
 	dimensions: Layout;
 	responseDistance?: number;
@@ -30,8 +29,6 @@ type NormalizedSides = {
 interface ShouldActivateOrFailProps {
 	deltaX: number;
 	deltaY: number;
-	hasHorizontal: boolean;
-	hasVertical: boolean;
 	isHorizontalSwipe: boolean;
 	isVerticalSwipe: boolean;
 	allowedRight: boolean;
@@ -55,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.
  */
@@ -83,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,
@@ -93,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) {
@@ -124,109 +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,
-	gestureActivationState,
+	activationState,
 	activationArea,
 	dimensions,
 	responseDistance,
-}: CheckGestureActivationProps): ReturnValues => {
+}: ResolveOffsetRulesProps): OffsetRuleResult => {
 	"worklet";
 
 	const deltaX = touch.x - initialTouch.x;
@@ -237,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,
@@ -249,12 +307,13 @@ export const applyOffsetRules = ({
 		isHorizontalSwipe,
 	} = calculateSwipeDirs(deltaX, deltaY);
 
-	if (gestureActivationState.get() !== GestureActivationState.PENDING) {
+	if (activationState !== GestureActivationState.PENDING) {
 		return {
 			isSwipingDown,
 			isSwipingUp,
 			isSwipingRight,
 			isSwipingLeft,
+			nextActivationState: activationState,
 		};
 	}
 
@@ -270,8 +329,6 @@ export const applyOffsetRules = ({
 	const { shouldActivate, shouldFail } = shouldActivateOrFail({
 		deltaX,
 		deltaY,
-		hasHorizontal,
-		hasVertical,
 		isHorizontalSwipe,
 		isVerticalSwipe,
 		allowedRight,
@@ -288,20 +345,61 @@ export const applyOffsetRules = ({
 		isSwipingDown,
 	});
 
-	if (shouldActivate) {
-		gestureActivationState.set(GestureActivationState.PASSED);
-	} else if (shouldFail) {
-		gestureActivationState.set(GestureActivationState.FAILED);
-	}
-
 	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.
@@ -337,52 +435,15 @@ export function checkScrollBoundary(
 		return true;
 	}
 
-	const isVerticalDirection =
-		direction === "vertical" || direction === "vertical-inverted";
-
-	const axisState = isVerticalDirection
-		? scrollState.vertical
-		: scrollState.horizontal;
-
-	// Calculate max scroll values
-	const maxScrollOffset = Math.max(
-		0,
-		axisState.contentSize - axisState.layoutSize,
-	);
-	const atStart = axisState.offset <= SCROLL_EPILSON;
-	const atEnd = axisState.offset >= maxScrollOffset - 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) {
 		// Bottom sheet / right drawer (not inverted): boundary at scroll start
 		// Top sheet / left drawer (inverted): boundary at scroll end
-		return snapAxisInverted ? atEnd : atStart;
+		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 atStart;
-
-		case "vertical-inverted":
-			// Swipe up - check if at bottom of vertical scroll
-			// Even if content isn't scrollable, respect bounce/overscroll state
-			return atEnd;
-
-		case "horizontal":
-			// Swipe right - check if at left of horizontal scroll
-			// Even if content isn't scrollable, respect bounce/overscroll state
-			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 atEnd;
-
-		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 };
+};

package/src/shared/providers/screen/gestures/{helpers/pan-phases.ts → pan/pan-lifecycle.ts}

@@ -2,6 +2,7 @@ import { clamp } from "react-native-reanimated";
 import { EPSILON, FALSE, TRUE } from "../../../../constants";
 import { animateToProgress } from "../../../../utils/animation/animate-to-progress";
 import { emit } from "../../../../utils/animation/emit";
+import { normalizeGestureTranslation } from "../shared/physics";
 import type {
 	GestureDimensions,
 	PanGestureEvent,
@@ -9,8 +10,8 @@ import type {
 	PanReleaseResult,
 	PanTrackState,
 } from "../types";
-import { normalizeGestureTranslation } from "./gesture-physics";
-import { resetGestureValues } from "./gesture-reset";
+import { buildPanReleasePlan } from "./pan-release";
+import { resetPanGestureValues } from "./pan-reset";
 
 export const startPanBase = (runtime: PanGestureRuntime) => {
 	"worklet";
@@ -84,41 +85,45 @@ export const finalizePanRelease = (
 ) => {
 	"worklet";
 	const {
-		policy,
 		stores: { gestures, animations, system },
 	} = runtime;
-	const { width, height } = dimensions;
-	const releaseVelocityScale = Math.max(0, policy.gestureReleaseVelocityScale);
-	const resetVelocityX = rawEvent.velocityX * releaseVelocityScale;
-	const resetVelocityY = rawEvent.velocityY * releaseVelocityScale;
+	const plan = buildPanReleasePlan(release, runtime, dimensions, rawEvent);
+
+	if (typeof plan.commitProgress === "number") {
+		animations.progress.set(plan.commitProgress);
+		system.targetProgress.set(plan.commitProgress);
+	}
 
-	resetGestureValues({
-		spec: release.resetSpec,
+	resetPanGestureValues({
+		spec: plan.resetSpec,
 		gestures,
-		shouldDismiss: release.shouldDismiss,
-		velocityX: resetVelocityX,
-		velocityY: resetVelocityY,
-		velocityNormX: resetVelocityX / Math.max(1, width),
-		velocityNormY: resetVelocityY / Math.max(1, height),
+		shouldDismiss: plan.shouldDismiss,
+		velocityX: plan.resetVelocityX,
+		velocityY: plan.resetVelocityY,
+		velocityNormX: plan.resetVelocityNormX,
+		velocityNormY: plan.resetVelocityNormY,
+		resetNormalizedValues: plan.resetNormalizedValues,
+		resetNormalizedValuesImmediately: plan.resetNormalizedValuesImmediately,
+		preserveRawValues: plan.preserveRawValues,
 	});
 
 	const progressAlreadyAtTarget =
-		Math.abs(animations.progress.get() - release.target) <= EPSILON;
+		Math.abs(animations.progress.get() - plan.target) <= EPSILON;
 
-	if (!release.shouldDismiss && progressAlreadyAtTarget) {
-		system.targetProgress.set(release.target);
-		animations.animating.set(FALSE);
+	if (!plan.shouldDismiss && progressAlreadyAtTarget) {
+		system.targetProgress.set(plan.target);
+		animations.progressAnimating.set(FALSE);
 		return;
 	}
 
 	animateToProgress({
-		target: release.target,
-		onAnimationFinish: release.shouldDismiss ? dismissScreen : undefined,
-		spec: release.transitionSpec,
+		target: plan.target,
+		onAnimationFinish: plan.shouldDismiss ? dismissScreen : undefined,
+		spec: plan.transitionSpec,
 		emitWillAnimate: false,
 		markEntering: false,
 		targetProgress: system.targetProgress,
 		animations,
-		initialVelocity: release.initialVelocity,
+		initialVelocity: plan.progressVelocity,
 	});
 };