react-native-screen-transitions 3.2.0 → 3.3.0-beta.0

package/src/shared/components/screen-container.tsx

@@ -0,0 +1,65 @@
+import { StackActions } from "@react-navigation/native";
+import { memo, useCallback } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { NO_STYLES } from "../constants";
+import { useBackdropPointerEvents } from "../hooks/use-backdrop-pointer-events";
+import { useKeys } from "../providers/screen/keys.provider";
+import { useScreenStyles } from "../providers/screen/styles.provider";
+
+type Props = {
+	children: React.ReactNode;
+};
+
+export const ScreenContainer = memo(({ children }: Props) => {
+	const { stylesMap } = useScreenStyles();
+	const { current } = useKeys();
+	const { pointerEvents, backdropBehavior } = useBackdropPointerEvents();
+
+	const isDismissable = backdropBehavior === "dismiss";
+
+	const handleBackdropPress = useCallback(() => {
+		current.navigation.dispatch(StackActions.pop());
+	}, [current.navigation]);
+
+	const animatedContentStyle = useAnimatedStyle(() => {
+		"worklet";
+		return stylesMap.value.contentStyle || NO_STYLES;
+	});
+
+	const animatedBackdropStyle = useAnimatedStyle(() => {
+		"worklet";
+		return (
+			stylesMap.value.backdropStyle ?? stylesMap.value.overlayStyle ?? NO_STYLES
+		);
+	});
+
+	return (
+		<View style={styles.container} pointerEvents={pointerEvents}>
+			<Pressable
+				style={StyleSheet.absoluteFillObject}
+				pointerEvents={isDismissable ? "auto" : "none"}
+				onPress={isDismissable ? handleBackdropPress : undefined}
+			>
+				<Animated.View
+					style={[StyleSheet.absoluteFillObject, animatedBackdropStyle]}
+				/>
+			</Pressable>
+			<Animated.View
+				style={[styles.content, animatedContentStyle]}
+				pointerEvents={isDismissable ? "box-none" : pointerEvents}
+			>
+				{children}
+			</Animated.View>
+		</View>
+	);
+});
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+	},
+	content: {
+		flex: 1,
+	},
+});

package/src/shared/configs/presets.ts

@@ -208,7 +208,7 @@ export const ElasticCard = (
 				contentStyle: {
 					transform: [{ scale }, { translateX }, { translateY }],
 				},
-				overlayStyle: {
+				backdropStyle: {
 					backgroundColor: !next ? overlayColor : "rgba(0,0,0,0)",
 				},
 			};
@@ -281,7 +281,7 @@ export const SharedIGImage = ({
 				});
 
 				return {
-					overlayStyle: {
+					backdropStyle: {
 						backgroundColor: "black",
 						opacity: interpolate(progress, [0, 1], [0, 0.5]),
 					},
@@ -634,7 +634,7 @@ export const SharedXImage = ({
 					transform: [{ translateY: contentY }, { translateY: dragY }],
 					pointerEvents: current.animating ? "none" : "auto",
 				},
-				overlayStyle: {
+				backdropStyle: {
 					backgroundColor: overlayClr,
 				},
 			};

package/src/shared/configs/specs.ts

@@ -8,3 +8,9 @@ export const DefaultSpec: WithSpringConfig = {
 	// @ts-expect-error
 	restSpeedThreshold: 0.02,
 };
+
+export const DefaultSnapSpec: WithSpringConfig = {
+	stiffness: 500,
+	damping: 50,
+	mass: 1,
+};

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

@@ -1,16 +1,8 @@
 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 { Gesture, type GestureType } from "react-native-gesture-handler";
+import type { SharedValue } from "react-native-reanimated";
 import {
 	DEFAULT_GESTURE_ACTIVATION_AREA,
 	DEFAULT_GESTURE_DIRECTION,
@@ -24,17 +16,7 @@ import type {
 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>;
@@ -53,18 +35,12 @@ export const useBuildGestures = ({
 	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);
@@ -81,27 +57,19 @@ export const useBuildGestures = ({
 		gestureActivationArea = DEFAULT_GESTURE_ACTIVATION_AREA,
 		gestureResponseDistance,
 		transitionSpec,
+		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,212 +95,24 @@ 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({
+			dimensions,
+			animations,
+			gestureAnimationValues,
+			gestureDirection,
+			gestureDrivesProgress,
+			gestureVelocityImpact,
+			scrollConfig,
+			gestureActivationArea,
+			gestureResponseDistance,
+			snapPoints,
+			canDismiss,
+			transitionSpec,
+			handleDismiss,
+			ancestorIsDismissing:
+				ancestorContext?.gestureAnimationValues.isDismissing,
+		});
 
 	// Memoize gestures to keep stable references - critical for RNGH
 	// Child gestures reference ancestor's pan via requireExternalGestureToFail,