react-native-screen-transitions 3.4.0-alpha.6 → 3.4.0-alpha.7

package/src/shared/components/create-boundary-component/index.tsx

@@ -1,254 +1,15 @@
-import {
-	type ComponentType,
-	forwardRef,
-	memo,
-	useCallback,
-	useMemo,
-} from "react";
-import { Pressable, View as RNView, type View } from "react-native";
-import Animated, { runOnUI, useAnimatedRef } from "react-native-reanimated";
-import { useAssociatedStyles } from "../../hooks/animation/use-associated-style";
-import { useLayoutAnchorContext } from "../../providers/layout-anchor.provider";
-import { useDescriptorDerivations } from "../../providers/screen/descriptors";
-import { AnimationStore } from "../../stores/animation.store";
-import { BoundStore } from "../../stores/bounds";
-import { prepareStyleForBounds } from "../../utils/bounds/helpers/styles";
-import { useAutoSourceMeasurement } from "./hooks/use-auto-source-measurement";
-import { useBoundaryMeasureAndStore } from "./hooks/use-boundary-measure-and-store";
-import { useBoundaryPresence } from "./hooks/use-boundary-presence";
-import { useGroupActiveMeasurement } from "./hooks/use-group-active-measurement";
-import { useGroupActiveSourceMeasurement } from "./hooks/use-group-active-source-measurement";
-import { useInitialLayoutHandler } from "./hooks/use-initial-layout-handler";
-import { usePendingDestinationMeasurement } from "./hooks/use-pending-destination-measurement";
-import { usePendingDestinationRetryMeasurement } from "./hooks/use-pending-destination-retry-measurement";
-import { useScrollSettledMeasurement } from "./hooks/use-scroll-settled-measurement";
-import type { BoundaryComponentProps, BoundaryConfigProps } from "./types";
-import { buildBoundaryMatchKey } from "./utils/build-boundary-match-key";
+import { View } from "react-native";
+import { Pressable } from "react-native-gesture-handler";
+import { BoundaryTarget } from "./components/boundary-target";
+import { createBoundaryComponent } from "./create-boundary-component";
 
-const setGroupSelectionOnUI = (group: string, id: string) => {
-	"worklet";
-	BoundStore.setGroupActiveId(group, id);
-};
-
-interface CreateBoundaryComponentOptions {
-	alreadyAnimated?: boolean;
-}
-
-export function createBoundaryComponent<P extends object>(
-	Wrapped: ComponentType<P>,
-	options: CreateBoundaryComponentOptions = {},
-) {
-	const { alreadyAnimated = false } = options;
-	const AnimatedComponent = alreadyAnimated
-		? Wrapped
-		: Animated.createAnimatedComponent(Wrapped);
-
-	const Inner = forwardRef<
-		React.ComponentRef<typeof AnimatedComponent>,
-		BoundaryComponentProps<P>
-	>((props, _ref) => {
-		const {
-			enabled = true,
-			group,
-			id,
-			anchor,
-			scaleMode,
-			target,
-			method,
-			style,
-			onPress,
-			...rest
-		} = props as any;
-
-		const sharedBoundTag = buildBoundaryMatchKey({ group, id });
-		const animatedRef = useAnimatedRef<View>();
-
-		const {
-			previousScreenKey: preferredSourceScreenKey,
-			currentScreenKey,
-			nextScreenKey,
-			ancestorKeys,
-			navigatorKey,
-			ancestorNavigatorKeys,
-			hasConfiguredInterpolator,
-		} = useDescriptorDerivations();
-		const runtimeEnabled = enabled && hasConfiguredInterpolator;
-		const hasNextScreen = !!nextScreenKey;
-		const shouldUpdateDestination = !hasNextScreen;
-		const layoutAnchor = useLayoutAnchorContext();
-		const boundaryConfig = useMemo<BoundaryConfigProps | undefined>(() => {
-			if (
-				anchor === undefined &&
-				scaleMode === undefined &&
-				target === undefined &&
-				method === undefined
-			) {
-				return undefined;
-			}
-
-			return {
-				anchor,
-				scaleMode,
-				target,
-				method,
-			};
-		}, [anchor, scaleMode, target, method]);
-
-		const isAnimating = AnimationStore.getValue(currentScreenKey, "animating");
-		const progress = AnimationStore.getValue(currentScreenKey, "progress");
-
-		const preparedStyles = useMemo(() => prepareStyleForBounds(style), [style]);
-
-		const { associatedStyles } = useAssociatedStyles({
-			id: sharedBoundTag,
-			resetTransformOnUnset: true,
-		});
-
-		const maybeMeasureAndStore = useBoundaryMeasureAndStore({
-			enabled,
-			sharedBoundTag,
-			preferredSourceScreenKey,
-			currentScreenKey,
-			ancestorKeys,
-			navigatorKey,
-			ancestorNavigatorKeys,
-			isAnimating,
-			preparedStyles,
-			animatedRef,
-			layoutAnchor,
-		});
-
-		const shouldRunDestinationEffects = runtimeEnabled && !hasNextScreen;
-
-		// Register/unregister this boundary in the presence map so source/destination
-		// matching can resolve across screens (including ancestor relationships).
-		useBoundaryPresence({
-			enabled: runtimeEnabled,
-			sharedBoundTag,
-			currentScreenKey,
-			ancestorKeys,
-			navigatorKey,
-			ancestorNavigatorKeys,
-			boundaryConfig,
-		});
+export { createBoundaryComponent };
 
-		// On the source screen, capture source bounds when a matching destination
-		// appears on the next screen.
-		useAutoSourceMeasurement({
-			enabled: runtimeEnabled,
-			sharedBoundTag,
-			nextScreenKey,
-			maybeMeasureAndStore,
-		});
-
-		// Primary destination capture: once a pending source link exists for this tag,
-		// measure destination bounds and complete the pair.
-		usePendingDestinationMeasurement({
-			sharedBoundTag,
-			enabled: shouldRunDestinationEffects,
-			expectedSourceScreenKey: preferredSourceScreenKey,
-			maybeMeasureAndStore,
-		});
-
-		// Reliability fallback: retry destination capture during transition progress
-		// when the initial pending-destination attempt happens before layout is ready.
-		usePendingDestinationRetryMeasurement({
-			sharedBoundTag,
-			enabled: shouldRunDestinationEffects,
-			currentScreenKey,
-			expectedSourceScreenKey: preferredSourceScreenKey,
-			progress,
-			animating: isAnimating,
-			maybeMeasureAndStore,
-		});
-
-		// Grouped boundaries (e.g. paged/detail UIs): re-measure when this boundary
-		// becomes the active member so destination bounds stay accurate.
-		useGroupActiveMeasurement({
-			enabled: runtimeEnabled,
-			group,
-			id,
-			currentScreenKey,
-			shouldUpdateDestination,
-			maybeMeasureAndStore,
-		});
-
-		// Source-side grouped retargeting: when an unfocused/source boundary
-		// becomes the active member, refresh its snapshot and source link so
-		// close transitions do not use stale pre-scroll geometry.
-		useGroupActiveSourceMeasurement({
-			enabled: runtimeEnabled,
-			group,
-			id,
-			hasNextScreen,
-			isAnimating,
-			maybeMeasureAndStore,
-		});
-
-		// While idle on source screens, re-measure after scroll settles so a later
-		// close transition starts from up-to-date source geometry.
-		useScrollSettledMeasurement({
-			enabled: runtimeEnabled,
-			group,
-			hasNextScreen,
-			isAnimating,
-			maybeMeasureAndStore,
-		});
-
-		// Destination mount-time capture path: onLayout schedules a one-time UI-thread
-		// initial measurement when transitions are active.
-		useInitialLayoutHandler({
-			enabled: runtimeEnabled,
-			sharedBoundTag,
-			currentScreenKey,
-			ancestorKeys,
-			expectedSourceScreenKey: preferredSourceScreenKey,
-			maybeMeasureAndStore,
-		});
-
-		const handlePress = useCallback(
-			(...args: unknown[]) => {
-				// Press path has priority: capture source before user onPress/navigation.
-				if (group) {
-					runOnUI(setGroupSelectionOnUI)(group, String(id));
-				}
-				runOnUI(maybeMeasureAndStore)({ intent: "capture-source" });
-
-				if (typeof onPress === "function") {
-					onPress(...args);
-				}
-			},
-			[group, id, maybeMeasureAndStore, onPress],
-		);
-
-		const resolvedOnPress =
-			typeof onPress === "function" ? handlePress : undefined;
-
-		return (
-			<AnimatedComponent
-				{...(rest as any)}
-				ref={animatedRef}
-				style={[style, enabled ? associatedStyles : undefined]}
-				onPress={resolvedOnPress}
-				collapsable={false}
-			/>
-		);
-	});
-
-	return memo(Inner) as unknown as React.MemoExoticComponent<
-		React.ForwardRefExoticComponent<
-			BoundaryComponentProps<P> &
-				React.RefAttributes<React.ComponentRef<typeof Wrapped>>
-		>
-	>;
-}
-
-// Pre-built boundary component variants
-const BoundaryView = createBoundaryComponent(RNView);
+const BoundaryView = createBoundaryComponent(View);
+const BoundaryTrigger = createBoundaryComponent(Pressable);
 BoundaryView.displayName = "Transition.Boundary.View";
-
-const BoundaryPressable = createBoundaryComponent(Pressable);
-BoundaryPressable.displayName = "Transition.Boundary.Pressable";
+BoundaryTrigger.displayName = "Transition.Boundary.Trigger";
+BoundaryTarget.displayName = "Transition.Boundary.Target";
 
 /**
  * Shared-boundary components.
@@ -258,18 +19,21 @@ BoundaryPressable.displayName = "Transition.Boundary.Pressable";
  * 2. Destination screen captures bounds for the same tag.
  * 3. The link is updated as layout changes (group-active + scroll-settled paths).
  *
- * Press behavior:
- * - When a boundary has `onPress` (typically `Boundary.Pressable`), source
+ * Trigger behavior:
+ * - When a boundary has `onPress` (typically `Boundary.Trigger`), source
  *   measurement runs before the user callback. This gives navigation transitions
  *   fresh source geometry on the first frame.
  *
  * Use:
  * - `Boundary.View` for passive/shared elements.
- * - `Boundary.Pressable` for tappable elements that start navigation.
+ * - `Boundary.Trigger` for tappable elements that start navigation.
+ * - `Boundary.Target` to measure a nested descendant instead of the owner.
  */
 export const Boundary = {
 	/** Passive boundary wrapper (no built-in press semantics). */
 	View: BoundaryView,
 	/** Pressable boundary wrapper with press-priority source capture. */
-	Pressable: BoundaryPressable,
+	Trigger: BoundaryTrigger,
+	/** Optional nested measurement override inside a boundary owner. */
+	Target: BoundaryTarget,
 };

package/src/shared/components/create-boundary-component/providers/boundary-owner.provider.tsx

@@ -0,0 +1,109 @@
+import type React from "react";
+import {
+	createContext,
+	type ReactNode,
+	useCallback,
+	useContext,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import type { View } from "react-native";
+import type Animated from "react-native-reanimated";
+import type { AnimatedRef } from "react-native-reanimated";
+
+type BoundaryAssociatedStyle = React.ComponentProps<
+	typeof Animated.View
+>["style"];
+
+interface BoundaryOwnerContextValue {
+	ownerRef: AnimatedRef<View>;
+	registerTargetRef: (targetRef: AnimatedRef<View>) => void;
+	unregisterTargetRef: (targetRef: AnimatedRef<View>) => void;
+	activeTargetRef: AnimatedRef<View> | null;
+	associatedTargetStyles?: BoundaryAssociatedStyle;
+}
+
+const BoundaryOwnerContext = createContext<BoundaryOwnerContextValue | null>(
+	null,
+);
+
+const MULTIPLE_TARGETS_WARNING =
+	"[react-native-screen-transitions] Multiple Boundary.Target elements were rendered under the same boundary owner. The first registered target will be measured.";
+
+export const TARGET_OUTSIDE_OWNER_WARNING =
+	"[react-native-screen-transitions] Boundary.Target must be rendered inside a Boundary owner (Boundary.View, Boundary.Trigger, or a component created by createBoundaryComponent).";
+
+export const BoundaryOwnerProvider = (props: {
+	value: BoundaryOwnerContextValue;
+	children: ReactNode;
+}) => {
+	const { value, children } = props;
+
+	return (
+		<BoundaryOwnerContext.Provider value={value}>
+			{children}
+		</BoundaryOwnerContext.Provider>
+	);
+};
+
+export const useBoundaryOwnerContext = () => {
+	return useContext(BoundaryOwnerContext);
+};
+
+export const useBoundaryOwner = (params: {
+	ownerRef: AnimatedRef<View>;
+	associatedTargetStyles?: BoundaryAssociatedStyle;
+}) => {
+	const { ownerRef, associatedTargetStyles } = params;
+	const warnedAboutMultipleTargetsRef = useRef(false);
+	const [targetRefs, setTargetRefs] = useState<AnimatedRef<View>[]>([]);
+
+	const registerTargetRef = useCallback((targetRef: AnimatedRef<View>) => {
+		setTargetRefs((prev) => {
+			if (prev.includes(targetRef)) {
+				return prev;
+			}
+
+			if (
+				__DEV__ &&
+				prev.length > 0 &&
+				!warnedAboutMultipleTargetsRef.current
+			) {
+				warnedAboutMultipleTargetsRef.current = true;
+				console.warn(MULTIPLE_TARGETS_WARNING);
+			}
+
+			return [...prev, targetRef];
+		});
+	}, []);
+
+	const unregisterTargetRef = useCallback((targetRef: AnimatedRef<View>) => {
+		setTargetRefs((prev) =>
+			prev.filter((existingRef) => existingRef !== targetRef),
+		);
+	}, []);
+
+	const contextValue = useMemo(
+		() => ({
+			ownerRef,
+			registerTargetRef,
+			unregisterTargetRef,
+			activeTargetRef: targetRefs[0] ?? null,
+			associatedTargetStyles,
+		}),
+		[
+			ownerRef,
+			registerTargetRef,
+			unregisterTargetRef,
+			targetRefs,
+			associatedTargetStyles,
+		],
+	);
+
+	return {
+		contextValue,
+		hasActiveTarget: targetRefs.length > 0,
+		measuredRef: targetRefs[0] ?? ownerRef,
+	};
+};

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

@@ -5,13 +5,16 @@ import type { View } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
 import Animated, {
 	runOnUI,
+	useAnimatedProps,
 	useAnimatedRef,
+	useAnimatedStyle,
 	useComposedEventHandler,
 	useSharedValue,
 } from "react-native-reanimated";
-import { useAssociatedStyles } from "../hooks/animation/use-associated-style";
+import { NO_PROPS, NO_STYLES } from "../constants";
 import { useScrollRegistry } from "../hooks/gestures/use-scroll-registry";
 import { RegisterBoundsProvider } from "../providers/register-bounds.provider";
+import { useScreenStyles } from "../providers/screen/styles";
 import { ScrollSettleProvider } from "../providers/scroll-settle.provider";
 import type { TransitionAwareProps } from "../types/screen.types";
 
@@ -135,11 +138,36 @@ export function createTransitionAwareComponent<P extends object>(
 		} = props as any;
 
 		const animatedRef = useAnimatedRef<View>();
+		const { elementStylesMap } = useScreenStyles();
+		const associatedId = sharedBoundTag || styleId;
 
-		const { associatedStyles, associatedProps } = useAssociatedStyles({
-			id: sharedBoundTag || styleId,
-			style,
-			resetTransformOnUnset: !!sharedBoundTag,
+		const associatedStyles = useAnimatedStyle(() => {
+			"worklet";
+
+			if (!associatedId) {
+				return { opacity: 1 };
+			}
+
+			const baseStyle =
+				(elementStylesMap.value[associatedId]?.style as
+					| Record<string, any>
+					| undefined) ?? (NO_STYLES as Record<string, any>);
+
+			if ("opacity" in baseStyle) {
+				return baseStyle;
+			}
+
+			return { ...baseStyle, opacity: 1 };
+		});
+
+		const associatedProps = useAnimatedProps(() => {
+			"worklet";
+
+			if (!associatedId) {
+				return NO_PROPS;
+			}
+
+			return elementStylesMap.value[associatedId]?.props ?? NO_PROPS;
 		});
 
 		return (

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

@@ -5,7 +5,7 @@ import { useStack } from "../../../hooks/navigation/use-stack";
 import { ScreenAnimationProvider } from "../../../providers/screen/animation";
 import type { BaseDescriptor } from "../../../providers/screen/descriptors";
 import { DescriptorsProvider } from "../../../providers/screen/descriptors";
-import { ScreenStylesProvider } from "../../../providers/screen/styles.provider";
+import { ScreenStylesProvider } from "../../../providers/screen/styles";
 import type { OverlayScreenState } from "../../../types/overlay.types";
 
 import { getActiveFloatOverlay } from "../helpers/get-active-overlay";

package/src/shared/components/screen-container/index.tsx

@@ -1,6 +1,5 @@
 import { memo } from "react";
 import { StyleSheet, View } from "react-native";
-import { DeferredVisibilityHost } from "./deferred-visibility-host";
 import { useBackdropPointerEvents } from "./hooks/use-backdrop-pointer-events";
 import { BackdropLayer } from "./layers/backdrop";
 import { ContentLayer } from "./layers/content";
@@ -15,18 +14,16 @@ export const ScreenContainer = memo(({ children }: Props) => {
 
 	return (
 		<View style={styles.container} pointerEvents={pointerEvents}>
-			<DeferredVisibilityHost pointerEvents={pointerEvents}>
-				<BackdropLayer
-					isBackdropActive={isBackdropActive}
-					backdropBehavior={backdropBehavior}
-				/>
-				<ContentLayer
-					pointerEvents={pointerEvents}
-					isBackdropActive={isBackdropActive}
-				>
-					{children}
-				</ContentLayer>
-			</DeferredVisibilityHost>
+			<BackdropLayer
+				isBackdropActive={isBackdropActive}
+				backdropBehavior={backdropBehavior}
+			/>
+			<ContentLayer
+				pointerEvents={pointerEvents}
+				isBackdropActive={isBackdropActive}
+			>
+				{children}
+			</ContentLayer>
 		</View>
 	);
 });

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

@@ -9,7 +9,7 @@ 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.provider";
+import { useScreenStyles } from "../../../providers/screen/styles";
 import { AnimationStore } from "../../../stores/animation.store";
 import { GestureStore } from "../../../stores/gesture.store";
 import { SystemStore } from "../../../stores/system.store";
@@ -24,7 +24,7 @@ export const BackdropLayer = memo(function BackdropLayer({
 	backdropBehavior: BackdropBehavior;
 	isBackdropActive: boolean;
 }) {
-	const { stylesMap } = useScreenStyles();
+	const { layerStylesMap } = useScreenStyles();
 	const { current } = useDescriptors();
 	const { dismissScreen } = useNavigationHelpers();
 
@@ -111,12 +111,12 @@ export const BackdropLayer = memo(function BackdropLayer({
 
 	const animatedBackdropStyle = useAnimatedStyle(() => {
 		"worklet";
-		return stylesMap.value.backdrop?.style ?? NO_STYLES;
+		return layerStylesMap.value.backdrop?.style ?? NO_STYLES;
 	});
 
 	const animatedBackdropProps = useAnimatedProps(() => {
 		"worklet";
-		return stylesMap.value.backdrop?.props ?? NO_PROPS;
+		return layerStylesMap.value.backdrop?.props ?? NO_PROPS;
 	});
 
 	return (

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

@@ -9,7 +9,7 @@ import Animated, {
 import { NO_PROPS, NO_STYLES } from "../../../constants";
 import { useGestureContext } from "../../../providers/gestures";
 import { useDescriptors } from "../../../providers/screen/descriptors";
-import { useScreenStyles } from "../../../providers/screen/styles.provider";
+import { useScreenStyles } from "../../../providers/screen/styles";
 import { resolveNavigationMaskEnabled } from "../../../utils/resolve-screen-transition-options";
 import { useContentLayout } from "../hooks/use-content-layout";
 import { MaybeMaskedNavigationContainer } from "./maybe-masked-navigation-container";
@@ -23,7 +23,7 @@ type Props = {
 
 export const ContentLayer = memo(
 	({ children, pointerEvents, isBackdropActive }: Props) => {
-		const { stylesMap } = useScreenStyles();
+		const { layerStylesMap } = useScreenStyles();
 		const { current } = useDescriptors();
 
 		const gestureContext = useGestureContext();
@@ -39,12 +39,12 @@ export const ContentLayer = memo(
 
 		const animatedContentStyle = useAnimatedStyle(() => {
 			"worklet";
-			return stylesMap.value.content?.style || NO_STYLES;
+			return layerStylesMap.value.content?.style || NO_STYLES;
 		});
 
 		const animatedContentProps = useAnimatedProps(() => {
 			"worklet";
-			return stylesMap.value.content?.props ?? NO_PROPS;
+			return layerStylesMap.value.content?.props ?? NO_PROPS;
 		});
 
 		return (

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

@@ -6,7 +6,7 @@ import {
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,
 	NO_STYLES,
 } from "../../../constants";
-import { useScreenStyles } from "../../../providers/screen/styles.provider";
+import { useScreenStyles } from "../../../providers/screen/styles";
 import { logger } from "../../../utils/logger";
 
 type Props = {
@@ -27,19 +27,21 @@ let hasWarnedMissingMaskedView = false;
 
 export const MaybeMaskedNavigationContainer = memo(
 	({ enabled, children, pointerEvents }: Props) => {
-		const { stylesMap } = useScreenStyles();
+		const { layerStylesMap } = useScreenStyles();
 
 		const animatedNavigationMaskStyle = useAnimatedStyle(() => {
 			"worklet";
 			return (
-				stylesMap.value[NAVIGATION_MASK_ELEMENT_STYLE_ID]?.style || NO_STYLES
+				layerStylesMap.value[NAVIGATION_MASK_ELEMENT_STYLE_ID]?.style ||
+				NO_STYLES
 			);
 		});
 
 		const animatedNavigationMaskContainerStyle = useAnimatedStyle(() => {
 			"worklet";
 			return (
-				stylesMap.value[NAVIGATION_MASK_CONTAINER_STYLE_ID]?.style || NO_STYLES
+				layerStylesMap.value[NAVIGATION_MASK_CONTAINER_STYLE_ID]?.style ||
+				NO_STYLES
 			);
 		});
 

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

@@ -6,7 +6,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { NO_PROPS, NO_STYLES } from "../../../constants";
 import { useDescriptors } from "../../../providers/screen/descriptors";
-import { useScreenStyles } from "../../../providers/screen/styles.provider";
+import { useScreenStyles } from "../../../providers/screen/styles";
 
 type Props = {
 	children: React.ReactNode;
@@ -14,7 +14,7 @@ type Props = {
 };
 
 export const SurfaceContainer = memo(({ children, pointerEvents }: Props) => {
-	const { stylesMap } = useScreenStyles();
+	const { layerStylesMap } = useScreenStyles();
 	const { current } = useDescriptors();
 
 	const SurfaceComponent = current.options.surfaceComponent;
@@ -27,12 +27,12 @@ export const SurfaceContainer = memo(({ children, pointerEvents }: Props) => {
 
 	const animatedSurfaceStyle = useAnimatedStyle(() => {
 		"worklet";
-		return stylesMap.value.surface?.style ?? NO_STYLES;
+		return layerStylesMap.value.surface?.style ?? NO_STYLES;
 	});
 
 	const animatedSurfaceProps = useAnimatedProps(() => {
 		"worklet";
-		return stylesMap.value.surface?.props ?? NO_PROPS;
+		return layerStylesMap.value.surface?.props ?? NO_PROPS;
 	});
 
 	if (!AnimatedSurfaceComponent) return children;

package/src/shared/constants.ts

@@ -105,6 +105,7 @@ export const EMPTY_BOUND_HELPER_RESULT_RAW = Object.freeze({
 	translateY: 0,
 	width: 0,
 	height: 0,
+	...HIDDEN_STYLE,
 });
 export const ENTER_RANGE = [0, 1] as const;
 export const EXIT_RANGE = [1, 2] as const;

package/src/shared/index.ts

@@ -49,7 +49,6 @@ export type {
 	BoundsNavigationAccessor,
 	BoundsNavigationZoomOptions,
 	BoundsNavigationZoomStyle,
-	DeferredScreenStyleSignal,
 	OverlayProps,
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,

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

@@ -4,7 +4,7 @@ import { ScreenLifecycle } from "../../components/screen-lifecycle";
 import { ScreenGestureProvider } from "../gestures";
 import { ScreenAnimationProvider } from "./animation";
 import { type BaseDescriptor, DescriptorsProvider } from "./descriptors";
-import { ScreenStylesProvider } from "./styles.provider";
+import { ScreenStylesProvider } from "./styles";
 
 type Props<TDescriptor extends BaseDescriptor> = {
 	previous?: TDescriptor;