react-native-screen-transitions 3.4.0-alpha.0 → 3.4.0-alpha.2

package/src/shared/index.ts

@@ -3,7 +3,6 @@ import {
 	Boundary,
 	createBoundaryComponent,
 } from "./components/create-boundary-component";
-import { buildBoundaryMatchKey } from "./components/create-boundary-component/utils/build-boundary-match-key";
 import { createTransitionAwareComponent } from "./components/create-transition-aware-component";
 import MaskedView from "./components/integrations/masked-view";
 import { Presets, Specs } from "./configs";
@@ -26,36 +25,35 @@ export default {
 };
 
 export { snapTo } from "./animation/snap-to";
-export { useScreenGesture } from "./hooks/gestures/use-screen-gesture";
+export {
+	NAVIGATION_CONTAINER_STYLE_ID,
+	NAVIGATION_MASK_HOST_FLAG_STYLE_ID,
+	NAVIGATION_MASK_STYLE_ID,
+} from "./constants";
+export {
+	type ScreenGestureTarget,
+	useScreenGesture,
+} from "./hooks/gestures/use-screen-gesture";
 export { useHistory } from "./hooks/navigation/use-history";
 export {
 	type ScreenState,
 	useScreenState,
 } from "./hooks/navigation/use-screen-state";
-export { useScreenAnimation } from "./providers/screen/animation";
-export { buildBoundaryMatchKey };
+export {
+	type ScreenAnimationTarget,
+	useScreenAnimation,
+} from "./providers/screen/animation";
 
 export type {
 	AnimatedViewStyle,
 	AnimationConfig,
-	BoundEntry,
-	BoundsLink,
 	BoundsNavigationAccessor,
-	BoundsNavigationOptions,
-	BoundsNavigationPreset,
-	BoundsStyleOptions,
-	LegacyTransitionInterpolatedStyle,
-	NewTransitionInterpolatedStyle,
-	NormalizedTransitionInterpolatedStyle,
-	NormalizedTransitionSlotStyle,
-	OverlayInterpolationProps,
-	OverlayMode,
+	BoundsNavigationZoomOptions,
 	OverlayProps,
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,
 	ScreenTransitionConfig,
 	TransitionInterpolatedStyle,
-	TransitionSlotExplicit,
 	TransitionSlotStyle,
 	TransitionSpec,
 } from "./types";

package/src/shared/providers/gestures/handlers/use-handlers.ts

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { useWindowDimensions } from "react-native";
 import type {
 	GestureStateChangeEvent,
 	GestureTouchEvent,
@@ -32,8 +33,8 @@ import type {
 } from "../../../types/ownership.types";
 import { animateToProgress } from "../../../utils/animation/animate-to-progress";
 import type { EffectiveSnapPointsResult } from "../../../utils/gesture/validate-snap-points";
+import { resolveSheetScrollGestureBehavior } from "../../../utils/resolve-screen-transition-options";
 import { useDescriptors } from "../../screen/descriptors";
-import { useViewportContext } from "../../viewport.provider";
 import {
 	applyOffsetRules,
 	checkScrollBoundary,
@@ -53,6 +54,10 @@ import {
 	normalizeVelocity,
 } from "../helpers/gesture-physics";
 import { resetGestureValues } from "../helpers/gesture-reset";
+import {
+	findNearestSnapPoint,
+	resolveRuntimeSnapPoints,
+} from "../helpers/gesture-snap-points";
 import {
 	determineDismissal,
 	determineSnapTarget,
@@ -95,7 +100,7 @@ interface UseScreenGestureHandlersProps {
  *      - No → continue
  *   5. OFFSET THRESHOLD: Wait for sufficient touch movement
  *   6. SCROLLVIEW CHECK: If touch is on ScrollView, is it at boundary?
- *   7. EXPAND CHECK (snap sheets): If expanding via ScrollView, is expandViaScrollView enabled?
+ *   7. EXPAND CHECK (snap sheets): If expanding from nested scroll content, does sheetScrollGestureBehavior allow it?
  *   8. ACTIVATE!
  * ```
  *
@@ -140,21 +145,31 @@ export const useHandlers = ({
 		gestureReleaseVelocityMax = DEFAULT_GESTURE_RELEASE_VELOCITY_MAX,
 		gestureActivationArea = DEFAULT_GESTURE_ACTIVATION_AREA,
 		gestureSnapLocked = DEFAULT_GESTURE_SNAP_LOCKED,
-		expandViaScrollView = true,
 		gestureResponseDistance,
 		transitionSpec,
 	} = current.options;
+	const sheetScrollGestureBehavior = resolveSheetScrollGestureBehavior(
+		current.options,
+	);
 
-	const { dimensions } = useViewportContext();
+	const dimensions = useWindowDimensions();
 	const routeKey = current.route.key;
-	const animations = AnimationStore.getRouteAnimations(current.route.key);
-	const gestureAnimationValues = GestureStore.getRouteGestures(
-		current.route.key,
+	const animations = AnimationStore.getRouteAnimations(routeKey);
+	const gestureAnimationValues = GestureStore.getRouteGestures(routeKey);
+	const {
+		hasSnapPoints,
+		hasAutoSnapPoint,
+		snapPoints,
+		minSnapPoint,
+		maxSnapPoint,
+	} = effectiveSnapPoints;
+
+	// Read the measured "auto" snap point reactively inside worklets.
+	const autoSnapPointValue = AnimationStore.getAnimation(
+		routeKey,
+		"autoSnapPoint",
 	);
 
-	const { hasSnapPoints, snapPoints, minSnapPoint, maxSnapPoint } =
-		effectiveSnapPoints;
-
 	const directions = useMemo(() => {
 		warnOnSnapDirectionArray({ gestureDirection, hasSnapPoints });
 		return resolveGestureDirections({ gestureDirection, hasSnapPoints });
@@ -284,14 +299,22 @@ export const useHandlers = ({
 							directions.snapAxisInverted ?? false,
 						)
 					) {
-						if (!expandViaScrollView) {
+						if (sheetScrollGestureBehavior === "collapse-only") {
 							manager.fail();
 							return;
 						}
 
+						const { resolvedMaxSnapPoint } = resolveRuntimeSnapPoints({
+							snapPoints,
+							hasAutoSnapPoint,
+							autoSnapPoint: autoSnapPointValue.value,
+							minSnapPoint,
+							maxSnapPoint,
+							canDismiss,
+						});
 						const effectiveMaxSnapPoint = gestureSnapLocked
 							? lockedSnapPoint.value
-							: maxSnapPoint;
+							: resolvedMaxSnapPoint;
 
 						const canExpandMore =
 							animations.progress.value < effectiveMaxSnapPoint - EPSILON &&
@@ -312,22 +335,23 @@ export const useHandlers = ({
 
 	const onStart = useStableCallbackValue(() => {
 		"worklet";
-		if (hasSnapPoints && gestureSnapLocked) {
-			let nearest = snapPoints[0] ?? animations.progress.value;
-			let smallestDistance = Math.abs(animations.progress.value - nearest);
-
-			for (let i = 1; i < snapPoints.length; i++) {
-				const point = snapPoints[i];
-				const distance = Math.abs(animations.progress.value - point);
-				if (distance < smallestDistance) {
-					smallestDistance = distance;
-					nearest = point;
-				}
-			}
+		const { resolvedSnapPoints, resolvedMaxSnapPoint } =
+			resolveRuntimeSnapPoints({
+				snapPoints,
+				hasAutoSnapPoint,
+				autoSnapPoint: autoSnapPointValue.value,
+				minSnapPoint,
+				maxSnapPoint,
+				canDismiss,
+			});
 
-			lockedSnapPoint.value = nearest;
+		if (hasSnapPoints && gestureSnapLocked) {
+			lockedSnapPoint.value = findNearestSnapPoint(
+				animations.progress.value,
+				resolvedSnapPoints,
+			);
 		} else {
-			lockedSnapPoint.value = maxSnapPoint;
+			lockedSnapPoint.value = resolvedMaxSnapPoint;
 		}
 
 		gestureAnimationValues.dragging.value = TRUE;
@@ -363,14 +387,25 @@ export const useHandlers = ({
 				const baseSign = -1;
 				const sign = directions.snapAxisInverted ? -baseSign : baseSign;
 				const progressDelta = (sign * translation) / dimension;
+
+				const { resolvedMinSnapPoint, resolvedMaxSnapPoint } =
+					resolveRuntimeSnapPoints({
+						snapPoints,
+						hasAutoSnapPoint,
+						autoSnapPoint: autoSnapPointValue.value,
+						minSnapPoint,
+						maxSnapPoint,
+						canDismiss,
+					});
+
 				const maxProgressForGesture = gestureSnapLocked
 					? lockedSnapPoint.value
-					: maxSnapPoint;
+					: resolvedMaxSnapPoint;
 				const minProgressForGesture = gestureSnapLocked
 					? canDismiss
 						? 0
 						: lockedSnapPoint.value
-					: minSnapPoint;
+					: resolvedMinSnapPoint;
 
 				animations.progress.value = Math.max(
 					minProgressForGesture,
@@ -430,9 +465,20 @@ export const useHandlers = ({
 					? -axisVelocity
 					: axisVelocity;
 
+				const { resolvedSnapPoints } = resolveRuntimeSnapPoints({
+					snapPoints,
+					hasAutoSnapPoint,
+					autoSnapPoint: autoSnapPointValue.value,
+					minSnapPoint,
+					maxSnapPoint,
+					canDismiss,
+				});
+
 				const result = determineSnapTarget({
 					currentProgress: animations.progress.value,
-					snapPoints: gestureSnapLocked ? [lockedSnapPoint.value] : snapPoints,
+					snapPoints: gestureSnapLocked
+						? [lockedSnapPoint.value]
+						: resolvedSnapPoints,
 					velocity: snapVelocity,
 					dimension: axisDimension,
 					velocityFactor: snapVelocityImpact,

package/src/shared/providers/gestures/helpers/gesture-activation.ts

@@ -67,6 +67,7 @@ const GESTURE_FAIL_TOLERANCE_Y = 20;
 const DEFAULT_EDGE_DISTANCE_HORIZONTAL = 50;
 const DEFAULT_EDGE_DISTANCE_VERTICAL = 135;
 const DEFAULT_ACTIVATION_AREA = "screen" as const;
+const SCROLL_EPILSON = 1;
 
 export function normalizeSides(area?: GestureActivationArea): NormalizedSides {
 	"worklet";
@@ -352,6 +353,10 @@ export function checkScrollBoundary(
 	// 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;
 
 	// For snap point sheets (snapAxisInverted is defined), boundary depends on sheet origin
 	// Even if content isn't scrollable, respect bounce/overscroll state
@@ -362,12 +367,12 @@ export function checkScrollBoundary(
 		if (isVerticalDirection) {
 			// Bottom sheet (not inverted): boundary at scroll top
 			// Top sheet (inverted): boundary at scroll bottom
-			return snapAxisInverted ? scrollY >= maxScrollY : scrollY <= 0;
+			return snapAxisInverted ? atBottom : atTop;
 		}
 		// Horizontal direction
 		// Right drawer (not inverted): boundary at scroll left
 		// Left drawer (inverted): boundary at scroll right
-		return snapAxisInverted ? scrollX >= maxScrollX : scrollX <= 0;
+		return snapAxisInverted ? atRight : atLeft;
 	}
 
 	// Non-sheet screens: each direction has its own boundary
@@ -375,22 +380,22 @@ export function checkScrollBoundary(
 		case "vertical":
 			// Swipe down - check if at top of vertical scroll
 			// Even if content isn't scrollable, respect bounce/overscroll state
-			return scrollY <= 0;
+			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 scrollY >= maxScrollY;
+			return atBottom;
 
 		case "horizontal":
 			// Swipe right - check if at left of horizontal scroll
 			// Even if content isn't scrollable, respect bounce/overscroll state
-			return scrollX <= 0;
+			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 scrollX >= maxScrollX;
+			return atRight;
 
 		default:
 			return true;

package/src/shared/providers/gestures/helpers/gesture-snap-points.ts

@@ -0,0 +1,72 @@
+interface ResolveRuntimeSnapPointsProps {
+	snapPoints: number[];
+	hasAutoSnapPoint: boolean;
+	autoSnapPoint: number;
+	minSnapPoint: number;
+	maxSnapPoint: number;
+	canDismiss: boolean;
+}
+
+interface ResolvedRuntimeSnapPointsResult {
+	resolvedAutoSnapPoint: number | null;
+	resolvedSnapPoints: number[];
+	resolvedMinSnapPoint: number;
+	resolvedMaxSnapPoint: number;
+}
+
+export const resolveRuntimeSnapPoints = ({
+	snapPoints,
+	hasAutoSnapPoint,
+	autoSnapPoint,
+	minSnapPoint,
+	maxSnapPoint,
+	canDismiss,
+}: ResolveRuntimeSnapPointsProps): ResolvedRuntimeSnapPointsResult => {
+	"worklet";
+
+	const resolvedAutoSnapPoint =
+		hasAutoSnapPoint && autoSnapPoint > 0 ? autoSnapPoint : null;
+
+	const resolvedSnapPoints =
+		resolvedAutoSnapPoint === null
+			? snapPoints
+			: [...snapPoints, resolvedAutoSnapPoint].sort((a, b) => a - b);
+
+	const resolvedMinSnapPoint =
+		resolvedAutoSnapPoint !== null && !canDismiss
+			? Math.min(
+					minSnapPoint === -1 ? resolvedAutoSnapPoint : minSnapPoint,
+					resolvedAutoSnapPoint,
+				)
+			: minSnapPoint;
+
+	return {
+		resolvedAutoSnapPoint,
+		resolvedSnapPoints,
+		resolvedMinSnapPoint,
+		resolvedMaxSnapPoint:
+			resolvedSnapPoints[resolvedSnapPoints.length - 1] ?? maxSnapPoint,
+	};
+};
+
+export const findNearestSnapPoint = (
+	progress: number,
+	snapPoints: number[],
+): number => {
+	"worklet";
+
+	let nearest = snapPoints[0] ?? progress;
+	let smallestDistance = Math.abs(progress - nearest);
+
+	for (let i = 1; i < snapPoints.length; i++) {
+		const point = snapPoints[i];
+		const distance = Math.abs(progress - point);
+
+		if (distance < smallestDistance) {
+			smallestDistance = distance;
+			nearest = point;
+		}
+	}
+
+	return nearest;
+};

package/src/shared/providers/layout-anchor.provider.tsx

@@ -1,12 +1,11 @@
 import { type ReactNode, useCallback, useMemo } from "react";
-import type { View } from "react-native";
+import { useWindowDimensions, type View } from "react-native";
 import {
 	type AnimatedRef,
 	type MeasuredDimensions,
 	measure,
 } from "react-native-reanimated";
 import createProvider from "../utils/create-provider";
-import { useViewportContext } from "./viewport.provider";
 
 interface LayoutAnchorProviderProps {
 	anchorRef: AnimatedRef<View>;
@@ -48,9 +47,7 @@ const { LayoutAnchorProvider, useLayoutAnchorContext } = createProvider(
 	{ guarded: false },
 )<LayoutAnchorProviderProps, LayoutAnchorContextValue>(
 	({ anchorRef, children }) => {
-		const {
-			dimensions: { width: screenWidth, height: screenHeight },
-		} = useViewportContext();
+		const { width: screenWidth, height: screenHeight } = useWindowDimensions();
 
 		const correctMeasurement = useCallback(
 			(measured: MeasuredDimensions): MeasuredDimensions => {

package/src/shared/providers/register-bounds.provider.tsx

@@ -207,7 +207,7 @@ const useParentSyncReaction = (params: {
 const CloseRemeasureReactionEffect = (params: {
 	sharedBoundTag: string;
 	remeasureOnFocus: boolean;
-	nextClosing: ReturnType<typeof AnimationStore.getRouteAnimation>;
+	nextClosing: SharedValue<number>;
 	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
 }) => {
 	const {

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

@@ -1,23 +1,26 @@
-import { type ReactNode, useMemo } from "react";
+import { createContext, type ReactNode, useContext, useMemo } from "react";
 import { type DerivedValue, useDerivedValue } from "react-native-reanimated";
 import type { ScreenInterpolationProps } from "../../../types/animation.types";
-import createProvider from "../../../utils/create-provider";
 import { useScreenAnimationPipeline } from "./helpers/pipeline";
 
 type Props = {
 	children: ReactNode;
 };
 
-type ScreenAnimationContextValue = ReturnType<
+export type ScreenAnimationContextValue = ReturnType<
 	typeof useScreenAnimationPipeline
 > & {
 	screenAnimation: DerivedValue<ScreenInterpolationProps>;
+	ancestorScreenAnimations: DerivedValue<ScreenInterpolationProps>[];
 };
 
-const { ScreenAnimationProvider, useScreenAnimationContext } = createProvider(
-	"ScreenAnimation",
-	{ guarded: true },
-)<Props, ScreenAnimationContextValue>(() => {
+const ScreenAnimationContext =
+	createContext<ScreenAnimationContextValue | null>(null);
+ScreenAnimationContext.displayName = "ScreenAnimation";
+
+function ScreenAnimationProvider({ children }: Props) {
+	const parentContext = useContext(ScreenAnimationContext);
+
 	const {
 		screenInterpolatorProps,
 		nextInterpolator,
@@ -34,6 +37,17 @@ const { ScreenAnimationProvider, useScreenAnimationContext } = createProvider(
 		};
 	});
 
+	const ancestorScreenAnimations = useMemo(() => {
+		if (!parentContext) {
+			return [];
+		}
+
+		return [
+			parentContext.screenAnimation,
+			...parentContext.ancestorScreenAnimations,
+		];
+	}, [parentContext]);
+
 	const value = useMemo(
 		() => ({
 			screenInterpolatorProps,
@@ -41,6 +55,7 @@ const { ScreenAnimationProvider, useScreenAnimationContext } = createProvider(
 			currentInterpolator,
 			boundsAccessor,
 			screenAnimation,
+			ancestorScreenAnimations,
 		}),
 		[
 			screenInterpolatorProps,
@@ -48,10 +63,31 @@ const { ScreenAnimationProvider, useScreenAnimationContext } = createProvider(
 			currentInterpolator,
 			boundsAccessor,
 			screenAnimation,
+			ancestorScreenAnimations,
 		],
 	);
 
-	return { value };
-});
+	return (
+		<ScreenAnimationContext.Provider value={value}>
+			{children}
+		</ScreenAnimationContext.Provider>
+	);
+}
 
-export { ScreenAnimationProvider, useScreenAnimationContext };
+function useScreenAnimationContext(): ScreenAnimationContextValue {
+	const context = useContext(ScreenAnimationContext);
+
+	if (!context) {
+		throw new Error(
+			"ScreenAnimation context must be used within a ScreenAnimationProvider",
+		);
+	}
+
+	return context;
+}
+
+export {
+	ScreenAnimationContext,
+	ScreenAnimationProvider,
+	useScreenAnimationContext,
+};

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

@@ -24,18 +24,10 @@ export const derivations = ({ previous, current, next }: DerivationsParams) => {
 	// The screen NOT driving the transition
 	const inactive = focused ? previous : current;
 
-	// deprecated
-	const isActiveTransitioning = !!(active.gesture.dragging || active.animating);
-
-	// deprecated
-	const isDismissing = !!(active.gesture.dismissing || active.closing);
-
 	return {
 		progress,
 		focused,
 		active,
 		inactive,
-		isActiveTransitioning,
-		isDismissing,
 	};
 };

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

@@ -1,10 +1,12 @@
 import { useMemo } from "react";
+import { useWindowDimensions } from "react-native";
 import {
 	type DerivedValue,
 	type SharedValue,
 	useDerivedValue,
 	useSharedValue,
 } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import type { NativeStackScreenTransitionConfig } from "../../../../../native-stack/types";
 import {
 	createScreenTransitionState,
@@ -25,7 +27,8 @@ import type { BoundsAccessor } from "../../../../types/bounds.types";
 import type { ScreenTransitionConfig } from "../../../../types/screen.types";
 import type { BaseStackRoute } from "../../../../types/stack.types";
 import { createBoundsAccessor } from "../../../../utils/bounds";
-import { useViewportContext } from "../../../viewport.provider";
+import type { BoundsFrameProps } from "../../../../utils/bounds/types/frame-props";
+import { resolveNavigationMaskEnabled } from "../../../../utils/resolve-screen-transition-options";
 import { type BaseDescriptor, useDescriptors } from "../../descriptors";
 import { derivations } from "./derivations";
 import { toPlainRoute, toPlainValue } from "./worklet";
@@ -153,7 +156,8 @@ const hasTransitionsEnabled = (
 
 export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 	const { flags, stackProgress: rootStackProgress, routeKeys } = useStack();
-	const { dimensions, insets } = useViewportContext();
+	const dimensions = useWindowDimensions();
+	const insets = useSafeAreaInsets();
 	const transitionsAlwaysOn = flags.TRANSITIONS_ALWAYS_ON;
 
 	const {
@@ -175,19 +179,37 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 	const currentRouteKey = currentDescriptor?.route?.key;
 	const currentIndex = routeKeys.indexOf(currentRouteKey);
 
-	const sortedSnapPoints = useMemo(() => {
+	const sortedNumericSnapPoints = useMemo(() => {
 		const points = currentDescriptor?.options?.snapPoints;
-		return points ? [...points].sort((a, b) => a - b) : [];
+		if (!points) return [];
+		return points
+			.filter((p): p is number => typeof p === "number")
+			.sort((a, b) => a - b);
 	}, [currentDescriptor?.options?.snapPoints]);
 
+	const hasAutoSnapPoint = useMemo(
+		() => currentDescriptor?.options?.snapPoints?.includes("auto") ?? false,
+		[currentDescriptor?.options?.snapPoints],
+	);
+
+	const autoSnapPointValue = AnimationStore.getAnimation(
+		currentRouteKey ?? "_",
+		"autoSnapPoint",
+	);
+	const contentLayoutValue = AnimationStore.getAnimation(
+		currentRouteKey ?? "_",
+		"contentLayout",
+	);
+
 	const nextRouteKey = nextDescriptor?.route?.key;
 	const nextHasTransitions =
 		!!nextRouteKey &&
 		hasTransitionsEnabled(nextDescriptor?.options, transitionsAlwaysOn);
+	const currentNavigationMaskEnabled = resolveNavigationMaskEnabled(
+		currentDescriptor?.options ?? {},
+	);
 
-	const framePropsMutable = useSharedValue<
-		Omit<ScreenInterpolationProps, "bounds">
-	>({
+	const framePropsMutable = useSharedValue<BoundsFrameProps>({
 		layouts: { screen: dimensions },
 		insets,
 		previous: undefined,
@@ -196,11 +218,10 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 		progress: 0,
 		stackProgress: 0,
 		snapIndex: -1,
+		navigationMaskEnabled: false,
 		focused: true,
 		active: DEFAULT_SCREEN_TRANSITION_STATE,
 		inactive: undefined,
-		isActiveTransitioning: false,
-		isDismissing: false,
 	});
 
 	const boundsAccessor = useMemo(() => {
@@ -238,10 +259,23 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 		const stackProgress =
 			currentIndex >= 0 ? rootStackProgress.value - currentIndex : progress;
 
-		const snapIndex = computeSnapIndex(current.progress, sortedSnapPoints);
-
-		const nextProps = {
-			layouts: { screen: dimensions },
+		// Resolve 'auto' snap point reactively so computeSnapIndex stays accurate
+		const resolvedAutoSnap =
+			hasAutoSnapPoint && autoSnapPointValue.value > 0
+				? autoSnapPointValue.value
+				: null;
+		const resolvedSnapPoints =
+			resolvedAutoSnap !== null
+				? [...sortedNumericSnapPoints, resolvedAutoSnap].sort((a, b) => a - b)
+				: sortedNumericSnapPoints;
+
+		const snapIndex = computeSnapIndex(current.progress, resolvedSnapPoints);
+
+		const nextProps: Omit<ScreenInterpolationProps, "bounds"> = {
+			layouts: {
+				screen: dimensions,
+				content: contentLayoutValue.value ?? undefined,
+			},
 			insets,
 			previous,
 			current,
@@ -252,7 +286,10 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 			...helpers,
 		};
 
-		framePropsMutable.value = nextProps;
+		framePropsMutable.value = {
+			...nextProps,
+			navigationMaskEnabled: currentNavigationMaskEnabled,
+		};
 		return nextProps;
 	});