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

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

@@ -52,42 +52,74 @@ export const NativeScreen = ({
 	const { activeScreensLimit, backdropBehaviors } = useManagedStackContext();
 
 	const routesLength = routes.length;
+	const topIndex = routesLength - 1;
+	const topRouteKey = routes[topIndex]?.key ?? routeKey;
 	const screenRef = useAnimatedRef<View>();
 
-	const sceneProgress = AnimationStore.getRouteAnimation(routeKey, "progress");
 	const sceneClosing = AnimationStore.getRouteAnimation(routeKey, "closing");
+	const topSceneProgress = AnimationStore.getRouteAnimation(
+		topRouteKey,
+		"progress",
+	);
+	const topSceneClosing = AnimationStore.getRouteAnimation(
+		topRouteKey,
+		"closing",
+	);
 	const screenActivity = useSharedValue<ScreenActivity>(
 		ScreenActivity.TRANSITIONING_OR_BELOW_TOP,
 	);
 
 	useDerivedValue(() => {
-		if (!sceneProgress) {
+		if (!topSceneProgress) {
 			screenActivity.set(ScreenActivity.TRANSITIONING_OR_BELOW_TOP);
 			return;
 		}
 
 		if (index < routesLength - activeScreensLimit - 1 || isPreloaded) {
 			screenActivity.set(ScreenActivity.INACTIVE);
-		} else {
-			const outputValue =
-				index === routesLength - 1
+			return;
+		}
+
+		const focusedIndex = optimisticFocusedIndex.value;
+		const topIsClosing =
+			topSceneClosing.get() > 0 && focusedIndex >= 0 && focusedIndex < topIndex;
+
+		if (topIsClosing) {
+			const postCloseActiveStart = Math.max(
+				0,
+				focusedIndex - activeScreensLimit + 1,
+			);
+			const next =
+				index === topIndex
 					? ScreenActivity.ON_TOP
-					: index >= routesLength - activeScreensLimit
+					: index > focusedIndex || index >= postCloseActiveStart
 						? ScreenActivity.TRANSITIONING_OR_BELOW_TOP
 						: ScreenActivity.INACTIVE;
 
-			const v = interpolate(
-				sceneProgress.get(),
-				[0, 1 - EPSILON, 1],
-				[1, 1, outputValue],
-				Extrapolation.CLAMP,
-			);
-
-			const next = Math.trunc(v) ?? ScreenActivity.TRANSITIONING_OR_BELOW_TOP;
-
 			if (next !== screenActivity.get()) {
 				screenActivity.set(next);
 			}
+			return;
+		}
+
+		const outputValue =
+			index === topIndex
+				? ScreenActivity.ON_TOP
+				: index >= routesLength - activeScreensLimit
+					? ScreenActivity.TRANSITIONING_OR_BELOW_TOP
+					: ScreenActivity.INACTIVE;
+
+		const v = interpolate(
+			topSceneProgress.get(),
+			[0, 1 - EPSILON, 1],
+			[1, 1, outputValue],
+			Extrapolation.CLAMP,
+		);
+
+		const next = Math.trunc(v) ?? ScreenActivity.TRANSITIONING_OR_BELOW_TOP;
+
+		if (next !== screenActivity.get()) {
+			screenActivity.set(next);
 		}
 	});
 
@@ -126,12 +158,25 @@ export const NativeScreen = ({
 		};
 	});
 
-	const NativeScreenComponent = !DISABLE_NATIVE_SCREENS
-		? AnimatedNativeScreen
-		: Animated.View;
+	if (DISABLE_NATIVE_SCREENS) {
+		return (
+			<Animated.View
+				ref={screenRef}
+				// Keep a native boundary per screen when falling back to plain views.
+				// Android release builds can otherwise flatten sibling screens together.
+				collapsable={false}
+				style={StyleSheet.absoluteFill}
+				animatedProps={animatedProps}
+			>
+				<LayoutAnchorProvider anchorRef={screenRef}>
+					{children}
+				</LayoutAnchorProvider>
+			</Animated.View>
+		);
+	}
 
 	return (
-		<NativeScreenComponent
+		<AnimatedNativeScreen
 			enabled
 			ref={screenRef}
 			style={StyleSheet.absoluteFill}
@@ -141,6 +186,6 @@ export const NativeScreen = ({
 			<LayoutAnchorProvider anchorRef={screenRef}>
 				{children}
 			</LayoutAnchorProvider>
-		</NativeScreenComponent>
+		</AnimatedNativeScreen>
 	);
 };

package/src/shared/components/screen-container/hooks/use-content-layout.ts

@@ -0,0 +1,82 @@
+import { useCallback } from "react";
+import { type LayoutChangeEvent, useWindowDimensions } from "react-native";
+import { runOnUI } from "react-native-reanimated";
+import {
+	useDescriptorDerivations,
+	useDescriptors,
+} from "../../../providers/screen/descriptors";
+import { AnimationStore } from "../../../stores/animation.store";
+import { animateToProgress } from "../../../utils/animation/animate-to-progress";
+
+export function useContentLayout() {
+	const { current } = useDescriptors();
+	const { isFirstKey } = useDescriptorDerivations();
+	const { height: screenHeight } = useWindowDimensions();
+	const routeKey = current.route.key;
+	const animations = AnimationStore.getRouteAnimations(routeKey);
+	const autoSnapPointValue = AnimationStore.getAnimation(
+		routeKey,
+		"autoSnapPoint",
+	);
+	const contentLayoutValue = AnimationStore.getAnimation(
+		routeKey,
+		"contentLayout",
+	);
+
+	return useCallback(
+		(event: LayoutChangeEvent) => {
+			const { width, height } = event.nativeEvent.layout;
+			if (width <= 0 || height <= 0) return;
+
+			const fraction = Math.min(height / screenHeight, 1);
+			const transitionSpec = current.options.transitionSpec;
+
+			runOnUI(
+				(
+					nextWidth: number,
+					nextHeight: number,
+					nextFraction: number,
+					isInitialScreen: boolean,
+					spec: typeof transitionSpec,
+				) => {
+					"worklet";
+					contentLayoutValue.value = {
+						width: nextWidth,
+						height: nextHeight,
+					};
+
+					const isFirstMeasurement = autoSnapPointValue.value <= 0;
+					autoSnapPointValue.value = nextFraction;
+
+					if (
+						!isFirstMeasurement ||
+						animations.progress.value !== 0 ||
+						animations.animating.value !== 0
+					) {
+						return;
+					}
+
+					if (isInitialScreen) {
+						animations.targetProgress.value = nextFraction;
+						animations.progress.value = nextFraction;
+						return;
+					}
+
+					animateToProgress({
+						target: nextFraction,
+						spec,
+						animations,
+					});
+				},
+			)(width, height, fraction, isFirstKey, transitionSpec);
+		},
+		[
+			animations,
+			autoSnapPointValue,
+			contentLayoutValue,
+			current.options.transitionSpec,
+			isFirstKey,
+			screenHeight,
+		],
+	);
+}

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

@@ -1,27 +1,18 @@
 /** biome-ignore-all lint/style/noNonNullAssertion: <Screen gesture is under the gesture context, so this will always exist.> */
-import { memo, useCallback } from "react";
-import {
-	type LayoutChangeEvent,
-	StyleSheet,
-	useWindowDimensions,
-	View,
-} from "react-native";
+import { memo } from "react";
+import { StyleSheet, View } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
 import Animated, {
-	runOnUI,
 	useAnimatedProps,
 	useAnimatedStyle,
 } from "react-native-reanimated";
 import { NO_PROPS, NO_STYLES } from "../../../constants";
 import { useGestureContext } from "../../../providers/gestures";
-import {
-	useDescriptorDerivations,
-	useDescriptors,
-} from "../../../providers/screen/descriptors";
+import { useDescriptors } from "../../../providers/screen/descriptors";
 import { useScreenStyles } from "../../../providers/screen/styles.provider";
-import { AnimationStore } from "../../../stores/animation.store";
-import { animateToProgress } from "../../../utils/animation/animate-to-progress";
+import { resolveNavigationMaskEnabled } from "../../../utils/resolve-screen-transition-options";
 import { useBackdropPointerEvents } from "../hooks/use-backdrop-pointer-events";
+import { useContentLayout } from "../hooks/use-content-layout";
 import { MaybeMaskedNavigationContainer } from "./maybe-masked-navigation-container";
 import { SurfaceContainer } from "./surface-container";
 
@@ -32,20 +23,13 @@ type Props = {
 export const ContentLayer = memo(({ children }: Props) => {
 	const { stylesMap } = useScreenStyles();
 	const { current } = useDescriptors();
-	const { isFirstKey } = useDescriptorDerivations();
 	const { pointerEvents, isBackdropActive } = useBackdropPointerEvents();
 	const gestureContext = useGestureContext();
-	const { height: screenHeight } = useWindowDimensions();
-	const isNavigationMaskEnabled = !!current.options.maskEnabled;
+	const isNavigationMaskEnabled = resolveNavigationMaskEnabled(current.options);
 	const contentPointerEvents = isBackdropActive ? "box-none" : pointerEvents;
-	const routeKey = current.route.key;
-	const animations = AnimationStore.getRouteAnimations(routeKey);
-	const autoSnapPointValue = AnimationStore.getAnimation(
-		routeKey,
-		"autoSnapPoint",
-	);
 	const hasAutoSnapPoint =
 		current.options.snapPoints?.includes("auto") ?? false;
+	const handleContentLayout = useContentLayout();
 
 	const animatedContentStyle = useAnimatedStyle(() => {
 		"worklet";
@@ -57,55 +41,6 @@ export const ContentLayer = memo(({ children }: Props) => {
 		return stylesMap.value.content?.props ?? NO_PROPS;
 	});
 
-	const handleContentLayout = useCallback(
-		(event: LayoutChangeEvent) => {
-			const contentHeight = event.nativeEvent.layout.height;
-			if (contentHeight <= 0) return;
-
-			const fraction = Math.min(contentHeight / screenHeight, 1);
-			const transitionSpec = current.options.transitionSpec;
-
-			runOnUI(
-				(
-					nextFraction: number,
-					isInitialScreen: boolean,
-					spec: typeof transitionSpec,
-				) => {
-					"worklet";
-					const isFirstMeasurement = autoSnapPointValue.value <= 0;
-					autoSnapPointValue.value = nextFraction;
-
-					if (
-						!isFirstMeasurement ||
-						animations.progress.value !== 0 ||
-						animations.animating.value !== 0
-					) {
-						return;
-					}
-
-					if (isInitialScreen) {
-						animations.targetProgress.value = nextFraction;
-						animations.progress.value = nextFraction;
-						return;
-					}
-
-					animateToProgress({
-						target: nextFraction,
-						spec,
-						animations,
-					});
-				},
-			)(fraction, isFirstKey, transitionSpec);
-		},
-		[
-			animations,
-			autoSnapPointValue,
-			current.options.transitionSpec,
-			isFirstKey,
-			screenHeight,
-		],
-	);
-
 	return (
 		<GestureDetector gesture={gestureContext!.panGesture}>
 			<Animated.View
@@ -113,7 +48,10 @@ export const ContentLayer = memo(({ children }: Props) => {
 				animatedProps={animatedContentProps}
 				pointerEvents={contentPointerEvents}
 			>
-				<MaybeMaskedNavigationContainer enabled={isNavigationMaskEnabled}>
+				<MaybeMaskedNavigationContainer
+					pointerEvents={contentPointerEvents}
+					enabled={isNavigationMaskEnabled}
+				>
 					<SurfaceContainer pointerEvents={contentPointerEvents}>
 						{hasAutoSnapPoint ? (
 							<View collapsable={false} onLayout={handleContentLayout}>

package/src/shared/components/screen-container/layers/maybe-masked-navigation-container.tsx

@@ -1,5 +1,5 @@
 import { memo, useEffect } from "react";
-import { StyleSheet, View } from "react-native";
+import { Platform, StyleSheet, View, type ViewProps } from "react-native";
 import Animated, { useAnimatedStyle } from "react-native-reanimated";
 import {
 	NAVIGATION_CONTAINER_STYLE_ID,
@@ -12,6 +12,7 @@ import { logger } from "../../../utils/logger";
 type Props = {
 	enabled: boolean;
 	children: React.ReactNode;
+	pointerEvents: ViewProps["pointerEvents"];
 };
 
 let LazyMaskedView = View;
@@ -23,9 +24,10 @@ try {
 }
 
 let hasWarnedMissingMaskedView = false;
+const IS_ANDROID = Platform.OS === "android";
 
 export const MaybeMaskedNavigationContainer = memo(
-	({ enabled, children }: Props) => {
+	({ enabled, children, pointerEvents }: Props) => {
 		const { stylesMap } = useScreenStyles();
 		const animatedNavigationContainerStyle = useAnimatedStyle(() => {
 			"worklet";
@@ -44,20 +46,28 @@ export const MaybeMaskedNavigationContainer = memo(
 
 			hasWarnedMissingMaskedView = true;
 			logger.warn(
-				"maskEnabled requires @react-native-masked-view/masked-view. Install it to enable navigation bounds masking.",
+				"navigationMaskEnabled requires @react-native-masked-view/masked-view. Install it to enable navigation bounds masking.",
 			);
 		}, [enabled]);
 
-		if (!enabled) return children;
+		const navigationContainer = (
+			<Animated.View
+				style={[styles.navigationContainer, animatedNavigationContainerStyle]}
+				pointerEvents={pointerEvents}
+				collapsable={false}
+				renderToHardwareTextureAndroid={IS_ANDROID && !enabled}
+				needsOffscreenAlphaCompositing={IS_ANDROID && !enabled}
+			>
+				{children}
+			</Animated.View>
+		);
+
+		// Navigation zoom uses the root container transform even when the mask
+		// wrapper is disabled. Only the mask element itself is optional.
+		if (!enabled) return navigationContainer;
 
 		if (LazyMaskedView === View) {
-			return (
-				<Animated.View
-					style={[styles.navigationContainer, animatedNavigationContainerStyle]}
-				>
-					{children}
-				</Animated.View>
-			);
+			return navigationContainer;
 		}
 
 		return (
@@ -67,14 +77,12 @@ export const MaybeMaskedNavigationContainer = memo(
 				maskElement={
 					<Animated.View
 						style={[styles.navigationMaskElement, animatedNavigationMaskStyle]}
+						pointerEvents="none"
 					/>
 				}
+				pointerEvents={pointerEvents}
 			>
-				<Animated.View
-					style={[styles.navigationContainer, animatedNavigationContainerStyle]}
-				>
-					{children}
-				</Animated.View>
+				{navigationContainer}
 			</LazyMaskedView>
 		);
 	},

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,
@@ -99,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!
  * ```
  *
@@ -144,12 +145,14 @@ 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(routeKey);
 	const gestureAnimationValues = GestureStore.getRouteGestures(routeKey);
@@ -296,7 +299,7 @@ export const useHandlers = ({
 							directions.snapAxisInverted ?? false,
 						)
 					) {
-						if (!expandViaScrollView) {
+						if (sheetScrollGestureBehavior === "collapse-only") {
 							manager.fail();
 							return;
 						}

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/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/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 {
@@ -192,15 +196,20 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 		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,
@@ -209,6 +218,7 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 		progress: 0,
 		stackProgress: 0,
 		snapIndex: -1,
+		navigationMaskEnabled: false,
 		focused: true,
 		active: DEFAULT_SCREEN_TRANSITION_STATE,
 		inactive: undefined,
@@ -261,8 +271,11 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 
 		const snapIndex = computeSnapIndex(current.progress, resolvedSnapPoints);
 
-		const nextProps = {
-			layouts: { screen: dimensions },
+		const nextProps: Omit<ScreenInterpolationProps, "bounds"> = {
+			layouts: {
+				screen: dimensions,
+				content: contentLayoutValue.value ?? undefined,
+			},
 			insets,
 			previous,
 			current,
@@ -273,7 +286,10 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 			...helpers,
 		};
 
-		framePropsMutable.value = nextProps;
+		framePropsMutable.value = {
+			...nextProps,
+			navigationMaskEnabled: currentNavigationMaskEnabled,
+		};
 		return nextProps;
 	});