react-native-screen-transitions 3.4.0-alpha.2 → 3.4.0-alpha.3

package/lib/typescript/shared/providers/screen/helpers/resolve-interpolated-style-output.d.ts

@@ -0,0 +1,10 @@
+import type { NormalizedTransitionInterpolatedStyle } from "../../../types/animation.types";
+export type ScreenStyleResolutionMode = "pass-through" | "deferred" | "live";
+export type ResolvedInterpolatedStyleOutput = {
+    stylesMap: NormalizedTransitionInterpolatedStyle;
+    resolutionMode: ScreenStyleResolutionMode;
+    wasLegacy: boolean;
+};
+export declare const PASS_THROUGH_STYLE_OUTPUT: ResolvedInterpolatedStyleOutput;
+export declare const resolveInterpolatedStyleOutput: (raw: Record<string, any> | null | undefined) => ResolvedInterpolatedStyleOutput;
+//# sourceMappingURL=resolve-interpolated-style-output.d.ts.map

package/lib/typescript/shared/providers/screen/helpers/resolve-interpolated-style-output.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-interpolated-style-output.d.ts","sourceRoot":"","sources":["../../../../../../src/shared/providers/screen/helpers/resolve-interpolated-style-output.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qCAAqC,EAAE,MAAM,gCAAgC,CAAC;AAG5F,MAAM,MAAM,yBAAyB,GAAG,cAAc,GAAG,UAAU,GAAG,MAAM,CAAC;AAE7E,MAAM,MAAM,+BAA+B,GAAG;IAC7C,SAAS,EAAE,qCAAqC,CAAC;IACjD,cAAc,EAAE,yBAAyB,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;CACnB,CAAC;AAIF,eAAO,MAAM,yBAAyB,EAAE,+BAIvC,CAAC;AAEF,eAAO,MAAM,8BAA8B,GAC1C,KAAK,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,GAAG,SAAS,KACzC,+BAmBF,CAAC"}

package/lib/typescript/shared/providers/screen/styles.provider.d.ts

@@ -1,13 +1,15 @@
 import { type ReactNode } from "react";
 import { type SharedValue } from "react-native-reanimated";
 import type { NormalizedTransitionInterpolatedStyle } from "../../types/animation.types";
+import { type ScreenStyleResolutionMode } from "./helpers/resolve-interpolated-style-output";
 type Props = {
     children: ReactNode;
 };
 type ScreenStylesContextValue = {
     stylesMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
     ancestorStylesMaps: SharedValue<NormalizedTransitionInterpolatedStyle>[];
+    resolutionMode: SharedValue<ScreenStyleResolutionMode>;
 };
-declare const ScreenStylesProvider: import("react").FC<Props>, useScreenStyles: () => ScreenStylesContextValue;
-export { ScreenStylesProvider, useScreenStyles };
+export declare const ScreenStylesProvider: import("react").FC<Props>, ScreenStylesContext: import("react").Context<ScreenStylesContextValue>, useScreenStyles: () => ScreenStylesContextValue;
+export {};
 //# sourceMappingURL=styles.provider.d.ts.map

package/lib/typescript/shared/providers/screen/styles.provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.provider.d.ts","sourceRoot":"","sources":["../../../../../src/shared/providers/screen/styles.provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAC5D,OAAO,EACN,KAAK,WAAW,EAGhB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,qCAAqC,EAAE,MAAM,6BAA6B,CAAC;AAMzF,KAAK,KAAK,GAAG;IACZ,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC/B,SAAS,EAAE,WAAW,CAAC,qCAAqC,CAAC,CAAC;IAC9D,kBAAkB,EAAE,WAAW,CAAC,qCAAqC,CAAC,EAAE,CAAC;CACzE,CAAC;AAEF,QAAA,MACC,oBAAoB,6BAEI,eAAe,gCA6GvC,CAAC;AAEF,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"styles.provider.d.ts","sourceRoot":"","sources":["../../../../../src/shared/providers/screen/styles.provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAC5D,OAAO,EACN,KAAK,WAAW,EAGhB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,qCAAqC,EAAE,MAAM,6BAA6B,CAAC;AAIzF,OAAO,EAGN,KAAK,yBAAyB,EAC9B,MAAM,6CAA6C,CAAC;AAErD,KAAK,KAAK,GAAG;IACZ,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC/B,SAAS,EAAE,WAAW,CAAC,qCAAqC,CAAC,CAAC;IAC9D,kBAAkB,EAAE,WAAW,CAAC,qCAAqC,CAAC,EAAE,CAAC;IACzE,cAAc,EAAE,WAAW,CAAC,yBAAyB,CAAC,CAAC;CACvD,CAAC;AAEF,eAAO,MACN,oBAAoB,6BACpB,mBAAmB,qDACK,eAAe,gCAiIvC,CAAC"}

package/lib/typescript/shared/types/animation.types.d.ts

@@ -142,7 +142,12 @@ export interface ScreenInterpolationProps {
      */
     inactive: ScreenTransitionState | undefined;
 }
-export type ScreenStyleInterpolator = (props: ScreenInterpolationProps) => TransitionInterpolatedStyle;
+/**
+ * Returning `null` explicitly defers rendering of the screen's visual subtree
+ * for the current frame. Returning an object applies transition styles
+ * immediately.
+ */
+export type ScreenStyleInterpolator = (props: ScreenInterpolationProps) => TransitionInterpolatedStyle | null;
 /**
  * Animated style properties with full autocomplete.
  *

package/lib/typescript/shared/types/animation.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animation.types.d.ts","sourceRoot":"","sources":["../../../../src/shared/types/animation.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"animation.types.d.ts","sourceRoot":"","sources":["../../../../src/shared/types/animation.types.ts"],"names":[],"mappings":"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"}

package/lib/typescript/shared/types/screen.types.d.ts

@@ -68,6 +68,11 @@ export type TransitionAwareProps<T extends object> = AnimatedProps<T> & {
 export type ScreenTransitionConfig = {
     /**
      * The user-provided function to calculate styles based on animation progress.
+     *
+     * Return `null` to explicitly defer rendering of the screen's visual subtree
+     * until a later frame. This is useful for transitions such as
+     * `bounds().navigation.zoom()` where the screen should stay hidden until the
+     * interpolator has enough state to produce a safe first frame.
      */
     screenStyleInterpolator?: ScreenStyleInterpolator;
     /**

package/lib/typescript/shared/types/screen.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screen.types.d.ts","sourceRoot":"","sources":["../../../../src/shared/types/screen.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"screen.types.d.ts","sourceRoot":"","sources":["../../../../src/shared/types/screen.types.ts"],"names":[],"mappings":"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"}

package/lib/typescript/shared/utils/bounds/helpers/compute-bounds-styles.d.ts

@@ -1,4 +1,14 @@
 import { type ResolvedTransitionPair } from "../../../stores/bounds";
 import type { BoundsComputeParams, BoundsOptions } from "../types/options";
-export declare const computeBoundStyles: ({ id, previous, current, next, progress, dimensions }: BoundsComputeParams, computeOptions?: BoundsOptions, resolvedPair?: ResolvedTransitionPair) => Readonly<{}>;
+export declare const computeBoundStyles: ({ id, previous, current, next, progress, dimensions }: BoundsComputeParams, computeOptions?: BoundsOptions, resolvedPair?: ResolvedTransitionPair) => import("react-native-reanimated").StyleProps | Readonly<{
+    opacity: 0;
+}> | Readonly<{
+    scaleX: 1;
+    scaleY: 1;
+    scale: 1;
+    translateX: 0;
+    translateY: 0;
+    width: 0;
+    height: 0;
+}>;
 //# sourceMappingURL=compute-bounds-styles.d.ts.map

package/lib/typescript/shared/utils/bounds/helpers/compute-bounds-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compute-bounds-styles.d.ts","sourceRoot":"","sources":["../../../../../../src/shared/utils/bounds/helpers/compute-bounds-styles.ts"],"names":[],"mappings":"AAQA,OAAO,EAEN,KAAK,sBAAsB,EAC3B,MAAM,wBAAwB,CAAC;AAGhC,OAAO,KAAK,EAEX,mBAAmB,EACnB,aAAa,EACb,MAAM,kBAAkB,CAAC;AAoG1B,eAAO,MAAM,kBAAkB,GAC9B,uDAAuD,mBAAmB,EAC1E,iBAAgB,aAAkC,EAClD,eAAe,sBAAsB,iBAiGrC,CAAC"}
+{"version":3,"file":"compute-bounds-styles.d.ts","sourceRoot":"","sources":["../../../../../../src/shared/utils/bounds/helpers/compute-bounds-styles.ts"],"names":[],"mappings":"AASA,OAAO,EAEN,KAAK,sBAAsB,EAC3B,MAAM,wBAAwB,CAAC;AAGhC,OAAO,KAAK,EAEX,mBAAmB,EACnB,aAAa,EACb,MAAM,kBAAkB,CAAC;AAoG1B,eAAO,MAAM,kBAAkB,GAC9B,uDAAuD,mBAAmB,EAC1E,iBAAgB,aAAkC,EAClD,eAAe,sBAAsB;;;;;;;;;;EAiGrC,CAAC"}

package/lib/typescript/shared/utils/bounds/zoom/accessor.d.ts

@@ -11,7 +11,7 @@ type ZoomAccessorParams = {
     zoomBaseOptions?: Pick<BoundsNavigationZoomOptions, "anchor" | "scaleMode" | "target">;
 };
 export declare const createZoomAccessor: ({ id, group, getProps, resolveBoundTag, computeRaw, zoomBaseOptions, }: ZoomAccessorParams) => {
-    zoom: (options?: BoundsNavigationZoomOptions) => import("../../..").TransitionInterpolatedStyle;
+    zoom: (options?: BoundsNavigationZoomOptions) => import("../../..").TransitionInterpolatedStyle | null;
 };
 export {};
 //# sourceMappingURL=accessor.d.ts.map

package/lib/typescript/shared/utils/bounds/zoom/build.d.ts

@@ -1,4 +1,4 @@
-import type { TransitionInterpolatedStyle } from "../../../types/animation.types";
+import type { ScreenStyleInterpolator } from "../../../types/animation.types";
 import type { BuildZoomStylesParams } from "./types";
-export declare const buildZoomStyles: ({ id, group, zoomOptions, props, resolveTag, computeRaw, }: BuildZoomStylesParams) => TransitionInterpolatedStyle;
+export declare const buildZoomStyles: ({ id, group, zoomOptions, props, resolveTag, computeRaw, }: BuildZoomStylesParams) => ReturnType<ScreenStyleInterpolator>;
 //# sourceMappingURL=build.d.ts.map

package/lib/typescript/shared/utils/bounds/zoom/build.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../../../../../src/shared/utils/bounds/zoom/build.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AASlF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAwarD,eAAO,MAAM,eAAe,GAAI,4DAO7B,qBAAqB,KAAG,2BAuQ1B,CAAC"}
+{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../../../../../src/shared/utils/bounds/zoom/build.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACX,uBAAuB,EAEvB,MAAM,gCAAgC,CAAC;AASxC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAwarD,eAAO,MAAM,eAAe,GAAI,4DAO7B,qBAAqB,KAAG,UAAU,CAAC,uBAAuB,CAuQ5D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-screen-transitions",
-	"version": "3.4.0-alpha.2",
+	"version": "3.4.0-alpha.3",
 	"description": "Easy screen transitions for React Native and Expo",
 	"author": "Ed",
 	"license": "MIT",

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

@@ -108,7 +108,6 @@ export function createBoundaryComponent<P extends object>(
 		const { associatedStyles } = useAssociatedStyles({
 			id: sharedBoundTag,
 			resetTransformOnUnset: true,
-			waitForFirstResolvedStyle: true,
 		});
 
 		const maybeMeasureAndStore = useBoundaryMeasureAndStore({

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

@@ -140,7 +140,6 @@ export function createTransitionAwareComponent<P extends object>(
 			id: sharedBoundTag || styleId,
 			style,
 			resetTransformOnUnset: !!sharedBoundTag,
-			waitForFirstResolvedStyle: false,
 		});
 
 		return (

package/src/shared/components/screen-container/deferred-visibility-host.tsx

@@ -0,0 +1,37 @@
+import { memo } from "react";
+import { StyleSheet } from "react-native";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { HIDDEN_STYLE, NO_STYLES } from "../../constants";
+import { useScreenStyles } from "../../providers/screen/styles.provider";
+
+type Props = {
+	children: React.ReactNode;
+};
+
+/**
+ * Hides the full screen visual subtree while an interpolator explicitly reports
+ * that it is not safe to reveal yet.
+ *
+ * This sits above backdrop/content/mask/surface so a deferred transition does
+ * not leak raw first-paint UI from nested layers.
+ */
+export const DeferredVisibilityHost = memo(({ children }: Props) => {
+	const { resolutionMode } = useScreenStyles();
+
+	const animatedStyle = useAnimatedStyle(() => {
+		"worklet";
+		return resolutionMode.value === "deferred" ? HIDDEN_STYLE : NO_STYLES;
+	});
+
+	return (
+		<Animated.View collapsable={false} style={[styles.host, animatedStyle]}>
+			{children}
+		</Animated.View>
+	);
+});
+
+const styles = StyleSheet.create({
+	host: {
+		flex: 1,
+	},
+});

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

@@ -1,5 +1,6 @@
 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";
@@ -13,8 +14,10 @@ export const ScreenContainer = memo(({ children }: Props) => {
 
 	return (
 		<View style={styles.container} pointerEvents={pointerEvents}>
-			<BackdropLayer />
-			<ContentLayer>{children}</ContentLayer>
+			<DeferredVisibilityHost>
+				<BackdropLayer />
+				<ContentLayer>{children}</ContentLayer>
+			</DeferredVisibilityHost>
 		</View>
 	);
 });

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

@@ -6,7 +6,11 @@ import Animated, {
 	useAnimatedProps,
 	useAnimatedStyle,
 } from "react-native-reanimated";
-import { NO_PROPS, NO_STYLES } from "../../../constants";
+import {
+	NAVIGATION_MASK_CONTAINER_STYLE_ID,
+	NO_PROPS,
+	NO_STYLES,
+} from "../../../constants";
 import { useGestureContext } from "../../../providers/gestures";
 import { useDescriptors } from "../../../providers/screen/descriptors";
 import { useScreenStyles } from "../../../providers/screen/styles.provider";
@@ -29,6 +33,7 @@ export const ContentLayer = memo(({ children }: Props) => {
 	const contentPointerEvents = isBackdropActive ? "box-none" : pointerEvents;
 	const hasAutoSnapPoint =
 		current.options.snapPoints?.includes("auto") ?? false;
+
 	const handleContentLayout = useContentLayout();
 
 	const animatedContentStyle = useAnimatedStyle(() => {
@@ -36,11 +41,51 @@ export const ContentLayer = memo(({ children }: Props) => {
 		return stylesMap.value.content?.style || NO_STYLES;
 	});
 
+	const animatedNavigationContainerStyle = useAnimatedStyle(() => {
+		"worklet";
+		return (
+			stylesMap.value[NAVIGATION_MASK_CONTAINER_STYLE_ID]?.style || NO_STYLES
+		);
+	});
+
 	const animatedContentProps = useAnimatedProps(() => {
 		"worklet";
 		return stylesMap.value.content?.props ?? NO_PROPS;
 	});
 
+	const surfaceChildren = (
+		<SurfaceContainer pointerEvents={contentPointerEvents}>
+			{hasAutoSnapPoint ? (
+				<View collapsable={false} onLayout={handleContentLayout}>
+					{children}
+				</View>
+			) : (
+				children
+			)}
+		</SurfaceContainer>
+	);
+
+	const navigationContainer = (
+		<Animated.View
+			style={[styles.navigationContainer, animatedNavigationContainerStyle]}
+			pointerEvents={contentPointerEvents}
+			collapsable={false}
+		>
+			{surfaceChildren}
+		</Animated.View>
+	);
+
+	const navigationScopedChildren = isNavigationMaskEnabled ? (
+		<MaybeMaskedNavigationContainer
+			pointerEvents={contentPointerEvents}
+			enabled={isNavigationMaskEnabled}
+		>
+			{navigationContainer}
+		</MaybeMaskedNavigationContainer>
+	) : (
+		navigationContainer
+	);
+
 	return (
 		<GestureDetector gesture={gestureContext!.panGesture}>
 			<Animated.View
@@ -48,20 +93,7 @@ export const ContentLayer = memo(({ children }: Props) => {
 				animatedProps={animatedContentProps}
 				pointerEvents={contentPointerEvents}
 			>
-				<MaybeMaskedNavigationContainer
-					pointerEvents={contentPointerEvents}
-					enabled={isNavigationMaskEnabled}
-				>
-					<SurfaceContainer pointerEvents={contentPointerEvents}>
-						{hasAutoSnapPoint ? (
-							<View collapsable={false} onLayout={handleContentLayout}>
-								{children}
-							</View>
-						) : (
-							children
-						)}
-					</SurfaceContainer>
-				</MaybeMaskedNavigationContainer>
+				{navigationScopedChildren}
 			</Animated.View>
 		</GestureDetector>
 	);
@@ -71,4 +103,7 @@ const styles = StyleSheet.create({
 	content: {
 		flex: 1,
 	},
+	navigationContainer: {
+		flex: 1,
+	},
 });

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

@@ -1,9 +1,8 @@
 import { memo, useEffect } from "react";
-import { Platform, StyleSheet, View, type ViewProps } from "react-native";
+import { StyleSheet, View, type ViewProps } from "react-native";
 import Animated, { useAnimatedStyle } from "react-native-reanimated";
 import {
-	NAVIGATION_CONTAINER_STYLE_ID,
-	NAVIGATION_MASK_STYLE_ID,
+	NAVIGATION_MASK_ELEMENT_STYLE_ID,
 	NO_STYLES,
 } from "../../../constants";
 import { useScreenStyles } from "../../../providers/screen/styles.provider";
@@ -24,19 +23,15 @@ try {
 }
 
 let hasWarnedMissingMaskedView = false;
-const IS_ANDROID = Platform.OS === "android";
 
 export const MaybeMaskedNavigationContainer = memo(
 	({ enabled, children, pointerEvents }: Props) => {
 		const { stylesMap } = useScreenStyles();
-		const animatedNavigationContainerStyle = useAnimatedStyle(() => {
-			"worklet";
-			return stylesMap.value[NAVIGATION_CONTAINER_STYLE_ID]?.style || NO_STYLES;
-		});
-
 		const animatedNavigationMaskStyle = useAnimatedStyle(() => {
 			"worklet";
-			return stylesMap.value[NAVIGATION_MASK_STYLE_ID]?.style || NO_STYLES;
+			return (
+				stylesMap.value[NAVIGATION_MASK_ELEMENT_STYLE_ID]?.style || NO_STYLES
+			);
 		});
 
 		useEffect(() => {
@@ -49,25 +44,10 @@ export const MaybeMaskedNavigationContainer = memo(
 				"navigationMaskEnabled requires @react-native-masked-view/masked-view. Install it to enable navigation bounds masking.",
 			);
 		}, [enabled]);
-
-		const navigationContainer = (
-			<Animated.View
-				style={[styles.navigationContainer, animatedNavigationContainerStyle]}
-				pointerEvents={pointerEvents}
-				collapsable={false}
-				renderToHardwareTextureAndroid={IS_ANDROID && !enabled}
-				needsOffscreenAlphaCompositing={IS_ANDROID && !enabled}
-			>
-				{children}
-			</Animated.View>
-		);
-
-		// Navigation zoom uses the root container transform even when the mask
-		// wrapper is disabled. Only the mask element itself is optional.
-		if (!enabled) return navigationContainer;
+		if (!enabled) return children;
 
 		if (LazyMaskedView === View) {
-			return navigationContainer;
+			return children;
 		}
 
 		return (
@@ -82,7 +62,7 @@ export const MaybeMaskedNavigationContainer = memo(
 				}
 				pointerEvents={pointerEvents}
 			>
-				{navigationContainer}
+				{children}
 			</LazyMaskedView>
 		);
 	},
@@ -95,7 +75,4 @@ const styles = StyleSheet.create({
 	navigationMaskElement: {
 		backgroundColor: "white",
 	},
-	navigationContainer: {
-		flex: 1,
-	},
 });

package/src/shared/configs/presets.ts

@@ -5,8 +5,8 @@ import {
 	interpolateColor,
 } from "react-native-reanimated";
 import {
-	NAVIGATION_CONTAINER_STYLE_ID,
-	NAVIGATION_MASK_STYLE_ID,
+	NAVIGATION_MASK_CONTAINER_STYLE_ID,
+	NAVIGATION_MASK_ELEMENT_STYLE_ID,
 } from "../constants";
 import type { ScreenTransitionConfig } from "../types/screen.types";
 import { normalizeInterpolatedStyle } from "../utils/normalize-interpolated-style";
@@ -286,10 +286,10 @@ export const SharedIGImage = ({
 			const sourceStyle = navigationStyles[sharedBoundTag] as
 				| Record<string, unknown>
 				| undefined;
-			const containerStyle = navigationStyles[NAVIGATION_CONTAINER_STYLE_ID] as
-				| Record<string, unknown>
-				| undefined;
-			const maskStyle = navigationStyles[NAVIGATION_MASK_STYLE_ID] as
+			const containerStyle = navigationStyles[
+				NAVIGATION_MASK_CONTAINER_STYLE_ID
+			] as Record<string, unknown> | undefined;
+			const maskStyle = navigationStyles[NAVIGATION_MASK_ELEMENT_STYLE_ID] as
 				| Record<string, unknown>
 				| undefined;
 
@@ -317,7 +317,7 @@ export const SharedIGImage = ({
 							],
 						},
 					},
-					[NAVIGATION_CONTAINER_STYLE_ID]: containerStyle
+					[NAVIGATION_MASK_CONTAINER_STYLE_ID]: containerStyle
 						? {
 								style: {
 									...containerStyle,
@@ -329,7 +329,7 @@ export const SharedIGImage = ({
 								},
 							}
 						: undefined,
-					[NAVIGATION_MASK_STYLE_ID]: maskStyle
+					[NAVIGATION_MASK_ELEMENT_STYLE_ID]: maskStyle
 						? {
 								style: {
 									...maskStyle,
@@ -623,7 +623,7 @@ export const SharedXImage = ({
 			const navigationStyles = bounds({
 				id: sharedBoundTag,
 			}).navigation.zoom();
-			const maskStyle = navigationStyles[NAVIGATION_MASK_STYLE_ID] as
+			const maskStyle = navigationStyles[NAVIGATION_MASK_ELEMENT_STYLE_ID] as
 				| Record<string, unknown>
 				| undefined;
 
@@ -654,7 +654,7 @@ export const SharedXImage = ({
 
 			return {
 				...normalizedNav,
-				[NAVIGATION_MASK_STYLE_ID]: maskStyle
+				[NAVIGATION_MASK_ELEMENT_STYLE_ID]: maskStyle
 					? {
 							style: {
 								...maskStyle,

package/src/shared/constants.ts

@@ -8,6 +8,7 @@ import type { BaseStackRoute } from "./types/stack.types";
 
 /**
  * Masked view integration
+ * @deprecated No longer in use. Use {@link NAVIGATION_MASK_ELEMENT_STYLE_ID} and {@link NAVIGATION_MASK_CONTAINER_STYLE_ID} instead.
  */
 export const MASK_STYLE_ID = "_ROOT_MASKED";
 export const CONTAINER_STYLE_ID = "_ROOT_CONTAINER";
@@ -15,14 +16,15 @@ export const CONTAINER_STYLE_ID = "_ROOT_CONTAINER";
 /**
  * Navigation mask integration
  */
-export const NAVIGATION_MASK_HOST_FLAG_STYLE_ID = "_NAVIGATION_MASK_HOST";
-export const NAVIGATION_MASK_STYLE_ID = "_NAVIGATION_ROOT_MASK";
-export const NAVIGATION_CONTAINER_STYLE_ID = "_NAVIGATION_ROOT_CONTAINER";
+export const NAVIGATION_MASK_ELEMENT_STYLE_ID = "_NAVIGATION_ROOT_MASK";
+export const NAVIGATION_MASK_CONTAINER_STYLE_ID = "_NAVIGATION_ROOT_CONTAINER";
 
 /**
  * Styles
  */
 export const NO_STYLES = Object.freeze({});
+export const HIDDEN_STYLE = Object.freeze({ opacity: 0 });
+export const VISIBLE_STYLE = Object.freeze({ opacity: 1 });
 export const NO_PROPS = Object.freeze({});
 
 /**