react-native-screen-transitions 4.1.0-alpha.0 → 4.1.0-beta.1

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

@@ -1,34 +1,26 @@
-import type React from "react";
-import { ScreenContainer } from "../../components/screen-container";
-import { ScreenLifecycle } from "../../components/screen-lifecycle";
-import { ScreenAnimationProvider } from "./animation";
-import { DescriptorsProvider } from "./descriptors";
-import { ScreenGestureProvider } from "./gestures";
-import { ScreenOptionsProvider } from "./options";
-import { ScreenSlotProvider } from "./styles";
-import { ScreenTopologyProvider } from "./topology";
+import { ScreenContainer } from "../../components/screen/container";
+import { BuilderProvider, type BuilderProviderProps } from "./builder";
+import { MotionProvider } from "./motion";
+import { OrchestratorProvider } from "./orchestrator";
 
-type Props = {
-	routeKey: string;
-	children: React.ReactNode;
+export type ScreenComposerProps = BuilderProviderProps & {
+	onDismissRequest?: () => void;
 };
 
-export function ScreenComposer({ routeKey, children }: Props) {
+export function ScreenComposer({
+	children,
+	onDismissRequest,
+	...builderProps
+}: ScreenComposerProps) {
 	return (
-		<DescriptorsProvider routeKey={routeKey}>
-			<ScreenTopologyProvider>
-				<ScreenLifecycle>
-					<ScreenOptionsProvider>
-						<ScreenGestureProvider>
-							<ScreenAnimationProvider>
-								<ScreenSlotProvider>
-									<ScreenContainer>{children}</ScreenContainer>
-								</ScreenSlotProvider>
-							</ScreenAnimationProvider>
-						</ScreenGestureProvider>
-					</ScreenOptionsProvider>
-				</ScreenLifecycle>
-			</ScreenTopologyProvider>
-		</DescriptorsProvider>
+		<BuilderProvider {...builderProps}>
+			<MotionProvider onDismissRequest={onDismissRequest}>
+				<OrchestratorProvider>
+					<ScreenContainer onDismissRequest={onDismissRequest}>
+						{children}
+					</ScreenContainer>
+				</OrchestratorProvider>
+			</MotionProvider>
+		</BuilderProvider>
 	);
 }

package/src/providers/stack/blank-stack-state/blank-stack-controller.ts

@@ -117,6 +117,27 @@ export const createBlankStackController = (
 		emit();
 	};
 
+	const handleOpenRoute = ({ route }: { route: BaseStackRoute }) => {
+		const current = snapshot.state;
+		const openedIndex = current.routes.findIndex(
+			(candidate) => candidate.key === route.key,
+		);
+		const navigationKeys = new Set(
+			props.state.routes.map((candidate) => candidate.key),
+		);
+		if (!navigationKeys.has(route.key)) return;
+
+		// Retained replacements stay under the incoming screen until it opens.
+		for (const candidate of current.routes.slice(0, Math.max(openedIndex, 0))) {
+			if (
+				!navigationKeys.has(candidate.key) &&
+				!closingRouteKeys.has(candidate.key)
+			) {
+				handleCloseRoute({ route: candidate });
+			}
+		}
+	};
+
 	const requestDismiss = ({ route }: { route: BaseStackRoute }): boolean => {
 		const current = snapshot.state;
 		const routeIndex = current.routes.findIndex(
@@ -150,6 +171,7 @@ export const createBlankStackController = (
 		getSnapshot,
 		update,
 		handleCloseRoute,
+		handleOpenRoute,
 		requestDismiss,
 	};
 };

package/src/providers/stack/blank-stack-state/helpers/build-blank-stack-state.ts

@@ -8,7 +8,6 @@ import type {
 	BaseStackScene,
 	StackSceneActivity,
 } from "../../../../types/stack.types";
-import { isOverlayVisible } from "../../../../utils/overlay/visibility";
 import { resolveSceneNeighbors } from "./navigation/resolve-scene-neighbors";
 import {
 	areDescriptorSourcesEquivalent,
@@ -189,7 +188,6 @@ const buildBaseScenes = ({
 			childStateUnchanged &&
 			previousDescriptor.route === descriptorRoute &&
 			previousDescriptor.navigation === props.navigation &&
-			previousDescriptor.render === sourceDescriptor.render &&
 			previousDescriptor.options === sourceDescriptor.options
 				? previousDescriptor
 				: ({
@@ -205,7 +203,9 @@ const buildBaseScenes = ({
 		blankStackDescriptors[route.key] = descriptor;
 
 		if (!shouldShowFloatOverlay) {
-			shouldShowFloatOverlay = isOverlayVisible(sourceDescriptor?.options);
+			const options = sourceDescriptor?.options;
+			shouldShowFloatOverlay =
+				Boolean(options?.overlay) && options?.overlayShown !== false;
 		}
 
 		scenes.push({

package/src/providers/stack/blank-stack-state/helpers/state-equality.ts

@@ -132,12 +132,9 @@ export const areDescriptorSourcesEquivalent = (
 	previous: BlankStackDescriptorSource,
 	next: BlankStackDescriptorSource,
 ): boolean => {
-	return (
-		previous.render === next.render &&
-		areRecordsShallowEqual(
-			previous.options as unknown as Record<string, unknown>,
-			next.options as unknown as Record<string, unknown>,
-		)
+	return areRecordsShallowEqual(
+		previous.options as unknown as Record<string, unknown>,
+		next.options as unknown as Record<string, unknown>,
 	);
 };
 

package/src/providers/stack/blank-stack-state/helpers/types.ts

@@ -34,6 +34,7 @@ export type BlankStackController = {
 	subscribe: (listener: () => void) => () => void;
 	getSnapshot: () => BlankStackControllerSnapshot;
 	update: (props: BlankStackProviderProps) => void;
+	handleOpenRoute: (payload: { route: BaseStackRoute }) => void;
 	handleCloseRoute: (payload: { route: BaseStackRoute }) => void;
 	requestDismiss: (payload: { route: BaseStackRoute }) => boolean;
 };

package/src/providers/stack/blank-stack-state/index.ts

@@ -24,6 +24,7 @@ export const useBlankStackState = (props: BlankStackProviderProps) => {
 	return {
 		state: snapshot.state,
 		handleCloseRoute: controller.handleCloseRoute,
+		handleOpenRoute: controller.handleOpenRoute,
 		requestDismiss: controller.requestDismiss,
 	};
 };

package/src/providers/stack/blank-stack.provider.tsx

@@ -27,14 +27,16 @@ const {
 	StoreProvider: BlankStackStoreProvider,
 	BlankStackProvider,
 	useBlankStackStore,
+	useOptionalBlankStackStore,
 } = createProvider("BlankStack")<
 	InternalBlankStackProviderProps,
 	BlankStackStoreValue
 >(({ state: stackState, children, ...props }) => {
-	const { state, handleCloseRoute, requestDismiss } = useBlankStackState({
-		...props,
-		state: stackState,
-	});
+	const { state, handleCloseRoute, handleOpenRoute, requestDismiss } =
+		useBlankStackState({
+			...props,
+			state: stackState,
+		});
 	const navigatorKey = stackState.key;
 	const focusedIndex = resolvePresentedIndex(
 		state.routes,
@@ -67,10 +69,16 @@ const {
 			requestDismiss,
 			shouldShowFloatOverlay: state.shouldShowFloatOverlay,
 			handleCloseRoute,
+			handleOpenRoute,
 		},
 		children,
 	};
 });
 
 export type { BlankStackProviderProps, BlankStackStoreValue };
-export { BlankStackProvider, BlankStackStoreProvider, useBlankStackStore };
+export {
+	BlankStackProvider,
+	BlankStackStoreProvider,
+	useBlankStackStore,
+	useOptionalBlankStackStore,
+};

package/src/types/animation.types.ts

@@ -303,7 +303,7 @@ export type TransitionSlotStyle = AnimatedViewStyle | TransitionSlotDefinition;
  *
  * These values are not style slots. They are derived per frame and consumed by
  * the transition runtime. Structural options that change the React tree, such
- * as `navigationMaskEnabled`, must be configured statically on the screen.
+ * as `gestureTracking`, must be configured statically on the screen.
  *
  * If `gestureSensitivity` is derived from the current gesture, prefer
  * `active.gesture.raw` so the sensitivity calculation does not feed back into
@@ -314,6 +314,30 @@ export type TransitionInterpolatorOptions = Omit<
 	"navigationMaskEnabled" | "gestureTracking"
 >;
 
+/** A clipping rectangle in the content layer's local coordinates. */
+export type TransitionClip = {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+} & Pick<
+	ViewStyle,
+	| "borderRadius"
+	| "borderCurve"
+	| "borderTopLeftRadius"
+	| "borderTopRightRadius"
+	| "borderBottomLeftRadius"
+	| "borderBottomRightRadius"
+	| "borderTopStartRadius"
+	| "borderTopEndRadius"
+	| "borderBottomStartRadius"
+	| "borderBottomEndRadius"
+	| "borderStartStartRadius"
+	| "borderStartEndRadius"
+	| "borderEndStartRadius"
+	| "borderEndEndRadius"
+>;
+
 /**
  * Internal normalized slot format.
  * Always uses the explicit `{ style, props }` shape (with Reanimated's full StyleProps).
@@ -329,6 +353,7 @@ export type NormalizedTransitionSlotStyle = {
  * All slots use the explicit `{ style, props }` shape.
  */
 export type NormalizedTransitionInterpolatedStyle = {
+	clip?: { style?: Partial<TransitionClip> };
 	/** Animated style and props for the main screen content view. */
 	content?: NormalizedTransitionSlotStyle;
 	/** Animated style and props for the backdrop layer between screens. */
@@ -345,6 +370,8 @@ export type NormalizedTransitionInterpolatedStyle = {
  * The return type of `screenStyleInterpolator`.
  */
 export type TransitionInterpolatedStyle = {
+	/** Visible rectangle. Omit to disable clipping. Content retains its layout size. */
+	clip?: TransitionClip;
 	/**
 	 * Runtime options for the current frame.
 	 *
@@ -363,12 +390,16 @@ export type TransitionInterpolatedStyle = {
 	content?: TransitionSlotStyle;
 	/** Animated style and props for the backdrop layer between screens. */
 	backdrop?: TransitionSlotStyle;
-	/** Animated style and props for the navigation mask container layer. */
+	/** @deprecated Ignored. Return `clip` geometry instead. */
 	[NAVIGATION_MASK_CONTAINER_STYLE_ID]?: TransitionSlotStyle;
-	/** Animated style and props for the navigation mask element layer. */
+	/** @deprecated Ignored. Return `clip` geometry instead. */
 	[NAVIGATION_MASK_ELEMENT_STYLE_ID]?: TransitionSlotStyle;
 	/** Custom styles/props by id for Transition.View components. */
-	[id: string]: TransitionSlotStyle | TransitionInterpolatorOptions | undefined;
+	[id: string]:
+		| TransitionSlotStyle
+		| TransitionInterpolatorOptions
+		| TransitionClip
+		| undefined;
 };
 
 /**

package/src/types/bounds.types.ts

@@ -87,7 +87,7 @@ export type BoundsNavigationZoomOptions = {
 	 *
 	 * Zoom interpolates from the measured source radius to this value while the
 	 * screen is animating. This controls the visible clipping result regardless
-	 * of whether a navigation mask is enabled.
+	 * of the clipping rectangle.
 	 *
 	 * @default 64
 	 */
@@ -120,13 +120,15 @@ export type BoundsNavigationZoomOptions = {
 
 export type BoundsNavigationZoomStyle = TransitionInterpolatedStyle & {
 	content?: TransitionSlotStyle;
+	/** @deprecated Ignored. Return `clip` geometry instead. */
 	[NAVIGATION_MASK_CONTAINER_STYLE_ID]?: TransitionSlotStyle;
+	/** @deprecated Ignored. Return `clip` geometry instead. */
 	[NAVIGATION_MASK_ELEMENT_STYLE_ID]?: TransitionSlotStyle;
 };
 
 export type BoundsNavigationRevealOptions = {
 	/**
-	 * Destination mask border radius.
+	 * Destination clip border radius.
 	 *
 	 * Reveal interpolates from the measured source border radius to this value.
 	 *
@@ -134,7 +136,7 @@ export type BoundsNavigationRevealOptions = {
 	 */
 	borderRadius?: number;
 	/**
-	 * Whether the reveal mask should use React Native's continuous border curve.
+	 * Whether the reveal clip should use React Native's continuous border curve.
 	 *
 	 * @default true
 	 */
@@ -142,7 +144,7 @@ export type BoundsNavigationRevealOptions = {
 	/**
 	 * Maximum dynamic gesture sensitivity applied by reveal.
 	 *
-	 * Reveal lowers gesture sensitivity as the drag gets deeper so the masked
+	 * Reveal lowers gesture sensitivity as the drag gets deeper so the clipped
 	 * container can keep its source-to-destination handoff stable. This value
 	 * controls the starting/highest sensitivity in that curve.
 	 *
@@ -189,17 +191,7 @@ export type BoundsNavigationRevealOptions = {
 	 * @default true
 	 */
 	disablePointerEventsTillElementTransition?: boolean;
-	/**
-	 * How reveal should resize the navigation mask element.
-	 *
-	 * `"auto"` uses the platform default. Android defaults to transform-based
-	 * resizing to avoid masked-size animation cost, while other platforms animate
-	 * width and height. Transform-based resizing can make large border radii look
-	 * less natural on Android; use `"size"` to force width/height animation when
-	 * radius quality is more important than that optimization.
-	 *
-	 * @default "auto"
-	 */
+	/** @deprecated Ignored. Reveal uses built-in clipping on every platform. */
 	maskSizingMode?: "auto" | "transform" | "size";
 };
 

package/src/types/index.ts

@@ -9,6 +9,7 @@ export type {
 	ScreenTransitionOptions,
 	ScreenTransitionState,
 	ScreenTransitionTarget,
+	TransitionClip,
 	TransitionInterpolatedStyle,
 	TransitionInterpolatorOptions,
 	TransitionSlotProps,

package/src/types/providers/blank-stack-provider.types.ts

@@ -32,5 +32,6 @@ export interface BlankStackStoreValue {
 	focusedIndex: number;
 	requestDismiss?: (payload: { route: BaseStackRoute }) => boolean;
 	shouldShowFloatOverlay: boolean;
+	handleOpenRoute?: (payload: { route: BaseStackRoute }) => void;
 	handleCloseRoute?: (payload: { route: BaseStackRoute }) => void;
 }

package/src/types/screen.types.ts

@@ -57,7 +57,7 @@ export type GestureTracking = "auto" | "never" | "always";
  * A single snap point value. Either a fraction of screen height (0–1) or
  * `'auto'` to snap to the intrinsic height of the screen content.
  */
-export type SnapPoint = number | "auto";
+export type SnapPoint = number | "auto" | (string & {});
 
 export type BackdropBehavior = "block" | "passthrough" | "dismiss" | "collapse";
 
@@ -228,14 +228,7 @@ export type ScreenTransitionConfig = {
 	 */
 	transitionSpec?: TransitionSpec;
 
-	/**
-	 * Pre-mounts the masked view wrapper so navigation bounds masking
-	 * (e.g. `bounds().navigation.zoom()`) is ready from the first frame.
-	 *
-	 * Requires `@react-native-masked-view/masked-view` to be installed.
-	 *
-	 * @default false
-	 */
+	/** @deprecated Ignored. Return `clip` from the interpolator to enable clipping. */
 	navigationMaskEnabled?: boolean;
 
 	/**

package/src/types/stack.types.ts

@@ -1,8 +1,6 @@
 import type { ScreenTransitionConfig } from "./screen.types";
 
-export type StackTransitionOptions = ScreenTransitionConfig & {
-	enableTransitions?: boolean;
-};
+export type StackTransitionOptions = ScreenTransitionConfig;
 
 /**
  * Minimal route shape for navigation utilities.

package/src/utils/animation/animate-to-progress.ts

@@ -1,9 +1,7 @@
 import type { SharedValue } from "react-native-reanimated";
 import { FALSE, TRUE } from "../../constants";
-import {
-	type AnimationStoreMap,
-	emitMotionStart,
-} from "../../stores/animation.store";
+import { emitMotionStart } from "../../providers/screen/motion/animation/emit-motion-start";
+import type { MotionAnimationValues } from "../../providers/screen/motion/types";
 import type { TransitionSpec } from "../../types/animation.types";
 import { animate, isSpringAnimationConfig } from "./animate";
 
@@ -16,7 +14,7 @@ interface AnimateToProgressProps {
 	 */
 	target: "open" | "close" | number;
 	spec?: TransitionSpec;
-	animations: AnimationStoreMap;
+	animations: MotionAnimationValues;
 	targetProgress: SharedValue<number>;
 	animationProgress: SharedValue<number>;
 	emitWillAnimate?: boolean;
@@ -27,7 +25,7 @@ interface AnimateToProgressProps {
 }
 
 const setTransitionLifecycleFlags = (
-	animations: AnimationStoreMap,
+	animations: MotionAnimationValues,
 	isClosing: boolean,
 	markEntering: boolean,
 ) => {

package/src/utils/bounds/navigation/reveal/build.ts

@@ -1,5 +1,4 @@
 import { interpolate } from "react-native-reanimated";
-import { NAVIGATION_MASK_ELEMENT_STYLE_ID } from "../../../../constants";
 import { createBoundsAccessorCore } from "../../helpers/create-bounds-accessor-core";
 import { getSourceBorderRadius } from "../helpers";
 import {
@@ -10,20 +9,19 @@ import {
 	CONTENT_ENTERING_OPACITY_RANGE,
 	CONTENT_SHADOW_OPACITY_OUTPUT,
 	DISMISS_SCALE_ORBIT_DEPTH,
-	DRAG_MASK_HEIGHT_COLLAPSE_END,
-	HORIZONTAL_DRAG_MASK_COLLAPSE_SCALE,
+	DRAG_CLIP_HEIGHT_COLLAPSE_END,
+	HORIZONTAL_DRAG_CLIP_COLLAPSE_SCALE,
 	IDENTITY_DRAG_SCALE_OUTPUT,
 	REVEAL_BACKGROUND_SCALE,
 	REVEAL_BORDER_RADIUS,
 	REVEAL_SHADOW_OFFSET,
-	REVEAL_USES_TRANSFORM_MASK,
 	UNFOCUSED_ELEMENT_OPACITY_OUTPUT,
 	ZERO_TO_ONE_RANGE,
 } from "./config";
 import {
 	interpolateClamped,
 	mixUnit,
-	resolveAspectRatioMaskHeight,
+	resolveAspectRatioClipHeight,
 	resolveDismissScaleHandoff,
 	resolveRevealContentBaseTransform,
 	resolveRevealDirectionalDragScale,
@@ -66,15 +64,10 @@ export function buildRevealStyles({
 		revealOptions?.velocityDepth ?? DISMISS_SCALE_ORBIT_DEPTH;
 	const disablePointerEventsTillElementTransition =
 		revealOptions?.disablePointerEventsTillElementTransition ?? true;
-	const maskSizingMode = revealOptions?.maskSizingMode ?? "auto";
 	const backgroundScale =
 		revealOptions?.backgroundScale ?? REVEAL_BACKGROUND_SCALE;
 	const shouldBackgroundScaleResetOnSettled =
 		revealOptions?.shouldBackgroundScaleResetOnSettled ?? true;
-	const usesTransformMask =
-		maskSizingMode === "auto"
-			? REVEAL_USES_TRANSFORM_MASK
-			: maskSizingMode === "transform";
 
 	const bounds = createBoundsAccessorCore({
 		getProps: () => props,
@@ -140,7 +133,7 @@ export function buildRevealStyles({
 			progress: transitionProgress,
 		});
 
-		const maskRaw = scopedBounds.values({
+		const clipRaw = scopedBounds.values({
 			scaleMode: "uniform",
 			method: "size",
 			space: "absolute",
@@ -148,21 +141,21 @@ export function buildRevealStyles({
 			progress: transitionProgress,
 		});
 
-		const maskBorderRadius = mixUnit(
+		const clipBorderRadius = mixUnit(
 			sourceBorderRadius,
 			borderRadius,
 			activeTransitionProgress,
 		);
-		const maskBorderCurve = borderContinuous
+		const clipBorderCurve = borderContinuous
 			? ("continuous" as const)
 			: undefined;
 
-		const maskSizeMultiplier = props.active.closing
+		const clipSizeMultiplier = props.active.closing
 			? mixUnit(0.9, 1, activeTransitionProgress)
 			: 1;
 
-		const maskWidth = Math.max(1, maskRaw.width * maskSizeMultiplier);
-		const maskHeight = Math.max(1, maskRaw.height * maskSizeMultiplier);
+		const clipWidth = Math.max(1, clipRaw.width * clipSizeMultiplier);
+		const clipHeight = Math.max(1, clipRaw.height * clipSizeMultiplier);
 
 		const contentBaseScale = contentRaw.scale;
 		const safeContentBaseScale = resolveSafeScale(contentBaseScale);
@@ -205,97 +198,72 @@ export function buildRevealStyles({
 			? 1 - activeTransitionProgress
 			: 0;
 
-		const maskHeightCollapseDrag =
+		const clipHeightCollapseDrag =
 			isHorizontalDismiss || isVerticalDismiss
 				? Math.max(
 						0,
 						isHorizontalDismiss
-							? liveHorizontalDismissDrag * HORIZONTAL_DRAG_MASK_COLLAPSE_SCALE
+							? liveHorizontalDismissDrag * HORIZONTAL_DRAG_CLIP_COLLAPSE_SCALE
 							: 0,
 						isVerticalDismiss ? liveVerticalDismissDrag : 0,
 						dismissProgressDrag,
 					)
 				: 0;
 
-		const maskAspectBounds = link.initialSource?.bounds ?? link.source.bounds;
-		const minMaskHeight = resolveAspectRatioMaskHeight({
-			maskWidth,
-			maskHeight,
-			targetWidth: maskAspectBounds.width,
-			targetHeight: maskAspectBounds.height,
+		const clipAspectBounds = link.initialSource?.bounds ?? link.source.bounds;
+		const minClipHeight = resolveAspectRatioClipHeight({
+			clipWidth,
+			clipHeight,
+			targetWidth: clipAspectBounds.width,
+			targetHeight: clipAspectBounds.height,
 		});
 
-		const renderedMaskHeight = interpolateClamped(
-			maskHeightCollapseDrag,
+		const renderedClipHeight = interpolateClamped(
+			clipHeightCollapseDrag,
 			0,
-			DRAG_MASK_HEIGHT_COLLAPSE_END,
-			maskHeight,
-			minMaskHeight,
+			DRAG_CLIP_HEIGHT_COLLAPSE_END,
+			clipHeight,
+			minClipHeight,
 		);
 
-		const maskCenterX = maskWidth / 2;
-		const maskCenterY = renderedMaskHeight / 2;
-		const maskCenteringOffsetX = (maskRaw.width - maskWidth) / 2;
-		const maskCenteringOffsetY = (maskRaw.height - maskHeight) / 2;
+		const clipCenteringOffsetX = (clipRaw.width - clipWidth) / 2;
+		const clipCenteringOffsetY = (clipRaw.height - clipHeight) / 2;
 		const verticalCollapseOffsetY =
 			initialGesture === "vertical-inverted"
-				? maskHeight - renderedMaskHeight
+				? clipHeight - renderedClipHeight
 				: 0;
 
 		const contentCenterX = screenLayout.width / 2;
 		const contentCenterY = screenLayout.height / 2;
 
-		// The mask lives inside the transformed content container. Compensate only
+		// The clip lives inside the transformed content container. Compensate only
 		// for the reveal's base content scale; drag scale should be inherited from
 		// the same parent transform as the screen content.
-		const compensatedMaskTranslateX =
-			(maskRaw.translateX -
+		const compensatedClipTranslateX =
+			(clipRaw.translateX -
 				contentRaw.translateX +
-				maskCenteringOffsetX +
-				(1 - contentBaseScale) * (maskCenterX - contentCenterX)) /
+				clipCenteringOffsetX -
+				(1 - contentBaseScale) * contentCenterX) /
 			safeContentBaseScale;
 
-		const compensatedMaskTranslateY =
-			(maskRaw.translateY -
+		const compensatedClipTranslateY =
+			(clipRaw.translateY -
 				contentRaw.translateY +
-				maskCenteringOffsetY +
-				verticalCollapseOffsetY +
-				(1 - contentBaseScale) * (maskCenterY - contentCenterY)) /
+				clipCenteringOffsetY +
+				verticalCollapseOffsetY -
+				(1 - contentBaseScale) * contentCenterY) /
 			safeContentBaseScale;
 
-		const compensatedMaskScale = 1 / safeContentBaseScale;
-		const maskBaseWidth = Math.max(1, screenLayout.width);
-		const maskBaseHeight = Math.max(1, screenLayout.height);
-		const maskScaleX = maskWidth / maskBaseWidth;
-		const maskScaleY = renderedMaskHeight / maskBaseHeight;
-		const transformMaskTranslateX =
-			compensatedMaskTranslateX + (maskWidth - maskBaseWidth) / 2;
-		const transformMaskTranslateY =
-			compensatedMaskTranslateY + (renderedMaskHeight - maskBaseHeight) / 2;
-		const maskElementStyle = usesTransformMask
-			? {
-					width: maskBaseWidth,
-					height: maskBaseHeight,
-					borderRadius: props.active.settled ? 0 : maskBorderRadius,
-					borderCurve: maskBorderCurve,
-					transform: [
-						{ translateX: transformMaskTranslateX },
-						{ translateY: transformMaskTranslateY },
-						{ scaleX: maskScaleX * compensatedMaskScale },
-						{ scaleY: maskScaleY * compensatedMaskScale },
-					],
-				}
-			: {
-					width: maskWidth,
-					height: renderedMaskHeight,
-					borderRadius: props.active.settled ? 0 : maskBorderRadius,
-					borderCurve: maskBorderCurve,
-					transform: [
-						{ translateX: compensatedMaskTranslateX },
-						{ translateY: compensatedMaskTranslateY },
-						{ scale: compensatedMaskScale },
-					],
-				};
+		const clip = {
+			x: compensatedClipTranslateX,
+			y: compensatedClipTranslateY,
+			width: clipWidth / safeContentBaseScale,
+			height: renderedClipHeight / safeContentBaseScale,
+			borderRadius: props.active.settled
+				? 0
+				: clipBorderRadius / safeContentBaseScale,
+			borderCurve: clipBorderCurve,
+		};
 
 		const elementOffsetX = initialDestinationTarget
 			? initialDestinationTarget.pageX - link.destination.bounds.pageX
@@ -364,9 +332,7 @@ export function buildRevealStyles({
 							),
 				},
 			},
-			[NAVIGATION_MASK_ELEMENT_STYLE_ID]: {
-				style: maskElementStyle,
-			},
+			clip,
 			[link.id]: {
 				style: {
 					transform: [{ translateX: elementTX }, { translateY: elementY }],

package/src/utils/bounds/navigation/reveal/config.ts

@@ -6,13 +6,11 @@ export const REVEAL_BORDER_RADIUS = Platform.select({
 	default: 36,
 });
 
-export const REVEAL_USES_TRANSFORM_MASK = Platform.OS === "android";
-
 export const DRAG_DIRECTIONAL_SCALE_MIN = 0.25;
 export const DRAG_DIRECTIONAL_SCALE_MAX = 1.06;
 export const DRAG_DIRECTIONAL_SCALE_EXPONENT = 2;
-export const DRAG_MASK_HEIGHT_COLLAPSE_END = 0.7;
-export const HORIZONTAL_DRAG_MASK_COLLAPSE_SCALE = 0.5;
+export const DRAG_CLIP_HEIGHT_COLLAPSE_END = 0.7;
+export const HORIZONTAL_DRAG_CLIP_COLLAPSE_SCALE = 0.5;
 export const DISMISS_SCALE_ORBIT_DEPTH = 0.5;
 export const CLOSE_SOURCE_HANDOFF_PROGRESS = 0.25;
 export const REVEAL_BACKGROUND_SCALE = 0.9375;