react-native-screen-transitions 3.7.1 → 3.8.0-beta.0

package/src/shared/providers/screen/animation/helpers/build-screen-transition-options.ts

@@ -1,6 +1,4 @@
 import type {
-	GestureActivationArea,
-	GestureDirection,
 	ScreenTransitionConfig,
 	ScreenTransitionOptions,
 } from "../../../../types";
@@ -10,17 +8,6 @@ import {
 } from "../../../../utils/gesture-progress-mode";
 import { resolveSheetScrollGestureBehavior } from "../../../../utils/resolve-screen-transition-options";
 
-const cloneGestureDirection = (
-	direction: GestureDirection | GestureDirection[] | undefined,
-) => (Array.isArray(direction) ? [...direction] : direction);
-
-const cloneGestureActivationArea = (
-	activationArea: GestureActivationArea | undefined,
-) =>
-	typeof activationArea === "object" && activationArea !== null
-		? { ...activationArea }
-		: activationArea;
-
 export const buildScreenTransitionOptions = (
 	options: ScreenTransitionConfig,
 ): ScreenTransitionOptions => {
@@ -41,7 +28,7 @@ export const buildScreenTransitionOptions = (
 		navigationMaskEnabled: options.navigationMaskEnabled,
 		gestureEnabled: options.gestureEnabled,
 		gestureTracking: options.gestureTracking,
-		gestureDirection: cloneGestureDirection(options.gestureDirection),
+		gestureDirection: options.gestureDirection,
 		gestureSensitivity: options.gestureSensitivity,
 		gestureVelocityImpact: options.gestureVelocityImpact,
 		gestureSnapVelocityImpact: options.gestureSnapVelocityImpact,
@@ -51,9 +38,7 @@ export const buildScreenTransitionOptions = (
 		gestureDrivesProgress: gestureProgressMode
 			? gestureProgressModeDrivesProgress(gestureProgressMode)
 			: undefined,
-		gestureActivationArea: cloneGestureActivationArea(
-			options.gestureActivationArea,
-		),
+		gestureActivationArea: options.gestureActivationArea,
 		gestureSnapLocked: options.gestureSnapLocked,
 		sheetScrollGestureBehavior: hasSheetScrollGestureBehavior
 			? resolveSheetScrollGestureBehavior(options)

package/src/shared/providers/screen/animation/helpers/hydrate-transition-state/gesture-progress.ts

@@ -6,7 +6,7 @@ import {
 } from "../../../../../constants";
 import type { ScreenTransitionOptions } from "../../../../../types/animation.types";
 import type {
-	GestureDirection,
+	GestureDirectionOption,
 	GestureValues,
 } from "../../../../../types/gesture.types";
 import { resolveGestureProgressModeFromOptions } from "../../../../../utils/gesture-progress-mode";
@@ -23,7 +23,7 @@ import type { SnapBounds } from "./types";
 const resolvePanGestureDrivenProgress = (
 	baseProgress: number,
 	gesture: GestureValues,
-	gestureDirection: GestureDirection | GestureDirection[],
+	gestureDirection: GestureDirectionOption,
 	hasSnapPoints: boolean,
 	snapBounds: SnapBounds | null,
 ) => {
@@ -77,7 +77,7 @@ const resolvePanGestureDrivenProgress = (
 const resolvePinchGestureDrivenProgress = (
 	baseProgress: number,
 	gesture: GestureValues,
-	gestureDirection: GestureDirection | GestureDirection[],
+	gestureDirection: GestureDirectionOption,
 	hasSnapPoints: boolean,
 	snapBounds: SnapBounds | null,
 ) => {

package/src/shared/providers/screen/animation/helpers/hydrate-transition-state/index.ts

@@ -1,19 +1,10 @@
-import {
-	EPSILON,
-	LOGICAL_SETTLE_PROGRESS_THRESHOLD,
-	LOGICAL_SETTLE_REQUIRED_FRAMES,
-} from "../../../../../constants";
+import { EPSILON } from "../../../../../constants";
 import type {
 	ScreenTransitionOptions,
 	TransitionInterpolatorOptions,
 } from "../../../../../types/animation.types";
 import type { Layout } from "../../../../../types/screen.types";
 import { resolveGestureDrivenProgress } from "./gesture-progress";
-import {
-	computeLogicallySettled,
-	computeNextLogicalSettleFrameCount,
-	computeSettled,
-} from "./settle";
 import {
 	computeAnimatedSnapIndex,
 	computeTargetSnapIndex,
@@ -21,9 +12,6 @@ import {
 } from "./snap-points";
 import type { BuiltState } from "./types";
 
-const LOGICAL_SETTLE_STICKY_PROGRESS_THRESHOLD =
-	LOGICAL_SETTLE_PROGRESS_THRESHOLD * 10;
-
 const mergeTransitionOptions = (
 	base: ScreenTransitionOptions,
 	effective: TransitionInterpolatorOptions | undefined,
@@ -89,12 +77,14 @@ export const hydrateTransitionState = (
 	out.gesture.normScale = s.gesture.normScale.get();
 	out.gesture.focalX = s.gesture.focalX.get();
 	out.gesture.focalY = s.gesture.focalY.get();
+	out.gesture.rotation = s.gesture.rotation.get();
 	out.gesture.raw.x = s.gesture.raw.x.get();
 	out.gesture.raw.y = s.gesture.raw.y.get();
 	out.gesture.raw.normX = s.gesture.raw.normX.get();
 	out.gesture.raw.normY = s.gesture.raw.normY.get();
 	out.gesture.raw.scale = s.gesture.raw.scale.get();
 	out.gesture.raw.normScale = s.gesture.raw.normScale.get();
+	out.gesture.raw.rotation = s.gesture.raw.rotation.get();
 	out.gesture.dismissing = s.gesture.dismissing.get();
 	out.gesture.dragging = s.gesture.dragging.get();
 	out.gesture.settling = s.gesture.settling.get();
@@ -121,7 +111,8 @@ export const hydrateTransitionState = (
 	const hasResidualGestureValues =
 		Math.abs(out.gesture.normX) > EPSILON ||
 		Math.abs(out.gesture.normY) > EPSILON ||
-		Math.abs(out.gesture.normScale) > EPSILON;
+		Math.abs(out.gesture.normScale) > EPSILON ||
+		Math.abs(out.gesture.rotation) > EPSILON;
 
 	const isGestureActive =
 		out.gesture.dragging ||
@@ -139,43 +130,8 @@ export const hydrateTransitionState = (
 	out.gesture.isDismissing = out.gesture.dismissing;
 	out.gesture.isDragging = out.gesture.dragging;
 
-	out.settled = computeSettled(
-		out.animating,
-		out.gesture.dismissing,
-		out.closing,
-	);
-	const targetProgress = s.targetProgress.get();
-	const logicalSettleFrameCount = s.logicalSettleFrameCount.get();
-	const nextLogicalSettleFrameCount = computeNextLogicalSettleFrameCount({
-		progress: out.progress,
-		targetProgress,
-		frameCount: logicalSettleFrameCount,
-	});
-
-	if (nextLogicalSettleFrameCount !== logicalSettleFrameCount) {
-		s.logicalSettleFrameCount.set(nextLogicalSettleFrameCount);
-	}
-
-	const progressDistanceFromTarget = Math.abs(out.progress - targetProgress);
-	const computedLogicallySettled =
-		computeLogicallySettled({
-			progress: out.progress,
-			targetProgress,
-			frameCount: nextLogicalSettleFrameCount,
-		}) && !isGestureActive;
-
-	const wasLogicallySettled =
-		out.logicallySettled &&
-		logicalSettleFrameCount >= LOGICAL_SETTLE_REQUIRED_FRAMES;
-
-	const shouldPreserveLogicalSettle =
-		wasLogicallySettled &&
-		!isProgressAnimating &&
-		!isGestureActive &&
-		progressDistanceFromTarget <= LOGICAL_SETTLE_STICKY_PROGRESS_THRESHOLD;
-
-	out.logicallySettled =
-		computedLogicallySettled || shouldPreserveLogicalSettle ? 1 : 0;
+	out.settled = s.progressSettled.get() && !isGestureActive ? 1 : 0;
+	out.logicallySettled = out.settled;
 
 	out.meta = s.meta;
 	out.options = options;
@@ -193,6 +149,8 @@ export const hydrateTransitionState = (
 		out.layouts.content = undefined;
 	}
 
+	out.layouts.scroll = s.scrollMetadata.get() ?? undefined;
+
 	const autoSnapPoint = s.resolvedAutoSnapPoint.get();
 	const resolvedAutoSnap =
 		s.hasAutoSnapPoint && autoSnapPoint > 0 ? autoSnapPoint : null;
@@ -203,6 +161,8 @@ export const hydrateTransitionState = (
 		resolvedAutoSnap,
 	);
 
+	const targetProgress = s.targetProgress.get();
+
 	out.snapIndex = computeTargetSnapIndex(
 		targetProgress,
 		s.sortedNumericSnapPoints,

package/src/shared/providers/screen/animation/helpers/hydrate-transition-state/types.ts

@@ -4,6 +4,7 @@ import type {
 	ScreenTransitionOptions,
 	ScreenTransitionState,
 } from "../../../../../types/animation.types";
+import type { ScrollMetadataState } from "../../../../../types/gesture.types";
 import type { Layout } from "../../../../../types/screen.types";
 import type { BaseStackRoute } from "../../../../../types/stack.types";
 
@@ -13,6 +14,7 @@ export type BuiltState = {
 	willAnimate: SharedValue<number>;
 	closing: SharedValue<number>;
 	progressAnimating: SharedValue<number>;
+	progressSettled: SharedValue<number>;
 	entering: SharedValue<number>;
 	gesture: GestureStoreMap;
 	route: BaseStackRoute;
@@ -20,21 +22,15 @@ export type BuiltState = {
 	options: ScreenTransitionOptions;
 	optionsSlot: ScreenTransitionOptions;
 	targetProgress: SharedValue<number>;
-	logicalSettleFrameCount: SharedValue<number>;
 	resolvedAutoSnapPoint: SharedValue<number>;
 	measuredContentLayout: SharedValue<Layout | null>;
+	scrollMetadata: SharedValue<ScrollMetadataState | null>;
 	contentLayoutSlot: Layout;
 	hasAutoSnapPoint: boolean;
 	sortedNumericSnapPoints: number[];
 	unwrapped: ScreenTransitionState;
 };
 
-export type ComputeLogicallySettledParams = {
-	progress: number;
-	targetProgress: number;
-	frameCount: number;
-};
-
 export type SnapBounds = {
 	min: number;
 	max: number;

package/src/shared/providers/screen/animation/helpers/pipeline.ts

@@ -151,7 +151,7 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 				nextRouteKey,
 				frame.next?.progress,
 			);
-			frame.logicallySettled = frame.active.logicallySettled;
+			frame.logicallySettled = frame.active.settled;
 
 			return frame;
 		}, false);

package/src/shared/providers/screen/animation/helpers/selected-interpolator-options.ts

@@ -1,5 +1,6 @@
 import type { SharedValue } from "react-native-reanimated";
 import type { TransitionInterpolatorOptions } from "../../../../types/animation.types";
+import type { GestureDirectionEntry } from "../../../../types/gesture.types";
 
 export type SelectedInterpolatorOwner = "current" | "next";
 
@@ -8,17 +9,39 @@ export type SelectedInterpolatorOptions = {
 	options?: TransitionInterpolatorOptions;
 };
 
+const areGestureDirectionEntriesEqual = (
+	left: GestureDirectionEntry,
+	right: GestureDirectionEntry,
+) => {
+	"worklet";
+	if (left === right) return true;
+
+	if (typeof left === "string" || typeof right === "string") {
+		return false;
+	}
+
+	return left.gesture === right.gesture && left.area === right.area;
+};
+
 const areGestureDirectionsEqual = (
 	left: TransitionInterpolatorOptions["gestureDirection"],
 	right: TransitionInterpolatorOptions["gestureDirection"],
 ) => {
 	"worklet";
 	if (left === right) return true;
+	if (!left || !right) return false;
+	if (
+		!Array.isArray(left) &&
+		!Array.isArray(right) &&
+		areGestureDirectionEntriesEqual(left, right)
+	) {
+		return true;
+	}
 	if (!Array.isArray(left) || !Array.isArray(right)) return false;
 	if (left.length !== right.length) return false;
 
 	for (let i = 0; i < left.length; i++) {
-		if (left[i] !== right[i]) {
+		if (!areGestureDirectionEntriesEqual(left[i], right[i])) {
 			return false;
 		}
 	}

package/src/shared/providers/screen/animation/helpers/use-build-transition-state.ts

@@ -6,11 +6,13 @@ import {
 	GestureStore,
 	type GestureStoreMap,
 } from "../../../../stores/gesture.store";
+import { ScrollStore } from "../../../../stores/scroll.store";
 import { SystemStore } from "../../../../stores/system.store";
 import type {
 	BaseStackRoute,
 	Layout,
 	ScreenTransitionState,
+	ScrollMetadataState,
 } from "../../../../types";
 import type { ScreenTransitionOptions } from "../../../../types/animation.types";
 import type { BaseDescriptor } from "../../descriptors";
@@ -23,6 +25,7 @@ type BuiltState = {
 	willAnimate: SharedValue<number>;
 	closing: SharedValue<number>;
 	progressAnimating: SharedValue<number>;
+	progressSettled: SharedValue<number>;
 	entering: SharedValue<number>;
 	gesture: GestureStoreMap;
 	route: BaseStackRoute;
@@ -30,9 +33,9 @@ type BuiltState = {
 	options: ScreenTransitionOptions;
 	optionsSlot: ScreenTransitionOptions;
 	targetProgress: SharedValue<number>;
-	logicalSettleFrameCount: SharedValue<number>;
 	resolvedAutoSnapPoint: SharedValue<number>;
 	measuredContentLayout: SharedValue<Layout | null>;
+	scrollMetadata: SharedValue<ScrollMetadataState | null>;
 	contentLayoutSlot: Layout;
 	hasAutoSnapPoint: boolean;
 	sortedNumericSnapPoints: number[];
@@ -68,13 +71,11 @@ export const useBuildTransitionState = (
 			closing: AnimationStore.getValue(key, "closing"),
 			entering: AnimationStore.getValue(key, "entering"),
 			progressAnimating: AnimationStore.getValue(key, "progressAnimating"),
+			progressSettled: AnimationStore.getValue(key, "progressSettled"),
 			targetProgress: SystemStore.getValue(key, "targetProgress"),
-			logicalSettleFrameCount: SystemStore.getValue(
-				key,
-				"logicalSettleFrameCount",
-			),
 			resolvedAutoSnapPoint: SystemStore.getValue(key, "resolvedAutoSnapPoint"),
 			measuredContentLayout: SystemStore.getValue(key, "measuredContentLayout"),
+			scrollMetadata: ScrollStore.getValue(key, "metadata"),
 			contentLayoutSlot: { width: 0, height: 0 },
 			hasAutoSnapPoint: snapPoints?.includes("auto") ?? false,
 			sortedNumericSnapPoints,

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

@@ -6,10 +6,12 @@ import createProvider from "../../../utils/create-provider";
 import { useDescriptorDerivations } from "../descriptors";
 import { useScreenGestureConfig } from "./hooks/use-screen-gesture-config";
 import { useWalkUpAndRegisterShadowingClaims } from "./ownership/use-walk-up-and-register-shadowing-claims";
-import { useBuildPanGesture } from "./pan/build-pan-gesture";
-import { useBuildPinchGesture } from "./pinch/build-pinch-gesture";
+import { useBuildPanGesture } from "./pan/use-build-pan-gesture";
+import { useBuildPinchGesture } from "./pinch/use-build-pinch-gesture";
+import { useBuildRotationGesture } from "./rotation/use-build-rotation-gesture";
 import {
 	type DirectionClaimMap,
+	type GestureCompositionActivation,
 	type GestureContextType,
 	NO_DIRECTION_CLAIMS,
 } from "./types";
@@ -29,26 +31,39 @@ export const {
 	const gestureConfig = useScreenGestureConfig();
 	const { currentScreenKey } = useDescriptorDerivations();
 
-	const scrollState = ScrollStore.getValue(currentScreenKey, "state");
+	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);
 
+	// Pinch gestures should be simultaneous with pan gestures, but pan gestures should not be simultaneous with pinch gestures.
+	// Since we're using manual gestures, if pinch tries to become activated while pan is already active,
+	// the pinch gesture will be cancelled and the pan gesture will continue to be active.
+	const gestureCompositionActivation =
+		useSharedValue<GestureCompositionActivation>(null);
+
 	const panGesture = useBuildPanGesture({
 		scrollState,
 		gestureConfig,
 		childDirectionClaims,
+		gestureCompositionActivation,
 	});
 
 	const pinchGesture = useBuildPinchGesture({
 		gestureConfig,
+		gestureCompositionActivation,
+	});
+
+	const rotationGesture = useBuildRotationGesture({
+		gestureConfig,
+		gestureCompositionActivation,
 	});
 
 	const detectorGesture = useMemo(
-		() => Gesture.Race(panGesture, pinchGesture),
-		[panGesture, pinchGesture],
+		() => Gesture.Simultaneous(panGesture, pinchGesture, rotationGesture),
+		[panGesture, pinchGesture, rotationGesture],
 	);
 
 	const value = useMemo<GestureContextType>(
@@ -57,6 +72,7 @@ export const {
 			detectorGesture,
 			panGesture,
 			pinchGesture,
+			rotationGesture,
 			scrollState,
 			gestureContext,
 			claimedDirections: gestureConfig.participation.claimedDirections,
@@ -67,6 +83,7 @@ export const {
 			detectorGesture,
 			panGesture,
 			pinchGesture,
+			rotationGesture,
 			scrollState,
 			gestureContext,
 			gestureConfig.participation.claimedDirections,

package/src/shared/providers/screen/gestures/ownership/compute-claimed-directions.ts

@@ -1,6 +1,6 @@
 import { DEFAULT_GESTURE_DIRECTION } from "../../../../constants";
 import type {
-	GestureDirection,
+	GestureDirectionOption,
 	PanGestureDirection,
 } from "../../../../types/gesture.types";
 import {
@@ -8,6 +8,7 @@ import {
 	type Direction,
 	NO_CLAIMS,
 } from "../../../../types/ownership.types";
+import { getPanGestureDirections } from "../shared/directions";
 
 const createClaimSet = (): ClaimedDirections => ({
 	vertical: false,
@@ -17,14 +18,10 @@ const createClaimSet = (): ClaimedDirections => ({
 });
 
 const normalizePanGestureDirections = (
-	gestureDirection: GestureDirection | GestureDirection[] | undefined,
-): PanGestureDirection[] => {
+	gestureDirection: GestureDirectionOption | undefined,
+) => {
 	const direction = gestureDirection ?? DEFAULT_GESTURE_DIRECTION;
-
-	return (Array.isArray(direction) ? direction : [direction]).filter(
-		(dir): dir is PanGestureDirection =>
-			dir !== "pinch-in" && dir !== "pinch-out",
-	);
+	return getPanGestureDirections(direction);
 };
 
 const claimPanDirection = (
@@ -74,7 +71,7 @@ const expandSnapPointAxisClaims = (claims: ClaimedDirections) => {
  */
 export function computeClaimedDirections(
 	canClaimDirections: boolean,
-	gestureDirection: GestureDirection | GestureDirection[] | undefined,
+	gestureDirection: GestureDirectionOption | undefined,
 	hasSnapPoints: boolean,
 ): ClaimedDirections {
 	if (!canClaimDirections) {

package/src/shared/providers/screen/gestures/pan/{pan-activation-decision.ts → activation/pan-activation-decision.ts}

@@ -1,18 +1,18 @@
 import type { GestureTouchEvent } from "react-native-gesture-handler";
-import { EPSILON } from "../../../../constants";
+import { EPSILON } from "../../../../../constants";
 import {
 	GestureActivationState,
 	type ScrollGestureState,
-} from "../../../../types/gesture.types";
-import type { Direction } from "../../../../types/ownership.types";
-import { shouldDeferToChildClaim } from "../ownership/resolve-ownership";
-import { getPanSnapAxisConfigForDirection } from "../shared/directions";
-import { resolveRuntimeSnapPoints } from "../shared/snap-points";
+} from "../../../../../types/gesture.types";
+import type { Direction } from "../../../../../types/ownership.types";
+import { shouldDeferToChildClaim } from "../../ownership/resolve-ownership";
+import { getPanSnapAxisConfigForDirection } from "../../shared/directions";
+import { resolveRuntimeSnapPoints } from "../../shared/snap-points";
 import type {
 	DirectionClaimMap,
 	GestureDimensions,
 	PanGestureRuntime,
-} from "../types";
+} from "../../types";
 import {
 	checkScrollBoundary,
 	resolveOffsetRules,
@@ -280,13 +280,22 @@ const resolveDismissingDecision = (
 	);
 };
 
+const isVerticalDirection = (direction: Direction) => {
+	"worklet";
+	return direction === "vertical" || direction === "vertical-inverted";
+};
+
 const resolveUntouchedScrollDecision = (
 	scrollState: ScrollGestureState | null,
 	swipeDirection: Direction,
 	nextActivationState: GestureActivationState,
 ): PanActivationDecision | null => {
 	"worklet";
-	if (scrollState?.isTouched ?? false) {
+	const axisState = isVerticalDirection(swipeDirection)
+		? scrollState?.vertical
+		: scrollState?.horizontal;
+
+	if (axisState?.isTouched ?? false) {
 		return null;
 	}
 

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

@@ -1,29 +1,28 @@
-import type { GestureDirections } from "../../../../types/gesture.types";
+import type { GestureDirections } from "../../../../../types/gesture.types";
 import {
-	type ActivationArea,
-	type GestureActivationArea,
 	GestureActivationState,
-	type SideActivation,
-} from "../../../../types/gesture.types";
-import type { Direction } from "../../../../types/ownership.types";
-import type { Layout } from "../../../../types/screen.types";
-import type { ScrollGestureState } from "../types";
+	type GestureDirectionActivationArea,
+	type ResolvedGestureActivationArea,
+} from "../../../../../types/gesture.types";
+import type { Direction } from "../../../../../types/ownership.types";
+import type { Layout } from "../../../../../types/screen.types";
+import type { ScrollGestureState } from "../../types";
 
 interface ResolveOffsetRulesProps {
 	initialTouch: { x: number; y: number };
 	touch: { x: number; y: number };
 	directions: GestureDirections;
 	activationState: GestureActivationState;
-	activationArea?: GestureActivationArea;
+	activationArea?: ResolvedGestureActivationArea;
 	dimensions: Layout;
 	responseDistance?: number;
 }
 
 type NormalizedSides = {
-	left: ActivationArea;
-	right: ActivationArea;
-	top: ActivationArea;
-	bottom: ActivationArea;
+	left: GestureDirectionActivationArea;
+	right: GestureDirectionActivationArea;
+	top: GestureDirectionActivationArea;
+	bottom: GestureDirectionActivationArea;
 };
 
 interface ShouldActivateOrFailProps {
@@ -91,39 +90,47 @@ const DEFAULT_EDGE_DISTANCE_VERTICAL = 135;
 const DEFAULT_ACTIVATION_AREA = "screen" as const;
 const SCROLL_EPILSON = 1;
 
-export function normalizeSides(area?: GestureActivationArea): NormalizedSides {
+export function normalizeSides(
+	area?: ResolvedGestureActivationArea,
+): NormalizedSides {
 	"worklet";
-	if (!area || typeof area === "string") {
-		const mode: ActivationArea = area ?? DEFAULT_ACTIVATION_AREA;
+	if (!area || typeof area === "string" || typeof area === "number") {
+		const mode: GestureDirectionActivationArea =
+			area ?? DEFAULT_ACTIVATION_AREA;
 		return { left: mode, right: mode, top: mode, bottom: mode };
 	}
 
-	const s: SideActivation = area as SideActivation;
 	return {
-		left: s.left ?? DEFAULT_ACTIVATION_AREA,
-		right: s.right ?? DEFAULT_ACTIVATION_AREA,
-		top: s.top ?? DEFAULT_ACTIVATION_AREA,
-		bottom: s.bottom ?? DEFAULT_ACTIVATION_AREA,
+		left: area.left ?? DEFAULT_ACTIVATION_AREA,
+		right: area.right ?? DEFAULT_ACTIVATION_AREA,
+		top: area.top ?? DEFAULT_ACTIVATION_AREA,
+		bottom: area.bottom ?? DEFAULT_ACTIVATION_AREA,
 	};
 }
 
 const canActivateFromStartEdge = (
-	mode: ActivationArea,
+	mode: GestureDirectionActivationArea,
 	touchPosition: number,
 	distance: number,
 ) => {
 	"worklet";
-	return mode === "screen" || touchPosition <= distance;
+	if (mode === "screen") return true;
+
+	const edgeDistance = typeof mode === "number" ? mode : distance;
+	return touchPosition <= edgeDistance;
 };
 
 const canActivateFromEndEdge = (
-	mode: ActivationArea,
+	mode: GestureDirectionActivationArea,
 	touchPosition: number,
 	size: number,
 	distance: number,
 ) => {
 	"worklet";
-	return mode === "screen" || touchPosition >= size - distance;
+	if (mode === "screen") return true;
+
+	const edgeDistance = typeof mode === "number" ? mode : distance;
+	return touchPosition >= size - edgeDistance;
 };
 
 export function computeEdgeConstraints(