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

package/src/shared/hooks/animation/use-associated-style.ts

@@ -4,7 +4,7 @@ import {
 	useAnimatedStyle,
 	useSharedValue,
 } from "react-native-reanimated";
-import { EPSILON, NO_PROPS, NO_STYLES } from "../../constants";
+import { NO_PROPS, NO_STYLES } from "../../constants";
 import { useDescriptorDerivations } from "../../providers/screen/descriptors";
 import { useScreenStyles } from "../../providers/screen/styles.provider";
 import { AnimationStore } from "../../stores/animation.store";
@@ -14,11 +14,9 @@ type Props = {
 	id?: string;
 	style?: StyleProps;
 	resetTransformOnUnset?: boolean;
-	waitForFirstResolvedStyle?: boolean;
 };
 
 const TRANSIENT_EMPTY_GRACE_FRAMES = 2;
-const TRANSITION_PROGRESS_COMPLETE = 1 - EPSILON;
 const IDENTITY_TRANSFORM = [
 	{ translateX: 0 },
 	{ translateY: 0 },
@@ -30,7 +28,7 @@ const ALWAYS_RESET_STYLE_VALUES = {
 	elevation: 0,
 } as const;
 
-type AssociatedStyleMode = "waiting-first-style" | "hold-last-style" | "live";
+type AssociatedStyleMode = "hold-last-style" | "live";
 
 type GroupTagParts = {
 	group: string;
@@ -126,33 +124,27 @@ const buildUnsetPatch = ({
 
 /**
  * Resolves the animated style associated with an `id` (styleId/bound tag), while
- * guarding against one-frame glitches during shared-boundary transitions.
+ * guarding against transient glitches during shared-boundary transitions.
  *
  * Why this exists:
  * - During push/pop, links and style maps can be briefly out of sync.
- * - Without guards, boundaries can flash raw layout for one frame.
+ * - Without guards, boundaries can briefly drop back to raw local layout.
  * - Cleanup must be deterministic so stale transform keys do not linger.
  *
- * Visual model (worklet state machine):
+ * Local style model (worklet state machine):
  *
- *   expected transition + no resolved style yet -> waiting-first-style
- *   expected transition + transient empty style map -> hold-last-style
+ *   transient empty style map -> hold-last-style
  *   otherwise -> live
  *
- * - `waiting-first-style`: return `opacity: 0` until first resolved style arrives.
  * - `hold-last-style`: reuse last resolved style through short empty-map gaps.
  * - `live`: apply current resolved style directly.
  *
  * For grouped tags (`group:id`), previous-screen transition evidence is only
  * considered for the group's active member to avoid hiding non-active siblings.
- *
- * Set `waitForFirstResolvedStyle` to `false` for generic shared-bound-tag usage
- * where the transition can be driven by other style ids.
  */
 export const useAssociatedStyles = ({
 	id,
 	resetTransformOnUnset = false,
-	waitForFirstResolvedStyle = true,
 }: Props = {}) => {
 	const { stylesMap, ancestorStylesMaps } = useScreenStyles();
 	const { previousScreenKey, currentScreenKey, hasConfiguredInterpolator } =
@@ -161,10 +153,6 @@ export const useAssociatedStyles = ({
 		currentScreenKey,
 		"animating",
 	);
-	const progress = AnimationStore.getRouteAnimation(
-		currentScreenKey,
-		"progress",
-	);
 	const isClosing = AnimationStore.getRouteAnimation(
 		currentScreenKey,
 		"closing",
@@ -195,12 +183,7 @@ export const useAssociatedStyles = ({
 		);
 
 		const hasPreviousKeys = hasAnyKeys(previousAppliedKeys.value);
-
 		const isTransitioning = isAnimating.get() !== 0 || isClosing.get() !== 0;
-		const isTransitionProgressInFlight =
-			progress.get() < TRANSITION_PROGRESS_COMPLETE;
-		const isTransitionInFlight =
-			isTransitioning || isTransitionProgressInFlight;
 
 		const canUsePreviousTransitionEvidence =
 			resetTransformOnUnset && allowPreviousTransitionEvidence(id);
@@ -218,14 +201,6 @@ export const useAssociatedStyles = ({
 			(!!BoundStore.getSnapshot(id, previousScreenKey) ||
 				BoundStore.hasBoundaryPresence(id, previousScreenKey));
 
-		// Split intent:
-		// - incoming: strict signal for first-style hiding
-		// - in-flight: broad signal to keep existing styles from resetting
-		const shouldExpectIncomingStyle =
-			resetTransformOnUnset &&
-			((hasActiveLink && canUsePreviousTransitionEvidence) ||
-				hasPreviousTransitionEvidence);
-
 		const shouldProtectInFlightStyles =
 			resetTransformOnUnset && (hasActiveLink || hasPreviousTransitionEvidence);
 
@@ -234,7 +209,6 @@ export const useAssociatedStyles = ({
 		}
 
 		const hasPersistedResolvedStyle = !!lastResolvedBase.value;
-		const hasResolvedStyle = hasCurrentKeys || hasPersistedResolvedStyle;
 
 		const isTransientEmptyGap =
 			hasConfiguredInterpolator &&
@@ -255,32 +229,18 @@ export const useAssociatedStyles = ({
 			isTransientEmptyGap &&
 			emptyGraceFrameCount.value <= TRANSIENT_EMPTY_GRACE_FRAMES;
 
-		const shouldDeferUnset =
+		const shouldDelayUnset =
 			resetTransformOnUnset &&
 			shouldProtectInFlightStyles &&
 			(isTransitioning || isWithinGapGrace);
 
 		/**
 		 * Associated-style state machine:
-		 * - waiting-first-style: transition is expected but no style has resolved yet.
 		 * - hold-last-style: transient empty frame; reuse last resolved style.
 		 * - live: apply current resolved style normally.
 		 */
 		let mode: AssociatedStyleMode = "live";
-		if (
-			waitForFirstResolvedStyle &&
-			resetTransformOnUnset &&
-			hasConfiguredInterpolator &&
-			shouldExpectIncomingStyle &&
-			isTransitionInFlight &&
-			!hasResolvedStyle
-		) {
-			mode = "waiting-first-style";
-		} else if (
-			shouldDeferUnset &&
-			!hasCurrentKeys &&
-			hasPersistedResolvedStyle
-		) {
+		if (shouldDelayUnset && !hasCurrentKeys && hasPersistedResolvedStyle) {
 			mode = "hold-last-style";
 		}
 
@@ -292,11 +252,11 @@ export const useAssociatedStyles = ({
 		const unsetPatch = buildUnsetPatch({
 			previousKeys: previousAppliedKeys.value,
 			currentKeys,
-			shouldDeferUnset,
+			shouldDeferUnset: shouldDelayUnset,
 			resetTransformOnUnset,
 		});
 
-		if (shouldDeferUnset) {
+		if (shouldDelayUnset) {
 			previousAppliedKeys.value = {
 				...previousAppliedKeys.value,
 				...currentKeys,
@@ -311,10 +271,6 @@ export const useAssociatedStyles = ({
 			}
 		}
 
-		if (mode === "waiting-first-style") {
-			return { ...unsetPatch, opacity: 0 };
-		}
-
 		const mergedBase = { ...unsetPatch, ...resolvedBase };
 
 		let opacity = 1;

package/src/shared/index.ts

@@ -26,9 +26,8 @@ export default {
 
 export { snapTo } from "./animation/snap-to";
 export {
-	NAVIGATION_CONTAINER_STYLE_ID,
-	NAVIGATION_MASK_HOST_FLAG_STYLE_ID,
-	NAVIGATION_MASK_STYLE_ID,
+	NAVIGATION_MASK_CONTAINER_STYLE_ID,
+	NAVIGATION_MASK_ELEMENT_STYLE_ID,
 } from "./constants";
 export {
 	type ScreenGestureTarget,

package/src/shared/providers/gestures/handlers/use-handlers.ts

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { useWindowDimensions } from "react-native";
 import type {
 	GestureStateChangeEvent,
 	GestureTouchEvent,
@@ -32,8 +33,8 @@ import type {
 } from "../../../types/ownership.types";
 import { animateToProgress } from "../../../utils/animation/animate-to-progress";
 import type { EffectiveSnapPointsResult } from "../../../utils/gesture/validate-snap-points";
+import { resolveSheetScrollGestureBehavior } from "../../../utils/resolve-screen-transition-options";
 import { useDescriptors } from "../../screen/descriptors";
-import { useViewportContext } from "../../viewport.provider";
 import {
 	applyOffsetRules,
 	checkScrollBoundary,
@@ -99,7 +100,7 @@ interface UseScreenGestureHandlersProps {
  *      - No → continue
  *   5. OFFSET THRESHOLD: Wait for sufficient touch movement
  *   6. SCROLLVIEW CHECK: If touch is on ScrollView, is it at boundary?
- *   7. EXPAND CHECK (snap sheets): If expanding via ScrollView, is expandViaScrollView enabled?
+ *   7. EXPAND CHECK (snap sheets): If expanding from nested scroll content, does sheetScrollGestureBehavior allow it?
  *   8. ACTIVATE!
  * ```
  *
@@ -144,12 +145,14 @@ export const useHandlers = ({
 		gestureReleaseVelocityMax = DEFAULT_GESTURE_RELEASE_VELOCITY_MAX,
 		gestureActivationArea = DEFAULT_GESTURE_ACTIVATION_AREA,
 		gestureSnapLocked = DEFAULT_GESTURE_SNAP_LOCKED,
-		expandViaScrollView = true,
 		gestureResponseDistance,
 		transitionSpec,
 	} = current.options;
+	const sheetScrollGestureBehavior = resolveSheetScrollGestureBehavior(
+		current.options,
+	);
 
-	const { dimensions } = useViewportContext();
+	const dimensions = useWindowDimensions();
 	const routeKey = current.route.key;
 	const animations = AnimationStore.getRouteAnimations(routeKey);
 	const gestureAnimationValues = GestureStore.getRouteGestures(routeKey);
@@ -296,7 +299,7 @@ export const useHandlers = ({
 							directions.snapAxisInverted ?? false,
 						)
 					) {
-						if (!expandViaScrollView) {
+						if (sheetScrollGestureBehavior === "collapse-only") {
 							manager.fail();
 							return;
 						}

package/src/shared/providers/gestures/helpers/gesture-activation.ts

@@ -67,6 +67,7 @@ const GESTURE_FAIL_TOLERANCE_Y = 20;
 const DEFAULT_EDGE_DISTANCE_HORIZONTAL = 50;
 const DEFAULT_EDGE_DISTANCE_VERTICAL = 135;
 const DEFAULT_ACTIVATION_AREA = "screen" as const;
+const SCROLL_EPILSON = 1;
 
 export function normalizeSides(area?: GestureActivationArea): NormalizedSides {
 	"worklet";
@@ -352,6 +353,10 @@ export function checkScrollBoundary(
 	// Calculate max scroll values
 	const maxScrollX = Math.max(0, contentWidth - layoutWidth);
 	const maxScrollY = Math.max(0, contentHeight - layoutHeight);
+	const atTop = scrollY <= SCROLL_EPILSON;
+	const atBottom = scrollY >= maxScrollY - SCROLL_EPILSON;
+	const atLeft = scrollX <= SCROLL_EPILSON;
+	const atRight = scrollX >= maxScrollX - SCROLL_EPILSON;
 
 	// For snap point sheets (snapAxisInverted is defined), boundary depends on sheet origin
 	// Even if content isn't scrollable, respect bounce/overscroll state
@@ -362,12 +367,12 @@ export function checkScrollBoundary(
 		if (isVerticalDirection) {
 			// Bottom sheet (not inverted): boundary at scroll top
 			// Top sheet (inverted): boundary at scroll bottom
-			return snapAxisInverted ? scrollY >= maxScrollY : scrollY <= 0;
+			return snapAxisInverted ? atBottom : atTop;
 		}
 		// Horizontal direction
 		// Right drawer (not inverted): boundary at scroll left
 		// Left drawer (inverted): boundary at scroll right
-		return snapAxisInverted ? scrollX >= maxScrollX : scrollX <= 0;
+		return snapAxisInverted ? atRight : atLeft;
 	}
 
 	// Non-sheet screens: each direction has its own boundary
@@ -375,22 +380,22 @@ export function checkScrollBoundary(
 		case "vertical":
 			// Swipe down - check if at top of vertical scroll
 			// Even if content isn't scrollable, respect bounce/overscroll state
-			return scrollY <= 0;
+			return atTop;
 
 		case "vertical-inverted":
 			// Swipe up - check if at bottom of vertical scroll
 			// Even if content isn't scrollable, respect bounce/overscroll state
-			return scrollY >= maxScrollY;
+			return atBottom;
 
 		case "horizontal":
 			// Swipe right - check if at left of horizontal scroll
 			// Even if content isn't scrollable, respect bounce/overscroll state
-			return scrollX <= 0;
+			return atLeft;
 
 		case "horizontal-inverted":
 			// Swipe left - check if at right of horizontal scroll
 			// Even if content isn't scrollable, respect bounce/overscroll state
-			return scrollX >= maxScrollX;
+			return atRight;
 
 		default:
 			return true;

package/src/shared/providers/layout-anchor.provider.tsx

@@ -1,12 +1,11 @@
 import { type ReactNode, useCallback, useMemo } from "react";
-import type { View } from "react-native";
+import { useWindowDimensions, type View } from "react-native";
 import {
 	type AnimatedRef,
 	type MeasuredDimensions,
 	measure,
 } from "react-native-reanimated";
 import createProvider from "../utils/create-provider";
-import { useViewportContext } from "./viewport.provider";
 
 interface LayoutAnchorProviderProps {
 	anchorRef: AnimatedRef<View>;
@@ -48,9 +47,7 @@ const { LayoutAnchorProvider, useLayoutAnchorContext } = createProvider(
 	{ guarded: false },
 )<LayoutAnchorProviderProps, LayoutAnchorContextValue>(
 	({ anchorRef, children }) => {
-		const {
-			dimensions: { width: screenWidth, height: screenHeight },
-		} = useViewportContext();
+		const { width: screenWidth, height: screenHeight } = useWindowDimensions();
 
 		const correctMeasurement = useCallback(
 			(measured: MeasuredDimensions): MeasuredDimensions => {

package/src/shared/providers/register-bounds.provider.tsx

@@ -207,7 +207,7 @@ const useParentSyncReaction = (params: {
 const CloseRemeasureReactionEffect = (params: {
 	sharedBoundTag: string;
 	remeasureOnFocus: boolean;
-	nextClosing: ReturnType<typeof AnimationStore.getRouteAnimation>;
+	nextClosing: SharedValue<number>;
 	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
 }) => {
 	const {

package/src/shared/providers/screen/animation/helpers/pipeline.ts

@@ -1,10 +1,12 @@
 import { useMemo } from "react";
+import { useWindowDimensions } from "react-native";
 import {
 	type DerivedValue,
 	type SharedValue,
 	useDerivedValue,
 	useSharedValue,
 } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import type { NativeStackScreenTransitionConfig } from "../../../../../native-stack/types";
 import {
 	createScreenTransitionState,
@@ -25,7 +27,8 @@ import type { BoundsAccessor } from "../../../../types/bounds.types";
 import type { ScreenTransitionConfig } from "../../../../types/screen.types";
 import type { BaseStackRoute } from "../../../../types/stack.types";
 import { createBoundsAccessor } from "../../../../utils/bounds";
-import { useViewportContext } from "../../../viewport.provider";
+import type { BoundsFrameProps } from "../../../../utils/bounds/types/frame-props";
+import { resolveNavigationMaskEnabled } from "../../../../utils/resolve-screen-transition-options";
 import { type BaseDescriptor, useDescriptors } from "../../descriptors";
 import { derivations } from "./derivations";
 import { toPlainRoute, toPlainValue } from "./worklet";
@@ -153,7 +156,8 @@ const hasTransitionsEnabled = (
 
 export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 	const { flags, stackProgress: rootStackProgress, routeKeys } = useStack();
-	const { dimensions, insets } = useViewportContext();
+	const dimensions = useWindowDimensions();
+	const insets = useSafeAreaInsets();
 	const transitionsAlwaysOn = flags.TRANSITIONS_ALWAYS_ON;
 
 	const {
@@ -192,15 +196,20 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 		currentRouteKey ?? "_",
 		"autoSnapPoint",
 	);
+	const contentLayoutValue = AnimationStore.getAnimation(
+		currentRouteKey ?? "_",
+		"contentLayout",
+	);
 
 	const nextRouteKey = nextDescriptor?.route?.key;
 	const nextHasTransitions =
 		!!nextRouteKey &&
 		hasTransitionsEnabled(nextDescriptor?.options, transitionsAlwaysOn);
+	const currentNavigationMaskEnabled = resolveNavigationMaskEnabled(
+		currentDescriptor?.options ?? {},
+	);
 
-	const framePropsMutable = useSharedValue<
-		Omit<ScreenInterpolationProps, "bounds">
-	>({
+	const framePropsMutable = useSharedValue<BoundsFrameProps>({
 		layouts: { screen: dimensions },
 		insets,
 		previous: undefined,
@@ -209,6 +218,7 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 		progress: 0,
 		stackProgress: 0,
 		snapIndex: -1,
+		navigationMaskEnabled: false,
 		focused: true,
 		active: DEFAULT_SCREEN_TRANSITION_STATE,
 		inactive: undefined,
@@ -261,8 +271,11 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 
 		const snapIndex = computeSnapIndex(current.progress, resolvedSnapPoints);
 
-		const nextProps = {
-			layouts: { screen: dimensions },
+		const nextProps: Omit<ScreenInterpolationProps, "bounds"> = {
+			layouts: {
+				screen: dimensions,
+				content: contentLayoutValue.value ?? undefined,
+			},
 			insets,
 			previous,
 			current,
@@ -273,7 +286,10 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 			...helpers,
 		};
 
-		framePropsMutable.value = nextProps;
+		framePropsMutable.value = {
+			...nextProps,
+			navigationMaskEnabled: currentNavigationMaskEnabled,
+		};
 		return nextProps;
 	});
 

package/src/shared/providers/screen/helpers/resolve-interpolated-style-output.ts

@@ -0,0 +1,41 @@
+import type { NormalizedTransitionInterpolatedStyle } from "../../../types/animation.types";
+import { normalizeInterpolatedStyle } from "../../../utils/normalize-interpolated-style";
+
+export type ScreenStyleResolutionMode = "pass-through" | "deferred" | "live";
+
+export type ResolvedInterpolatedStyleOutput = {
+	stylesMap: NormalizedTransitionInterpolatedStyle;
+	resolutionMode: ScreenStyleResolutionMode;
+	wasLegacy: boolean;
+};
+
+const EMPTY_STYLES = {} as NormalizedTransitionInterpolatedStyle;
+
+export const PASS_THROUGH_STYLE_OUTPUT: ResolvedInterpolatedStyleOutput = {
+	stylesMap: EMPTY_STYLES,
+	resolutionMode: "pass-through",
+	wasLegacy: false,
+};
+
+export const resolveInterpolatedStyleOutput = (
+	raw: Record<string, any> | null | undefined,
+): ResolvedInterpolatedStyleOutput => {
+	"worklet";
+
+	// If raw is null, the user is intentionally asking to defer.
+	if (raw === null) {
+		return {
+			stylesMap: EMPTY_STYLES,
+			resolutionMode: "deferred",
+			wasLegacy: false,
+		};
+	}
+
+	const { result, wasLegacy } = normalizeInterpolatedStyle(raw ?? EMPTY_STYLES);
+
+	return {
+		stylesMap: result,
+		resolutionMode: "live",
+		wasLegacy,
+	};
+};

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

@@ -8,8 +8,12 @@ import { NO_STYLES } from "../../constants";
 import type { NormalizedTransitionInterpolatedStyle } from "../../types/animation.types";
 import createProvider from "../../utils/create-provider";
 import { logger } from "../../utils/logger";
-import { normalizeInterpolatedStyle } from "../../utils/normalize-interpolated-style";
 import { useScreenAnimationContext } from "./animation";
+import {
+	PASS_THROUGH_STYLE_OUTPUT,
+	resolveInterpolatedStyleOutput,
+	type ScreenStyleResolutionMode,
+} from "./helpers/resolve-interpolated-style-output";
 
 type Props = {
 	children: ReactNode;
@@ -18,9 +22,10 @@ type Props = {
 type ScreenStylesContextValue = {
 	stylesMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
 	ancestorStylesMaps: SharedValue<NormalizedTransitionInterpolatedStyle>[];
+	resolutionMode: SharedValue<ScreenStyleResolutionMode>;
 };
 
-const {
+export const {
 	ScreenStylesProvider,
 	ScreenStylesContext,
 	useScreenStylesContext: useScreenStyles,
@@ -44,80 +49,99 @@ const {
 		const isGesturingDuringCloseAnimation = useSharedValue(false);
 		const hasWarnedLegacy = useSharedValue(false);
 
-		const stylesMap = useDerivedValue<NormalizedTransitionInterpolatedStyle>(
-			() => {
-				"worklet";
-				const props = screenInterpolatorProps.value;
-				const { current, next, progress } = props;
-				const isDragging = current.gesture.dragging;
-				const isNextClosing = !!next?.closing;
-
-				if (isDragging && isNextClosing) {
-					isGesturingDuringCloseAnimation.value = true;
-				}
-
-				if (!isDragging && !isNextClosing) {
-					isGesturingDuringCloseAnimation.value = false;
-				}
-
-				const isInGestureMode =
-					isDragging || isGesturingDuringCloseAnimation.value;
-
-				// Select interpolator
-				//  - If in gesture mode, use current screen's interpolator since we're driving
-				//    the animation from this screen (dragging back to dismiss next).
-				const interpolator = isInGestureMode
-					? currentInterpolator
-					: (nextInterpolator ?? currentInterpolator);
-
-				if (!interpolator)
-					return NO_STYLES as NormalizedTransitionInterpolatedStyle;
-
-				// Build effective props with corrected progress
-				//  - Gesture mode: use current.progress only (avoids jumps during drag)
-				//  - Normal: use derived progress as-is
-
-				let effectiveProgress = progress;
-				let effectiveNext = next;
-
-				if (isInGestureMode) {
-					effectiveProgress = current.progress;
-					effectiveNext = undefined;
+		const styleResolution = useDerivedValue<{
+			stylesMap: NormalizedTransitionInterpolatedStyle;
+			resolutionMode: ScreenStyleResolutionMode;
+		}>(() => {
+			"worklet";
+			const props = screenInterpolatorProps.value;
+			const { current, next, progress } = props;
+			const isDragging = current.gesture.dragging;
+			const isNextClosing = !!next?.closing;
+
+			if (isDragging && isNextClosing) {
+				isGesturingDuringCloseAnimation.value = true;
+			}
+
+			if (!isDragging && !isNextClosing) {
+				isGesturingDuringCloseAnimation.value = false;
+			}
+
+			const isInGestureMode =
+				isDragging || isGesturingDuringCloseAnimation.value;
+
+			// Select interpolator
+			//  - If in gesture mode, use current screen's interpolator since we're driving
+			//    the animation from this screen (dragging back to dismiss next).
+			const interpolator = isInGestureMode
+				? currentInterpolator
+				: (nextInterpolator ?? currentInterpolator);
+
+			if (!interpolator) {
+				return PASS_THROUGH_STYLE_OUTPUT;
+			}
+
+			// Build effective props with corrected progress
+			//  - Gesture mode: use current.progress only (avoids jumps during drag)
+			//  - Normal: use derived progress as-is
+
+			let effectiveProgress = progress;
+			let effectiveNext = next;
+
+			if (isInGestureMode) {
+				effectiveProgress = current.progress;
+				effectiveNext = undefined;
+			}
+
+			try {
+				const raw = interpolator({
+					...props,
+					progress: effectiveProgress,
+					next: effectiveNext,
+					bounds: boundsAccessor,
+				});
+
+				const { stylesMap, resolutionMode, wasLegacy } =
+					resolveInterpolatedStyleOutput(raw);
+
+				if (__DEV__ && wasLegacy && !hasWarnedLegacy.value) {
+					hasWarnedLegacy.value = true;
+					logger.warn(
+						"Flat interpolator return shape (contentStyle/backdropStyle) is deprecated. " +
+							"Use the nested format instead: { content: { style }, backdrop: { style } }.",
+					);
 				}
 
-				try {
-					const raw = interpolator({
-						...props,
-						progress: effectiveProgress,
-						next: effectiveNext,
-						bounds: boundsAccessor,
-					});
-
-					const { result, wasLegacy } = normalizeInterpolatedStyle(
-						raw as Record<string, any>,
+				return {
+					stylesMap,
+					resolutionMode,
+				};
+			} catch (err) {
+				if (__DEV__) {
+					console.warn(
+						"[react-native-screen-transitions] screenStyleInterpolator must be a worklet",
+						err,
 					);
-
-					if (__DEV__ && wasLegacy && !hasWarnedLegacy.value) {
-						hasWarnedLegacy.value = true;
-						logger.warn(
-							"Flat interpolator return shape (contentStyle/backdropStyle) is deprecated. " +
-								"Use the nested format instead: { content: { style }, backdrop: { style } }.",
-						);
-					}
-
-					return result;
-				} catch (err) {
-					if (__DEV__) {
-						console.warn(
-							"[react-native-screen-transitions] screenStyleInterpolator must be a worklet",
-							err,
-						);
-					}
-					return NO_STYLES as NormalizedTransitionInterpolatedStyle;
 				}
+				return {
+					stylesMap: NO_STYLES as NormalizedTransitionInterpolatedStyle,
+					resolutionMode: "live" as const,
+				};
+			}
+		});
+
+		const stylesMap = useDerivedValue<NormalizedTransitionInterpolatedStyle>(
+			() => {
+				"worklet";
+				return styleResolution.value.stylesMap;
 			},
 		);
 
+		const resolutionMode = useDerivedValue<ScreenStyleResolutionMode>(() => {
+			"worklet";
+			return styleResolution.value.resolutionMode;
+		});
+
 		const value = useMemo<ScreenStylesContextValue>(() => {
 			// Build ancestor chain: [parent, grandparent, great-grandparent, ...]
 			const ancestorStylesMaps = parentCtx
@@ -127,11 +151,10 @@ const {
 			return {
 				stylesMap,
 				ancestorStylesMaps,
+				resolutionMode,
 			};
-		}, [stylesMap, parentCtx]);
+		}, [resolutionMode, stylesMap, parentCtx]);
 
 		return { value, children };
 	},
 );
-
-export { ScreenStylesProvider, useScreenStyles };