react-native-screen-transitions 3.7.1 → 3.8.0-beta.0

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

@@ -1,6 +1,8 @@
 import type {
 	ActiveGesture,
 	GestureDirection,
+	GestureDirectionEntry,
+	GestureDirectionOption,
 	GestureDirections,
 	PanGestureDirection,
 	PinchGestureDirection,
@@ -13,7 +15,7 @@ import type {
 import type { Direction } from "../../../../types/ownership.types";
 
 interface GetPanActivationDirectionsProps {
-	gestureDirection: GestureDirection | GestureDirection[];
+	gestureDirection: GestureDirectionOption;
 	hasSnapPoints: boolean;
 }
 
@@ -43,16 +45,30 @@ export const isResolvedPanGestureDirection = (
 	);
 };
 
-export const getPanGestureDirections = (
-	gestureDirection: GestureDirection | GestureDirection[],
-): PanGestureDirection[] => {
+export const getGestureDirectionEntryGesture = (
+	entry: GestureDirectionEntry,
+): GestureDirection => {
+	"worklet";
+	return typeof entry === "string" ? entry : entry.gesture;
+};
+
+export const getGestureDirectionEntries = (
+	gestureDirection: GestureDirectionOption,
+): GestureDirectionEntry[] => {
 	"worklet";
-	const directions = Array.isArray(gestureDirection)
+	return Array.isArray(gestureDirection)
 		? gestureDirection
 		: [gestureDirection];
+};
+
+export const getPanGestureDirections = (
+	gestureDirection: GestureDirectionOption,
+): PanGestureDirection[] => {
+	"worklet";
 	const panDirections: PanGestureDirection[] = [];
 
-	for (const direction of directions) {
+	for (const entry of getGestureDirectionEntries(gestureDirection)) {
+		const direction = getGestureDirectionEntryGesture(entry);
 		if (isPanGestureDirection(direction)) {
 			panDirections.push(direction);
 		}
@@ -62,15 +78,13 @@ export const getPanGestureDirections = (
 };
 
 export const getPinchGestureDirections = (
-	gestureDirection: GestureDirection | GestureDirection[],
+	gestureDirection: GestureDirectionOption,
 ): PinchGestureDirection[] => {
 	"worklet";
-	const directions = Array.isArray(gestureDirection)
-		? gestureDirection
-		: [gestureDirection];
 	const pinchDirections: PinchGestureDirection[] = [];
 
-	for (const direction of directions) {
+	for (const entry of getGestureDirectionEntries(gestureDirection)) {
+		const direction = getGestureDirectionEntryGesture(entry);
 		if (isPinchGestureDirection(direction)) {
 			pinchDirections.push(direction);
 		}
@@ -126,7 +140,7 @@ const setSnapPanAxisConfig = (
 };
 
 export const getPanSnapAxisDirections = (
-	gestureDirection: GestureDirection | GestureDirection[],
+	gestureDirection: GestureDirectionOption,
 ): SnapPanDirectionConfig => {
 	"worklet";
 	const config: SnapPanDirectionConfig = {
@@ -148,7 +162,7 @@ export const getPanSnapAxisDirections = (
 };
 
 export const getSnapPinchDirectionConfig = (
-	gestureDirection: GestureDirection | GestureDirection[],
+	gestureDirection: GestureDirectionOption,
 ): SnapPinchDirectionConfig => {
 	"worklet";
 	const pinchDirection = getPinchGestureDirections(gestureDirection)[0];

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

@@ -12,8 +12,11 @@ import {
 } from "../../../../constants";
 import type {
 	GestureActivationArea,
-	GestureDirection,
+	GestureDirectionActivationArea,
+	GestureDirectionEntry,
+	GestureDirectionOption,
 	GestureProgressMode,
+	ResolvedGestureActivationArea,
 } from "../../../../types/gesture.types";
 import type {
 	GestureTracking,
@@ -32,6 +35,8 @@ import type {
 	ScreenGestureParticipation,
 } from "../types";
 import {
+	getGestureDirectionEntries,
+	getGestureDirectionEntryGesture,
 	getPanActivationDirections,
 	getPanGestureDirections,
 	getPanSnapAxisDirections,
@@ -43,7 +48,7 @@ import { validateSnapPoints } from "./snap-points";
 export type GesturePolicyOptions = {
 	expandViaScrollView?: boolean;
 	gestureActivationArea?: GestureActivationArea;
-	gestureDirection?: GestureDirection | GestureDirection[];
+	gestureDirection?: GestureDirectionOption;
 	gestureDrivesProgress?: boolean;
 	gestureEnabled?: boolean;
 	gestureProgressMode?: GestureProgressMode;
@@ -64,6 +69,92 @@ const resolveGestureDirection = (options: GesturePolicyOptions) => {
 	return options.gestureDirection ?? DEFAULT_GESTURE_DIRECTION;
 };
 
+const isStructuredGestureDirection = (entry: GestureDirectionEntry) => {
+	"worklet";
+	return typeof entry !== "string";
+};
+
+const getGestureDirectionActivationArea = (
+	entry: GestureDirectionEntry,
+): GestureDirectionActivationArea => {
+	"worklet";
+	return isStructuredGestureDirection(entry)
+		? (entry.area ?? DEFAULT_GESTURE_ACTIVATION_AREA)
+		: DEFAULT_GESTURE_ACTIVATION_AREA;
+};
+
+const resolveConfiguredGestureActivationArea = (
+	gestureDirection: GestureDirectionOption,
+	hasSnapPoints: boolean,
+): ResolvedGestureActivationArea | undefined => {
+	"worklet";
+	const entries = getGestureDirectionEntries(gestureDirection);
+	let hasStructuredEntry = false;
+
+	for (const entry of entries) {
+		if (isStructuredGestureDirection(entry)) {
+			hasStructuredEntry = true;
+			break;
+		}
+	}
+
+	if (!hasStructuredEntry) {
+		return undefined;
+	}
+
+	const sides = {
+		left: DEFAULT_GESTURE_ACTIVATION_AREA as GestureDirectionActivationArea,
+		right: DEFAULT_GESTURE_ACTIVATION_AREA as GestureDirectionActivationArea,
+		top: DEFAULT_GESTURE_ACTIVATION_AREA as GestureDirectionActivationArea,
+		bottom: DEFAULT_GESTURE_ACTIVATION_AREA as GestureDirectionActivationArea,
+	};
+
+	for (const entry of entries) {
+		const gesture = getGestureDirectionEntryGesture(entry);
+		const area = getGestureDirectionActivationArea(entry);
+
+		switch (gesture) {
+			case "horizontal":
+				sides.left = area;
+				if (hasSnapPoints) sides.right = area;
+				break;
+			case "horizontal-inverted":
+				sides.right = area;
+				if (hasSnapPoints) sides.left = area;
+				break;
+			case "vertical":
+				sides.top = area;
+				if (hasSnapPoints) sides.bottom = area;
+				break;
+			case "vertical-inverted":
+				sides.bottom = area;
+				if (hasSnapPoints) sides.top = area;
+				break;
+			case "bidirectional":
+				sides.left = area;
+				sides.right = area;
+				sides.top = area;
+				sides.bottom = area;
+				break;
+		}
+	}
+
+	return sides;
+};
+
+const resolveGestureActivationArea = (
+	options: GesturePolicyOptions,
+	gestureDirection: GestureDirectionOption,
+	hasSnapPoints: boolean,
+): ResolvedGestureActivationArea => {
+	"worklet";
+	return (
+		resolveConfiguredGestureActivationArea(gestureDirection, hasSnapPoints) ??
+		options.gestureActivationArea ??
+		DEFAULT_GESTURE_ACTIVATION_AREA
+	);
+};
+
 function resolveGestureProgressModePolicy(options: GesturePolicyOptions) {
 	"worklet";
 	return resolveGestureProgressMode({
@@ -196,8 +287,11 @@ export const resolvePanPolicy = (
 		...resolveCommonGesturePolicy(options),
 		gestureVelocityImpact:
 			options.gestureVelocityImpact ?? DEFAULT_GESTURE_VELOCITY_IMPACT,
-		gestureActivationArea:
-			options.gestureActivationArea ?? DEFAULT_GESTURE_ACTIVATION_AREA,
+		gestureActivationArea: resolveGestureActivationArea(
+			options,
+			gestureDirection,
+			hasSnapPoints,
+		),
 		sheetScrollGestureBehavior:
 			resolvePolicySheetScrollGestureBehavior(options),
 		gestureResponseDistance: options.gestureResponseDistance,
@@ -248,7 +342,7 @@ const resolveGestureParticipation = ({
 	});
 	const claimedDirections = computeClaimedDirections(
 		canTrackGesture,
-		options.gestureDirection,
+		resolveGestureDirection(options),
 		effectiveSnapPoints.hasSnapPoints,
 	);
 

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

@@ -2,25 +2,17 @@ import type { SharedValue } from "react-native-reanimated";
 import { FALSE } from "../../../../constants";
 import type { GestureStoreMap } from "../../../../stores/gesture.store";
 import type { AnimationConfig } from "../../../../types/animation.types";
-import { animate } from "../../../../utils/animation/animate";
+import {
+	animate,
+	isSpringAnimationConfig,
+	type SpringAnimationConfig,
+} from "../../../../utils/animation/animate";
 
-type ResetSpringSpec = AnimationConfig & { velocity?: number };
+type ResetSpringSpec = SpringAnimationConfig & { velocity?: number };
 
 const isResetSpringSpec = (spec?: AnimationConfig): spec is ResetSpringSpec => {
 	"worklet";
-	if (typeof spec !== "object") {
-		return false;
-	}
-
-	if ("duration" in spec) {
-		return false;
-	}
-
-	if ("easing" in spec) {
-		return false;
-	}
-
-	return true;
+	return isSpringAnimationConfig(spec);
 };
 
 export const getGestureResetSpec = (
@@ -50,9 +42,9 @@ export const animateResetValue = (
 ) => {
 	"worklet";
 	value.set(
-		animate(toValue, config, (finished) => {
+		animate(toValue, config, (state) => {
 			"worklet";
-			if (finished) {
+			if (state.finished) {
 				onFinished();
 			}
 		}),

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

@@ -14,18 +14,6 @@ import {
 	resolveRuntimeGestureParticipation,
 } from "./policy";
 
-const resolveRuntimeOptions = (
-	policy: GesturePolicy,
-	screenOptions: ScreenOptionsSnapshot,
-): GesturePolicyOptions => {
-	"worklet";
-
-	return {
-		...screenOptions,
-		transitionSpec: policy.transitionSpec,
-	};
-};
-
 type RuntimePolicyResolver<TPolicy extends GesturePolicy> = (
 	options: GesturePolicyOptions,
 	hasSnapPoints: boolean,
@@ -41,13 +29,12 @@ const resolveRuntime = <TPolicy extends GesturePolicy>(
 		participation: runtime.participation,
 		options: screenOptions,
 	});
-	const options = resolveRuntimeOptions(runtime.policy, screenOptions);
 	const hasSnapPoints = participation.effectiveSnapPoints.hasSnapPoints;
 
 	return {
 		...runtime,
 		participation,
-		policy: resolvePolicy(options, hasSnapPoints),
+		policy: resolvePolicy(screenOptions, hasSnapPoints),
 	};
 };
 

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

@@ -144,7 +144,7 @@ export const validateSnapPoints = ({
 		return createEmptySnapPoints();
 	}
 
-	const sortedSnaps = normalizedSnaps.slice().sort((a, b) => a - b);
+	const sortedSnaps = normalizedSnaps.sort((a, b) => a - b);
 
 	return {
 		hasSnapPoints: true,

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

@@ -4,6 +4,7 @@ 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";
@@ -14,12 +15,13 @@ import type {
 	TransitionSpec,
 } from "../../../types/animation.types";
 import type {
-	GestureActivationArea,
 	GestureDirections,
 	GestureProgressMode,
+	ResolvedGestureActivationArea,
 	ScrollGestureAxis,
 	ScrollGestureAxisState,
 	ScrollGestureState,
+	ScrollMetadataState,
 	SnapPanDirectionConfig,
 	SnapPinchDirectionConfig,
 } from "../../../types/gesture.types";
@@ -32,7 +34,8 @@ import type { EffectiveSnapPointsResult } from "./shared/snap-points";
 
 export type PanGesture = ReturnType<typeof Gesture.Pan>;
 export type PinchGesture = ReturnType<typeof Gesture.Pinch>;
-export type ComposedGesture = ReturnType<typeof Gesture.Race>;
+export type RotationGesture = ReturnType<typeof Gesture.Rotation>;
+export type ComposedGesture = ReturnType<typeof Gesture.Simultaneous>;
 
 export type PanGestureEvent =
 	| GestureUpdateEvent<PanGestureHandlerEventPayload>
@@ -42,11 +45,19 @@ export type PinchGestureEvent =
 	| GestureUpdateEvent<PinchGestureHandlerEventPayload>
 	| GestureStateChangeEvent<PinchGestureHandlerEventPayload>;
 
+export type RotationGestureEvent =
+	| GestureUpdateEvent<RotationGestureHandlerEventPayload>
+	| GestureStateChangeEvent<RotationGestureHandlerEventPayload>;
+
+/** Gesture that initiated the current simultaneous gesture composition. */
+export type GestureCompositionActivation = "pan" | "pinch" | null;
+
 export type {
 	GestureProgressMode,
 	ScrollGestureAxis,
 	ScrollGestureAxisState,
 	ScrollGestureState,
+	ScrollMetadataState,
 };
 
 export type DirectionClaim = {
@@ -73,6 +84,7 @@ export interface GestureContextType {
 	detectorGesture: ComposedGesture;
 	panGesture: PanGesture;
 	pinchGesture: PinchGesture;
+	rotationGesture: RotationGesture;
 	scrollState: SharedValue<ScrollGestureState | null>;
 	gestureContext: GestureContextType | null;
 	claimedDirections: ClaimedDirections;
@@ -107,7 +119,7 @@ export interface PanGesturePolicy {
 	gestureVelocityImpact: number;
 	gestureSnapVelocityImpact: number;
 	gestureReleaseVelocityScale: number;
-	gestureActivationArea: GestureActivationArea;
+	gestureActivationArea: ResolvedGestureActivationArea;
 	gestureSnapLocked: boolean;
 	sheetScrollGestureBehavior: NonNullable<
 		ScreenTransitionConfig["sheetScrollGestureBehavior"]
@@ -150,6 +162,8 @@ export type PanGestureRuntime = GestureRuntime<PanGesturePolicy>;
 
 export type PinchGestureRuntime = GestureRuntime<PinchGesturePolicy>;
 
+export type RotationGestureRuntime = GestureRuntime<PinchGesturePolicy>;
+
 export interface GestureDimensions {
 	width: number;
 	height: number;
@@ -216,3 +230,8 @@ export interface PinchBehavior {
 	onUpdate: (event: PinchGestureEvent) => void;
 	onEnd: (event: PinchGestureEvent) => void;
 }
+
+export interface RotationBehavior {
+	onStart: () => void;
+	onUpdate: (event: RotationGestureEvent) => void;
+}

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

@@ -14,7 +14,9 @@ import type {
 	ActivationArea,
 	GestureActivationArea,
 	GestureDirection,
-	ScreenTransitionOptions,
+	GestureDirectionActivationArea,
+	GestureDirectionEntry,
+	ScreenTransitionConfig,
 	TransitionInterpolatedStyle,
 } from "../../../types";
 import type { BackdropBehavior } from "../../../types/screen.types";
@@ -31,22 +33,6 @@ import type {
 	ScreenOptionsState,
 } from "./types";
 
-const cloneGestureDirection = (
-	direction: RequiredScreenOption<"gestureDirection">,
-) => {
-	"worklet";
-	return Array.isArray(direction) ? [...direction] : direction;
-};
-
-const cloneGestureActivationArea = (
-	activationArea: RequiredScreenOption<"gestureActivationArea">,
-) => {
-	"worklet";
-	return typeof activationArea === "object" && activationArea !== null
-		? { ...activationArea }
-		: activationArea;
-};
-
 const resolveBooleanOption = <T extends boolean | undefined>(
 	value: unknown,
 	fallback: T,
@@ -78,18 +64,68 @@ const isGestureDirection = (value: unknown): value is GestureDirection => {
 	);
 };
 
+const isGestureDirectionActivationArea = (
+	value: unknown,
+): value is GestureDirectionActivationArea => {
+	"worklet";
+	return (
+		value === "edge" ||
+		value === "screen" ||
+		(typeof value === "number" && Number.isFinite(value) && value >= 0)
+	);
+};
+
+const isGestureDirectionEntry = (
+	value: unknown,
+): value is GestureDirectionEntry => {
+	"worklet";
+	if (isGestureDirection(value)) {
+		return true;
+	}
+
+	if (typeof value !== "object" || value === null || Array.isArray(value)) {
+		return false;
+	}
+
+	const config = value as Record<string, unknown>;
+	return (
+		isGestureDirection(config.gesture) &&
+		(config.area === undefined || isGestureDirectionActivationArea(config.area))
+	);
+};
+
+const cloneGestureDirectionEntry = (
+	entry: GestureDirectionEntry,
+): GestureDirectionEntry => {
+	"worklet";
+	if (typeof entry === "string") {
+		return entry;
+	}
+
+	return entry.area === undefined
+		? { gesture: entry.gesture }
+		: { gesture: entry.gesture, area: entry.area };
+};
+
 const resolveGestureDirectionOption = (
 	value: unknown,
 	fallback: RequiredScreenOption<"gestureDirection">,
 ): RequiredScreenOption<"gestureDirection"> => {
 	"worklet";
-	if (isGestureDirection(value)) {
-		return value;
+	if (isGestureDirectionEntry(value)) {
+		return cloneGestureDirectionEntry(value);
 	}
-	if (Array.isArray(value) && value.every(isGestureDirection)) {
-		return [...value];
+	if (Array.isArray(value)) {
+		const entries: GestureDirectionEntry[] = [];
+		for (const entry of value) {
+			if (!isGestureDirectionEntry(entry)) {
+				return fallback;
+			}
+			entries.push(cloneGestureDirectionEntry(entry));
+		}
+		return entries;
 	}
-	return cloneGestureDirection(fallback);
+	return fallback;
 };
 
 const isActivationArea = (value: unknown): value is ActivationArea => {
@@ -114,7 +150,7 @@ const resolveGestureActivationAreaOption = (
 			(area.bottom === undefined || isActivationArea(area.bottom));
 		return isValid ? (area as GestureActivationArea) : fallback;
 	}
-	return cloneGestureActivationArea(fallback);
+	return fallback;
 };
 
 const resolveSheetScrollGestureBehaviorOption = (
@@ -193,17 +229,37 @@ const areGestureActivationAreasEqual = (
 	);
 };
 
+const areGestureDirectionEntriesEqual = (
+	left: GestureDirectionEntry,
+	right: GestureDirectionEntry,
+) => {
+	"worklet";
+	if (left === right) return true;
+
+	if (typeof left === "string" || typeof right === "string") {
+		return false;
+	}
+
+	return left.gesture === right.gesture && left.area === right.area;
+};
+
 const areGestureDirectionsEqual = (
 	left: RequiredScreenOption<"gestureDirection">,
 	right: RequiredScreenOption<"gestureDirection">,
 ) => {
 	"worklet";
-	if (left === right) return true;
+	if (
+		!Array.isArray(left) &&
+		!Array.isArray(right) &&
+		areGestureDirectionEntriesEqual(left, right)
+	) {
+		return true;
+	}
 	if (!Array.isArray(left) || !Array.isArray(right)) return false;
 	if (left.length !== right.length) return false;
 
 	for (let i = 0; i < left.length; i++) {
-		if (left[i] !== right[i]) {
+		if (!areGestureDirectionEntriesEqual(left[i], right[i])) {
 			return false;
 		}
 	}
@@ -235,12 +291,13 @@ const areScreenOptionsEqual = (
 		left.gestureSnapLocked === right.gestureSnapLocked &&
 		left.sheetScrollGestureBehavior === right.sheetScrollGestureBehavior &&
 		left.backdropBehavior === right.backdropBehavior &&
+		left.transitionSpec === right.transitionSpec &&
 		left.baseOptions === right.baseOptions
 	);
 };
 
 export const resolveBaseScreenOptions = (
-	options: ScreenTransitionOptions,
+	options: ScreenTransitionConfig,
 ): ScreenOptionsSnapshot => {
 	const gestureProgressMode = resolveGestureProgressModeOption(
 		options.gestureProgressMode,
@@ -301,6 +358,7 @@ export const resolveBaseScreenOptions = (
 			options.backdropBehavior,
 			undefined,
 		),
+		transitionSpec: options.transitionSpec,
 	};
 };
 
@@ -311,10 +369,6 @@ export const syncScreenOptionsBase = (
 	"worklet";
 	const next = {
 		...base,
-		gestureDirection: cloneGestureDirection(base.gestureDirection),
-		gestureActivationArea: cloneGestureActivationArea(
-			base.gestureActivationArea,
-		),
 		baseOptions: base,
 	};
 
@@ -386,6 +440,7 @@ export const syncScreenOptionsOverrides = (
 			options?.backdropBehavior,
 			base.backdropBehavior,
 		),
+		transitionSpec: base.transitionSpec,
 		baseOptions: base,
 	};
 

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

@@ -1,12 +1,12 @@
 import type { ReactNode } from "react";
 import type { SharedValue } from "react-native-reanimated";
-import type { ScreenTransitionOptions } from "../../../types";
+import type { ScreenTransitionConfig } from "../../../types";
 
 export type RuntimeOption<T> = SharedValue<T>;
-export type RequiredScreenOption<K extends keyof ScreenTransitionOptions> =
-	NonNullable<ScreenTransitionOptions[K]>;
-export type OptionalScreenOption<K extends keyof ScreenTransitionOptions> =
-	ScreenTransitionOptions[K];
+export type RequiredScreenOption<K extends keyof ScreenTransitionConfig> =
+	NonNullable<ScreenTransitionConfig[K]>;
+export type OptionalScreenOption<K extends keyof ScreenTransitionConfig> =
+	ScreenTransitionConfig[K];
 
 export type ScreenOptionsSnapshot = {
 	navigationMaskEnabled: OptionalScreenOption<"navigationMaskEnabled">;
@@ -24,6 +24,7 @@ export type ScreenOptionsSnapshot = {
 	gestureSnapLocked: RequiredScreenOption<"gestureSnapLocked">;
 	sheetScrollGestureBehavior: RequiredScreenOption<"sheetScrollGestureBehavior">;
 	backdropBehavior: OptionalScreenOption<"backdropBehavior">;
+	transitionSpec: OptionalScreenOption<"transitionSpec">;
 };
 
 export type ScreenOptionsState = ScreenOptionsSnapshot & {

package/src/shared/providers/screen/styles/components/{maybe-floating-container.tsx → floating-overlay-layer.tsx}

@@ -1,15 +1,15 @@
 import { memo } from "react";
 import { StyleSheet, View } from "react-native";
 
-interface MaybeFloatingContainerProps {
+interface FloatingOverlayLayerProps {
 	children: React.ReactNode;
-	isFloatingOverlay?: boolean;
+	enabled?: boolean;
 }
-export const MaybeFloatingContainer = memo(function MaybeFloatingContainer({
+export const FloatingOverlayLayer = memo(function FloatingOverlayLayer({
 	children,
-	isFloatingOverlay,
-}: MaybeFloatingContainerProps) {
-	if (!isFloatingOverlay) {
+	enabled,
+}: FloatingOverlayLayerProps) {
+	if (!enabled) {
 		return children;
 	}
 	return (

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

@@ -3,7 +3,7 @@ import { StyleSheet } from "react-native";
 import Animated, { type SharedValue } from "react-native-reanimated";
 import type { NormalizedTransitionInterpolatedStyle } from "../../../types/animation.types";
 import createProvider from "../../../utils/create-provider";
-import { MaybeFloatingContainer } from "./components/maybe-floating-container";
+import { FloatingOverlayLayer } from "./components/floating-overlay-layer";
 import { useInterpolatedStylesMap } from "./hooks/use-interpolated-style-maps";
 import { useMaybeBlockVisibility } from "./hooks/use-maybe-block-visibility";
 import { useResolvedStylesMap } from "./hooks/use-resolved-slot-style-map";
@@ -41,14 +41,14 @@ export const {
 			stylesMap,
 		},
 		children: (
-			<MaybeFloatingContainer isFloatingOverlay={isFloatingOverlay}>
+			<FloatingOverlayLayer enabled={isFloatingOverlay}>
 				<Animated.View
 					style={[styles.container, animatedStyle]}
 					animatedProps={animatedProps}
 				>
 					{children}
 				</Animated.View>
-			</MaybeFloatingContainer>
+			</FloatingOverlayLayer>
 		),
 	};
 });