react-native-screen-transitions 3.10.0 → 3.11.0

package/src/shared/components/boundary/portal/components/boundary-portal/hooks/use-host-measurement.ts

@@ -1,9 +1,8 @@
-import { useLayoutEffect, useState } from "react";
+import { useLayoutEffect } from "react";
 import type { View } from "react-native";
 import {
 	cancelAnimation,
 	measure,
-	runOnJS,
 	runOnUI,
 	type SharedValue,
 	useAnimatedReaction,
@@ -12,13 +11,12 @@ import {
 	withDelay,
 	withTiming,
 } from "react-native-reanimated";
-import { useOriginContext } from "../../../../../../providers/screen/origin.provider";
 import { ScrollStore } from "../../../../../../stores/scroll.store";
 import { getVisibilityBlockOffset } from "../../../../../../utils/visibility-block-offset";
 import {
 	adjustedMeasuredBoundsForOverscrollDeltas,
+	correctMeasuredBoundsForVisibilityGate,
 	isMeasurementInViewport,
-	normalizeMeasuredBoundsWithVisibilityGate,
 } from "../../../../utils/measured-bounds";
 import {
 	clearPortalHostBounds,
@@ -48,8 +46,6 @@ export const useHostMeasurement = ({
 }: UseHostMeasurementParams) => {
 	const hostRef = useAnimatedRef<View>();
 	const scrollMetadata = ScrollStore.getValue(screenKey, "metadata");
-	const [canRenderHosts, setCanRenderHosts] = useState<boolean>(false);
-	const { originRef } = useOriginContext();
 	const hasMeasuredHost = useSharedValue(false);
 	const retryToken = useSharedValue(0);
 
@@ -76,9 +72,8 @@ export const useHostMeasurement = ({
 			}
 
 			const measured = measure(hostRef);
-			const measuredOrigin = measure(originRef);
 
-			if (!measured || !measuredOrigin) {
+			if (!measured) {
 				cancelAnimation(retryToken);
 				retryToken.set(
 					withDelay(
@@ -90,7 +85,6 @@ export const useHostMeasurement = ({
 			}
 
 			cancelAnimation(retryToken);
-			hasMeasuredHost.set(true);
 
 			// A measurement taken mid rubber-band would bake the transient
 			// overscroll displacement into the host frame. Store the at-rest
@@ -100,9 +94,8 @@ export const useHostMeasurement = ({
 				? adjustedMeasuredBoundsForOverscrollDeltas(measured, currentScroll)
 				: measured;
 
-			const normalizedMeasured = normalizeMeasuredBoundsWithVisibilityGate({
+			const correctedMeasured = correctMeasuredBoundsForVisibilityGate({
 				measured: overscrollNormalized,
-				origin: measuredOrigin,
 				visibilityBlocked: visibilityBlocked.get(),
 				visibilityBlockOffset: getVisibilityBlockOffset(viewportHeight),
 				viewportWidth,
@@ -111,7 +104,7 @@ export const useHostMeasurement = ({
 
 			if (
 				!isMeasurementInViewport(
-					normalizedMeasured,
+					correctedMeasured,
 					viewportWidth,
 					viewportHeight,
 				)
@@ -127,16 +120,16 @@ export const useHostMeasurement = ({
 			}
 
 			setPortalHostBounds(hostKey, {
-				x: normalizedMeasured.x,
-				y: normalizedMeasured.y,
-				width: normalizedMeasured.width,
-				height: normalizedMeasured.height,
-				pageX: normalizedMeasured.pageX,
-				pageY: normalizedMeasured.pageY,
+				x: correctedMeasured.x,
+				y: correctedMeasured.y,
+				width: correctedMeasured.width,
+				height: correctedMeasured.height,
+				pageX: correctedMeasured.pageX,
+				pageY: correctedMeasured.pageY,
 				scroll: capturesScroll ? currentScroll : null,
 			});
 
-			runOnJS(setCanRenderHosts)(true);
+			hasMeasuredHost.set(true);
 		},
 	);
 
@@ -147,7 +140,6 @@ export const useHostMeasurement = ({
 	}, [hostKey]);
 
 	return {
-		canRenderHosts,
 		hostRef,
 	};
 };

package/src/shared/components/boundary/portal/utils/naming.ts

@@ -1 +1,12 @@
+const BOUNDARY_PORTAL_HOST_NAME_SUFFIX = "-portal-host";
+
+export const createBoundaryPortalHostName = (
+	hostKey: string,
+	boundaryId: string,
+	pairKey?: string | null,
+) => {
+	"worklet";
+	return `${hostKey}-${pairKey ? `${pairKey}-` : ""}${boundaryId}${BOUNDARY_PORTAL_HOST_NAME_SUFFIX}`;
+};
+
 export const PORTAL_HOST_NAME_RESET_VALUE = null;

package/src/shared/components/boundary/providers/boundary-root.provider.tsx

@@ -14,6 +14,7 @@ import {
 	useComposedSlotStyles,
 	useSlotStackingStyles,
 } from "../../../providers/screen/styles";
+import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
 import { createBoundTag } from "../../../stores/bounds/helpers/link-pairs.helpers";
 import type { BoundTag } from "../../../stores/bounds/types";
 import createProvider from "../../../utils/create-provider";
@@ -64,14 +65,10 @@ type BoundaryRootProviderProps = Pick<
 	targetStyle?: unknown;
 };
 
-export const {
-	BoundaryRootProvider,
-	useBoundaryRootContext,
-	useBoundaryRootStore,
-} = createProvider("BoundaryRoot", { guarded: false })<
-	BoundaryRootProviderProps,
-	BoundaryRootContextValue
->(
+export const { BoundaryRootProvider, useBoundaryRootStore } = createProvider(
+	"BoundaryRoot",
+	{ guarded: false },
+)<BoundaryRootProviderProps, BoundaryRootContextValue>(
 	({
 		children,
 		config,
@@ -98,12 +95,12 @@ export const {
 		const currentScreenKey = useDescriptorsStore(
 			(s) => s.derivations.currentScreenKey,
 		);
-		const currentActivity = useDescriptorsStore(
-			(s) => s.descriptors.current.activity,
+		const isCurrentScreenClosing = useBlankStackStore(
+			(store) => store?.scenesByKey[currentScreenKey]?.activity === "closing",
 		);
 		const retainedBoundTagRef = useRef(requestedBoundTag);
 		const shouldRetainClosingBoundTag =
-			portalRuntime.handoff && currentActivity === "closing";
+			portalRuntime.handoff && isCurrentScreenClosing;
 
 		// Navigation can update a retained closing route's params before that
 		// route leaves the stack. Keep its handoff identity stable so the payload

package/src/shared/components/boundary/utils/measured-bounds.ts

@@ -60,18 +60,6 @@ export const adjustedMeasuredBoundsForOverscrollDeltas = (
 	};
 };
 
-export const normalizeMeasuredBoundsToOrigin = (
-	measured: MeasuredDimensions,
-	origin: MeasuredDimensions,
-): MeasuredDimensions => {
-	"worklet";
-	return {
-		...measured,
-		pageX: measured.pageX - origin.pageX,
-		pageY: measured.pageY - origin.pageY,
-	};
-};
-
 export const isMeasurementInViewport = (
 	measured: MeasuredDimensions,
 	viewportWidth: number,
@@ -96,52 +84,61 @@ export const isMeasurementInViewport = (
 	);
 };
 
-export const normalizeMeasuredBoundsWithVisibilityGate = ({
+export const correctMeasuredBoundsForVisibilityGate = ({
 	measured,
-	origin,
 	visibilityBlocked,
 	visibilityBlockOffset,
 	viewportWidth,
 	viewportHeight,
 }: {
 	measured: MeasuredDimensions;
-	origin: MeasuredDimensions;
 	visibilityBlocked: boolean;
 	visibilityBlockOffset: number;
 	viewportWidth: number;
 	viewportHeight: number;
 }): MeasuredDimensions => {
 	"worklet";
-	const normalized = normalizeMeasuredBoundsToOrigin(measured, origin);
 
 	if (
 		!visibilityBlocked ||
 		visibilityBlockOffset <= 0 ||
-		isMeasurementInViewport(normalized, viewportWidth, viewportHeight)
+		isMeasurementInViewport(measured, viewportWidth, viewportHeight)
 	) {
-		return normalized;
+		return measured;
 	}
 
-	// Fabric can expose the visibility transform to one native measurement one
-	// frame before the other. Prefer normal origin-relative coordinates, then
-	// test either side of that known frame skew while the gate is active.
-	const measuredAhead = {
-		...normalized,
-		pageY: normalized.pageY - visibilityBlockOffset,
+	// A destination can still carry the internal visibility transform for one
+	// native frame. Correct only that known offset and preserve all other
+	// presentation transforms in the measured coordinates.
+	const visibilityOffsetApplied = {
+		...measured,
+		pageY: measured.pageY - visibilityBlockOffset,
 	};
-	if (isMeasurementInViewport(measuredAhead, viewportWidth, viewportHeight)) {
-		return measuredAhead;
+	if (
+		isMeasurementInViewport(
+			visibilityOffsetApplied,
+			viewportWidth,
+			viewportHeight,
+		)
+	) {
+		return visibilityOffsetApplied;
 	}
 
-	const originAhead = {
-		...normalized,
-		pageY: normalized.pageY + visibilityBlockOffset,
+	const inverseVisibilityOffsetApplied = {
+		...measured,
+		pageY: measured.pageY + visibilityBlockOffset,
 	};
-	if (isMeasurementInViewport(originAhead, viewportWidth, viewportHeight)) {
-		return originAhead;
+	if (
+		isMeasurementInViewport(
+			inverseVisibilityOffsetApplied,
+			viewportWidth,
+			viewportHeight,
+		)
+	) {
+		return inverseVisibilityOffsetApplied;
 	}
 
-	return normalized;
+	return measured;
 };
 
 export const measureWithOverscrollAwareness = (

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

@@ -37,10 +37,6 @@ export const getRefreshBoundarySignal = (params: {
 	group?: string;
 	shouldRefresh: boolean;
 	closing: boolean;
-	entering: boolean;
-	animating: boolean;
-	progress: number;
-	gestureInProgress: boolean;
 	linkState?: LinkPairsState;
 }): RefreshBoundarySignal | null => {
 	"worklet";
@@ -55,37 +51,34 @@ export const getRefreshBoundarySignal = (params: {
 		group,
 		shouldRefresh,
 		closing,
-		entering,
-		animating,
-		progress,
-		gestureInProgress,
 		linkState,
 	} = params;
 
 	if (!enabled) return null;
 
-	// This is temporary for a patch fix. However, this architecture should
-	// change: our signals aren't currently doing their intended job, so right
-	// now we'll add one more guard until the shape is much more tested and
-	// bulletproof.
-	if (gestureInProgress) return null;
-
-	const canRefreshPreCloseDestination =
-		shouldRefresh && closing && !entering && !animating && progress >= 1;
-
-	const canRefreshSettledDestination = shouldRefresh && !closing && !entering;
-
-	// Guards:
-	// 1) A user may dismiss via back button, in this case, we should remeasure.
-	// 2) If a user drags during entering/closing animations we should NOT remeasure.
-	if (!canRefreshPreCloseDestination && !canRefreshSettledDestination) {
+	if (!shouldRefresh) {
 		return null;
 	}
 
-	// Non group:
-	// Since in typical group flows we would need to know the src, we don't need to do that for
-	// single a->b flows. So we just trigger the destination refresh.
+	// A source may move while its destination is active, so refresh whichever
+	// side of the pair this boundary currently represents.
 	if (!group) {
+		if (sourcePairKey) {
+			const sourcePair = linkState?.[sourcePairKey];
+			const participates =
+				!!sourcePair?.links?.[linkId] || !!sourcePair?.sourceRequests?.[linkId];
+
+			if (!participates) {
+				return null;
+			}
+
+			return buildRefreshSignal(
+				"source",
+				sourcePairKey,
+				[currentScreenKey, closing ? "closing" : "settled"].join("|"),
+			);
+		}
+
 		const refreshDestinationPairKey =
 			destinationPairKey ??
 			(nextScreenKey ? undefined : ancestorDestinationPairKey);
@@ -94,6 +87,10 @@ export const getRefreshBoundarySignal = (params: {
 			return null;
 		}
 
+		if (!linkState?.[refreshDestinationPairKey]?.links?.[linkId]) {
+			return null;
+		}
+
 		return buildRefreshSignal(
 			"destination",
 			refreshDestinationPairKey,

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

@@ -1,14 +1,8 @@
 /** biome-ignore-all lint/style/noNonNullAssertion: <This helper is usually being used inside a transitionable stack> */
 import type React from "react";
 import { type ComponentType, forwardRef, memo } from "react";
-import type { View } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
-import Animated, {
-	runOnUI,
-	useAnimatedRef,
-	useComposedEventHandler,
-} from "react-native-reanimated";
-import { RegisterBoundsProvider } from "../providers/register-bounds.provider";
+import Animated, { useComposedEventHandler } from "react-native-reanimated";
 import {
 	ScrollMetadataOwnerProvider,
 	useScrollGestureCoordination,
@@ -36,7 +30,6 @@ export function createTransitionAwareComponent<P extends object>(
 		TransitionAwareProps<P>
 	>((props: any, ref) => {
 		const {
-			remeasureOnFocus: _remeasureOnFocus,
 			onScroll: userOnScroll,
 			onMomentumScrollEnd: userOnMomentumScrollEnd,
 			onScrollEndDrag: userOnScrollEndDrag,
@@ -112,45 +105,27 @@ export function createTransitionAwareComponent<P extends object>(
 	const Inner = forwardRef<
 		React.ComponentRef<typeof AnimatedComponent>,
 		TransitionAwareProps<P>
-	>((props, _) => {
+	>((props, ref) => {
 		const {
 			children,
 			style,
-			sharedBoundTag,
 			styleId,
-			onPress,
-			remeasureOnFocus,
 			animatedProps: userAnimatedProps,
 			...rest
 		} = props as any;
 
-		const animatedRef = useAnimatedRef<View>();
-		const associatedId = sharedBoundTag || styleId;
-		const associatedStyles = useSlotStyles(associatedId);
-		const associatedProps = useSlotProps(associatedId);
+		const associatedStyles = useSlotStyles(styleId);
+		const associatedProps = useSlotProps(styleId);
 
 		return (
-			<RegisterBoundsProvider
-				animatedRef={animatedRef}
-				style={style}
-				onPress={onPress}
-				sharedBoundTag={sharedBoundTag}
-				remeasureOnFocus={remeasureOnFocus}
+			<AnimatedComponent
+				{...(rest as any)}
+				ref={ref}
+				style={[style, associatedStyles]}
+				animatedProps={userAnimatedProps ?? associatedProps}
 			>
-				{({ captureActiveOnPress, handleInitialLayout }) => (
-					<AnimatedComponent
-						{...(rest as any)}
-						ref={animatedRef}
-						style={[style, associatedStyles]}
-						animatedProps={userAnimatedProps ?? associatedProps}
-						onPress={captureActiveOnPress}
-						onLayout={runOnUI(handleInitialLayout)}
-						collapsable={!sharedBoundTag}
-					>
-						{children}
-					</AnimatedComponent>
-				)}
-			</RegisterBoundsProvider>
+				{children}
+			</AnimatedComponent>
 		);
 	});
 

package/src/shared/components/screen-container/hooks/use-backdrop-pointer-events.ts

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { runOnJS, useAnimatedReaction } from "react-native-reanimated";
-import { useDescriptors } from "../../../providers/screen/descriptors";
-import { useScreenOptionsContext } from "../../../providers/screen/options";
-import { useStackCoreContext } from "../../../providers/stack/core.provider";
+import { useDescriptorsStore } from "../../../providers/screen/descriptors";
+import { useScreenOptionsStore } from "../../../providers/screen/options";
+import { useStackCoreStore } from "../../../providers/stack/core.provider";
 import type { BackdropBehavior } from "../../../types/screen.types";
 import { StackType } from "../../../types/stack.types";
 
@@ -21,9 +21,11 @@ interface BackdropPointerEventsResult {
  * - Other stacks default to 'block' (undefined = normal touch handling)
  */
 export function useBackdropPointerEvents(): BackdropPointerEventsResult {
-	const { current } = useDescriptors();
-	const screenOptions = useScreenOptionsContext();
-	const { flags } = useStackCoreContext();
+	const screenOptions = useScreenOptionsStore();
+	const descriptorBackdropBehavior = useDescriptorsStore(
+		(store) => store.options.backdropBehavior,
+	);
+	const stackType = useStackCoreStore((store) => store.flags.STACK_TYPE);
 	const [runtimeBackdropBehavior, setRuntimeBackdropBehavior] = useState<
 		BackdropBehavior | undefined
 	>(undefined);
@@ -39,10 +41,10 @@ export function useBackdropPointerEvents(): BackdropPointerEventsResult {
 		[screenOptions],
 	);
 
-	const isComponentStack = flags.STACK_TYPE === StackType.COMPONENT;
+	const isComponentStack = stackType === StackType.COMPONENT;
 	const backdropBehavior: BackdropBehavior =
 		runtimeBackdropBehavior ??
-		current.options.backdropBehavior ??
+		descriptorBackdropBehavior ??
 		(isComponentStack ? "passthrough" : "block");
 
 	const pointerEvents =

package/src/shared/components/screen-container/hooks/use-content-layout.ts

@@ -1,10 +1,7 @@
 import { useCallback } from "react";
 import { type LayoutChangeEvent, useWindowDimensions } from "react-native";
 import { runOnUI } from "react-native-reanimated";
-import {
-	useDescriptorDerivations,
-	useDescriptors,
-} from "../../../providers/screen/descriptors";
+import { useDescriptorsStore } from "../../../providers/screen/descriptors";
 import { AnimationStore } from "../../../stores/animation.store";
 import {
 	LifecycleTransitionRequestKind,
@@ -12,10 +9,16 @@ import {
 } from "../../../stores/system.store";
 
 export function useContentLayout() {
-	const { current } = useDescriptors();
-	const { isFirstKey } = useDescriptorDerivations();
+	const routeKey = useDescriptorsStore(
+		(store) => store.derivations.currentScreenKey,
+	);
+	const isFirstKey = useDescriptorsStore(
+		(store) => store.derivations.isFirstKey,
+	);
+	const experimental_animateOnInitialMount = useDescriptorsStore(
+		(store) => store.options.experimental_animateOnInitialMount,
+	);
 	const { height: screenHeight } = useWindowDimensions();
-	const routeKey = current.route.key;
 	const animations = AnimationStore.getBag(routeKey);
 	const system = SystemStore.getBag(routeKey);
 
@@ -23,9 +26,6 @@ export function useContentLayout() {
 		system;
 	const { requestLifecycleTransition } = system.actions;
 
-	const experimental_animateOnInitialMount =
-		current.options.experimental_animateOnInitialMount;
-
 	return useCallback(
 		(event: LayoutChangeEvent) => {
 			const { width, height } = event.nativeEvent.layout;

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

@@ -3,7 +3,7 @@ import { Pressable, StyleSheet } from "react-native";
 import Animated, { runOnUI } from "react-native-reanimated";
 import { DefaultSnapSpec } from "../../../configs/specs";
 import { useNavigationHelpers } from "../../../hooks/navigation/use-navigation-helpers";
-import { useDescriptors } from "../../../providers/screen/descriptors";
+import { useDescriptorsStore } from "../../../providers/screen/descriptors";
 import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
 import { AnimationStore } from "../../../stores/animation.store";
 import { GestureStore } from "../../../stores/gesture.store";
@@ -23,11 +23,23 @@ export const BackdropLayer = memo(function BackdropLayer({
 	backdropBehavior: BackdropBehavior;
 	isBackdropActive: boolean;
 }) {
-	const { current } = useDescriptors();
 	const { dismissScreen } = useNavigationHelpers();
 
-	const BackdropComponent = current.options.backdropComponent;
-	const routeKey = current.route.key;
+	const routeKey = useDescriptorsStore(
+		(store) => store.derivations.currentScreenKey,
+	);
+	const BackdropComponent = useDescriptorsStore(
+		(store) => store.options.backdropComponent,
+	);
+	const rawSnapPoints = useDescriptorsStore(
+		(store) => store.options.snapPoints,
+	);
+	const canDismiss = useDescriptorsStore(
+		(store) => store.options.gestureEnabled !== false,
+	);
+	const transitionSpec = useDescriptorsStore(
+		(store) => store.options.transitionSpec,
+	);
 	const animations = AnimationStore.getBag(routeKey);
 	const { targetProgress, animationProgress, resolvedAutoSnapPoint } =
 		SystemStore.getBag(routeKey);
@@ -49,9 +61,6 @@ export const BackdropLayer = memo(function BackdropLayer({
 		}
 
 		if (backdropBehavior === "collapse") {
-			const rawSnapPoints = current.options.snapPoints;
-			const canDismiss = current.options.gestureEnabled !== false;
-
 			// No snap points → fallback to dismiss
 			if (!rawSnapPoints || rawSnapPoints.length === 0) {
 				dismissScreen();
@@ -59,7 +68,6 @@ export const BackdropLayer = memo(function BackdropLayer({
 			}
 
 			const gestures = GestureStore.getBag(routeKey);
-			const transitionSpec = current.options.transitionSpec;
 
 			runOnUI(() => {
 				"worklet";
@@ -95,6 +103,7 @@ export const BackdropLayer = memo(function BackdropLayer({
 
 				animateToProgress({
 					target,
+					markEntering: false,
 					spec,
 					animations,
 					targetProgress,
@@ -109,7 +118,9 @@ export const BackdropLayer = memo(function BackdropLayer({
 		animationProgress,
 		resolvedAutoSnapPoint,
 		backdropBehavior,
-		current,
+		rawSnapPoints,
+		canDismiss,
+		transitionSpec,
 		dismissScreen,
 		routeKey,
 	]);

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

@@ -3,9 +3,8 @@ import { type ComponentType, memo, useMemo } from "react";
 import { StyleSheet, View } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
 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 { useDescriptorsStore } from "../../../providers/screen/descriptors";
+import { useGestureStore } from "../../../providers/screen/gestures";
 import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
 import type { ScreenContentComponentProps } from "../../../types";
 import { ScreenFallbackHost } from "../../boundary/portal/components/boundary-portal/components/host";
@@ -22,11 +21,16 @@ type Props = {
 
 export const ContentLayer = memo(
 	({ children, pointerEvents, isBackdropActive }: Props) => {
-		const { current } = useDescriptors();
-
-		const gestureContext = useGestureContext();
-		const ContentComponent = current.options.contentComponent;
-		const isNavigationMaskEnabled = !!current.options.navigationMaskEnabled;
+		const gestureContext = useGestureStore();
+		const ContentComponent = useDescriptorsStore(
+			(store) => store.options.contentComponent,
+		);
+		const isNavigationMaskEnabled = useDescriptorsStore(
+			(store) => !!store.options.navigationMaskEnabled,
+		);
+		const hasAutoSnapPoint = useDescriptorsStore(
+			(store) => store.options.snapPoints?.includes("auto") ?? false,
+		);
 		const contentPointerEvents = isBackdropActive ? "box-none" : pointerEvents;
 
 		const AnimatedContentComponent = useMemo(() => {
@@ -37,9 +41,6 @@ export const ContentLayer = memo(
 				: null;
 		}, [ContentComponent]);
 
-		const hasAutoSnapPoint =
-			current.options.snapPoints?.includes("auto") ?? false;
-
 		const handleContentLayout = useContentLayout();
 
 		const animatedContentStyle = useSlotStyles("content");
@@ -57,16 +58,14 @@ export const ContentLayer = memo(
 				enabled={isNavigationMaskEnabled}
 			>
 				<SurfaceContainer pointerEvents={contentPointerEvents}>
-					<OriginProvider>
-						{hasAutoSnapPoint ? (
-							<View collapsable={false} onLayout={handleContentLayout}>
-								{children}
-							</View>
-						) : (
-							children
-						)}
-						<ScreenFallbackHost />
-					</OriginProvider>
+					{hasAutoSnapPoint ? (
+						<View collapsable={false} onLayout={handleContentLayout}>
+							{children}
+						</View>
+					) : (
+						children
+					)}
+					<ScreenFallbackHost />
 				</SurfaceContainer>
 			</MaybeMaskedNavigationContainer>
 		);

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

@@ -1,7 +1,7 @@
 import { type ComponentType, memo, useMemo } from "react";
 import { StyleSheet, type ViewProps } from "react-native";
 import Animated from "react-native-reanimated";
-import { useDescriptors } from "../../../providers/screen/descriptors";
+import { useDescriptorsStore } from "../../../providers/screen/descriptors";
 import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
 
 type Props = {
@@ -10,10 +10,10 @@ type Props = {
 };
 
 export const SurfaceContainer = memo(({ children, pointerEvents }: Props) => {
-	const { current } = useDescriptors();
-
 	/** @deprecated Use `contentComponent` instead. */
-	const DeprecatedSurfaceComponent = current.options.surfaceComponent;
+	const DeprecatedSurfaceComponent = useDescriptorsStore(
+		(store) => store.options.surfaceComponent,
+	);
 
 	const AnimatedSurfaceComponent = useMemo<ComponentType<any> | null>(() => {
 		return DeprecatedSurfaceComponent