react-native-screen-transitions 4.0.0-alpha.8 → 4.0.0-alpha.9

package/src/components/boundary/create-boundary-component.tsx

@@ -10,7 +10,10 @@ import {
 	BOUNDARY_TARGET_ACTIVE_PROP,
 	BoundaryTarget,
 } from "./components/boundary-target";
-import { BoundaryContentPortalHost } from "./portal/components/boundary-content-portal";
+import {
+	BoundaryContentPortal,
+	BoundaryContentPortalHost,
+} from "./portal/components/boundary-content-portal";
 import { BoundaryPortal } from "./portal/components/boundary-portal";
 import { BoundaryRootProvider } from "./providers/boundary-root.provider";
 import type { BoundaryComponentProps } from "./types";
@@ -91,7 +94,12 @@ export function createBoundaryComponent<P extends object>(
 								enabled={root.shouldRenderHandoffHost}
 								screenKey={root.currentScreenKey}
 							>
-								{targetResolution.children}
+								<BoundaryContentPortal
+									boundaryId={root.boundTag.tag}
+									enabled={root.shouldRenderHandoffHost}
+								>
+									{targetResolution.children}
+								</BoundaryContentPortal>
 							</BoundaryContentPortalHost>
 						</AnimatedComponent>
 					</BoundaryPortal>

package/src/components/boundary/portal/teleport.ts

@@ -1,4 +1,4 @@
-import { type ComponentType, createElement, type ReactNode } from "react";
+import type { ComponentType, ReactNode } from "react";
 
 /**
  * `react-native-teleport` is an optional peer dependency. The require sits in a
@@ -9,33 +9,12 @@ import { type ComponentType, createElement, type ReactNode } from "react";
  * inline rendering; everything else keeps working.
  */
 let mod: any = null;
-let managerMod: any = null;
-let providerViewMod: any = null;
 try {
 	mod = require("react-native-teleport");
-	managerMod = require("react-native-teleport/lib/module/contexts/PortalManager");
-	providerViewMod = require("react-native-teleport/lib/module/views/PortalProvider");
 } catch {}
 
-const NativePortalProviderView: ComponentType<{ children: ReactNode }> | null =
-	providerViewMod?.default ?? null;
-const PortalManagerProvider: ComponentType<{ children: ReactNode }> | null =
-	managerMod?.PortalManagerProvider ?? null;
-
 const SafeNativePortalProvider: ComponentType<{ children: ReactNode }> | null =
-	PortalManagerProvider
-		? ({ children }: { children: ReactNode }) => {
-				const managedChildren = createElement(
-					PortalManagerProvider,
-					null,
-					children,
-				);
-
-				return NativePortalProviderView
-					? createElement(NativePortalProviderView, null, managedChildren)
-					: managedChildren;
-			}
-		: null;
+	mod?.PortalProvider ?? null;
 
 export const isTeleportAvailable =
 	mod !== null && SafeNativePortalProvider !== null;

package/src/constants.ts

@@ -10,6 +10,7 @@ import type {
 	GestureTracking,
 	Layout,
 	SheetScrollGestureBehavior,
+	SheetSnapBehavior,
 } from "./types/screen.types";
 import type { BaseStackRoute } from "./types/stack.types";
 
@@ -167,6 +168,7 @@ export const DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE = 1;
 export const DEFAULT_GESTURE_DIRECTION = "horizontal";
 export const DEFAULT_GESTURE_TRACKING: GestureTracking = "auto";
 export const DEFAULT_GESTURE_SNAP_LOCKED = false;
+export const DEFAULT_SHEET_SNAP_BEHAVIOR: SheetSnapBehavior = "continuous";
 export const DEFAULT_GESTURE_ACTIVATION_AREA: ActivationArea = "screen";
 export const DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR: SheetScrollGestureBehavior =
 	"expand-and-collapse";

package/src/index.ts

@@ -81,6 +81,7 @@ export type {
 	ScrollGestureAxisState,
 	ScrollGestureState,
 	ScrollMetadataState,
+	SheetSnapBehavior,
 	TransitionInterpolatedStyle,
 	TransitionSlotProps,
 	TransitionSlotStyle,

package/src/providers/screen/animation/helpers/build-screen-transition-options.ts

@@ -17,6 +17,7 @@ export const buildScreenTransitionOptions = (
 		gestureSnapVelocityImpact: options.gestureSnapVelocityImpact,
 		gestureReleaseVelocityScale: options.gestureReleaseVelocityScale,
 		gestureSnapLocked: options.gestureSnapLocked,
+		sheetSnapBehavior: options.sheetSnapBehavior,
 		sheetScrollGestureBehavior:
 			options.sheetScrollGestureBehavior !== undefined
 				? resolveSheetScrollGestureBehavior(options)

package/src/providers/screen/animation/helpers/hydrate-transition-state/gesture-progress.ts

@@ -4,6 +4,7 @@ import type {
 	GestureDirectionOption,
 	GestureValues,
 } from "../../../../../types/gesture.types";
+import type { SheetSnapBehavior } from "../../../../../types/screen.types";
 import {
 	getPanActivationDirections,
 	getPanSnapAxisConfigForDirection,
@@ -12,6 +13,7 @@ import {
 	getSnapPinchDirectionConfig,
 	isResolvedPanGestureDirection,
 } from "../../../gestures/shared/directions";
+import { resolveStepSnapProgress } from "../../../gestures/shared/snap-points";
 import type { SnapBounds } from "./types";
 
 type PanProgressDelta = {
@@ -26,6 +28,8 @@ const resolvePanGestureAffectedProgress = (
 	gestureDirection: GestureDirectionOption,
 	hasSnapPoints: boolean,
 	snapBounds: SnapBounds | null,
+	snapPoints: number[],
+	sheetSnapBehavior: SheetSnapBehavior,
 ) => {
 	"worklet";
 
@@ -46,6 +50,13 @@ const resolvePanGestureAffectedProgress = (
 		const axisValue =
 			activeAxis.axis === "horizontal" ? progressDelta.x : progressDelta.y;
 		const signedProgressDelta = activeAxis.config.progressSign * axisValue;
+		if (sheetSnapBehavior === "step") {
+			return resolveStepSnapProgress({
+				baseline: transitionProgress,
+				normalizedDelta: signedProgressDelta,
+				snapPoints,
+			});
+		}
 
 		return clamp(
 			transitionProgress + signedProgressDelta,
@@ -85,6 +96,8 @@ const resolvePinchGestureAffectedProgress = (
 	gestureDirection: GestureDirectionOption,
 	hasSnapPoints: boolean,
 	snapBounds: SnapBounds | null,
+	snapPoints: number[],
+	sheetSnapBehavior: SheetSnapBehavior,
 ) => {
 	"worklet";
 	const pinchDirection =
@@ -108,6 +121,13 @@ const resolvePinchGestureAffectedProgress = (
 			snapDirections.collapse === pinchDirection
 				? -Math.abs(gesture.normScale)
 				: Math.abs(gesture.normScale);
+		if (sheetSnapBehavior === "step") {
+			return resolveStepSnapProgress({
+				baseline: transitionProgress,
+				normalizedDelta: progressDelta,
+				snapPoints,
+			});
+		}
 
 		return clamp(
 			transitionProgress + progressDelta,
@@ -134,6 +154,8 @@ export const resolveGestureAffectedProgress = (
 	panProgressDelta: PanProgressDelta,
 	gestureDirection: GestureDirectionOption | undefined,
 	snapBounds: SnapBounds | null,
+	snapPoints: number[] = [],
+	sheetSnapBehavior: SheetSnapBehavior = "continuous",
 ) => {
 	"worklet";
 	const resolvedGestureDirection =
@@ -152,6 +174,8 @@ export const resolveGestureAffectedProgress = (
 			resolvedGestureDirection,
 			hasSnapPoints,
 			snapBounds,
+			snapPoints,
+			sheetSnapBehavior,
 		);
 	}
 
@@ -162,5 +186,7 @@ export const resolveGestureAffectedProgress = (
 		resolvedGestureDirection,
 		hasSnapPoints,
 		snapBounds,
+		snapPoints,
+		sheetSnapBehavior,
 	);
 };

package/src/providers/screen/animation/helpers/hydrate-transition-state/index.ts

@@ -35,6 +35,8 @@ const mergeTransitionOptions = (
 		effective.gestureReleaseVelocityScale ?? base.gestureReleaseVelocityScale;
 	slot.gestureSnapLocked =
 		effective.gestureSnapLocked ?? base.gestureSnapLocked;
+	slot.sheetSnapBehavior =
+		effective.sheetSnapBehavior ?? base.sheetSnapBehavior;
 	slot.sheetScrollGestureBehavior =
 		effective.sheetScrollGestureBehavior ?? base.sheetScrollGestureBehavior;
 	slot.backdropBehavior = effective.backdropBehavior ?? base.backdropBehavior;
@@ -56,6 +58,22 @@ export const hydrateTransitionState = (
 		s.optionsSlot,
 	);
 	const canDismiss = options.gestureEnabled !== false;
+	const resolvedSnapPoints = [...s.sortedNumericSnapPoints];
+	const resolvedAutoSnapPoint = s.hasAutoSnapPoint
+		? s.resolvedAutoSnapPoint.get()
+		: null;
+	if (resolvedAutoSnapPoint !== null) {
+		resolvedSnapPoints.push(resolvedAutoSnapPoint);
+	}
+	if (canDismiss) {
+		resolvedSnapPoints.push(0);
+	}
+	resolvedSnapPoints.sort((a, b) => a - b);
+	for (let index = resolvedSnapPoints.length - 1; index > 0; index--) {
+		if (resolvedSnapPoints[index] === resolvedSnapPoints[index - 1]) {
+			resolvedSnapPoints.splice(index, 1);
+		}
+	}
 	out.transitionProgress = transitionProgress;
 	out.willAnimate = s.willAnimate.get();
 	out.closing = s.closing.get();
@@ -159,6 +177,8 @@ export const hydrateTransitionState = (
 			s.hasAutoSnapPoint ? s.resolvedAutoSnapPoint.get() : null,
 			canDismiss,
 		),
+		resolvedSnapPoints,
+		options.sheetSnapBehavior,
 	);
 
 	if (s.visualProgress.get() !== out.progress) {

package/src/providers/screen/animation/helpers/selected-interpolator-options.ts

@@ -65,6 +65,7 @@ const areInterpolatorOptionsEqual = (
 		left.gestureSnapVelocityImpact === right.gestureSnapVelocityImpact &&
 		left.gestureReleaseVelocityScale === right.gestureReleaseVelocityScale &&
 		left.gestureSnapLocked === right.gestureSnapLocked &&
+		left.sheetSnapBehavior === right.sheetSnapBehavior &&
 		left.sheetScrollGestureBehavior === right.sheetScrollGestureBehavior &&
 		left.backdropBehavior === right.backdropBehavior
 	);

package/src/providers/screen/gestures/pan/behavior/pan-release.ts

@@ -13,8 +13,12 @@ import {
 	resolveGestureSnapTransitionSpec,
 } from "../../shared/release";
 import {
+	getStepSnapProgressVelocityScale,
 	primeRuntimeSnapPoint,
 	resolveRuntimeGestureSnapPoints,
+	resolveRuntimeGestureSnapTargets,
+	resolveStepSnapProgress,
+	resolveStepSnapTargets,
 } from "../../shared/snap-points";
 import { determineDismissal, determineSnapTarget } from "../../shared/targets";
 import type {
@@ -80,6 +84,8 @@ const getPanSnapReleaseProgress = ({
 	activeAxis,
 	minSnapPoint,
 	maxSnapPoint,
+	snapPoints,
+	sheetSnapBehavior,
 }: {
 	runtime: PanGestureRuntime;
 	event: PanGestureEvent;
@@ -87,6 +93,8 @@ const getPanSnapReleaseProgress = ({
 	activeAxis: NonNullable<ReturnType<typeof resolveActivePanSnapAxis>>;
 	minSnapPoint: number;
 	maxSnapPoint: number;
+	snapPoints: number[];
+	sheetSnapBehavior: PanGestureRuntime["policy"]["sheetSnapBehavior"];
 }) => {
 	"worklet";
 	const isHorizontal = activeAxis.axis === "horizontal";
@@ -95,9 +103,17 @@ const getPanSnapReleaseProgress = ({
 		: event.translationY;
 	const axisDimension = isHorizontal ? dimensions.width : dimensions.height;
 	const axisProgress = axisTranslation / Math.max(1, axisDimension);
+	const signedProgressDelta = activeAxis.config.progressSign * axisProgress;
+	if (sheetSnapBehavior === "step") {
+		return resolveStepSnapProgress({
+			baseline: runtime.stores.gestures.internal.progressBaseline.get(),
+			normalizedDelta: signedProgressDelta,
+			snapPoints,
+		});
+	}
 	const progress =
 		runtime.stores.gestures.internal.progressBaseline.get() +
-		activeAxis.config.progressSign * axisProgress;
+		signedProgressDelta;
 
 	return clamp(progress, minSnapPoint, maxSnapPoint);
 };
@@ -180,6 +196,24 @@ export const resolveSnapPanRelease = (
 	);
 	const { resolvedSnapPoints, resolvedMinSnapPoint, resolvedMaxSnapPoint } =
 		resolveRuntimeGestureSnapPoints(runtime);
+	const allSnapTargets = resolveRuntimeGestureSnapTargets(runtime);
+	const axisTranslation =
+		activeAxis.axis === "horizontal" ? event.translationX : event.translationY;
+	const progressDirection =
+		activeAxis.config.progressSign * axisTranslation || -snapVelocity;
+	const releaseSnapPoints =
+		policy.sheetSnapBehavior === "step"
+			? resolveStepSnapTargets({
+					baseline: runtime.stores.gestures.internal.progressBaseline.get(),
+					direction: progressDirection,
+					snapPoints: allSnapTargets,
+				})
+			: resolvedSnapPoints;
+	const canDismissToReleaseTarget =
+		participation.canDismiss &&
+		(policy.gestureSnapLocked ||
+			policy.sheetSnapBehavior === "continuous" ||
+			releaseSnapPoints.includes(0));
 	const currentProgress = getPanSnapReleaseProgress({
 		runtime,
 		event,
@@ -187,6 +221,8 @@ export const resolveSnapPanRelease = (
 		activeAxis,
 		minSnapPoint: resolvedMinSnapPoint,
 		maxSnapPoint: resolvedMaxSnapPoint,
+		snapPoints: allSnapTargets,
+		sheetSnapBehavior: policy.sheetSnapBehavior,
 	});
 	const result = determineSnapTarget({
 		currentProgress,
@@ -195,24 +231,27 @@ export const resolveSnapPanRelease = (
 					runtime.stores.gestures.internal.lockedSnapPoint.get() ??
 						resolvedMaxSnapPoint,
 				]
-			: resolvedSnapPoints,
+			: releaseSnapPoints,
 		velocity: snapVelocity,
 		dimension: axisDimension,
 		velocityFactor: policy.gestureSnapVelocityImpact,
-		canDismiss: participation.canDismiss,
+		canDismiss: canDismissToReleaseTarget,
 	});
 
 	const shouldDismiss = participation.canDismiss && result.shouldDismiss;
 	const target = shouldDismiss ? 0 : result.targetProgress;
+	const progressVelocityScale =
+		policy.sheetSnapBehavior === "step" && !policy.gestureSnapLocked
+			? getStepSnapProgressVelocityScale(releaseSnapPoints)
+			: 1;
 
 	return {
 		target,
 		shouldDismiss,
 		initialVelocity: getProgressVelocityTowardTarget({
-			handoffVelocity: getPanReleaseHandoffVelocity(
-				axisVelocity,
-				axisDimension,
-			),
+			handoffVelocity:
+				getPanReleaseHandoffVelocity(axisVelocity, axisDimension) *
+				progressVelocityScale,
 			target,
 			currentProgress,
 		}),

package/src/providers/screen/gestures/pinch/behavior/pinch-release.ts

@@ -10,8 +10,12 @@ import {
 	resolveGestureSnapTransitionSpec,
 } from "../../shared/release";
 import {
+	getStepSnapProgressVelocityScale,
 	primeRuntimeSnapPoint,
 	resolveRuntimeGestureSnapPoints,
+	resolveRuntimeGestureSnapTargets,
+	resolveStepSnapProgress,
+	resolveStepSnapTargets,
 } from "../../shared/snap-points";
 import { determineSnapTarget } from "../../shared/targets";
 import type {
@@ -56,11 +60,13 @@ const getPinchSnapReleaseProgress = ({
 	normalizedScale,
 	minSnapPoint,
 	maxSnapPoint,
+	snapPoints,
 }: {
 	runtime: PinchGestureRuntime;
 	normalizedScale: number;
 	minSnapPoint: number;
 	maxSnapPoint: number;
+	snapPoints: number[];
 }) => {
 	"worklet";
 	const pinchDirection = getPinchSnapDirection(normalizedScale);
@@ -74,6 +80,13 @@ const getPinchSnapReleaseProgress = ({
 		snapDirections.collapse === pinchDirection
 			? -Math.abs(normalizedScale)
 			: Math.abs(normalizedScale);
+	if (runtime.policy.sheetSnapBehavior === "step") {
+		return resolveStepSnapProgress({
+			baseline: runtime.stores.gestures.internal.progressBaseline.get(),
+			normalizedDelta: progressDelta,
+			snapPoints,
+		});
+	}
 
 	return clamp(
 		runtime.stores.gestures.internal.progressBaseline.get() + progressDelta,
@@ -141,11 +154,34 @@ export const resolveSnapPinchRelease = (
 
 	const { resolvedSnapPoints, resolvedMinSnapPoint, resolvedMaxSnapPoint } =
 		resolveRuntimeGestureSnapPoints(runtime);
+	const allSnapTargets = resolveRuntimeGestureSnapTargets(runtime);
+	const snapVelocity = getPinchSnapVelocity(event, runtime, normalizedScale);
+	const pinchDirection = getPinchSnapDirection(normalizedScale);
+	const progressDirection =
+		pinchDirection && policy.snapDirections
+			? policy.snapDirections.collapse === pinchDirection
+				? -1
+				: 1
+			: -snapVelocity;
+	const releaseSnapPoints =
+		policy.sheetSnapBehavior === "step"
+			? resolveStepSnapTargets({
+					baseline: runtime.stores.gestures.internal.progressBaseline.get(),
+					direction: progressDirection,
+					snapPoints: allSnapTargets,
+				})
+			: resolvedSnapPoints;
+	const canDismissToReleaseTarget =
+		participation.canDismiss &&
+		(policy.gestureSnapLocked ||
+			policy.sheetSnapBehavior === "continuous" ||
+			releaseSnapPoints.includes(0));
 	const currentProgress = getPinchSnapReleaseProgress({
 		runtime,
 		normalizedScale,
 		minSnapPoint: resolvedMinSnapPoint,
 		maxSnapPoint: resolvedMaxSnapPoint,
+		snapPoints: allSnapTargets,
 	});
 
 	const result = determineSnapTarget({
@@ -155,16 +191,21 @@ export const resolveSnapPinchRelease = (
 					runtime.stores.gestures.internal.lockedSnapPoint.get() ??
 						resolvedMaxSnapPoint,
 				]
-			: resolvedSnapPoints,
-		velocity: getPinchSnapVelocity(event, runtime, normalizedScale),
+			: releaseSnapPoints,
+		velocity: snapVelocity,
 		dimension: 1,
 		velocityFactor: policy.gestureSnapVelocityImpact,
-		canDismiss: participation.canDismiss,
+		canDismiss: canDismissToReleaseTarget,
 	});
 
 	const shouldDismiss = participation.canDismiss && result.shouldDismiss;
 	const target = shouldDismiss ? 0 : result.targetProgress;
-	const progressVelocity = getPinchReleaseHandoffVelocity(event.velocity);
+	const progressVelocityScale =
+		policy.sheetSnapBehavior === "step" && !policy.gestureSnapLocked
+			? getStepSnapProgressVelocityScale(releaseSnapPoints)
+			: 1;
+	const progressVelocity =
+		getPinchReleaseHandoffVelocity(event.velocity) * progressVelocityScale;
 	const handoffVelocity = getPinchReleaseHandoffVelocity(
 		event.velocity,
 		policy.gestureReleaseVelocityScale,

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

@@ -8,6 +8,7 @@ import {
 	DEFAULT_GESTURE_TRACKING,
 	DEFAULT_GESTURE_VELOCITY_IMPACT,
 	DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR,
+	DEFAULT_SHEET_SNAP_BEHAVIOR,
 } from "../../../../constants";
 import type {
 	GestureDirectionActivationArea,
@@ -19,6 +20,7 @@ import type {
 	GestureTracking,
 	ScreenTransitionConfig,
 	SheetScrollGestureBehavior,
+	SheetSnapBehavior,
 	SnapPoint,
 } from "../../../../types/screen.types";
 import { computeClaimedDirections } from "../ownership/compute-claimed-directions";
@@ -50,6 +52,7 @@ export type GesturePolicyOptions = {
 	gestureSnapLocked?: boolean;
 	gestureSnapVelocityImpact?: number;
 	gestureVelocityImpact?: number;
+	sheetSnapBehavior?: SheetSnapBehavior;
 	sheetScrollGestureBehavior?: SheetScrollGestureBehavior;
 	snapPoints?: SnapPoint[];
 	transitionSpec?: ScreenTransitionConfig["transitionSpec"];
@@ -152,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,

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/types.ts

@@ -114,6 +114,7 @@ export interface PanGesturePolicy {
 	gestureReleaseVelocityScale: number;
 	gestureActivationArea: ResolvedGestureActivationArea;
 	gestureSnapLocked: boolean;
+	sheetSnapBehavior: NonNullable<ScreenTransitionConfig["sheetSnapBehavior"]>;
 	sheetScrollGestureBehavior: NonNullable<
 		ScreenTransitionConfig["sheetScrollGestureBehavior"]
 	>;
@@ -129,6 +130,7 @@ export interface PinchGesturePolicy {
 	gestureSensitivity: NonNullable<ScreenTransitionConfig["gestureSensitivity"]>;
 	gestureSnapVelocityImpact: number;
 	gestureSnapLocked: boolean;
+	sheetSnapBehavior: NonNullable<ScreenTransitionConfig["sheetSnapBehavior"]>;
 	gestureReleaseVelocityScale: number;
 	transitionSpec: TransitionSpec | undefined;
 }

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

@@ -7,6 +7,7 @@ import {
 	DEFAULT_GESTURE_TRACKING,
 	DEFAULT_GESTURE_VELOCITY_IMPACT,
 	DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR,
+	DEFAULT_SHEET_SNAP_BEHAVIOR,
 } from "../../../constants";
 import type {
 	GestureDirection,
@@ -129,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">,
@@ -205,6 +214,7 @@ const areScreenOptionsEqual = (
 		left.gestureSnapVelocityImpact === right.gestureSnapVelocityImpact &&
 		left.gestureReleaseVelocityScale === right.gestureReleaseVelocityScale &&
 		left.gestureSnapLocked === right.gestureSnapLocked &&
+		left.sheetSnapBehavior === right.sheetSnapBehavior &&
 		left.sheetScrollGestureBehavior === right.sheetScrollGestureBehavior &&
 		left.backdropBehavior === right.backdropBehavior &&
 		left.transitionSpec === right.transitionSpec &&
@@ -249,6 +259,10 @@ export const resolveBaseScreenOptions = (
 			options.gestureSnapLocked,
 			DEFAULT_GESTURE_SNAP_LOCKED,
 		),
+		sheetSnapBehavior: resolveSheetSnapBehaviorOption(
+			options.sheetSnapBehavior,
+			DEFAULT_SHEET_SNAP_BEHAVIOR,
+		),
 		sheetScrollGestureBehavior: resolveSheetScrollGestureBehaviorOption(
 			resolveSheetScrollGestureBehavior(options),
 			DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR,
@@ -315,6 +329,10 @@ export const syncScreenOptionsOverrides = (
 			options?.gestureSnapLocked,
 			base.gestureSnapLocked,
 		),
+		sheetSnapBehavior: resolveSheetSnapBehaviorOption(
+			options?.sheetSnapBehavior,
+			base.sheetSnapBehavior,
+		),
 		sheetScrollGestureBehavior: resolveSheetScrollGestureBehaviorOption(
 			options?.sheetScrollGestureBehavior,
 			base.sheetScrollGestureBehavior,

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

@@ -18,6 +18,7 @@ export type ScreenOptionsSnapshot = {
 	gestureSnapVelocityImpact: RequiredScreenOption<"gestureSnapVelocityImpact">;
 	gestureReleaseVelocityScale: RequiredScreenOption<"gestureReleaseVelocityScale">;
 	gestureSnapLocked: RequiredScreenOption<"gestureSnapLocked">;
+	sheetSnapBehavior: RequiredScreenOption<"sheetSnapBehavior">;
 	sheetScrollGestureBehavior: RequiredScreenOption<"sheetScrollGestureBehavior">;
 	backdropBehavior: OptionalScreenOption<"backdropBehavior">;
 	transitionSpec: OptionalScreenOption<"transitionSpec">;

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

@@ -68,7 +68,6 @@ const RESERVED_STYLE_SLOT_IDS = {
 	overlay: true,
 	content: true,
 	backdrop: true,
-	surface: true,
 	[NAVIGATION_MASK_ELEMENT_STYLE_ID]: true,
 	[NAVIGATION_MASK_CONTAINER_STYLE_ID]: true,
 } as const;

package/src/providers/screen/styles/slot.provider.tsx

@@ -19,7 +19,6 @@ export type ScreenSlotName =
 	| "overlay"
 	| "content"
 	| "backdrop"
-	| "surface"
 	| typeof NAVIGATION_MASK_CONTAINER_STYLE_ID
 	| typeof NAVIGATION_MASK_ELEMENT_STYLE_ID;