react-native-screen-transitions 3.11.2 → 3.12.0

package/src/shared/hooks/navigation/use-navigation-helpers.ts

@@ -1,16 +1,23 @@
-import { StackActions } from "@react-navigation/native";
+import {
+	StackActions,
+	usePreventRemoveContext,
+} from "@react-navigation/native";
 import { useCallback } from "react";
 import { useDescriptorsStore } from "../../providers/screen/descriptors";
+import { AnimationStore } from "../../stores/animation.store";
+import {
+	LifecycleTransitionRequestKind,
+	SystemStore,
+} from "../../stores/system.store";
+import { dispatchCloseAction } from "../../utils/navigation/close-action-replay";
 import { useStack } from "./use-stack";
 
 export function useNavigationHelpers() {
 	const route = useDescriptorsStore((store) => store.current.route);
 	const navigation = useDescriptorsStore((store) => store.current.navigation);
 	const requestStackDismiss = useStack((stack) => stack.requestDismiss);
-
-	const requestDismiss = useCallback((): boolean => {
-		return requestStackDismiss?.({ route }) ?? false;
-	}, [route, requestStackDismiss]);
+	const { preventedRoutes } = usePreventRemoveContext();
+	const isRemovePrevented = preventedRoutes[route.key]?.preventRemove === true;
 
 	const dismissScreen = useCallback((): boolean => {
 		const state = navigation.getState();
@@ -20,13 +27,38 @@ export function useNavigationHelpers() {
 		const routeStillPresent = routeIndex !== -1;
 		if (!routeStillPresent || routeIndex === 0) return false;
 
-		navigation.dispatch({
+		const action = {
 			...StackActions.pop(),
 			source: route.key,
 			target: state.key,
+		};
+		dispatchCloseAction(action, (closeAction) => {
+			navigation.dispatch(closeAction);
 		});
 		return true;
 	}, [navigation, route.key]);
 
-	return { dismissScreen, requestDismiss };
+	const requestDismiss = useCallback((): boolean => {
+		if (isRemovePrevented) return false;
+
+		if (requestStackDismiss) {
+			if (!requestStackDismiss({ route })) return false;
+		} else {
+			const state = navigation.getState();
+			const routeIndex = state.routes.findIndex(
+				(stateRoute) => stateRoute.key === route.key,
+			);
+			if (routeIndex <= 0) return false;
+		}
+
+		if (!AnimationStore.getValue(route.key, "closing").get()) {
+			SystemStore.getBag(route.key).actions.requestLifecycleTransition(
+				LifecycleTransitionRequestKind.Close,
+				0,
+			);
+		}
+		return true;
+	}, [isRemovePrevented, navigation, route, requestStackDismiss]);
+
+	return { dismissScreen, isRemovePrevented, requestDismiss };
 }

package/src/shared/index.ts

@@ -71,6 +71,7 @@ export type {
 	BoundsNavigationZoomStyle,
 	GestureHandoffValues,
 	InactiveBehavior,
+	OverlayComponent,
 	OverlayProps,
 	RawGestureValues,
 	ScreenBackdropComponent,

package/src/shared/providers/helpers/measured-bounds-writes.ts

@@ -67,7 +67,7 @@ export const applyMeasuredBoundsWrites = (
 			measured,
 			preparedStyles,
 			group,
-			{ handoff, escapeClipping },
+			{ handoff },
 		);
 	}
 };

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

@@ -2,6 +2,7 @@ import { type ReactNode, useCallback, useLayoutEffect, useMemo } from "react";
 import { useSharedValue } from "react-native-reanimated";
 import { createBoundsAccessor } from "../../../utils/bounds";
 import createProvider from "../../../utils/create-provider";
+import { useDescriptorsStore } from "../descriptors";
 import { useScreenAnimationPipeline } from "./helpers/pipeline";
 import type {
 	RegisterScreenAnimationDescendant,
@@ -25,25 +26,36 @@ export type ScreenAnimationContextValue = ReturnType<
 };
 
 export type ScreenAnimationContextResult = {
+	key: string;
 	value: ScreenAnimationContextValue;
 };
 
 export const { ScreenAnimationProvider, useScreenAnimationStore } =
 	createProvider("ScreenAnimation", {
 		guarded: true,
+		global: true,
 	})<Props, ScreenAnimationContextValue>(
 		(_props, { useParentStore }): ScreenAnimationContextResult => {
-			const parentContext = useParentStore();
-			const parentScreenInterpolatorProps =
-				parentContext?.screenInterpolatorProps;
-			const parentScreenInterpolatorPropsRevision =
-				parentContext?.screenInterpolatorPropsRevision;
-			const parentAncestorScreenAnimationSources =
-				parentContext?.ancestorScreenAnimationSources;
-			const parentRegisterDescendantScreenAnimationSource =
-				parentContext?.registerDescendantScreenAnimationSource;
-			const parentAncestorDescendantScreenAnimationRegistrars =
-				parentContext?.ancestorDescendantScreenAnimationRegistrars;
+			const currentScreenKey = useDescriptorsStore(
+				(store) => store.derivations.currentScreenKey,
+			);
+			const parentScreenInterpolatorProps = useParentStore(
+				(parentContext) => parentContext?.screenInterpolatorProps,
+			);
+			const parentScreenInterpolatorPropsRevision = useParentStore(
+				(parentContext) => parentContext?.screenInterpolatorPropsRevision,
+			);
+			const parentAncestorScreenAnimationSources = useParentStore(
+				(parentContext) => parentContext?.ancestorScreenAnimationSources,
+			);
+			const parentRegisterDescendantScreenAnimationSource = useParentStore(
+				(parentContext) =>
+					parentContext?.registerDescendantScreenAnimationSource,
+			);
+			const parentAncestorDescendantScreenAnimationRegistrars = useParentStore(
+				(parentContext) =>
+					parentContext?.ancestorDescendantScreenAnimationRegistrars,
+			);
 
 			const {
 				screenInterpolatorProps,
@@ -192,6 +204,7 @@ export const { ScreenAnimationProvider, useScreenAnimationStore } =
 			]);
 
 			return {
+				key: currentScreenKey,
 				value: {
 					screenInterpolatorProps,
 					screenInterpolatorPropsRevision,

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

@@ -4,7 +4,7 @@ import type {
 	ScreenTransitionTarget,
 } from "../../../../../types/animation.types";
 import { createBoundsAccessor } from "../../../../../utils/bounds";
-import { useScreenAnimationStore } from "../../animation.provider";
+import type { ScreenAnimationContextValue } from "../../animation.provider";
 import type {
 	ScreenAnimationDescendantSources,
 	ScreenAnimationSource,
@@ -15,6 +15,14 @@ type TransitionSourceIndex = number;
 
 export type TransitionAccessorSource = ScreenAnimationTransitionSource;
 
+type TransitionAccessorStore = Pick<
+	ScreenAnimationContextValue,
+	| "screenInterpolatorProps"
+	| "screenInterpolatorPropsRevision"
+	| "ancestorScreenAnimationSources"
+	| "descendantScreenAnimationSources"
+>;
+
 const resolveTargetIndex = (
 	target: ScreenTransitionTarget | undefined,
 	currentIndex: TransitionSourceIndex,
@@ -118,14 +126,12 @@ const buildSourceBoundsAccessor = (source: ScreenAnimationSource) => {
 	});
 };
 
-export const useBuildTransitionAccessor = () => {
-	const {
-		screenInterpolatorProps,
-		screenInterpolatorPropsRevision,
-		ancestorScreenAnimationSources,
-		descendantScreenAnimationSources,
-	} = useScreenAnimationStore();
-
+export const useBuildTransitionAccessor = ({
+	screenInterpolatorProps,
+	screenInterpolatorPropsRevision,
+	ancestorScreenAnimationSources,
+	descendantScreenAnimationSources,
+}: TransitionAccessorStore) => {
 	return useMemo(() => {
 		const selfSource = {
 			screenInterpolatorProps,

package/src/shared/providers/screen/animation/use-screen-animation.tsx

@@ -1,3 +1,4 @@
+import { useRoute } from "@react-navigation/native";
 import { type DerivedValue, useDerivedValue } from "react-native-reanimated";
 import type {
 	ScreenInterpolationProps,
@@ -33,12 +34,21 @@ export function useScreenAnimation(
 ):
 	| DerivedValue<ScreenInterpolationProps>
 	| DerivedValue<ScreenInterpolationProps | null> {
+	const route = useRoute();
+	const screenAnimationStore = useScreenAnimationStore(route.key);
+
+	if (!screenAnimationStore) {
+		throw new Error(
+			`ScreenAnimation store for route "${route.key}" was not found`,
+		);
+	}
+
 	const {
 		screenInterpolatorPropsRevision,
 		ancestorScreenAnimationSources,
 		descendantScreenAnimationSources,
-	} = useScreenAnimationStore();
-	const transition = useBuildTransitionAccessor();
+	} = screenAnimationStore;
+	const transition = useBuildTransitionAccessor(screenAnimationStore);
 	const transitionTarget = normalizeScreenAnimationTarget(
 		target,
 		ancestorScreenAnimationSources.length,

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

@@ -1,11 +1,11 @@
-import { useMemo } from "react";
+import { Fragment, useMemo } from "react";
 import { Gesture } from "react-native-gesture-handler";
 import { useSharedValue } from "react-native-reanimated";
 import { ScrollStore } from "../../../stores/scroll.store";
 import createProvider from "../../../utils/create-provider";
 import { useDescriptorsStore } from "../descriptors";
 import { useScreenGestureConfig } from "./hooks/use-screen-gesture-config";
-import { useWalkUpAndRegisterShadowingClaims } from "./ownership/use-walk-up-and-register-shadowing-claims";
+import { GestureOwnershipBridge } from "./ownership/gesture-ownership-bridge";
 import { useBuildPanGesture } from "./pan/use-build-pan-gesture";
 import { useBuildPinchGesture } from "./pinch/use-build-pinch-gesture";
 import {
@@ -28,11 +28,16 @@ export const { ScreenGestureProvider, useScreenGestureStore: useGestureStore } =
 			{ children },
 			{ useParentStore },
 		): { value: GestureContextType; children: React.ReactNode } => {
-			const gestureContext = useParentStore();
-			const gestureConfig = useScreenGestureConfig();
 			const currentScreenKey = useDescriptorsStore(
 				(store) => store.derivations.currentScreenKey,
 			);
+			const isTopMostScreen = useDescriptorsStore(
+				(store) => store.derivations.isTopMostScreen,
+			);
+			const gestureContext = useParentStore((parentContext) =>
+				isTopMostScreen ? parentContext : null,
+			);
+			const gestureConfig = useScreenGestureConfig(gestureContext);
 
 			const scrollState = ScrollStore.getValue(
 				currentScreenKey,
@@ -89,13 +94,19 @@ export const { ScreenGestureProvider, useScreenGestureStore: useGestureStore } =
 				],
 			);
 
-			useWalkUpAndRegisterShadowingClaims(
-				gestureConfig.participation.claimedDirections,
+			const content = useMemo(
+				() => (
+					<Fragment>
+						<GestureOwnershipBridge />
+						{children}
+					</Fragment>
+				),
+				[children],
 			);
 
 			return {
 				value,
-				children,
+				children: content,
 			};
 		},
 	);

package/src/shared/providers/screen/gestures/hooks/use-screen-gesture-config.ts

@@ -1,15 +1,22 @@
+import { usePreventRemoveContext } from "@react-navigation/native";
 import { useMemo } from "react";
 import { useDescriptorsStore } from "../../descriptors";
-import { useGestureStore } from "../gestures.provider";
 import { resolveScreenGestureConfig } from "../shared/policy";
-import type { ScreenGestureConfig } from "../types";
+import type { GestureContextType, ScreenGestureConfig } from "../types";
 
-export function useScreenGestureConfig(): ScreenGestureConfig {
-	const gestureContext = useGestureStore();
+export function useScreenGestureConfig(
+	gestureContext: GestureContextType | null,
+): ScreenGestureConfig {
 	const options = useDescriptorsStore((store) => store.options);
 	const isFirstKey = useDescriptorsStore(
 		(store) => store.derivations.isFirstKey,
 	);
+	const currentScreenKey = useDescriptorsStore(
+		(store) => store.derivations.currentScreenKey,
+	);
+	const { preventedRoutes } = usePreventRemoveContext();
+	const isRemovePrevented =
+		preventedRoutes[currentScreenKey]?.preventRemove === true;
 
 	return useMemo(
 		() =>
@@ -17,7 +24,8 @@ export function useScreenGestureConfig(): ScreenGestureConfig {
 				options,
 				isFirstKey,
 				gestureContext,
+				isRemovePrevented,
 			}),
-		[isFirstKey, options, gestureContext],
+		[isFirstKey, options, gestureContext, isRemovePrevented],
 	);
 }

package/src/shared/providers/screen/gestures/ownership/{use-walk-up-and-register-shadowing-claims.ts → gesture-ownership-bridge.tsx}

@@ -30,9 +30,9 @@ const findShadowedDirections = (
 ) => {
 	const shadowedDirections: Direction[] = [];
 
-	for (const dir of DIRECTIONS) {
-		if (claimedDirections[dir] && ancestorDirections[dir]) {
-			shadowedDirections.push(dir);
+	for (const direction of DIRECTIONS) {
+		if (claimedDirections[direction] && ancestorDirections[direction]) {
+			shadowedDirections.push(direction);
 		}
 	}
 
@@ -70,8 +70,8 @@ const registerShadowingClaims = (
 
 	for (const { ancestor, directions } of shadowedAncestors) {
 		const newClaims = { ...ancestor.childDirectionClaims.get() };
-		for (const dir of directions) {
-			newClaims[dir] = { routeKey: currentScreenKey, isDismissing };
+		for (const direction of directions) {
+			newClaims[direction] = { routeKey: currentScreenKey, isDismissing };
 		}
 		ancestor.childDirectionClaims.set(newClaims);
 	}
@@ -86,10 +86,9 @@ const clearShadowingClaims = (
 		const newClaims = { ...currentClaims };
 		let needsUpdate = false;
 
-		for (const dir of directions) {
-			// Only remove claims written by this screen; a newer descendant may own it now.
-			if (currentClaims[dir]?.routeKey === currentScreenKey) {
-				newClaims[dir] = null;
+		for (const direction of directions) {
+			if (currentClaims[direction]?.routeKey === currentScreenKey) {
+				newClaims[direction] = null;
 				needsUpdate = true;
 			}
 		}
@@ -121,51 +120,32 @@ const getDescriptorClaimedDirections = (
 	}).participation.claimedDirections;
 };
 
-/**
- * Registers this screen with ancestors that claim the same direction.
- *
- * Example, when C is top-most:
- * A claims vertical
- * └─ B claims horizontal
- *    └─ C claims vertical
- *
- * C walks up the tree and writes itself into A.childDirectionClaims.vertical.
- * B is skipped because it does not claim vertical.
- */
-export function useWalkUpAndRegisterShadowingClaims(
-	claimedDirections: ClaimedDirections,
-): void {
-	const parentContext = useGestureStore();
+const requireGestureContext = (
+	gestureContext: GestureContextType | null,
+): GestureContextType => {
+	if (!gestureContext) {
+		throw new Error(
+			"GestureOwnershipBridge must be rendered within a ScreenGestureProvider",
+		);
+	}
+
+	return gestureContext;
+};
+
+function ActiveGestureOwnershipBridge() {
+	const gestureContext = requireGestureContext(useGestureStore());
 	const previous = useDescriptorsStore((store) => store.previous);
-	const isTopMostScreen = useDescriptorsStore(
-		(store) => store.derivations.isTopMostScreen,
-	);
-	const currentScreenKey = useDescriptorsStore(
-		(store) => store.derivations.currentScreenKey,
-	);
 	const isCurrentScreenClosing = useBlankStackStore(
-		(store) => store?.scenesByKey[currentScreenKey]?.activity === "closing",
+		(store) =>
+			store?.scenesByKey[gestureContext.routeKey]?.activity === "closing",
 	);
-
-	/*
-	 * We want to calculate effective claimed directions as claimedDirections is not enough for us.
-	 * What this solves is lingering claimed directions when a screen is closing.
-	 *
-	 * Overlay claims horizontal
-	 *   └─ A has no local horizontal claim
-	 *   └─ B claims horizontal (closing)
-	 *   └─ C claims horizontal (closing)
-	 *
-	 * Closing screens are still mounted, so they can still block parent gestures.
-	 * But they cannot receive touches anymore.
-	 *
-	 * So when B/C are closing and the user is really touching A, B/C should not
-	 * keep blocking the parent with their own gesture config.
-	 *
-	 * A closing screen should act like the visible screen underneath it:
-	 * - if the screen underneath claims the gesture, keep blocking the parent
-	 * - if the screen underneath does not claim it, let the parent handle it
-	 */
+	const {
+		claimedDirections,
+		gestureContext: parentContext,
+		routeKey: currentScreenKey,
+	} = gestureContext;
+	// A retained closing screen cannot receive touches, so its ownership must
+	// mirror the visible screen underneath instead of blocking an ancestor.
 	const effectiveClaimedDirections = useMemo(
 		() =>
 			resolveShadowingClaimDirections({
@@ -178,14 +158,13 @@ export function useWalkUpAndRegisterShadowingClaims(
 			}),
 		[isCurrentScreenClosing, claimedDirections, previous, parentContext],
 	);
-
 	const shadowedAncestors = useMemo(
 		() => findShadowedAncestors(parentContext, effectiveClaimedDirections),
 		[parentContext, effectiveClaimedDirections],
 	);
 
 	useLayoutEffect(() => {
-		if (!isTopMostScreen || !shadowedAncestors.length) {
+		if (!shadowedAncestors.length) {
 			return;
 		}
 
@@ -194,5 +173,16 @@ export function useWalkUpAndRegisterShadowingClaims(
 		return () => {
 			clearShadowingClaims(shadowedAncestors, currentScreenKey);
 		};
-	}, [shadowedAncestors, currentScreenKey, isTopMostScreen]);
+	}, [shadowedAncestors, currentScreenKey]);
+
+	return null;
+}
+
+/** Keeps gesture ownership subscriptions attached only to participating screens. */
+export function GestureOwnershipBridge() {
+	const isTopMostScreen = useDescriptorsStore(
+		(store) => store.derivations.isTopMostScreen,
+	);
+
+	return isTopMostScreen ? <ActiveGestureOwnershipBridge /> : null;
 }

package/src/shared/providers/screen/gestures/pan/behavior/pan-lifecycle.ts

@@ -89,7 +89,6 @@ export const trackPanGesture = (
 export const finalizePanRelease = (
 	release: PanReleaseResult,
 	runtime: PanGestureRuntime,
-	dismissScreen: ((finished: boolean) => void) | undefined,
 	dimensions: GestureDimensions,
 	rawEvent: PanGestureEvent,
 	requestDismiss?: () => void,
@@ -150,13 +149,8 @@ export const finalizePanRelease = (
 		return;
 	}
 
-	if (plan.shouldDismiss && requestDismiss) {
-		runOnJS(requestDismiss)();
-	}
-
 	animateToProgress({
 		target: plan.target,
-		onAnimationFinish: plan.shouldDismiss ? dismissScreen : undefined,
 		spec: plan.transitionSpec,
 		emitWillAnimate: false,
 		markEntering: false,
@@ -165,4 +159,8 @@ export const finalizePanRelease = (
 		animations,
 		initialVelocity: plan.progressVelocity,
 	});
+
+	if (plan.shouldDismiss && requestDismiss) {
+		runOnJS(requestDismiss)();
+	}
 };

package/src/shared/providers/screen/gestures/pan/behavior/use-pan-behavior.ts

@@ -31,7 +31,7 @@ export const usePanBehavior = (
 	gestureCompositionOwner: SharedValue<GestureCompositionOwner>,
 	pendingDirection: SharedValue<Direction | null>,
 ): PanBehavior => {
-	const { dismissScreen, requestDismiss } = useNavigationHelpers();
+	const { requestDismiss } = useNavigationHelpers();
 	const { withSensitivity, resetSensitivity } =
 		usePanGestureSensitivity(screenOptions);
 
@@ -109,7 +109,6 @@ export const usePanBehavior = (
 			finalizePanRelease(
 				release,
 				latestRuntime,
-				dismissScreen,
 				dimensions,
 				rawEvent,
 				requestDismiss,
@@ -124,7 +123,6 @@ export const usePanBehavior = (
 			runtime,
 			screenOptions,
 			dimensions,
-			dismissScreen,
 			requestDismiss,
 			withSensitivity,
 			gestureCompositionOwner,

package/src/shared/providers/screen/gestures/pinch/behavior/pinch-lifecycle.ts

@@ -61,7 +61,6 @@ export const trackPinchGesture = (
 export const finalizePinchRelease = (
 	release: PinchReleaseResult,
 	runtime: PinchGestureRuntime,
-	dismissScreen: ((finished: boolean) => void) | undefined,
 	requestDismiss?: () => void,
 ) => {
 	"worklet";
@@ -91,10 +90,6 @@ export const finalizePinchRelease = (
 		resetValuesImmediately: release.resetValuesImmediately,
 	});
 
-	if (release.shouldDismiss && requestDismiss) {
-		runOnJS(requestDismiss)();
-	}
-
 	if (!release.shouldDismiss && progressAlreadyAtTarget) {
 		system.targetProgress.set(release.target);
 		return;
@@ -102,7 +97,6 @@ export const finalizePinchRelease = (
 
 	animateToProgress({
 		target: release.target,
-		onAnimationFinish: release.shouldDismiss ? dismissScreen : undefined,
 		spec: release.transitionSpec,
 		emitWillAnimate: false,
 		markEntering: false,
@@ -111,4 +105,8 @@ export const finalizePinchRelease = (
 		animationProgress: system.animationProgress,
 		initialVelocity: release.initialVelocity,
 	});
+
+	if (release.shouldDismiss && requestDismiss) {
+		runOnJS(requestDismiss)();
+	}
 };

package/src/shared/providers/screen/gestures/pinch/behavior/use-pinch-behavior.ts

@@ -26,7 +26,7 @@ export const usePinchBehavior = (
 	screenOptions: ScreenOptionsContextValue,
 	gestureCompositionOwner: SharedValue<GestureCompositionOwner>,
 ): PinchBehavior => {
-	const { dismissScreen, requestDismiss } = useNavigationHelpers();
+	const { requestDismiss } = useNavigationHelpers();
 	const { withSensitivity, resetSensitivity } =
 		usePinchGestureSensitivity(screenOptions);
 
@@ -68,18 +68,12 @@ export const usePinchBehavior = (
 				.hasSnapPoints
 				? resolveSnapPinchRelease(event, latestRuntime)
 				: resolvePinchRelease(event, latestRuntime);
-			finalizePinchRelease(
-				release,
-				latestRuntime,
-				dismissScreen,
-				requestDismiss,
-			);
+			finalizePinchRelease(release, latestRuntime, requestDismiss);
 			gestureCompositionOwner.set(null);
 		},
 		[
 			runtime,
 			screenOptions,
-			dismissScreen,
 			requestDismiss,
 			withSensitivity,
 			gestureCompositionOwner,

package/src/shared/providers/screen/gestures/shared/policy.ts

@@ -306,15 +306,19 @@ const resolveGestureParticipation = ({
 	options,
 	isFirstKey,
 	gestureContext,
+	isRemovePrevented,
 }: {
 	options: GesturePolicyOptions;
 	isFirstKey: boolean;
 	gestureContext: GestureContextType | null;
+	isRemovePrevented: boolean;
 }): ScreenGestureParticipation => {
-	const canDismiss = resolveGestureCanDismiss({
-		isFirstKey,
-		gestureEnabled: options.gestureEnabled,
-	});
+	const canDismiss =
+		!isRemovePrevented &&
+		resolveGestureCanDismiss({
+			isFirstKey,
+			gestureEnabled: options.gestureEnabled,
+		});
 	const effectiveSnapPoints = validateSnapPoints({
 		snapPoints: options.snapPoints,
 		canDismiss,
@@ -333,6 +337,7 @@ const resolveGestureParticipation = ({
 
 	return {
 		isFirstKey,
+		isRemovePrevented,
 		canDismiss,
 		canTrackGesture,
 		effectiveSnapPoints,
@@ -345,15 +350,18 @@ export const resolveScreenGestureConfig = ({
 	options,
 	isFirstKey,
 	gestureContext,
+	isRemovePrevented = false,
 }: {
 	options: ScreenTransitionConfig;
 	isFirstKey: boolean;
 	gestureContext: GestureContextType | null;
+	isRemovePrevented?: boolean;
 }): ScreenGestureConfig => {
 	const participation = resolveGestureParticipation({
 		options,
 		isFirstKey,
 		gestureContext,
+		isRemovePrevented,
 	});
 	const hasSnapPoints = participation.effectiveSnapPoints.hasSnapPoints;
 
@@ -365,11 +373,14 @@ export const resolveScreenGestureConfig = ({
 };
 
 function resolveRuntimeCanDismiss(
-	participation: Pick<ScreenGestureParticipation, "isFirstKey" | "canDismiss">,
+	participation: Pick<
+		ScreenGestureParticipation,
+		"isFirstKey" | "isRemovePrevented" | "canDismiss"
+	>,
 	options: GesturePolicyOptions,
 ) {
 	"worklet";
-	if (participation.isFirstKey) {
+	if (participation.isFirstKey || participation.isRemovePrevented) {
 		return false;
 	}
 

package/src/shared/providers/screen/gestures/types.ts

@@ -85,6 +85,8 @@ export interface GestureContextType {
 export interface ScreenGestureParticipation {
 	/** Whether this route is the first route in its stack. First routes never track gestures. */
 	isFirstKey: boolean;
+	/** Whether React Navigation currently blocks removal of this route. */
+	isRemovePrevented: boolean;
 	/** Whether this route can dismiss to progress 0 from a gesture release. */
 	canDismiss: boolean;
 	/** Whether recognizers can activate to expose gesture values to interpolators. */

package/src/shared/providers/screen/styles/constants.ts

@@ -65,6 +65,7 @@ export const PROP_RESET_VALUES: Record<string, unknown> = {
 };
 
 const RESERVED_STYLE_SLOT_IDS = {
+	overlay: true,
 	content: true,
 	backdrop: true,
 	surface: true,