react-native-screen-transitions 3.2.1 → 3.3.0-beta.1

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

@@ -1,40 +1,14 @@
 import { StackActions } from "@react-navigation/native";
 import { useCallback, useMemo, useRef } from "react";
-import { useWindowDimensions } from "react-native";
-import {
-	Gesture,
-	type GestureStateChangeEvent,
-	type GestureTouchEvent,
-	type GestureType,
-	type GestureUpdateEvent,
-	type PanGestureHandlerEventPayload,
-} from "react-native-gesture-handler";
-import type { GestureStateManagerType } from "react-native-gesture-handler/lib/typescript/handlers/gestures/gestureStateManager";
-import { type SharedValue, useSharedValue } from "react-native-reanimated";
-import {
-	DEFAULT_GESTURE_ACTIVATION_AREA,
-	DEFAULT_GESTURE_DIRECTION,
-	DEFAULT_GESTURE_DRIVES_PROGRESS,
-	GESTURE_VELOCITY_IMPACT,
-} from "../../constants";
+import { Gesture, type GestureType } from "react-native-gesture-handler";
+import type { SharedValue } from "react-native-reanimated";
 import type {
 	GestureContextType,
 	ScrollConfig,
 } from "../../providers/gestures.provider";
 import { useKeys } from "../../providers/screen/keys.provider";
-import { AnimationStore } from "../../stores/animation.store";
 import { GestureStore, type GestureStoreMap } from "../../stores/gesture.store";
-import {
-	type GestureDirection,
-	GestureOffsetState,
-} from "../../types/gesture.types";
-import { startScreenTransition } from "../../utils/animation/start-screen-transition";
-import { applyOffsetRules } from "../../utils/gesture/check-gesture-activation";
-import { determineDismissal } from "../../utils/gesture/determine-dismissal";
-import { mapGestureToProgress } from "../../utils/gesture/map-gesture-to-progress";
-import { resetGestureValues } from "../../utils/gesture/reset-gesture-values";
-import { velocity } from "../../utils/gesture/velocity";
-import useStableCallbackValue from "../use-stable-callback-value";
+import { useScreenGestureHandlers } from "./use-screen-gesture-handlers";
 
 interface BuildGesturesHookProps {
 	scrollConfig: SharedValue<ScrollConfig | null>;
@@ -50,21 +24,13 @@ export const useBuildGestures = ({
 	nativeGesture: GestureType;
 	gestureAnimationValues: GestureStoreMap;
 } => {
-	const dimensions = useWindowDimensions();
-
 	const { current } = useKeys();
-	const navState = current.navigation.getState();
-	const isFirstScreen =
-		navState.routes.findIndex((r) => r.key === current.route.key) === 0;
 
-	const initialTouch = useSharedValue({
-		x: 0,
-		y: 0,
-	});
+	const navState = current.navigation.getState();
 
-	const gestureOffsetState = useSharedValue<GestureOffsetState>(
-		GestureOffsetState.PENDING,
-	);
+	const isFirstScreen = useMemo(() => {
+		return navState.routes.findIndex((r) => r.key === current.route.key) === 0;
+	}, [navState.routes, current.route.key]);
 
 	// Ref for external gesture coordination (e.g., swipeable lists)
 	const panGestureRef = useRef<GestureType | undefined>(undefined);
@@ -72,36 +38,19 @@ export const useBuildGestures = ({
 	const gestureAnimationValues = GestureStore.getRouteGestures(
 		current.route.key,
 	);
-	const animations = AnimationStore.getAll(current.route.key);
 
-	const {
-		gestureDirection = DEFAULT_GESTURE_DIRECTION,
-		gestureVelocityImpact = GESTURE_VELOCITY_IMPACT,
-		gestureDrivesProgress = DEFAULT_GESTURE_DRIVES_PROGRESS,
-		gestureActivationArea = DEFAULT_GESTURE_ACTIVATION_AREA,
-		gestureResponseDistance,
-		transitionSpec,
-	} = current.options;
+	const { snapPoints } = current.options;
 
-	const gestureEnabled = Boolean(
+	// Dismiss gesture is controlled by gestureEnabled (disabled for first screen)
+	const canDismiss = Boolean(
 		isFirstScreen ? false : current.options.gestureEnabled,
 	);
 
-	const directions = useMemo(() => {
-		const directionsArray = Array.isArray(gestureDirection)
-			? gestureDirection
-			: [gestureDirection];
-		const isBidirectional = directionsArray.includes("bidirectional");
-
-		return {
-			vertical: directionsArray.includes("vertical") || isBidirectional,
-			verticalInverted:
-				directionsArray.includes("vertical-inverted") || isBidirectional,
-			horizontal: directionsArray.includes("horizontal") || isBidirectional,
-			horizontalInverted:
-				directionsArray.includes("horizontal-inverted") || isBidirectional,
-		};
-	}, [gestureDirection]);
+	// Snap navigation works independently - enabled when snap points exist
+	// This matches iOS native sheet behavior where gestureEnabled: false
+	// disables dismiss but you can still drag between detents
+	const hasSnapPoints = Array.isArray(snapPoints) && snapPoints.length > 0;
+	const gestureEnabled = canDismiss || hasSnapPoints;
 
 	const handleDismiss = useCallback(() => {
 		// If an ancestor navigator is already dismissing, skip this dismiss to
@@ -127,216 +76,15 @@ export const useBuildGestures = ({
 		});
 	}, [current, ancestorContext]);
 
-	const onTouchesDown = useStableCallbackValue((e: GestureTouchEvent) => {
-		"worklet";
-		const firstTouch = e.changedTouches[0];
-		initialTouch.value = { x: firstTouch.x, y: firstTouch.y };
-		gestureOffsetState.value = GestureOffsetState.PENDING;
-	});
-
-	const onTouchesMove = useStableCallbackValue(
-		(e: GestureTouchEvent, manager: GestureStateManagerType) => {
-			"worklet";
-
-			// If an ancestor navigator is already dismissing via gesture, block new gestures here.
-			if (ancestorContext?.gestureAnimationValues.isDismissing?.value) {
-				gestureOffsetState.value = GestureOffsetState.FAILED;
-				manager.fail();
-				return;
-			}
-
-			const touch = e.changedTouches[0];
-
-			const { isSwipingDown, isSwipingUp, isSwipingRight, isSwipingLeft } =
-				applyOffsetRules({
-					touch,
-					directions,
-					manager,
-					dimensions,
-					gestureOffsetState,
-					initialTouch: initialTouch.value,
-					activationArea: gestureActivationArea,
-					responseDistance: gestureResponseDistance,
-				});
-
-			if (gestureOffsetState.value === GestureOffsetState.FAILED) {
-				manager.fail();
-				return;
-			}
-
-			// Keep pending until thresholds are met; no eager activation.
-			if (gestureAnimationValues.isDragging?.value) {
-				manager.activate();
-				return;
-			}
-
-			const maxScrollY = scrollConfig.value?.contentHeight
-				? scrollConfig.value.contentHeight - scrollConfig.value.layoutHeight
-				: 0;
-
-			const maxScrollX = scrollConfig.value?.contentWidth
-				? scrollConfig.value.contentWidth - scrollConfig.value.layoutWidth
-				: 0;
-
-			const recognizedDirection =
-				isSwipingDown || isSwipingUp || isSwipingRight || isSwipingLeft;
-
-			const scrollCfg = scrollConfig.value;
-
-			let shouldActivate = false;
-			let activatedDirection: GestureDirection | null = null;
-
-			if (recognizedDirection) {
-				if (directions.vertical && isSwipingDown) {
-					shouldActivate = scrollCfg ? scrollCfg.y <= 0 : true;
-					if (shouldActivate) activatedDirection = "vertical";
-				}
-				if (directions.horizontal && isSwipingRight) {
-					shouldActivate = scrollCfg ? scrollCfg.x <= 0 : true;
-					if (shouldActivate) activatedDirection = "horizontal";
-				}
-				if (directions.verticalInverted && isSwipingUp) {
-					shouldActivate = scrollCfg ? scrollCfg.y >= maxScrollY : true;
-					if (shouldActivate) activatedDirection = "vertical-inverted";
-				}
-				if (directions.horizontalInverted && isSwipingLeft) {
-					shouldActivate = scrollCfg ? scrollCfg.x >= maxScrollX : true;
-					if (shouldActivate) activatedDirection = "horizontal-inverted";
-				}
-			}
-
-			if (recognizedDirection && !shouldActivate) {
-				manager.fail();
-				return;
-			}
-
-			if (
-				shouldActivate &&
-				gestureOffsetState.value === GestureOffsetState.PASSED &&
-				!gestureAnimationValues.isDismissing?.value
-			) {
-				gestureAnimationValues.direction.value = activatedDirection;
-				manager.activate();
-				return;
-			}
-		},
-	);
-
-	const onStart = useStableCallbackValue(() => {
-		"worklet";
-		gestureAnimationValues.isDragging.value = 1;
-		gestureAnimationValues.isDismissing.value = 0;
-	});
-
-	const onUpdate = useStableCallbackValue(
-		(event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
-			"worklet";
-
-			let gestureProgress = 0;
-
-			const { translationX, translationY } = event;
-			const { width, height } = dimensions;
-
-			gestureAnimationValues.x.value = translationX;
-			gestureAnimationValues.y.value = translationY;
-			gestureAnimationValues.normalizedX.value = Math.max(
-				-1,
-				Math.min(1, translationX / width),
-			);
-			gestureAnimationValues.normalizedY.value = Math.max(
-				-1,
-				Math.min(1, translationY / height),
-			);
-
-			let maxProgress = 0;
-
-			const allowedDown = directions.vertical;
-			const allowedUp = directions.verticalInverted;
-			const allowedRight = directions.horizontal;
-			const allowedLeft = directions.horizontalInverted;
-
-			if (allowedRight && event.translationX > 0) {
-				const currentProgress = mapGestureToProgress(
-					translationX,
-					dimensions.width,
-				);
-				maxProgress = Math.max(maxProgress, currentProgress);
-			}
-
-			if (allowedLeft && event.translationX < 0) {
-				const currentProgress = mapGestureToProgress(
-					-translationX,
-					dimensions.width,
-				);
-				maxProgress = Math.max(maxProgress, currentProgress);
-			}
-
-			if (allowedDown && event.translationY > 0) {
-				const currentProgress = mapGestureToProgress(
-					translationY,
-					dimensions.height,
-				);
-				maxProgress = Math.max(maxProgress, currentProgress);
-			}
-
-			if (allowedUp && event.translationY < 0) {
-				const currentProgress = mapGestureToProgress(
-					-translationY,
-					dimensions.height,
-				);
-				maxProgress = Math.max(maxProgress, currentProgress);
-			}
-
-			gestureProgress = maxProgress;
-
-			if (gestureDrivesProgress) {
-				animations.progress.value = 1 - gestureProgress;
-			}
-		},
-	);
-
-	const onEnd = useStableCallbackValue(
-		(event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
-			"worklet";
-
-			const { shouldDismiss } = determineDismissal({
-				event,
-				directions,
-				dimensions,
-				gestureVelocityImpact,
-			});
-
-			const spec = shouldDismiss ? transitionSpec?.close : transitionSpec?.open;
-
-			resetGestureValues({
-				spec,
-				gestures: gestureAnimationValues,
-				shouldDismiss,
-				event,
-				dimensions,
-			});
-
-			const initialVelocity = velocity.calculateProgressVelocity({
-				animations,
-				shouldDismiss,
-				event,
-				dimensions,
-				directions,
-			});
-
-			startScreenTransition({
-				target: shouldDismiss ? "close" : "open",
-				onAnimationFinish: shouldDismiss ? handleDismiss : undefined,
-				spec: transitionSpec,
-				animations,
-				initialVelocity,
-			});
-		},
-	);
+	const { onTouchesDown, onTouchesMove, onStart, onUpdate, onEnd } =
+		useScreenGestureHandlers({
+			scrollConfig,
+			canDismiss,
+			handleDismiss,
+			ancestorIsDismissing:
+				ancestorContext?.gestureAnimationValues.isDismissing,
+		});
 
-	// Memoize gestures to keep stable references - critical for RNGH
-	// Child gestures reference ancestor's pan via requireExternalGestureToFail,
-	// so the pan gesture MUST be stable or children will reference stale objects
 	return useMemo(() => {
 		const panGesture = Gesture.Pan()
 			.withRef(panGestureRef)