react-native-screen-transitions 3.9.0-alpha.1 → 3.9.0-alpha.3

package/src/shared/providers/screen/styles/helpers/resolve-slot-styles/index.ts

@@ -35,6 +35,11 @@ const getForwardedSlot = (
 	return slot;
 };
 
+const hasDefinedBucketValue = (value: unknown) => {
+	"worklet";
+	return value !== undefined && value !== null;
+};
+
 const hasEitherResetPatch = (
 	hasStyleResetPatch: boolean,
 	hasPropResetPatch: boolean,
@@ -43,11 +48,6 @@ const hasEitherResetPatch = (
 	return hasStyleResetPatch || hasPropResetPatch;
 };
 
-const hasDefinedBucketValue = (value: unknown) => {
-	"worklet";
-	return value !== undefined && value !== null;
-};
-
 const hasResettableDisappearedKeys = (
 	previousKeys: Record<string, true> | undefined,
 	previousResetValues: Record<string, unknown> | undefined,
@@ -81,7 +81,6 @@ const getResolvedSlotOutput = ({
 }) => {
 	"worklet";
 	const state = getResolvedSlotState(slot);
-
 	const hasStyleResetPatch = hasResettableDisappearedKeys(
 		previousState?.styleKeys,
 		previousState?.styleResetValues,
@@ -108,6 +107,7 @@ const getResolvedSlotOutput = ({
 		resolvedSlot: materializeResolvedSlot({
 			baseStyle: state.baseStyle,
 			baseProps: state.baseProps,
+			boundsLocalTransform: slot?.boundsLocalTransform,
 			previousState,
 			styleKeys: state.styleKeys,
 			propKeys: state.propKeys,
@@ -165,6 +165,9 @@ const getMergedLocalSlot = (
 	"worklet";
 	let mergedStyle: Record<string, unknown> | undefined;
 	let mergedProps: Record<string, unknown> | undefined;
+	let boundsLocalTransform:
+		| NormalizedTransitionSlotStyle["boundsLocalTransform"]
+		| undefined;
 
 	for (let index = 0; index < context.localStylesMaps.length; index++) {
 		const slot = context.localStylesMaps[index]?.[slotId];
@@ -178,15 +181,19 @@ const getMergedLocalSlot = (
 			slot.style as Record<string, unknown> | undefined,
 		);
 		mergedProps = mergeBucket(mergedProps, slot.props);
+		if (slot.boundsLocalTransform?.length) {
+			boundsLocalTransform = slot.boundsLocalTransform;
+		}
 	}
 
-	if (!mergedStyle && !mergedProps) {
+	if (!mergedStyle && !mergedProps && !boundsLocalTransform) {
 		return undefined;
 	}
 
 	return {
 		style: mergedStyle,
 		props: mergedProps,
+		boundsLocalTransform,
 	};
 };
 
@@ -344,7 +351,11 @@ const areSlotsEqual = (
 
 	return (
 		areFlatObjectsEqual(left.style, right.style) &&
-		areFlatObjectsEqual(left.props, right.props)
+		areFlatObjectsEqual(left.props, right.props) &&
+		areTransformArraysEqual(
+			left.boundsLocalTransform,
+			right.boundsLocalTransform,
+		)
 	);
 };
 
@@ -459,10 +470,9 @@ const appendPreviousSlots = (context: ResolveSlotStylesContext) => {
 };
 
 /**
- * Resolves slot styles for the current screen pass and resets keys a slot
- * emitted previously but no longer returns. Reanimated does not reliably clear
- * animated values with undefined, so known keys and numeric values are reset to
- * concrete identity values.
+ * Resolves slot styles for the current screen pass and emits reset values for
+ * transition-owned keys that existed in the previous resolved map but no longer
+ * exist in the current one.
  */
 export const resolveSlotStyles = ({
 	localStylesMaps,

package/src/shared/providers/screen/styles/helpers/resolve-slot-styles/materialize-slot.ts

@@ -111,6 +111,7 @@ const materializeResolvedProps = ({
 export const materializeResolvedSlot = ({
 	baseStyle,
 	baseProps,
+	boundsLocalTransform,
 	previousState,
 	styleKeys,
 	propKeys,
@@ -121,6 +122,7 @@ export const materializeResolvedSlot = ({
 }: {
 	baseStyle: Record<string, unknown> | undefined;
 	baseProps: Record<string, unknown> | undefined;
+	boundsLocalTransform: NormalizedTransitionSlotStyle["boundsLocalTransform"];
 	previousState: ResettableStyleState | undefined;
 	styleKeys: Record<string, true> | undefined;
 	propKeys: Record<string, true> | undefined;
@@ -139,7 +141,6 @@ export const materializeResolvedSlot = ({
 		hasAnyStyleKeys,
 		hasStyleResetPatch,
 	});
-
 	const resolvedProps = materializeResolvedProps({
 		baseProps,
 		previousState,
@@ -150,6 +151,7 @@ export const materializeResolvedSlot = ({
 
 	resolvedSlot.style = resolvedStyle;
 	resolvedSlot.props = resolvedProps;
+	resolvedSlot.boundsLocalTransform = boundsLocalTransform;
 
 	if (!resolvedSlot.style && !resolvedSlot.props) {
 		return undefined;

package/src/shared/providers/screen/styles/helpers/resolve-slot-styles/slot-state.ts

@@ -2,11 +2,6 @@ import type { NormalizedTransitionSlotStyle } from "../../../../../types/animati
 import { getPropResetValue, getStyleResetValue } from "./reset-values";
 import type { ResettableStyleState } from "./types";
 
-const hasTrackedKey = (keys: Record<string, true> | undefined, key: string) => {
-	"worklet";
-	return keys !== undefined && keys[key] === true;
-};
-
 const isDefinedStyleValue = (value: unknown) => {
 	"worklet";
 	return value !== undefined && value !== null;
@@ -52,25 +47,6 @@ const collectDefinedKeys = ({
 	};
 };
 
-export const hasDisappearedKeys = (
-	previousKeys: Record<string, true> | undefined,
-	currentKeys: Record<string, true> | undefined,
-) => {
-	"worklet";
-
-	if (!previousKeys) {
-		return false;
-	}
-
-	for (const key in previousKeys) {
-		if (!hasTrackedKey(currentKeys, key)) {
-			return true;
-		}
-	}
-
-	return false;
-};
-
 const hasEitherKeySet = (
 	styleKeys: Record<string, true> | undefined,
 	propKeys: Record<string, true> | undefined,

package/src/shared/providers/screen/styles/helpers/visibility-gate.ts

@@ -34,12 +34,7 @@ export const resolveScreenVisibilityGate = ({
 	const isPendingOpen =
 		pendingLifecycleRequestKind === LifecycleTransitionRequestKind.Open;
 	const isOpening = isPendingOpen || !!entering;
-
-	// Keep the screen hidden until the first transformed opening frame exists.
-	// The lifecycle request is cleared before the RAF-scheduled progress
-	// animation starts, so `entering` carries the gate through that one-frame gap.
 	const isWaitingForOpenToStart = progress <= 0;
-
 	const shouldBlock =
 		(hasPendingLifecycleBlock || isWaitingForOpenToStart) && isOpening;
 
@@ -48,10 +43,3 @@ export const resolveScreenVisibilityGate = ({
 		shouldOpenGate: !shouldBlock && progress > 0,
 	};
 };
-
-export const shouldBlockScreenVisibility = (
-	state: ScreenVisibilityGateState,
-) => {
-	"worklet";
-	return resolveScreenVisibilityGate(state).shouldBlock;
-};

package/src/shared/providers/screen/styles/hooks/slot-resolvers.tsx

@@ -0,0 +1,111 @@
+import { useMemo } from "react";
+import { useAnimatedProps, useAnimatedStyle } from "react-native-reanimated";
+import { NO_PROPS, NO_STYLES } from "../../../../constants";
+import {
+	composeSlotStyleWithLocalTransform,
+	getLocalTransformForSlotComposition,
+} from "../helpers/compose-slot-style";
+import { useScreenSlots } from "../slot.provider";
+
+export const useSlotStyles = (slotId: string | undefined) => {
+	const { slotsMap } = useScreenSlots();
+
+	return useAnimatedStyle(() => {
+		const slot = slotId ? slotsMap.get()[slotId] : undefined;
+		const slotStyle = slot?.style ?? NO_STYLES;
+
+		return composeSlotStyleWithLocalTransform(
+			slotStyle,
+			undefined,
+			slot?.boundsLocalTransform,
+		);
+	});
+};
+
+export const useComposedSlotStyles = (
+	slotId: string | undefined,
+	style: unknown,
+) => {
+	const { slotsMap } = useScreenSlots();
+	const localTransform = useMemo(
+		() => getLocalTransformForSlotComposition(style),
+		[style],
+	);
+
+	return useAnimatedStyle(() => {
+		const slot = slotId ? slotsMap.get()[slotId] : undefined;
+		const slotStyle = slot?.style ?? NO_STYLES;
+
+		return composeSlotStyleWithLocalTransform(
+			slotStyle,
+			localTransform,
+			slot?.boundsLocalTransform,
+		);
+	});
+};
+
+/**
+ * Stacking-only slice (`zIndex`/`elevation`) of a slot's style. Returned
+ * separately so an owner can keep just its stacking context while a nested
+ * target takes the full associated style. Yields `NO_STYLES` when neither is set.
+ */
+export const useSlotStackingStyles = (slotId: string | undefined) => {
+	const { slotsMap } = useScreenSlots();
+
+	return useAnimatedStyle(() => {
+		const baseStyle = slotId ? slotsMap.get()[slotId]?.style : undefined;
+		const zIndex = baseStyle?.zIndex ?? 0;
+		const elevation = baseStyle?.elevation ?? 0;
+
+		if (zIndex === 0 && elevation === 0) {
+			return NO_STYLES;
+		}
+
+		return { zIndex, elevation };
+	});
+};
+
+export const useSlotLayoutStyles = (slotId: string | undefined) => {
+	const { slotsMap } = useScreenSlots();
+
+	return useAnimatedStyle(() => {
+		const baseStyle = slotId ? slotsMap.get()[slotId]?.style : undefined;
+		const width = baseStyle?.width;
+		const height = baseStyle?.height;
+		const minWidth = baseStyle?.minWidth;
+		const minHeight = baseStyle?.minHeight;
+		const maxWidth = baseStyle?.maxWidth;
+		const maxHeight = baseStyle?.maxHeight;
+		const aspectRatio = baseStyle?.aspectRatio;
+
+		if (
+			width === undefined &&
+			height === undefined &&
+			minWidth === undefined &&
+			minHeight === undefined &&
+			maxWidth === undefined &&
+			maxHeight === undefined &&
+			aspectRatio === undefined
+		) {
+			return NO_STYLES;
+		}
+
+		return {
+			width,
+			height,
+			minWidth,
+			minHeight,
+			maxWidth,
+			maxHeight,
+			aspectRatio,
+		};
+	});
+};
+
+export const useSlotProps = (slotId: string | undefined) => {
+	const { slotsMap } = useScreenSlots();
+
+	return useAnimatedProps(() => {
+		return (slotId ? slotsMap.get()[slotId]?.props : undefined) ?? NO_PROPS;
+	});
+};

package/src/shared/providers/screen/styles/hooks/use-interpolated-style-maps.tsx

@@ -1,6 +1,10 @@
 import { useDerivedValue, useSharedValue } from "react-native-reanimated";
 import { NO_STYLES } from "../../../../constants";
-import { SystemStore } from "../../../../stores/system.store";
+import { AnimationStore } from "../../../../stores/animation.store";
+import {
+	LifecycleTransitionRequestKind,
+	SystemStore,
+} from "../../../../stores/system.store";
 import type {
 	NormalizedTransitionInterpolatedStyle,
 	ScreenStyleInterpolator,
@@ -13,13 +17,13 @@ import { useBuildTransitionAccessor } from "../../animation/helpers/accessors/us
 import type { ScreenInterpolatorFrame } from "../../animation/helpers/pipeline";
 import { readScreenAnimationRevisions } from "../../animation/helpers/read-screen-animation-revisions";
 import { syncSelectedInterpolatorOptions } from "../../animation/helpers/selected-interpolator-options";
-import { useDescriptorDerivations } from "../../descriptors";
+import { useDescriptorsStore } from "../../descriptors";
 import {
 	syncScreenOptionsOverrides,
 	useScreenOptionsContext,
 } from "../../options";
 import { normalizeSlots } from "../helpers/normalize-slots";
-import { preserveAnimatedPropsOnly } from "../helpers/preserve-animated-props-only";
+import { isOpeningBeforeStart } from "../helpers/opening-phase";
 import type { LocalStyleLayers } from "../helpers/resolve-slot-styles";
 import { stripInterpolatorOptions } from "../helpers/strip-interpolator-options";
 
@@ -37,12 +41,10 @@ type RunInterpolatorParams = {
 	next: ScreenInterpolatorFrame["next"];
 	bounds: Parameters<ScreenStyleInterpolator>[0]["bounds"];
 	transition: Parameters<ScreenStyleInterpolator>[0]["transition"];
-	shouldDeferStyleBuckets: boolean;
 };
 
 const normalizeRawStyleMap = (
 	rawStyleMap: TransitionInterpolatedStyle | undefined,
-	shouldDeferStyleBuckets: boolean,
 ) => {
 	"worklet";
 
@@ -52,9 +54,7 @@ const normalizeRawStyleMap = (
 
 	const stylesMap = normalizeSlots(stripInterpolatorOptions(rawStyleMap));
 
-	return shouldDeferStyleBuckets
-		? preserveAnimatedPropsOnly(stylesMap)
-		: stylesMap;
+	return stylesMap;
 };
 
 const runInterpolator = ({
@@ -64,7 +64,6 @@ const runInterpolator = ({
 	next,
 	bounds,
 	transition,
-	shouldDeferStyleBuckets,
 }: RunInterpolatorParams): InterpolatorResult | undefined => {
 	"worklet";
 
@@ -86,7 +85,7 @@ const runInterpolator = ({
 
 		return {
 			rawStyleMap,
-			stylesMap: normalizeRawStyleMap(rawStyleMap, shouldDeferStyleBuckets),
+			stylesMap: normalizeRawStyleMap(rawStyleMap),
 		};
 	} catch (_) {
 		if (__DEV__) {
@@ -124,17 +123,15 @@ const appendLayer = (
  * normal interpolator selection once the gesture-driven close is no longer in
  * play.
  *
- * Visibility gating happens downstream while lifecycle start is blocked for
- * pending destination measurement. We still run the interpolator during that
- * hidden window so animated props and runtime options stay warm, but defer style
- * buckets so measurement sees the final untransformed layout.
- *
  * The result is ordered from lowest to highest priority. Resolution happens
  * downstream, where slot ids determine whether slots inherit from ancestors and
  * where higher owner layers override lower owner layers per key.
  */
 export const useInterpolatedStylesMap = () => {
-	const { currentScreenKey } = useDescriptorDerivations();
+	const currentScreenKey = useDescriptorsStore(
+		(s) => s.derivations.currentScreenKey,
+	);
+	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
 	const screenOptions = useScreenOptionsContext();
 	const {
 		screenInterpolatorProps,
@@ -147,14 +144,19 @@ export const useInterpolatedStylesMap = () => {
 	} = useScreenAnimationContext();
 	const boundsAccessor = useBuildBoundsAccessor();
 	const transition = useBuildTransitionAccessor();
-	const pendingLifecycleStartBlockCount = SystemStore.getValue(
-		currentScreenKey,
-		"pendingLifecycleStartBlockCount",
-	);
+	const nextInterpolatorReady = useSharedValue(0);
+
+	const activeScreenKey = nextScreenKey ?? currentScreenKey;
+	const {
+		entering: activeEntering,
+		transitionProgress: activeTransitionProgress,
+	} = AnimationStore.getBag(activeScreenKey);
+	const { pendingLifecycleRequestKind: activePendingLifecycleRequestKind } =
+		SystemStore.getBag(activeScreenKey);
 
 	const isGesturingDuringCloseAnimation = useSharedValue(false);
 
-	return useDerivedValue<LocalStyleLayers>(() => {
+	const localStylesMaps = useDerivedValue<LocalStyleLayers>(() => {
 		"worklet";
 		readScreenAnimationRevisions(
 			screenInterpolatorPropsRevision,
@@ -163,19 +165,6 @@ export const useInterpolatedStylesMap = () => {
 		);
 		const props = screenInterpolatorProps.get();
 
-		/**
-		 * There is a niche case where bounds can be attached to a view that's styles are out of viewport.
-		 * Due to our blocking mechanism and ensuring accurate measurement, this boundary measurement
-		 * will be blocked and the screen will never be visible. To mitigate this, we:
-		 *
-		 * - Defer the style buckets (props are fine), to ensure we get the correct position of the boundary
-		 *
-		 * Again this is very niche, and since we're not marketing ourselves as a proper shared element transition
-		 * package, we won't spend time finding a better solution for this.
-		 *
-		 */
-		const shouldDeferStyleBuckets = pendingLifecycleStartBlockCount.get() > 0;
-
 		const { current, next, progress } = props;
 		const isDragging = current.gesture.dragging;
 		const isNextClosing = !!next?.closing;
@@ -194,8 +183,26 @@ export const useInterpolatedStylesMap = () => {
 		const isInGestureMode =
 			!!isDragging || isGesturingDuringCloseAnimation.get();
 
-		const interpolatorOptionsOwner =
-			isInGestureMode || !nextInterpolator ? "current" : "next";
+		// The current screen keeps interpolator ownership until the next screen is
+		// genuinely live: never during a gesture-driven close, never before a next
+		// interpolator exists, and never in the next screen's pre-start window
+		// (entering, but no transformed frame yet). Only then does "next" take over.
+		const isPendingOpen =
+			activePendingLifecycleRequestKind.get() ===
+			LifecycleTransitionRequestKind.Open;
+		const activeOpening = isPendingOpen || !!activeEntering.get();
+		const currentOwnsInterpolator =
+			isInGestureMode ||
+			!nextInterpolator ||
+			isOpeningBeforeStart(
+				activeOpening ? 1 : 0,
+				activeTransitionProgress.get(),
+			);
+		nextInterpolatorReady.set(currentOwnsInterpolator ? 0 : 1);
+
+		const interpolatorOptionsOwner = currentOwnsInterpolator
+			? "current"
+			: "next";
 
 		let selectedProgress = progress;
 		let selectedNext = next;
@@ -212,7 +219,6 @@ export const useInterpolatedStylesMap = () => {
 			next: selectedNext,
 			bounds: boundsAccessor,
 			transition,
-			shouldDeferStyleBuckets,
 		});
 
 		if (interpolatorOptionsOwner === "current") {
@@ -237,7 +243,6 @@ export const useInterpolatedStylesMap = () => {
 			next: selectedNext,
 			bounds: boundsAccessor,
 			transition,
-			shouldDeferStyleBuckets,
 		});
 
 		syncSelectedInterpolatorOptions(
@@ -258,4 +263,9 @@ export const useInterpolatedStylesMap = () => {
 
 		return layers;
 	});
+
+	return {
+		localStylesMaps,
+		nextInterpolatorReady,
+	};
 };

package/src/shared/providers/screen/styles/hooks/use-maybe-block-visibility.tsx

@@ -16,22 +16,12 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 	const { currentScreenKey } = useDescriptorDerivations();
 	const { entering, transitionProgress } =
 		AnimationStore.getBag(currentScreenKey);
-
 	const { pendingLifecycleStartBlockCount, pendingLifecycleRequestKind } =
 		SystemStore.getBag(currentScreenKey);
 
 	const hasVisibilityGateOpened = useSharedValue(false);
 	const shouldBlockVisibility = useSharedValue(!isFloatingOverlay);
 
-	/**
-	 * Visibility has to start blocked before the first animated style pass.
-	 *
-	 * `useDerivedValue` can publish its computed value after `useAnimatedStyle`
-	 * has already read the initial one, which briefly exposes an unhydrated
-	 * screen. Keep the visible state in an eagerly initialized shared value, then
-	 * let the reaction open it once the visibility gate allows the first
-	 * transformed frame to render.
-	 */
 	useAnimatedReaction(
 		() => {
 			"worklet";
@@ -58,13 +48,6 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 
 	const animatedStyle = useAnimatedStyle(() => {
 		"worklet";
-		/**
-		 * Keep blocked screens physically offscreen. On physical devices,
-		 * opacity: 0 can break Liquid Glass sampling.
-		 *
-		 * See: https://github.com/expo/expo/issues/41024
-		 *
-		 */
 		const offset = getVisibilityBlockOffset(height);
 
 		return {
@@ -88,6 +71,5 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 	return {
 		animatedStyle,
 		animatedProps,
-		shouldBlockVisibility,
 	};
 };

package/src/shared/providers/screen/styles/hooks/use-resolved-slot-style-map.tsx

@@ -6,6 +6,7 @@ import {
 import { NO_PROPS, NO_STYLES } from "../../../../constants";
 import type { NormalizedTransitionInterpolatedStyle } from "../../../../types/animation.types";
 import {
+	areResettableStatesBySlotEqual,
 	type LocalStyleLayers,
 	type ResettableStyleStatesBySlot,
 	resolveSlotStyles,
@@ -26,7 +27,7 @@ export const useResolvedStylesMap = ({
 	const previousResolvedStylesMap =
 		useSharedValue<NormalizedTransitionInterpolatedStyle>(NO_STYLES);
 
-	return useDerivedValue(() => {
+	return useDerivedValue<NormalizedTransitionInterpolatedStyle>(() => {
 		"worklet";
 		const { resolvedStylesMap, nextPreviousStyleStatesBySlot } =
 			resolveSlotStyles({
@@ -35,12 +36,24 @@ export const useResolvedStylesMap = ({
 				previousStyleStatesBySlot: previousStyleStatesBySlot.get(),
 			});
 
-		previousStyleStatesBySlot.set(nextPreviousStyleStatesBySlot);
+		if (
+			!areResettableStatesBySlotEqual(
+				previousStyleStatesBySlot.get(),
+				nextPreviousStyleStatesBySlot,
+			)
+		) {
+			previousStyleStatesBySlot.set(nextPreviousStyleStatesBySlot);
+		}
+
+		const previousResolvedStyles = previousResolvedStylesMap.get();
 		const stableResolvedStylesMap = reuseEqualResolvedSlots({
 			resolvedStylesMap,
-			previousResolvedStylesMap: previousResolvedStylesMap.get(),
+			previousResolvedStylesMap: previousResolvedStyles,
 		});
-		previousResolvedStylesMap.set(stableResolvedStylesMap);
+
+		if (stableResolvedStylesMap !== previousResolvedStyles) {
+			previousResolvedStylesMap.set(stableResolvedStylesMap);
+		}
 
 		return stableResolvedStylesMap;
 	});

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

@@ -1,5 +1,14 @@
 export {
-	ScreenStylesContext,
-	ScreenStylesProvider,
-	useScreenStyles,
-} from "./styles.provider";
+	useComposedSlotStyles,
+	useSlotLayoutStyles,
+	useSlotProps,
+	useSlotStackingStyles,
+	useSlotStyles,
+} from "./hooks/slot-resolvers";
+
+export {
+	ScreenSlotContext,
+	type ScreenSlotName,
+	ScreenSlotProvider,
+	useScreenSlots,
+} from "./slot.provider";

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

@@ -0,0 +1,93 @@
+import { type ReactNode, useContext, useLayoutEffect, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import Animated, { type SharedValue } from "react-native-reanimated";
+import type {
+	NAVIGATION_MASK_CONTAINER_STYLE_ID,
+	NAVIGATION_MASK_ELEMENT_STYLE_ID,
+} from "../../../constants";
+import type { NormalizedTransitionInterpolatedStyle } from "../../../types/animation.types";
+import createProvider from "../../../utils/create-provider";
+import { useDescriptorsStore } from "../descriptors";
+import { FloatingOverlayLayer } from "./components/floating-overlay-layer";
+import type { LocalStyleLayers } from "./helpers/resolve-slot-styles";
+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";
+import {
+	registerScreenSlots,
+	unregisterScreenSlots,
+} from "./stores/slot-references.store";
+
+type Props = {
+	children: ReactNode;
+	isFloatingOverlay?: boolean;
+};
+
+export type ScreenSlotName =
+	| "content"
+	| "backdrop"
+	| "surface"
+	| typeof NAVIGATION_MASK_CONTAINER_STYLE_ID
+	| typeof NAVIGATION_MASK_ELEMENT_STYLE_ID;
+
+export type ScreenSlotContextValue = {
+	localStylesMaps: SharedValue<LocalStyleLayers>;
+	nextInterpolatorReady: SharedValue<number>;
+	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
+};
+
+export const {
+	ScreenSlotProvider,
+	ScreenSlotContext,
+	useScreenSlotContext: useScreenSlots,
+} = createProvider("ScreenSlot", {
+	guarded: true,
+})<Props, ScreenSlotContextValue>(({ children, isFloatingOverlay }) => {
+	const parentContext = useContext(ScreenSlotContext);
+	const currentScreenKey = useDescriptorsStore(
+		(s) => s.derivations.currentScreenKey,
+	);
+
+	const { localStylesMaps, nextInterpolatorReady } = useInterpolatedStylesMap();
+
+	const slotsMap = useResolvedStylesMap({
+		localStylesMaps,
+		ancestorStylesMap: parentContext?.slotsMap,
+	});
+	const { animatedStyle, animatedProps } =
+		useMaybeBlockVisibility(isFloatingOverlay);
+	const value = useMemo(
+		() => ({
+			localStylesMaps,
+			nextInterpolatorReady,
+			slotsMap,
+		}),
+		[localStylesMaps, nextInterpolatorReady, slotsMap],
+	);
+
+	useLayoutEffect(() => {
+		registerScreenSlots(currentScreenKey, value);
+
+		return () => {
+			unregisterScreenSlots(currentScreenKey, value);
+		};
+	}, [currentScreenKey, value]);
+
+	return {
+		value,
+		children: (
+			<FloatingOverlayLayer enabled={isFloatingOverlay}>
+				<Animated.View
+					style={[styles.container, animatedStyle]}
+					animatedProps={animatedProps}
+				>
+					{children}
+				</Animated.View>
+			</FloatingOverlayLayer>
+		),
+	};
+});
+
+const styles = StyleSheet.create({
+	container: { flex: 1 },
+});