react-native-screen-transitions 4.0.0-alpha.2 → 4.0.0-alpha.4

package/src/providers/screen/gestures/pan/behavior/pan-reset.ts

@@ -1,4 +1,5 @@
 import { FALSE, TRUE } from "../../../../../constants";
+import type { AnimationStoreMap } from "../../../../../stores/animation.store";
 import type { GestureStoreMap } from "../../../../../stores/gesture.store";
 import { animateMany } from "../../shared/reset";
 import {
@@ -10,12 +11,16 @@ import type { PanReleasePlan } from "../../types";
 interface ResetPanGestureValuesProps {
 	plan: PanReleasePlan;
 	gestures: GestureStoreMap;
+	animations?: AnimationStoreMap;
+	completeMotion?: boolean;
 	updateLifecycle?: boolean;
 }
 
 export const resetPanGestureValues = ({
 	plan,
 	gestures,
+	animations,
+	completeMotion = false,
 	updateLifecycle = true,
 }: ResetPanGestureValuesProps) => {
 	"worklet";
@@ -28,8 +33,17 @@ export const resetPanGestureValues = ({
 		gestures.active.set(null);
 		gestures.direction.set(null);
 		gestures.settling.set(FALSE);
+		if (completeMotion) {
+			animations?.progressAnimating.set(FALSE);
+			animations?.progressSettled.set(TRUE);
+		}
 	};
 
+	if (animations && updateLifecycle && !plan.shouldDismiss) {
+		animations.progressAnimating.set(TRUE);
+		animations.progressSettled.set(FALSE);
+	}
+
 	clearRawPanValues(gestures);
 
 	if (updateLifecycle) {

package/src/providers/screen/gestures/pan/use-build-pan-gesture.ts

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import { useWindowDimensions } from "react-native";
 import { Gesture } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
-import { useScreenOptionsContext } from "../../options";
+import { useScreenOptionsStore } from "../../options";
 import { useStableRuntimeConfig } from "../hooks/use-stable-runtime-config";
 import type {
 	DirectionClaimMap,
@@ -29,7 +29,7 @@ export const useBuildPanGesture = ({
 }: UseBuildPanGestureProps): PanGesture => {
 	const dimensions = useWindowDimensions();
 	const { participation, pan: policy } = gestureConfig;
-	const screenOptions = useScreenOptionsContext();
+	const screenOptions = useScreenOptionsStore();
 
 	const runtime = useStableRuntimeConfig({
 		participation,

package/src/providers/screen/gestures/pinch/behavior/pinch-lifecycle.ts

@@ -1,8 +1,8 @@
 import { clamp } from "react-native-reanimated";
 import { scheduleOnRN } from "react-native-worklets";
-import { EPSILON, FALSE, TRUE } from "../../../../../constants";
+import { EPSILON, TRUE } from "../../../../../constants";
+import { emitMotionStart } from "../../../../../stores/animation.store";
 import { animateToProgress } from "../../../../../utils/animation/animate-to-progress";
-import { emit } from "../../../../../utils/animation/emit";
 import { normalizePinchScale } from "../../shared/physics";
 import { snapshotGestureHandoff } from "../../shared/snapshot";
 import { clearTransformTrackingValues } from "../../shared/values";
@@ -20,15 +20,7 @@ export const startPinchBase = (runtime: PinchGestureRuntime) => {
 		stores: { gestures, animations },
 	} = runtime;
 
-	const wasSettling = gestures.settling.get();
-	const hasResidualGesture =
-		Math.abs(gestures.normScale.get()) > EPSILON ||
-		Math.abs(gestures.rotation.get()) > EPSILON;
-
-	if (!wasSettling || !hasResidualGesture) {
-		emit(animations.willAnimate, TRUE, FALSE);
-	}
-
+	emitMotionStart(animations);
 	gestures.dragging.set(TRUE);
 	gestures.dismissing.set(0);
 	gestures.settling.set(0);
@@ -83,6 +75,9 @@ export const finalizePinchRelease = (
 		system.targetProgress.set(release.commitProgress);
 	}
 
+	const progressAlreadyAtTarget =
+		Math.abs(animations.transitionProgress.get() - release.target) <= EPSILON;
+
 	if (release.shouldDismiss) {
 		snapshotGestureHandoff(gestures, {
 			velocity: release.handoffVelocity,
@@ -92,6 +87,7 @@ export const finalizePinchRelease = (
 	resetPinchGestureValues({
 		spec: release.resetSpec,
 		gestures,
+		animations,
 		shouldDismiss: release.shouldDismiss,
 		resetValuesImmediately: release.resetValuesImmediately,
 	});
@@ -100,6 +96,11 @@ export const finalizePinchRelease = (
 		scheduleOnRN(requestDismiss);
 	}
 
+	if (!release.shouldDismiss && progressAlreadyAtTarget) {
+		system.targetProgress.set(release.target);
+		return;
+	}
+
 	animateToProgress({
 		target: release.target,
 		onAnimationFinish: release.shouldDismiss ? dismissScreen : undefined,

package/src/providers/screen/gestures/pinch/behavior/pinch-reset.ts

@@ -1,4 +1,5 @@
 import { FALSE, TRUE } from "../../../../../constants";
+import type { AnimationStoreMap } from "../../../../../stores/animation.store";
 import type { GestureStoreMap } from "../../../../../stores/gesture.store";
 import type { AnimationConfig } from "../../../../../types/animation.types";
 import { animateMany } from "../../shared/reset";
@@ -11,6 +12,7 @@ import {
 interface ResetPinchGestureValuesProps {
 	spec?: AnimationConfig;
 	gestures: GestureStoreMap;
+	animations?: AnimationStoreMap;
 	shouldDismiss: boolean;
 	resetValuesImmediately?: boolean;
 }
@@ -18,6 +20,7 @@ interface ResetPinchGestureValuesProps {
 export const resetPinchGestureValues = ({
 	spec,
 	gestures,
+	animations,
 	shouldDismiss,
 	resetValuesImmediately = false,
 }: ResetPinchGestureValuesProps) => {
@@ -32,8 +35,15 @@ export const resetPinchGestureValues = ({
 		gestures.active.set(null);
 		gestures.direction.set(null);
 		gestures.settling.set(FALSE);
+		animations?.progressAnimating.set(FALSE);
+		animations?.progressSettled.set(TRUE);
 	};
 
+	if (animations && !shouldDismiss) {
+		animations.progressAnimating.set(TRUE);
+		animations.progressSettled.set(FALSE);
+	}
+
 	clearRawTransformValues(gestures);
 
 	gestures.dragging.set(FALSE);

package/src/providers/screen/gestures/pinch/use-build-pinch-gesture.ts

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { Gesture } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
-import { useScreenOptionsContext } from "../../options";
+import { useScreenOptionsStore } from "../../options";
 import { useStableRuntimeConfig } from "../hooks/use-stable-runtime-config";
 import type {
 	GestureCompositionOwner,
@@ -21,7 +21,7 @@ export const useBuildPinchGesture = ({
 	gestureCompositionOwner,
 }: UseBuildPinchGestureProps): PinchGesture => {
 	const { participation, pinch: policy } = gestureConfig;
-	const screenOptions = useScreenOptionsContext();
+	const screenOptions = useScreenOptionsStore();
 
 	const runtime = useStableRuntimeConfig({
 		participation,

package/src/providers/screen/gestures/scroll-coordination/scroll-metadata-owner.tsx

@@ -16,19 +16,19 @@ const DEFAULT_SCROLL_METADATA_OWNER_CONTEXT: ScrollMetadataOwnerContextValue = {
 
 const {
 	ScrollMetadataOwnerProvider,
-	useScrollMetadataOwnerContext: useMaybeScrollMetadataOwnerContext,
+	useScrollMetadataOwnerStore: useMaybeScrollMetadataOwnerStore,
 } = createProvider("ScrollMetadataOwner", { guarded: false })<
 	ScrollMetadataOwnerProviderProps,
 	ScrollMetadataOwnerContextValue
 >(({ children, value }) => ({ children, value }));
 
-export const useScrollMetadataOwnerContext = () =>
-	useMaybeScrollMetadataOwnerContext() ?? DEFAULT_SCROLL_METADATA_OWNER_CONTEXT;
+export const useScrollMetadataOwnerStore = () =>
+	useMaybeScrollMetadataOwnerStore() ?? DEFAULT_SCROLL_METADATA_OWNER_CONTEXT;
 
 export const useScrollMetadataOwnerProviderValue = (
 	axis: ScrollGestureAxis,
 ) => {
-	const parent = useScrollMetadataOwnerContext();
+	const parent = useScrollMetadataOwnerStore();
 
 	return useMemo(() => {
 		if (parent[axis]) return parent;

package/src/providers/screen/gestures/scroll-coordination/use-scroll-gesture-coordination.ts

@@ -10,7 +10,7 @@ import { useSharedValueState } from "../../../../hooks/reanimated/use-shared-val
 import useStableCallback from "../../../../hooks/use-stable-callback";
 import { AnimationStore } from "../../../../stores/animation.store";
 import { ScrollStore } from "../../../../stores/scroll.store";
-import { useGestureContext } from "../gestures.provider";
+import { useGestureStore } from "../gestures.provider";
 import type {
 	ScrollGestureAxis,
 	ScrollGestureAxisState,
@@ -18,8 +18,8 @@ import type {
 	ScrollMetadataState,
 } from "../types";
 import {
-	useScrollMetadataOwnerContext,
 	useScrollMetadataOwnerProviderValue,
+	useScrollMetadataOwnerStore,
 } from "./scroll-metadata-owner";
 import {
 	clearScrollMetadataAxisState,
@@ -88,10 +88,10 @@ const clearScrollMetadataAxis = (
 export const useScrollGestureCoordination = (
 	props: ScrollGestureCoordinationProps,
 ) => {
-	const context = useGestureContext();
+	const context = useGestureStore();
 	const scrollDirection = props.direction ?? "vertical";
 
-	const metadataOwnerContext = useScrollMetadataOwnerContext();
+	const metadataOwnerContext = useScrollMetadataOwnerStore();
 	const metadataOwnerProviderValue =
 		useScrollMetadataOwnerProviderValue(scrollDirection);
 	const isFirstMetadataWriterInTree = !metadataOwnerContext[scrollDirection];

package/src/providers/screen/options/index.ts

@@ -1,6 +1,6 @@
 export { syncScreenOptionsOverrides } from "./helpers";
 export {
 	ScreenOptionsProvider,
-	useScreenOptionsContext,
+	useScreenOptionsStore,
 } from "./options.provider";
 export type { ScreenOptionsContextValue, ScreenOptionsSnapshot } from "./types";

package/src/providers/screen/options/options.provider.tsx

@@ -1,7 +1,7 @@
 import { useLayoutEffect, useMemo } from "react";
 import { useSharedValue } from "react-native-reanimated";
 import createProvider from "../../../utils/create-provider";
-import { useDescriptors } from "../descriptors";
+import { useDescriptorsStore } from "../descriptors";
 import { resolveBaseScreenOptions, syncScreenOptionsBase } from "./helpers";
 import type {
 	ScreenOptionsContextValue,
@@ -9,35 +9,31 @@ import type {
 	ScreenOptionsState,
 } from "./types";
 
-export const { ScreenOptionsProvider, useScreenOptionsContext } =
-	createProvider("ScreenOptions")<
-		ScreenOptionsProviderProps,
-		ScreenOptionsContextValue
-	>(() => {
-		const {
-			current: { options },
-		} = useDescriptors();
+export const { ScreenOptionsProvider, useScreenOptionsStore } = createProvider(
+	"ScreenOptions",
+)<ScreenOptionsProviderProps, ScreenOptionsContextValue>(() => {
+	const options = useDescriptorsStore((store) => store.options);
 
-		const baseScreenOptions = useMemo(
-			() => resolveBaseScreenOptions(options),
-			[options],
-		);
+	const baseScreenOptions = useMemo(
+		() => resolveBaseScreenOptions(options),
+		[options],
+	);
 
-		const initialScreenOptions = useMemo<ScreenOptionsState>(
-			() => ({
-				...baseScreenOptions,
-				baseOptions: baseScreenOptions,
-			}),
-			[baseScreenOptions],
-		);
+	const initialScreenOptions = useMemo<ScreenOptionsState>(
+		() => ({
+			...baseScreenOptions,
+			baseOptions: baseScreenOptions,
+		}),
+		[baseScreenOptions],
+	);
 
-		const value = useSharedValue(initialScreenOptions);
+	const value = useSharedValue(initialScreenOptions);
 
-		useLayoutEffect(() => {
-			syncScreenOptionsBase(value, baseScreenOptions);
-		}, [value, baseScreenOptions]);
+	useLayoutEffect(() => {
+		syncScreenOptionsBase(value, baseScreenOptions);
+	}, [value, baseScreenOptions]);
 
-		return {
-			value,
-		};
-	});
+	return {
+		value,
+	};
+});

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

@@ -9,8 +9,9 @@ import { ScreenSlotProvider } from "./styles";
 
 type Props<TDescriptor extends BaseDescriptor> = {
 	previous?: TDescriptor;
-	current: TDescriptor;
+	current?: TDescriptor;
 	next?: TDescriptor;
+	routeKey?: string;
 	children: React.ReactNode;
 };
 
@@ -18,10 +19,16 @@ export function ScreenComposer<TDescriptor extends BaseDescriptor>({
 	previous,
 	current,
 	next,
+	routeKey,
 	children,
 }: Props<TDescriptor>) {
 	return (
-		<DescriptorsProvider previous={previous} current={current} next={next}>
+		<DescriptorsProvider
+			previous={previous}
+			current={current}
+			next={next}
+			routeKey={routeKey}
+		>
 			<ScreenLifecycle>
 				<ScreenOptionsProvider>
 					<ScreenGestureProvider>

package/src/providers/screen/styles/constants.ts

@@ -64,7 +64,7 @@ export const PROP_RESET_VALUES: Record<string, unknown> = {
 	pointerEvents: "auto",
 };
 
-const LOCAL_ONLY_STYLE_SLOT_IDS = {
+const RESERVED_STYLE_SLOT_IDS = {
 	content: true,
 	backdrop: true,
 	surface: true,
@@ -72,11 +72,13 @@ const LOCAL_ONLY_STYLE_SLOT_IDS = {
 	[NAVIGATION_MASK_CONTAINER_STYLE_ID]: true,
 } as const;
 
-export const shouldSlotInherit = (slotId: string) => {
+export const isReservedStyleSlot = (slotId: string) => {
 	"worklet";
 	// biome-ignore lint/suspicious/noPrototypeBuiltins: <proj issue>
-	return !Object.prototype.hasOwnProperty.call(
-		LOCAL_ONLY_STYLE_SLOT_IDS,
-		slotId,
-	);
+	return Object.prototype.hasOwnProperty.call(RESERVED_STYLE_SLOT_IDS, slotId);
+};
+
+export const shouldSlotInherit = (slotId: string) => {
+	"worklet";
+	return !isReservedStyleSlot(slotId);
 };

package/src/providers/screen/styles/helpers/resolve-interpolator-style-handoff.ts

@@ -0,0 +1,138 @@
+import type {
+	NormalizedTransitionInterpolatedStyle,
+	NormalizedTransitionSlotStyle,
+} from "../../../../types/animation.types";
+import type { LocalStyleLayers } from "./resolve-slot-styles";
+
+const mergeBuckets = (
+	frozen: Record<string, unknown> | undefined,
+	live: Record<string, unknown> | undefined,
+	composeTransforms: boolean,
+) => {
+	"worklet";
+
+	if (!frozen) {
+		return live;
+	}
+
+	if (!live) {
+		return frozen;
+	}
+
+	const merged: Record<string, unknown> = { ...frozen };
+
+	for (const key in live) {
+		const liveValue = live[key];
+
+		if (liveValue === undefined || liveValue === null) {
+			continue;
+		}
+
+		const frozenValue = frozen[key];
+
+		if (
+			composeTransforms &&
+			key === "transform" &&
+			Array.isArray(frozenValue) &&
+			Array.isArray(liveValue)
+		) {
+			merged[key] = [...frozenValue, ...liveValue];
+			continue;
+		}
+
+		merged[key] = liveValue;
+	}
+
+	return merged;
+};
+
+const mergeSlots = (
+	frozen: NormalizedTransitionSlotStyle | undefined,
+	live: NormalizedTransitionSlotStyle,
+): NormalizedTransitionSlotStyle => {
+	"worklet";
+
+	if (!frozen) {
+		return live;
+	}
+
+	const merged: NormalizedTransitionSlotStyle = {};
+	const style = mergeBuckets(
+		frozen.style as Record<string, unknown> | undefined,
+		live.style as Record<string, unknown> | undefined,
+		true,
+	);
+
+	if (style) {
+		merged.style = style;
+	}
+
+	if (frozen.props || live.props) {
+		merged.props = mergeBuckets(frozen.props, live.props, false);
+	}
+
+	const boundsLocalTransform =
+		live.boundsLocalTransform ?? frozen.boundsLocalTransform;
+
+	if (boundsLocalTransform) {
+		merged.boundsLocalTransform = boundsLocalTransform;
+	}
+
+	return merged;
+};
+
+const composeFrozenAndLiveStyles = (
+	frozen: NormalizedTransitionInterpolatedStyle,
+	live: NormalizedTransitionInterpolatedStyle,
+) => {
+	"worklet";
+	const composed: NormalizedTransitionInterpolatedStyle = { ...frozen };
+
+	for (const slotId in live) {
+		const liveSlot = live[slotId];
+
+		if (liveSlot) {
+			composed[slotId] = mergeSlots(frozen[slotId], liveSlot);
+		}
+	}
+
+	return composed;
+};
+
+export const resolveInterpolatorStyleHandoff = ({
+	currentOwnsInterpolator,
+	currentStylesMap,
+	nextStylesMap,
+	frozenCurrentStylesMap,
+}: {
+	currentOwnsInterpolator: boolean;
+	currentStylesMap: NormalizedTransitionInterpolatedStyle | undefined;
+	nextStylesMap: NormalizedTransitionInterpolatedStyle | undefined;
+	frozenCurrentStylesMap: NormalizedTransitionInterpolatedStyle;
+}): {
+	localStylesMaps: LocalStyleLayers;
+	nextFrozenCurrentStylesMap: NormalizedTransitionInterpolatedStyle;
+} => {
+	"worklet";
+
+	if (currentOwnsInterpolator) {
+		return {
+			localStylesMaps: currentStylesMap ? [currentStylesMap] : [],
+			nextFrozenCurrentStylesMap: currentStylesMap ?? frozenCurrentStylesMap,
+		};
+	}
+
+	if (!nextStylesMap) {
+		return {
+			localStylesMaps: frozenCurrentStylesMap ? [frozenCurrentStylesMap] : [],
+			nextFrozenCurrentStylesMap: frozenCurrentStylesMap,
+		};
+	}
+
+	return {
+		localStylesMaps: [
+			composeFrozenAndLiveStyles(frozenCurrentStylesMap, nextStylesMap),
+		],
+		nextFrozenCurrentStylesMap: frozenCurrentStylesMap,
+	};
+};

package/src/providers/screen/styles/helpers/resolve-slot-styles/index.ts

@@ -2,7 +2,7 @@ import type {
 	NormalizedTransitionInterpolatedStyle,
 	NormalizedTransitionSlotStyle,
 } from "../../../../../types/animation.types";
-import { shouldSlotInherit } from "../../constants";
+import { isReservedStyleSlot, shouldSlotInherit } from "../../constants";
 import { materializeResolvedSlot } from "./materialize-slot";
 import { getResolvedSlotState } from "./slot-state";
 import type {
@@ -72,15 +72,79 @@ const hasResettableDisappearedKeys = (
 	return false;
 };
 
+const mergeStateRecord = <Value>(
+	previous: Record<string, Value> | undefined,
+	current: Record<string, Value> | undefined,
+): Record<string, Value> | undefined => {
+	"worklet";
+
+	if (!previous) {
+		return current;
+	}
+
+	if (!current) {
+		return previous;
+	}
+
+	return {
+		...previous,
+		...current,
+	};
+};
+
+const mergeResettableStyleStates = (
+	previousState: ResettableStyleState | undefined,
+	currentState: ResettableStyleState | undefined,
+): ResettableStyleState | undefined => {
+	"worklet";
+
+	if (!previousState) {
+		return currentState;
+	}
+
+	if (!currentState) {
+		return previousState;
+	}
+
+	return {
+		styleKeys: mergeStateRecord(
+			previousState.styleKeys,
+			currentState.styleKeys,
+		),
+		styleResetValues: mergeStateRecord(
+			previousState.styleResetValues,
+			currentState.styleResetValues,
+		),
+		propKeys: mergeStateRecord(previousState.propKeys, currentState.propKeys),
+		propResetValues: mergeStateRecord(
+			previousState.propResetValues,
+			currentState.propResetValues,
+		),
+	};
+};
+
 const getResolvedSlotOutput = ({
 	slot,
 	previousState,
+	deferMissingKeyResets,
 }: {
 	slot: NormalizedTransitionSlotStyle | undefined;
 	previousState: ResettableStyleState | undefined;
+	deferMissingKeyResets: boolean;
 }) => {
 	"worklet";
 	const state = getResolvedSlotState(slot);
+
+	if (deferMissingKeyResets) {
+		// This used to force a reset when animationProgress reached zero during
+		// close. Zero is still drawable while ownership and native visibility
+		// settle, so it is not a safe cleanup boundary for reserved slots.
+		return {
+			resolvedSlot: getForwardedSlot(slot, state.hasAnyKeys),
+			nextState: mergeResettableStyleStates(previousState, state.nextState),
+		};
+	}
+
 	const hasStyleResetPatch = hasResettableDisappearedKeys(
 		previousState?.styleKeys,
 		previousState?.styleResetValues,
@@ -401,6 +465,7 @@ const appendResolvedSlot = (
 	const { resolvedSlot, nextState } = getResolvedSlotOutput({
 		slot: getSlotForId(context, slotId),
 		previousState: context.previousStyleStatesBySlot[slotId],
+		deferMissingKeyResets: isReservedStyleSlot(slotId),
 	});
 
 	writeResolvedSlotOutput({
@@ -470,9 +535,11 @@ const appendPreviousSlots = (context: ResolveSlotStylesContext) => {
 };
 
 /**
- * Resolves slot styles for the current screen pass and emits reset values for
- * transition-owned keys that existed in the previous resolved map but no longer
- * exist in the current one.
+ * Resolves slot styles for the current screen pass.
+ *
+ * Custom slots reset omitted keys immediately. Reserved screen slots retain
+ * omitted keys because lifecycle progress does not define a safe visual reset
+ * boundary.
  */
 export const resolveSlotStyles = ({
 	localStylesMaps,

package/src/providers/screen/styles/helpers/select-interpolator-frame.ts

@@ -0,0 +1,41 @@
+import type { ScreenInterpolatorFrame } from "../../animation/helpers/pipeline";
+
+export type SelectedInterpolatorFrame = Pick<
+	ScreenInterpolatorFrame,
+	| "progress"
+	| "transitionProgress"
+	| "next"
+	| "focused"
+	| "active"
+	| "inactive"
+	| "logicallySettled"
+>;
+
+export const selectInterpolatorFrame = (
+	frame: ScreenInterpolatorFrame,
+	useCurrentOnly: boolean,
+): SelectedInterpolatorFrame => {
+	"worklet";
+
+	if (!useCurrentOnly) {
+		return {
+			progress: frame.progress,
+			transitionProgress: frame.transitionProgress,
+			next: frame.next,
+			focused: frame.focused,
+			active: frame.active,
+			inactive: frame.inactive,
+			logicallySettled: frame.logicallySettled,
+		};
+	}
+
+	return {
+		progress: frame.current.progress,
+		transitionProgress: frame.current.transitionProgress,
+		next: undefined,
+		focused: true,
+		active: frame.current,
+		inactive: frame.previous,
+		logicallySettled: frame.current.settled,
+	};
+};

package/src/providers/screen/styles/helpers/visibility-gate.ts

@@ -18,6 +18,31 @@ type ScreenVisibilityGateDecision = {
 	shouldOpenGate: boolean;
 };
 
+type InitialDestinationStyleGateState = {
+	shouldPrepareStyles: boolean;
+	isVisibilityBlocked: boolean;
+	stylesReady: boolean;
+};
+
+type InitialDestinationStyleGateDecision = {
+	shouldMarkStylesReady: boolean;
+	shouldWithholdStyles: boolean;
+};
+
+export const resolveInitialDestinationStyleGate = ({
+	shouldPrepareStyles,
+	isVisibilityBlocked,
+	stylesReady,
+}: InitialDestinationStyleGateState): InitialDestinationStyleGateDecision => {
+	"worklet";
+
+	return {
+		shouldMarkStylesReady:
+			shouldPrepareStyles && isVisibilityBlocked && !stylesReady,
+		shouldWithholdStyles: shouldPrepareStyles && !stylesReady,
+	};
+};
+
 export const resolveScreenVisibilityGate = ({
 	isFloatingOverlay,
 	hasVisibilityGateOpened,