react-native-screen-transitions 4.0.0-alpha.0 → 4.0.0-alpha.10

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

@@ -8,9 +8,9 @@ import {
 	DEFAULT_GESTURE_TRACKING,
 	DEFAULT_GESTURE_VELOCITY_IMPACT,
 	DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR,
+	DEFAULT_SHEET_SNAP_BEHAVIOR,
 } from "../../../../constants";
 import type {
-	GestureActivationArea,
 	GestureDirectionActivationArea,
 	GestureDirectionEntry,
 	GestureDirectionOption,
@@ -20,16 +20,17 @@ import type {
 	GestureTracking,
 	ScreenTransitionConfig,
 	SheetScrollGestureBehavior,
+	SheetSnapBehavior,
 	SnapPoint,
 } from "../../../../types/screen.types";
 import { computeClaimedDirections } from "../ownership/compute-claimed-directions";
 import { resolveOwnership } from "../ownership/resolve-ownership";
 import type {
-	GestureContextType,
 	PanGesturePolicy,
 	PinchGesturePolicy,
 	ScreenGestureConfig,
 	ScreenGestureParticipation,
+	ScreenGestureSource,
 } from "../types";
 import {
 	getGestureDirectionEntries,
@@ -43,17 +44,15 @@ import {
 import { validateSnapPoints } from "./snap-points";
 
 export type GesturePolicyOptions = {
-	expandViaScrollView?: boolean;
-	gestureActivationArea?: GestureActivationArea;
 	gestureDirection?: GestureDirectionOption;
 	gestureEnabled?: boolean;
 	gestureTracking?: GestureTracking;
 	gestureReleaseVelocityScale?: number;
-	gestureResponseDistance?: number;
 	gestureSensitivity?: number;
 	gestureSnapLocked?: boolean;
 	gestureSnapVelocityImpact?: number;
 	gestureVelocityImpact?: number;
+	sheetSnapBehavior?: SheetSnapBehavior;
 	sheetScrollGestureBehavior?: SheetScrollGestureBehavior;
 	snapPoints?: SnapPoint[];
 	transitionSpec?: ScreenTransitionConfig["transitionSpec"];
@@ -138,14 +137,12 @@ const resolveConfiguredGestureActivationArea = (
 };
 
 const resolveGestureActivationArea = (
-	options: GesturePolicyOptions,
 	gestureDirection: GestureDirectionOption,
 	hasSnapPoints: boolean,
 ): ResolvedGestureActivationArea => {
 	"worklet";
 	return (
 		resolveConfiguredGestureActivationArea(gestureDirection, hasSnapPoints) ??
-		options.gestureActivationArea ??
 		DEFAULT_GESTURE_ACTIVATION_AREA
 	);
 };
@@ -158,6 +155,7 @@ const resolveCommonGesturePolicy = (options: GesturePolicyOptions) => {
 		gestureSnapVelocityImpact:
 			options.gestureSnapVelocityImpact ?? DEFAULT_GESTURE_SNAP_VELOCITY_IMPACT,
 		gestureSnapLocked: options.gestureSnapLocked ?? DEFAULT_GESTURE_SNAP_LOCKED,
+		sheetSnapBehavior: options.sheetSnapBehavior ?? DEFAULT_SHEET_SNAP_BEHAVIOR,
 		gestureReleaseVelocityScale:
 			options.gestureReleaseVelocityScale ??
 			DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE,
@@ -169,17 +167,9 @@ function resolvePolicySheetScrollGestureBehavior(
 	options: GesturePolicyOptions,
 ): SheetScrollGestureBehavior {
 	"worklet";
-	const explicitBehavior = options.sheetScrollGestureBehavior;
-	if (explicitBehavior) {
-		return explicitBehavior;
-	}
-
-	const legacyBehavior = options.expandViaScrollView;
-	if (legacyBehavior !== undefined) {
-		return legacyBehavior ? "expand-and-collapse" : "collapse-only";
-	}
-
-	return DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR;
+	return (
+		options.sheetScrollGestureBehavior ?? DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR
+	);
 }
 
 const resolvePinchDirections = (
@@ -273,13 +263,11 @@ export const resolvePanPolicy = (
 		gestureVelocityImpact:
 			options.gestureVelocityImpact ?? DEFAULT_GESTURE_VELOCITY_IMPACT,
 		gestureActivationArea: resolveGestureActivationArea(
-			options,
 			gestureDirection,
 			hasSnapPoints,
 		),
 		sheetScrollGestureBehavior:
 			resolvePolicySheetScrollGestureBehavior(options),
-		gestureResponseDistance: options.gestureResponseDistance,
 	};
 };
 
@@ -305,11 +293,11 @@ export const resolvePinchPolicy = (
 const resolveGestureParticipation = ({
 	options,
 	isFirstKey,
-	gestureContext,
+	ancestorGestures,
 }: {
 	options: GesturePolicyOptions;
 	isFirstKey: boolean;
-	gestureContext: GestureContextType | null;
+	ancestorGestures: readonly ScreenGestureSource[];
 }): ScreenGestureParticipation => {
 	const canDismiss = resolveGestureCanDismiss({
 		isFirstKey,
@@ -337,23 +325,23 @@ const resolveGestureParticipation = ({
 		canTrackGesture,
 		effectiveSnapPoints,
 		claimedDirections,
-		ownershipStatus: resolveOwnership(claimedDirections, gestureContext),
+		ownershipStatus: resolveOwnership(claimedDirections, ancestorGestures),
 	};
 };
 
 export const resolveScreenGestureConfig = ({
 	options,
 	isFirstKey,
-	gestureContext,
+	ancestorGestures,
 }: {
 	options: ScreenTransitionConfig;
 	isFirstKey: boolean;
-	gestureContext: GestureContextType | null;
+	ancestorGestures: readonly ScreenGestureSource[];
 }): ScreenGestureConfig => {
 	const participation = resolveGestureParticipation({
 		options,
 		isFirstKey,
-		gestureContext,
+		ancestorGestures,
 	});
 	const hasSnapPoints = participation.effectiveSnapPoints.hasSnapPoints;
 

package/src/providers/screen/gestures/shared/snap-points.ts

@@ -204,6 +204,18 @@ export const resolveRuntimeGestureSnapPoints = (
 	});
 };
 
+export const resolveRuntimeGestureSnapTargets = (
+	runtime: GestureRuntime<GesturePolicy>,
+): number[] => {
+	"worklet";
+	const { resolvedSnapPoints } = resolveRuntimeGestureSnapPoints(runtime);
+	const targets = runtime.participation.canDismiss
+		? [0, ...resolvedSnapPoints]
+		: resolvedSnapPoints;
+
+	return Array.from(new Set(targets)).sort((a, b) => a - b);
+};
+
 const findNearestSnapPoint = (
 	progress: number,
 	snapPoints: number[],
@@ -226,6 +238,81 @@ const findNearestSnapPoint = (
 	return nearest;
 };
 
+const findNearestSnapPointIndex = (
+	progress: number,
+	snapPoints: number[],
+): number => {
+	"worklet";
+	let nearestIndex = 0;
+	let smallestDistance = Math.abs(progress - (snapPoints[0] ?? progress));
+
+	for (let i = 1; i < snapPoints.length; i++) {
+		const distance = Math.abs(progress - snapPoints[i]);
+		if (distance < smallestDistance) {
+			smallestDistance = distance;
+			nearestIndex = i;
+		}
+	}
+
+	return nearestIndex;
+};
+
+interface ResolveStepSnapProps {
+	baseline: number;
+	direction: number;
+	snapPoints: number[];
+}
+
+export const resolveStepSnapTargets = ({
+	baseline,
+	direction,
+	snapPoints,
+}: ResolveStepSnapProps): number[] => {
+	"worklet";
+	if (snapPoints.length === 0) {
+		return [baseline];
+	}
+
+	const baselineIndex = findNearestSnapPointIndex(baseline, snapPoints);
+	const start = snapPoints[baselineIndex] ?? baseline;
+	const adjacentIndex = baselineIndex + Math.sign(direction);
+	const adjacent = snapPoints[adjacentIndex];
+
+	if (direction === 0 || adjacent === undefined) {
+		return [start];
+	}
+
+	return direction < 0 ? [adjacent, start] : [start, adjacent];
+};
+
+export const resolveStepSnapProgress = ({
+	baseline,
+	normalizedDelta,
+	snapPoints,
+}: Omit<ResolveStepSnapProps, "direction"> & {
+	normalizedDelta: number;
+}): number => {
+	"worklet";
+	const targets = resolveStepSnapTargets({
+		baseline,
+		direction: normalizedDelta,
+		snapPoints,
+	});
+	const target = normalizedDelta < 0 ? targets[0] : targets[targets.length - 1];
+	const localProgress = Math.min(1, Math.abs(normalizedDelta));
+
+	return baseline + (target - baseline) * localProgress;
+};
+
+export const getStepSnapProgressVelocityScale = (targets: number[]): number => {
+	"worklet";
+	if (targets.length < 2) {
+		return 0;
+	}
+
+	return Math.abs(targets[targets.length - 1] - targets[0]);
+};
+
 export const primeRuntimeSnapPoint = (
 	runtime: GestureRuntime<GesturePolicy>,
 ) => {

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

@@ -30,6 +30,5 @@ export const snapshotGestureHandoff = (
 	snapshot.raw.scale.set(gestures.raw.scale.get());
 	snapshot.raw.normScale.set(gestures.raw.normScale.get());
 	snapshot.raw.rotation.set(gestures.raw.rotation.get());
-	snapshot.active.set(gestures.active.get());
-	snapshot.direction.set(gestures.direction.get());
+	snapshot.active.set(gestures.initiator.get());
 };

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

@@ -4,7 +4,6 @@ import type {
 	GestureUpdateEvent,
 	PanGestureHandlerEventPayload,
 	PinchGestureHandlerEventPayload,
-	RotationGestureHandlerEventPayload,
 } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
 import type { AnimationStoreMap } from "../../../stores/animation.store";
@@ -33,7 +32,6 @@ import type { EffectiveSnapPointsResult } from "./shared/snap-points";
 
 export type PanGesture = ReturnType<typeof Gesture.Pan>;
 export type PinchGesture = ReturnType<typeof Gesture.Pinch>;
-export type RotationGesture = ReturnType<typeof Gesture.Rotation>;
 export type ComposedGesture = ReturnType<typeof Gesture.Simultaneous>;
 
 export type PanGestureEvent =
@@ -44,10 +42,6 @@ export type PinchGestureEvent =
 	| GestureUpdateEvent<PinchGestureHandlerEventPayload>
 	| GestureStateChangeEvent<PinchGestureHandlerEventPayload>;
 
-export type RotationGestureEvent =
-	| GestureUpdateEvent<RotationGestureHandlerEventPayload>
-	| GestureStateChangeEvent<RotationGestureHandlerEventPayload>;
-
 /** Gesture that owns navigation release for the current simultaneous composition. */
 export type GestureCompositionOwner = "pan" | "pinch" | null;
 
@@ -77,18 +71,20 @@ export const NO_DIRECTION_CLAIMS: DirectionClaimMap = {
 	"horizontal-inverted": null,
 };
 
-export interface GestureContextType {
+export interface ScreenGestureSource {
 	routeKey: string;
 	detectorGesture: ComposedGesture;
 	panGesture: PanGesture;
 	pinchGesture: PinchGesture;
-	rotationGesture: RotationGesture;
 	scrollState: SharedValue<ScrollGestureState | null>;
-	gestureContext: GestureContextType | null;
 	claimedDirections: ClaimedDirections;
 	childDirectionClaims: SharedValue<DirectionClaimMap>;
 }
 
+export interface GestureContextType extends ScreenGestureSource {
+	ancestorGestures: readonly ScreenGestureSource[];
+}
+
 export interface ScreenGestureParticipation {
 	/** Whether this route is the first route in its stack. First routes never track gestures. */
 	isFirstKey: boolean;
@@ -118,10 +114,10 @@ export interface PanGesturePolicy {
 	gestureReleaseVelocityScale: number;
 	gestureActivationArea: ResolvedGestureActivationArea;
 	gestureSnapLocked: boolean;
+	sheetSnapBehavior: NonNullable<ScreenTransitionConfig["sheetSnapBehavior"]>;
 	sheetScrollGestureBehavior: NonNullable<
 		ScreenTransitionConfig["sheetScrollGestureBehavior"]
 	>;
-	gestureResponseDistance: ScreenTransitionConfig["gestureResponseDistance"];
 	transitionSpec: TransitionSpec | undefined;
 }
 
@@ -134,6 +130,7 @@ export interface PinchGesturePolicy {
 	gestureSensitivity: NonNullable<ScreenTransitionConfig["gestureSensitivity"]>;
 	gestureSnapVelocityImpact: number;
 	gestureSnapLocked: boolean;
+	sheetSnapBehavior: NonNullable<ScreenTransitionConfig["sheetSnapBehavior"]>;
 	gestureReleaseVelocityScale: number;
 	transitionSpec: TransitionSpec | undefined;
 }
@@ -156,8 +153,6 @@ export type PanGestureRuntime = GestureRuntime<PanGesturePolicy>;
 
 export type PinchGestureRuntime = GestureRuntime<PinchGesturePolicy>;
 
-export type RotationGestureRuntime = GestureRuntime<PinchGesturePolicy>;
-
 export interface GestureDimensions {
 	width: number;
 	height: number;
@@ -221,8 +216,3 @@ export interface PinchBehavior {
 	onUpdate: (event: PinchGestureEvent) => void;
 	onEnd: (event: PinchGestureEvent) => void;
 }
-
-export interface RotationBehavior {
-	onStart: () => void;
-	onUpdate: (event: RotationGestureEvent) => void;
-}

package/src/providers/screen/options/helpers.ts

@@ -1,5 +1,4 @@
 import {
-	DEFAULT_GESTURE_ACTIVATION_AREA,
 	DEFAULT_GESTURE_DIRECTION,
 	DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE,
 	DEFAULT_GESTURE_SENSITIVITY,
@@ -8,10 +7,9 @@ import {
 	DEFAULT_GESTURE_TRACKING,
 	DEFAULT_GESTURE_VELOCITY_IMPACT,
 	DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR,
+	DEFAULT_SHEET_SNAP_BEHAVIOR,
 } from "../../../constants";
 import type {
-	ActivationArea,
-	GestureActivationArea,
 	GestureDirection,
 	GestureDirectionActivationArea,
 	GestureDirectionEntry,
@@ -122,31 +120,6 @@ const resolveGestureDirectionOption = (
 	return fallback;
 };
 
-const isActivationArea = (value: unknown): value is ActivationArea => {
-	"worklet";
-	return value === "edge" || value === "screen";
-};
-
-const resolveGestureActivationAreaOption = (
-	value: unknown,
-	fallback: RequiredScreenOption<"gestureActivationArea">,
-): RequiredScreenOption<"gestureActivationArea"> => {
-	"worklet";
-	if (isActivationArea(value)) {
-		return value;
-	}
-	if (typeof value === "object" && value !== null && !Array.isArray(value)) {
-		const area = value as Record<string, unknown>;
-		const isValid =
-			(area.left === undefined || isActivationArea(area.left)) &&
-			(area.right === undefined || isActivationArea(area.right)) &&
-			(area.top === undefined || isActivationArea(area.top)) &&
-			(area.bottom === undefined || isActivationArea(area.bottom));
-		return isValid ? (area as GestureActivationArea) : fallback;
-	}
-	return fallback;
-};
-
 const resolveSheetScrollGestureBehaviorOption = (
 	value: unknown,
 	fallback: RequiredScreenOption<"sheetScrollGestureBehavior">,
@@ -157,6 +130,14 @@ const resolveSheetScrollGestureBehaviorOption = (
 		: fallback;
 };
 
+const resolveSheetSnapBehaviorOption = (
+	value: unknown,
+	fallback: RequiredScreenOption<"sheetSnapBehavior">,
+): RequiredScreenOption<"sheetSnapBehavior"> => {
+	"worklet";
+	return value === "continuous" || value === "step" ? value : fallback;
+};
+
 const resolveGestureTrackingOption = (
 	value: unknown,
 	fallback: RequiredScreenOption<"gestureTracking">,
@@ -180,30 +161,6 @@ const resolveBackdropBehaviorOption = (
 		: fallback;
 };
 
-const areGestureActivationAreasEqual = (
-	left: RequiredScreenOption<"gestureActivationArea">,
-	right: RequiredScreenOption<"gestureActivationArea">,
-) => {
-	"worklet";
-	if (left === right) return true;
-
-	if (
-		typeof left !== "object" ||
-		left === null ||
-		typeof right !== "object" ||
-		right === null
-	) {
-		return false;
-	}
-
-	return (
-		left.left === right.left &&
-		left.right === right.right &&
-		left.top === right.top &&
-		left.bottom === right.bottom
-	);
-};
-
 const areGestureDirectionEntriesEqual = (
 	left: GestureDirectionEntry,
 	right: GestureDirectionEntry,
@@ -256,12 +213,8 @@ const areScreenOptionsEqual = (
 		left.gestureVelocityImpact === right.gestureVelocityImpact &&
 		left.gestureSnapVelocityImpact === right.gestureSnapVelocityImpact &&
 		left.gestureReleaseVelocityScale === right.gestureReleaseVelocityScale &&
-		left.gestureResponseDistance === right.gestureResponseDistance &&
-		areGestureActivationAreasEqual(
-			left.gestureActivationArea,
-			right.gestureActivationArea,
-		) &&
 		left.gestureSnapLocked === right.gestureSnapLocked &&
+		left.sheetSnapBehavior === right.sheetSnapBehavior &&
 		left.sheetScrollGestureBehavior === right.sheetScrollGestureBehavior &&
 		left.backdropBehavior === right.backdropBehavior &&
 		left.transitionSpec === right.transitionSpec &&
@@ -302,18 +255,14 @@ export const resolveBaseScreenOptions = (
 			options.gestureReleaseVelocityScale,
 			DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE,
 		),
-		gestureResponseDistance: resolveNumberOption(
-			options.gestureResponseDistance,
-			undefined,
-		),
-		gestureActivationArea: resolveGestureActivationAreaOption(
-			options.gestureActivationArea,
-			DEFAULT_GESTURE_ACTIVATION_AREA,
-		),
 		gestureSnapLocked: resolveBooleanOption(
 			options.gestureSnapLocked,
 			DEFAULT_GESTURE_SNAP_LOCKED,
 		),
+		sheetSnapBehavior: resolveSheetSnapBehaviorOption(
+			options.sheetSnapBehavior,
+			DEFAULT_SHEET_SNAP_BEHAVIOR,
+		),
 		sheetScrollGestureBehavior: resolveSheetScrollGestureBehaviorOption(
 			resolveSheetScrollGestureBehavior(options),
 			DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR,
@@ -376,18 +325,14 @@ export const syncScreenOptionsOverrides = (
 			options?.gestureReleaseVelocityScale,
 			base.gestureReleaseVelocityScale,
 		),
-		gestureResponseDistance: resolveNumberOption(
-			options?.gestureResponseDistance,
-			base.gestureResponseDistance,
-		),
-		gestureActivationArea: resolveGestureActivationAreaOption(
-			options?.gestureActivationArea,
-			base.gestureActivationArea,
-		),
 		gestureSnapLocked: resolveBooleanOption(
 			options?.gestureSnapLocked,
 			base.gestureSnapLocked,
 		),
+		sheetSnapBehavior: resolveSheetSnapBehaviorOption(
+			options?.sheetSnapBehavior,
+			base.sheetSnapBehavior,
+		),
 		sheetScrollGestureBehavior: resolveSheetScrollGestureBehaviorOption(
 			options?.sheetScrollGestureBehavior,
 			base.sheetScrollGestureBehavior,

package/src/providers/screen/options/index.ts

@@ -1,6 +1,6 @@
 export { syncScreenOptionsOverrides } from "./helpers";
 export {
 	ScreenOptionsProvider,
-	useScreenOptionsContext,
+	useScreenOptionsStore,
 } from "./options.provider";
 export type { ScreenOptionsContextValue, ScreenOptionsSnapshot } from "./types";

package/src/providers/screen/options/options.provider.tsx

@@ -1,7 +1,7 @@
 import { useLayoutEffect, useMemo } from "react";
 import { useSharedValue } from "react-native-reanimated";
 import createProvider from "../../../utils/create-provider";
-import { useDescriptors } from "../descriptors";
+import { useDescriptorsStore } from "../descriptors";
 import { resolveBaseScreenOptions, syncScreenOptionsBase } from "./helpers";
 import type {
 	ScreenOptionsContextValue,
@@ -9,35 +9,31 @@ import type {
 	ScreenOptionsState,
 } from "./types";
 
-export const { ScreenOptionsProvider, useScreenOptionsContext } =
-	createProvider("ScreenOptions")<
-		ScreenOptionsProviderProps,
-		ScreenOptionsContextValue
-	>(() => {
-		const {
-			current: { options },
-		} = useDescriptors();
+export const { ScreenOptionsProvider, useScreenOptionsStore } = createProvider(
+	"ScreenOptions",
+)<ScreenOptionsProviderProps, ScreenOptionsContextValue>(() => {
+	const options = useDescriptorsStore((store) => store.options);
 
-		const baseScreenOptions = useMemo(
-			() => resolveBaseScreenOptions(options),
-			[options],
-		);
+	const baseScreenOptions = useMemo(
+		() => resolveBaseScreenOptions(options),
+		[options],
+	);
 
-		const initialScreenOptions = useMemo<ScreenOptionsState>(
-			() => ({
-				...baseScreenOptions,
-				baseOptions: baseScreenOptions,
-			}),
-			[baseScreenOptions],
-		);
+	const initialScreenOptions = useMemo<ScreenOptionsState>(
+		() => ({
+			...baseScreenOptions,
+			baseOptions: baseScreenOptions,
+		}),
+		[baseScreenOptions],
+	);
 
-		const value = useSharedValue(initialScreenOptions);
+	const value = useSharedValue(initialScreenOptions);
 
-		useLayoutEffect(() => {
-			syncScreenOptionsBase(value, baseScreenOptions);
-		}, [value, baseScreenOptions]);
+	useLayoutEffect(() => {
+		syncScreenOptionsBase(value, baseScreenOptions);
+	}, [value, baseScreenOptions]);
 
-		return {
-			value,
-		};
-	});
+	return {
+		value,
+	};
+});

package/src/providers/screen/options/types.ts

@@ -17,9 +17,8 @@ export type ScreenOptionsSnapshot = {
 	gestureVelocityImpact: RequiredScreenOption<"gestureVelocityImpact">;
 	gestureSnapVelocityImpact: RequiredScreenOption<"gestureSnapVelocityImpact">;
 	gestureReleaseVelocityScale: RequiredScreenOption<"gestureReleaseVelocityScale">;
-	gestureResponseDistance: OptionalScreenOption<"gestureResponseDistance">;
-	gestureActivationArea: RequiredScreenOption<"gestureActivationArea">;
 	gestureSnapLocked: RequiredScreenOption<"gestureSnapLocked">;
+	sheetSnapBehavior: RequiredScreenOption<"sheetSnapBehavior">;
 	sheetScrollGestureBehavior: RequiredScreenOption<"sheetScrollGestureBehavior">;
 	backdropBehavior: OptionalScreenOption<"backdropBehavior">;
 	transitionSpec: OptionalScreenOption<"transitionSpec">;

package/src/providers/screen/screen-composer.tsx

@@ -7,21 +7,28 @@ import { ScreenGestureProvider } from "./gestures";
 import { ScreenOptionsProvider } from "./options";
 import { ScreenSlotProvider } from "./styles";
 
-type Props<TDescriptor extends BaseDescriptor> = {
-	previous?: TDescriptor;
-	current: TDescriptor;
-	next?: TDescriptor;
+type Props = {
+	previous?: BaseDescriptor;
+	current?: BaseDescriptor;
+	next?: BaseDescriptor;
+	routeKey?: string;
 	children: React.ReactNode;
 };
 
-export function ScreenComposer<TDescriptor extends BaseDescriptor>({
+export function ScreenComposer({
 	previous,
 	current,
 	next,
+	routeKey,
 	children,
-}: Props<TDescriptor>) {
+}: Props) {
 	return (
-		<DescriptorsProvider previous={previous} current={current} next={next}>
+		<DescriptorsProvider
+			previous={previous}
+			current={current}
+			next={next}
+			routeKey={routeKey}
+		>
 			<ScreenLifecycle>
 				<ScreenOptionsProvider>
 					<ScreenGestureProvider>

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

@@ -22,6 +22,7 @@ const IDENTITY_TRANSFORM = [
  * please add its identity value here in a PR.
  */
 export const STYLE_RESET_VALUES: Record<string, unknown> = {
+	filter: [{ blur: 0.01 }],
 	transform: IDENTITY_TRANSFORM,
 	translateX: 0,
 	translateY: 0,
@@ -64,19 +65,22 @@ export const PROP_RESET_VALUES: Record<string, unknown> = {
 	pointerEvents: "auto",
 };
 
-const LOCAL_ONLY_STYLE_SLOT_IDS = {
+const RESERVED_STYLE_SLOT_IDS = {
+	overlay: true,
 	content: true,
-	backdrop: true,
 	surface: true,
+	backdrop: true,
 	[NAVIGATION_MASK_ELEMENT_STYLE_ID]: true,
 	[NAVIGATION_MASK_CONTAINER_STYLE_ID]: true,
 } as const;
 
-export const shouldSlotInherit = (slotId: string) => {
+export const isReservedStyleSlot = (slotId: string) => {
 	"worklet";
 	// biome-ignore lint/suspicious/noPrototypeBuiltins: <proj issue>
-	return !Object.prototype.hasOwnProperty.call(
-		LOCAL_ONLY_STYLE_SLOT_IDS,
-		slotId,
-	);
+	return Object.prototype.hasOwnProperty.call(RESERVED_STYLE_SLOT_IDS, slotId);
+};
+
+export const shouldSlotInherit = (slotId: string) => {
+	"worklet";
+	return !isReservedStyleSlot(slotId);
 };