react-native-screen-transitions 3.9.0-alpha.0 → 3.9.0-alpha.2

package/src/shared/components/boundary/portal/components/portal-boundary-host.tsx

@@ -1,7 +1,6 @@
 import { memo } from "react";
 import type { StyleProp, ViewStyle } from "react-native";
 import Animated, { useAnimatedStyle } from "react-native-reanimated";
-import { PortalHost as NativePortalHost } from "react-native-teleport";
 import { NO_STYLES } from "../../../../constants";
 import { AnimationStore } from "../../../../stores/animation.store";
 import { getSourceScreenKeyFromPairKey } from "../../../../stores/bounds/helpers/link-pairs.helpers";
@@ -9,14 +8,16 @@ import { getLink } from "../../../../stores/bounds/internals/links";
 import { GestureStore } from "../../../../stores/gesture.store";
 import { ScrollStore } from "../../../../stores/scroll.store";
 import type { ActivePortalBoundaryHost } from "../stores/portal-boundary-host.store";
+import { NativePortalHost } from "../teleport";
 import { createPortalBoundaryHostName } from "../utils/naming";
 import {
 	type PortalOffsetPlacement,
 	resolvePortalOffsetStyle,
 } from "../utils/offset-style";
 
-const AnimatedPortalBoundaryHost =
-	Animated.createAnimatedComponent(NativePortalHost);
+const AnimatedPortalBoundaryHost = NativePortalHost
+	? Animated.createAnimatedComponent(NativePortalHost)
+	: null;
 
 type PortalBoundaryHostProps = {
 	host: ActivePortalBoundaryHost;
@@ -84,6 +85,12 @@ export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 		});
 	});
 
+	// Without `react-native-teleport` no portal ever mounts a boundary host, so
+	// this never renders — the guard just narrows the nullable animated host.
+	if (!AnimatedPortalBoundaryHost) {
+		return null;
+	}
+
 	return (
 		<AnimatedPortalBoundaryHost name={hostName} style={[style, hostStyle]} />
 	);

package/src/shared/components/boundary/portal/components/portal-provider.tsx

@@ -1,10 +1,14 @@
 import { memo } from "react";
-import { PortalProvider as NativePortalProvider } from "react-native-teleport";
+import { NativePortalProvider } from "../teleport";
 
 export const PortalProvider = memo(function PortalProvider({
 	children,
 }: {
 	children: React.ReactNode;
 }) {
+	if (!NativePortalProvider) {
+		return children;
+	}
+
 	return <NativePortalProvider>{children}</NativePortalProvider>;
 });

package/src/shared/components/boundary/portal/components/portal.tsx

@@ -16,9 +16,8 @@ import Animated, {
 	useAnimatedStyle,
 	useSharedValue,
 } from "react-native-reanimated";
-import { Portal as NativePortal } from "react-native-teleport";
 import { useDescriptorsStore } from "../../../../providers/screen/descriptors";
-import { useScreenStyles } from "../../../../providers/screen/styles";
+import { useScreenSlots } from "../../../../providers/screen/styles";
 import { AnimationStore } from "../../../../stores/animation.store";
 import { getLinkKeyFromTag } from "../../../../stores/bounds/helpers/link-pairs.helpers";
 import { getLink } from "../../../../stores/bounds/internals/links";
@@ -33,6 +32,7 @@ import {
 	mountPortalBoundaryHost,
 	unmountPortalBoundaryHost,
 } from "../stores/portal-boundary-host.store";
+import { isTeleportAvailable, NativePortal } from "../teleport";
 import {
 	type PortalAttachment,
 	resolvePortalAttachmentTargets,
@@ -44,15 +44,17 @@ import {
 import { isTeleportEnabled } from "../utils/teleport-control";
 
 type NullableHostNamePortalProps = Omit<
-	ComponentProps<typeof NativePortal>,
+	ComponentProps<NonNullable<typeof NativePortal>>,
 	"hostName"
 > & {
 	hostName?: string | null;
 };
 
-const TransitionAwareTeleport = createTransitionAwareComponent(
-	NativePortal as ComponentType<NullableHostNamePortalProps>,
-);
+const TransitionAwareTeleport = NativePortal
+	? createTransitionAwareComponent(
+			NativePortal as ComponentType<NullableHostNamePortalProps>,
+		)
+	: null;
 
 interface PortalProps {
 	id?: string;
@@ -73,12 +75,15 @@ export const Portal = memo(function Portal({
 	mode = false,
 	placeholderRef,
 }: PortalProps) {
-	const isPortalEnabled = !!mode;
+	// Teleporting requires the optional `react-native-teleport` peer. Without it,
+	// a portal-enabled boundary degrades to inline rendering (the `return
+	// children` path below).
+	const isPortalEnabled = !!mode && isTeleportAvailable;
 	const portalAttachTarget: BoundaryPortalAttachTarget =
 		!mode || mode === true
 			? "current-screen"
 			: (mode.attachTo ?? "current-screen");
-	const { stylesMap } = useScreenStyles();
+	const { slotsMap } = useScreenSlots();
 	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
 	const currentScreenKey = useDescriptorsStore(
 		(s) => s.derivations.currentScreenKey,
@@ -224,7 +229,7 @@ export const Portal = memo(function Portal({
 		// re-parented before the host is visually ready. Closing stays attached
 		// through progress 0 so the final frame can land in the matched host.
 		const attachThreshold = closing.get() === 1 ? 0 : 0.001;
-		const { teleport, ...slotProps } = stylesMap.get()[id]?.props ?? {};
+		const { teleport, ...slotProps } = slotsMap.get()[id]?.props ?? {};
 		const shouldTeleport = isTeleportEnabled(teleport);
 
 		return {
@@ -256,7 +261,7 @@ export const Portal = memo(function Portal({
 		return { width, height };
 	});
 
-	if (isPortalEnabled) {
+	if (isPortalEnabled && TransitionAwareTeleport) {
 		return (
 			<Animated.View
 				ref={placeholderRef}

package/src/shared/components/boundary/portal/resolve-portal.ts

@@ -0,0 +1,40 @@
+import type { BoundsPortalAttachTarget } from "../../../stores/bounds/types";
+import { logger } from "../../../utils/logger";
+import type { BoundaryPortal } from "../types";
+import { isTeleportAvailable } from "./teleport";
+
+/**
+ * Resolves the `portal` prop against teleport availability. When
+ * `react-native-teleport` is missing, portal boundaries degrade to inline
+ * rendering and we warn once for the whole app.
+ */
+export const resolveBoundaryPortal = (
+	portal?: BoundaryPortal,
+): BoundaryPortal | undefined => {
+	if (isTeleportAvailable) {
+		return portal;
+	}
+
+	if (portal) {
+		logger.warnOnce(
+			"boundary:teleport-missing",
+			"react-native-teleport is not installed and will fallback to default behavior.",
+		);
+	}
+
+	return undefined;
+};
+
+/**
+ * Resolves which screen host a portal'd boundary attaches to. Object form may
+ * pin an explicit `attachTo`; bare `true` defaults to the current screen.
+ */
+export const resolvePortalHost = (
+	portal?: BoundaryPortal,
+): BoundsPortalAttachTarget | undefined => {
+	if (typeof portal === "object") {
+		return portal.attachTo ?? "current-screen";
+	}
+
+	return portal ? "current-screen" : undefined;
+};

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

@@ -0,0 +1,21 @@
+import type { ComponentType } from "react";
+
+/**
+ * `react-native-teleport` is an optional peer dependency. The require sits in a
+ * try/catch so Metro treats it as an optional dependency — an absent module no
+ * longer fails the bundle, it throws at runtime and the catch swallows it.
+ *
+ * When teleport is missing, `portal`-enabled boundaries degrade to inline
+ * rendering; everything else keeps working.
+ */
+let mod: any = null;
+try {
+	mod = require("react-native-teleport");
+} catch {}
+
+export const isTeleportAvailable = mod !== null;
+export const NativePortal: ComponentType<any> | null = mod?.Portal ?? null;
+export const NativePortalProvider: ComponentType<any> | null =
+	mod?.PortalProvider ?? null;
+export const NativePortalHost: ComponentType<any> | null =
+	mod?.PortalHost ?? null;

package/src/shared/components/boundary/providers/{boundary-owner.provider.tsx → boundary-root.provider.tsx}

@@ -1,8 +1,10 @@
 import type React from "react";
-import { type ReactNode, useCallback, useMemo, useRef, useState } from "react";
+import { type ReactNode, useCallback, useMemo, useState } from "react";
 import type { View } from "react-native";
 import type Animated from "react-native-reanimated";
 import type { AnimatedRef, StyleProps } from "react-native-reanimated";
+import { useAnimatedRef } from "react-native-reanimated";
+import type { BoundTag } from "../../../stores/bounds/types";
 import createProvider from "../../../utils/create-provider";
 import { logger } from "../../../utils/logger";
 import type { BoundaryPortal } from "../types";
@@ -11,8 +13,7 @@ type BoundaryAssociatedStyle = React.ComponentProps<
 	typeof Animated.View
 >["style"];
 
-interface BoundaryOwnerContextValue {
-	ownerRef: AnimatedRef<View>;
+interface BoundaryRootContextValue {
 	registerTargetRef: (
 		targetRef: AnimatedRef<View>,
 		preparedStyles: StyleProps,
@@ -21,7 +22,7 @@ interface BoundaryOwnerContextValue {
 	unregisterTargetRef: (targetRef: AnimatedRef<View>) => void;
 	activeTargetRef: AnimatedRef<View> | null;
 	associatedTargetStyles?: BoundaryAssociatedStyle;
-	entryTag: string;
+	boundTag: BoundTag;
 	portal?: BoundaryPortal;
 }
 
@@ -34,30 +35,28 @@ type BoundaryTargetEntry = {
 
 // logger.warn prepends the library prefix.
 const MULTIPLE_TARGETS_WARNING =
-	"Multiple Boundary.Target elements were rendered under the same boundary owner. The first registered target will be measured.";
+	"Multiple Boundary.Target elements were rendered under the same boundary root. The first registered target will be measured.";
 
-export const TARGET_OUTSIDE_OWNER_WARNING =
-	"Boundary.Target must be rendered inside a Boundary owner (Boundary.View, Boundary.Trigger, or a component created by createBoundaryComponent).";
+export const TARGET_OUTSIDE_ROOT_WARNING =
+	"Boundary.Target must be rendered inside a Boundary root (Boundary.View, Boundary.Trigger, or a component created by createBoundaryComponent).";
 
-interface BoundaryOwnerProps {
-	value: BoundaryOwnerContextValue;
+interface BoundaryRootProps {
+	value: BoundaryRootContextValue;
 	children: ReactNode;
 }
 
-export const { BoundaryOwnerProvider, useBoundaryOwnerContext } =
-	createProvider("BoundaryOwner", { guarded: false })<
-		BoundaryOwnerProps,
-		BoundaryOwnerContextValue
-	>((props) => props);
+export const { BoundaryRootProvider, useBoundaryRootContext } = createProvider(
+	"BoundaryRoot",
+	{ guarded: false },
+)<BoundaryRootProps, BoundaryRootContextValue>((props) => props);
 
-export const useBoundaryOwner = (params: {
-	ownerRef: AnimatedRef<View>;
+export const useBoundaryRootState = (params: {
 	associatedTargetStyles?: BoundaryAssociatedStyle;
-	entryTag: string;
+	boundTag: BoundTag;
 	portal?: BoundaryPortal;
 }) => {
-	const { ownerRef, associatedTargetStyles, entryTag, portal } = params;
-	const warnedAboutMultipleTargetsRef = useRef(false);
+	const { associatedTargetStyles, boundTag, portal } = params;
+	const rootRef = useAnimatedRef<View>();
 	const [targetEntry, setTargetEntry] = useState<BoundaryTargetEntry | null>(
 		null,
 	);
@@ -73,13 +72,11 @@ export const useBoundaryOwner = (params: {
 					return prev;
 				}
 
-				if (
-					__DEV__ &&
-					prev !== null &&
-					!warnedAboutMultipleTargetsRef.current
-				) {
-					warnedAboutMultipleTargetsRef.current = true;
-					logger.warn(MULTIPLE_TARGETS_WARNING);
+				if (__DEV__ && prev !== null) {
+					logger.warnOnce(
+						"boundary:multiple-targets",
+						MULTIPLE_TARGETS_WARNING,
+					);
 				}
 
 				return (
@@ -100,30 +97,28 @@ export const useBoundaryOwner = (params: {
 
 	const contextValue = useMemo(
 		() => ({
-			ownerRef,
 			registerTargetRef,
 			unregisterTargetRef,
 			activeTargetRef: targetEntry?.ref ?? null,
 			associatedTargetStyles,
-			entryTag,
+			boundTag,
 			portal,
 		}),
 		[
-			ownerRef,
 			registerTargetRef,
 			unregisterTargetRef,
 			targetEntry,
 			associatedTargetStyles,
-			entryTag,
+			boundTag,
 			portal,
 		],
 	);
 
 	return {
+		ref: rootRef,
 		contextValue,
 		hasActiveTarget: targetEntry !== null,
-		measuredRef: targetEntry?.measurementRef ?? ownerRef,
+		measuredRef: targetEntry?.measurementRef ?? rootRef,
 		targetPreparedStyles: targetEntry?.preparedStyles,
-		portal,
 	};
 };

package/src/shared/components/boundary/utils/destination-signals.ts

@@ -1,13 +1,40 @@
+import {
+	createPendingPairKey,
+	getActiveGroupId,
+	getLinkKeyFromTag,
+	getSourceScreenKeyFromPairKey,
+} from "../../../stores/bounds/helpers/link-pairs.helpers";
 import type {
 	LinkPairsState,
 	ScreenPairKey,
 } from "../../../stores/bounds/types";
 
+const hasPendingSourceLinks = (
+	linkState: LinkPairsState | undefined,
+	pendingPairKey: ScreenPairKey,
+) => {
+	"worklet";
+	const links = linkState?.[pendingPairKey]?.links;
+
+	if (!links) {
+		return false;
+	}
+
+	for (const key in links) {
+		if (links[key]?.source) {
+			return true;
+		}
+	}
+
+	return false;
+};
+
 export const getInitialDestinationMeasurePairKey = (params: {
 	enabled: boolean;
 	destinationPairKey?: ScreenPairKey;
 	ancestorDestinationPairKey?: ScreenPairKey;
 	linkId: string;
+	group?: string;
 	linkState?: LinkPairsState;
 }): ScreenPairKey | null => {
 	"worklet";
@@ -16,6 +43,7 @@ export const getInitialDestinationMeasurePairKey = (params: {
 		destinationPairKey,
 		ancestorDestinationPairKey,
 		linkId,
+		group,
 		linkState,
 	} = params;
 	const measurePairKey = destinationPairKey ?? ancestorDestinationPairKey;
@@ -24,8 +52,31 @@ export const getInitialDestinationMeasurePairKey = (params: {
 		return null;
 	}
 
+	const linkKey = getLinkKeyFromTag(linkId);
 	const hasDestination =
-		linkState?.[measurePairKey]?.links?.[linkId]?.destination;
+		linkState?.[measurePairKey]?.links?.[linkKey]?.destination;
+
+	if (hasDestination) {
+		return null;
+	}
+
+	const sourceScreenKey = getSourceScreenKeyFromPairKey(measurePairKey);
+	const pendingPairKey = createPendingPairKey(sourceScreenKey);
+	const hasPendingSources = hasPendingSourceLinks(linkState, pendingPairKey);
+	const pendingSource = linkState?.[pendingPairKey]?.links?.[linkKey]?.source;
+
+	if (hasPendingSources && !pendingSource) {
+		return null;
+	}
+
+	const activeGroupId =
+		group && linkState
+			? getActiveGroupId(linkState, measurePairKey, group)
+			: null;
+
+	if (!hasPendingSources && activeGroupId && activeGroupId !== linkKey) {
+		return null;
+	}
 
-	return hasDestination ? null : measurePairKey;
+	return measurePairKey;
 };

package/src/shared/components/create-transition-aware-component.tsx

@@ -5,18 +5,15 @@ import type { View } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
 import Animated, {
 	runOnUI,
-	useAnimatedProps,
 	useAnimatedRef,
-	useAnimatedStyle,
 	useComposedEventHandler,
 } from "react-native-reanimated";
-import { NO_PROPS, NO_STYLES } from "../constants";
 import { RegisterBoundsProvider } from "../providers/register-bounds.provider";
 import {
 	ScrollMetadataOwnerProvider,
 	useScrollGestureCoordination,
 } from "../providers/screen/gestures/scroll-coordination";
-import { useScreenStyles } from "../providers/screen/styles";
+import { useSlotProps, useSlotStyles } from "../providers/screen/styles";
 import type { TransitionAwareProps } from "../types/screen.types";
 
 interface CreateTransitionAwareComponentOptions {
@@ -128,28 +125,9 @@ export function createTransitionAwareComponent<P extends object>(
 		} = props as any;
 
 		const animatedRef = useAnimatedRef<View>();
-		const { stylesMap } = useScreenStyles();
 		const associatedId = sharedBoundTag || styleId;
-
-		const associatedStyles = useAnimatedStyle(() => {
-			"worklet";
-
-			if (!associatedId) {
-				return NO_STYLES;
-			}
-
-			return stylesMap.get()[associatedId]?.style ?? NO_STYLES;
-		});
-
-		const associatedProps = useAnimatedProps(() => {
-			"worklet";
-
-			if (!associatedId) {
-				return NO_PROPS;
-			}
-
-			return stylesMap.get()[associatedId]?.props ?? NO_PROPS;
-		});
+		const associatedStyles = useSlotStyles(associatedId);
+		const associatedProps = useSlotProps(associatedId);
 
 		return (
 			<RegisterBoundsProvider

package/src/shared/components/overlay/variations/float-overlay.tsx

@@ -5,7 +5,7 @@ import { ScreenAnimationProvider } from "../../../providers/screen/animation";
 import type { BaseDescriptor } from "../../../providers/screen/descriptors";
 import { DescriptorsProvider } from "../../../providers/screen/descriptors";
 import { ScreenOptionsProvider } from "../../../providers/screen/options";
-import { ScreenStylesProvider } from "../../../providers/screen/styles";
+import { ScreenSlotProvider } from "../../../providers/screen/styles";
 import type { OverlayScreenState } from "../../../types/overlay.types";
 
 import { getActiveFloatOverlay } from "../helpers/get-active-overlay";
@@ -67,12 +67,12 @@ export function FloatOverlay() {
 		<DescriptorsProvider current={current} previous={previous} next={next}>
 			<ScreenOptionsProvider>
 				<ScreenAnimationProvider>
-					<ScreenStylesProvider isFloatingOverlay>
+					<ScreenSlotProvider isFloatingOverlay>
 						<OverlayHost
 							scene={scene}
 							overlayScreenState={overlayScreenState}
 						/>
-					</ScreenStylesProvider>
+					</ScreenSlotProvider>
 				</ScreenAnimationProvider>
 			</ScreenOptionsProvider>
 		</DescriptorsProvider>

package/src/shared/components/screen-container/layers/backdrop.tsx

@@ -1,15 +1,10 @@
 import { memo, useCallback, useMemo } from "react";
 import { Pressable, StyleSheet } from "react-native";
-import Animated, {
-	runOnUI,
-	useAnimatedProps,
-	useAnimatedStyle,
-} from "react-native-reanimated";
+import Animated, { runOnUI } from "react-native-reanimated";
 import { DefaultSnapSpec } from "../../../configs/specs";
-import { NO_PROPS, NO_STYLES } from "../../../constants";
 import { useNavigationHelpers } from "../../../hooks/navigation/use-navigation-helpers";
 import { useDescriptors } from "../../../providers/screen/descriptors";
-import { useScreenStyles } from "../../../providers/screen/styles";
+import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
 import { AnimationStore } from "../../../stores/animation.store";
 import { GestureStore } from "../../../stores/gesture.store";
 import { SystemStore } from "../../../stores/system.store";
@@ -24,7 +19,6 @@ export const BackdropLayer = memo(function BackdropLayer({
 	backdropBehavior: BackdropBehavior;
 	isBackdropActive: boolean;
 }) {
-	const { stylesMap } = useScreenStyles();
 	const { current } = useDescriptors();
 	const { dismissScreen } = useNavigationHelpers();
 
@@ -112,15 +106,8 @@ export const BackdropLayer = memo(function BackdropLayer({
 		routeKey,
 	]);
 
-	const animatedBackdropStyle = useAnimatedStyle(() => {
-		"worklet";
-		return stylesMap.get().backdrop?.style ?? NO_STYLES;
-	});
-
-	const animatedBackdropProps = useAnimatedProps(() => {
-		"worklet";
-		return stylesMap.get().backdrop?.props ?? NO_PROPS;
-	});
+	const animatedBackdropStyle = useSlotStyles("backdrop");
+	const animatedBackdropProps = useSlotProps("backdrop");
 
 	return (
 		<Pressable

package/src/shared/components/screen-container/layers/content.tsx

@@ -2,15 +2,11 @@
 import { memo } from "react";
 import { StyleSheet, View } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
-import Animated, {
-	useAnimatedProps,
-	useAnimatedStyle,
-} from "react-native-reanimated";
-import { NO_PROPS, NO_STYLES } from "../../../constants";
+import Animated from "react-native-reanimated";
 import { useDescriptors } from "../../../providers/screen/descriptors";
 import { useGestureContext } from "../../../providers/screen/gestures";
 import { OriginProvider } from "../../../providers/screen/origin.provider";
-import { useScreenStyles } from "../../../providers/screen/styles";
+import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
 import { ScreenFallbackHost } from "../../boundary/portal/components/host";
 import { useContentLayout } from "../hooks/use-content-layout";
 import { MaybeMaskedNavigationContainer } from "./maybe-masked-navigation-container";
@@ -24,7 +20,6 @@ type Props = {
 
 export const ContentLayer = memo(
 	({ children, pointerEvents, isBackdropActive }: Props) => {
-		const { stylesMap } = useScreenStyles();
 		const { current } = useDescriptors();
 
 		const gestureContext = useGestureContext();
@@ -36,15 +31,8 @@ export const ContentLayer = memo(
 
 		const handleContentLayout = useContentLayout();
 
-		const animatedContentStyle = useAnimatedStyle(() => {
-			"worklet";
-			return stylesMap.get().content?.style || NO_STYLES;
-		});
-
-		const animatedContentProps = useAnimatedProps(() => {
-			"worklet";
-			return stylesMap.get().content?.props ?? NO_PROPS;
-		});
+		const animatedContentStyle = useSlotStyles("content");
+		const animatedContentProps = useSlotProps("content");
 
 		return (
 			<GestureDetector gesture={gestureContext!.detectorGesture}>

package/src/shared/components/screen-container/layers/maybe-masked-navigation-container.tsx

@@ -1,12 +1,11 @@
 import { memo, useCallback } from "react";
 import { StyleSheet, View, type ViewProps } from "react-native";
-import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import {
 	NAVIGATION_MASK_CONTAINER_STYLE_ID,
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,
-	NO_STYLES,
 } from "../../../constants";
-import { useScreenStyles } from "../../../providers/screen/styles";
+import { useSlotStyles } from "../../../providers/screen/styles";
 import { logger } from "../../../utils/logger";
 
 type Props = {
@@ -47,8 +46,6 @@ const MaskedNavigationContainer = memo(
 		children: React.ReactNode;
 		pointerEvents: ViewProps["pointerEvents"];
 	}) => {
-		const { stylesMap } = useScreenStyles();
-
 		const maybeLogWarning = useCallback(() => {
 			if (LazyMaskedView !== View) return;
 			if (hasWarnedMissingMaskedView) return;
@@ -59,19 +56,12 @@ const MaskedNavigationContainer = memo(
 			);
 		}, []);
 
-		const animatedNavigationMaskStyle = useAnimatedStyle(() => {
-			"worklet";
-			return (
-				stylesMap.get()[NAVIGATION_MASK_ELEMENT_STYLE_ID]?.style || NO_STYLES
-			);
-		});
-
-		const animatedNavigationMaskContainerStyle = useAnimatedStyle(() => {
-			"worklet";
-			return (
-				stylesMap.get()[NAVIGATION_MASK_CONTAINER_STYLE_ID]?.style || NO_STYLES
-			);
-		});
+		const animatedNavigationMaskStyle = useSlotStyles(
+			NAVIGATION_MASK_ELEMENT_STYLE_ID,
+		);
+		const animatedNavigationMaskContainerStyle = useSlotStyles(
+			NAVIGATION_MASK_CONTAINER_STYLE_ID,
+		);
 
 		return (
 			<LazyMaskedView

package/src/shared/components/screen-container/layers/surface-container.tsx

@@ -1,12 +1,8 @@
 import { type ComponentType, memo, useMemo } from "react";
 import { StyleSheet, type ViewProps } from "react-native";
-import Animated, {
-	useAnimatedProps,
-	useAnimatedStyle,
-} from "react-native-reanimated";
-import { NO_PROPS, NO_STYLES } from "../../../constants";
+import Animated from "react-native-reanimated";
 import { useDescriptors } from "../../../providers/screen/descriptors";
-import { useScreenStyles } from "../../../providers/screen/styles";
+import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
 
 type Props = {
 	children: React.ReactNode;
@@ -44,17 +40,8 @@ type AnimatedSurfaceProps = {
 
 const AnimatedSurface = memo(
 	({ children, pointerEvents, SurfaceComponent }: AnimatedSurfaceProps) => {
-		const { stylesMap } = useScreenStyles();
-
-		const animatedSurfaceStyle = useAnimatedStyle(() => {
-			"worklet";
-			return stylesMap.get().surface?.style ?? NO_STYLES;
-		});
-
-		const animatedSurfaceProps = useAnimatedProps(() => {
-			"worklet";
-			return stylesMap.get().surface?.props ?? NO_PROPS;
-		});
+		const animatedSurfaceStyle = useSlotStyles("surface");
+		const animatedSurfaceProps = useSlotProps("surface");
 
 		return (
 			<SurfaceComponent