react-native-screen-transitions 4.0.0 → 4.1.0-beta.0

package/src/components/boundary/portal/components/boundary-content-portal/helpers/handoff-visibility.ts

@@ -0,0 +1,23 @@
+export function canActivateHandoffReceiver({
+	returningFromActiveClose,
+	activatingPairDestination,
+	animationProgress,
+	receiverIsActiveDestination,
+	destinationIsScreenReady,
+}: {
+	returningFromActiveClose: boolean;
+	activatingPairDestination: boolean;
+	animationProgress: number;
+	receiverIsActiveDestination: boolean;
+	destinationIsScreenReady: boolean | undefined;
+}) {
+	"worklet";
+	// Keep the loaded source in place until its receiving screen is visible.
+	if (receiverIsActiveDestination && destinationIsScreenReady !== true)
+		return false;
+	return (
+		returningFromActiveClose ||
+		activatingPairDestination ||
+		animationProgress > 0
+	);
+}

package/src/components/boundary/portal/components/boundary-content-portal/hooks/use-boundary-content-portal-attachment.ts

@@ -1,12 +1,12 @@
 import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
-import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
+import { useBuilderStore } from "../../../../../../providers/screen/builder";
 import {
-	useOptionalScreenSlotStore,
-	useScreenSlotStore,
-} from "../../../../../../providers/screen/styles";
-import { hasCloseTransitionFinished } from "../../../../../../providers/screen/styles/helpers/transition-visual-state";
+	useMotionStore,
+	useOptionalMotionStore,
+} from "../../../../../../providers/screen/motion";
+import { hasCloseTransitionFinished } from "../../../../../../providers/screen/motion/helpers/transition-visual-state";
+import { useOrchestratorStore } from "../../../../../../providers/screen/orchestrator";
 import { useBlankStackStore } from "../../../../../../providers/stack/blank-stack.provider";
-import { AnimationStore } from "../../../../../../stores/animation.store";
 import { getLinkKeyFromTag } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
 import { getEntry } from "../../../../../../stores/bounds/internals/entries";
 import {
@@ -18,7 +18,6 @@ import type {
 	LinkPairState,
 	TagLink,
 } from "../../../../../../stores/bounds/types";
-import { SystemStore } from "../../../../../../stores/system.store";
 import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
 import {
 	resolveActiveHandoffReceiver,
@@ -27,6 +26,7 @@ import {
 	resolveRequestedHandoffPairKey,
 	resolveRequestedHandoffReceiver,
 } from "../helpers/active-handoff-receiver";
+import { canActivateHandoffReceiver } from "../helpers/handoff-visibility";
 import { createBoundaryContentPortalHostName } from "../helpers/host-name";
 
 interface UseBoundaryContentPortalAttachmentParams {
@@ -49,22 +49,22 @@ const isCompleteActiveLink = (
 export const useBoundaryContentPortalAttachment = ({
 	boundaryId,
 }: UseBoundaryContentPortalAttachmentParams) => {
-	const slotsMap = useScreenSlotStore((store) => store.slotsMap);
+	const slotsMap = useOrchestratorStore((store) => store.slotsMap);
 
-	const currentScreenKey = useDescriptorsStore(
+	const currentScreenKey = useBuilderStore(
 		(s) => s.derivations.currentScreenKey,
 	);
-	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
-	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
-	const destinationPairKey = useDescriptorsStore(
+	const nextScreenKey = useBuilderStore((s) => s.derivations.nextScreenKey);
+	const sourcePairKey = useBuilderStore((s) => s.derivations.sourcePairKey);
+	const destinationPairKey = useBuilderStore(
 		(s) => s.derivations.destinationPairKey,
 	);
-	const destinationSlots = useOptionalScreenSlotStore(
+	const destinationIsScreenReady = useOptionalMotionStore(
 		nextScreenKey ?? currentScreenKey,
+		(store) => store.isScreenReady,
 	);
-	const unavailableInterpolatorReady = useSharedValue(0);
-	const interpolatorReady =
-		destinationSlots?.interpolatorReady ?? unavailableInterpolatorReady;
+	const unavailableIsScreenReady = useSharedValue(false);
+	const screenReadiness = destinationIsScreenReady ?? unavailableIsScreenReady;
 
 	const activeReceiverScreenKey = useBlankStackStore(
 		resolveActiveHandoffReceiver,
@@ -73,14 +73,24 @@ export const useBoundaryContentPortalAttachment = ({
 		resolvePreviousHandoffReceiver,
 	);
 
-	const activeReceiverAnimationProgress = SystemStore.getValue(
+	const localAnimationProgress = useMotionStore(
+		(store) => store.state.animationProgress,
+	);
+	const receiverAnimationProgress = useOptionalMotionStore(
+		activeReceiverScreenKey ?? currentScreenKey,
+		(store) => store.state.animationProgress,
+	);
+	const activeReceiverAnimationProgress =
+		receiverAnimationProgress ?? localAnimationProgress;
+
+	const activeReceiverClosing = useOptionalMotionStore(
 		activeReceiverScreenKey ?? currentScreenKey,
-		"animationProgress",
+		(store) => store.state.closing,
 	);
 
-	const activeReceiverClosing = AnimationStore.getValue(
+	const activeReceiverIsScreenReady = useOptionalMotionStore(
 		activeReceiverScreenKey ?? currentScreenKey,
-		"closing",
+		(store) => store.isScreenReady,
 	);
 
 	const attachedReceiverScreenKey = useSharedValue(currentScreenKey);
@@ -95,7 +105,7 @@ export const useBoundaryContentPortalAttachment = ({
 			handoffTarget,
 			...slotProps
 		} = slot?.props ?? {};
-		const closing = activeReceiverClosing.get();
+		const closing = activeReceiverClosing?.get() ?? 0;
 		const animationProgress = activeReceiverAnimationProgress.get();
 
 		if (!closing) {
@@ -167,7 +177,7 @@ export const useBoundaryContentPortalAttachment = ({
 			: null;
 		const requestedLink = requestedPair?.links[boundaryLinkKey];
 
-		const isInterpolatorReady = interpolatorReady.get();
+		const isScreenReady = screenReadiness.get();
 		const attachedScreenKey = attachedReceiverScreenKey.get();
 
 		const automaticReceiverScreenKey = resolveHandoffAttachmentCandidate({
@@ -175,7 +185,7 @@ export const useBoundaryContentPortalAttachment = ({
 			activeReceiverScreenKey,
 			attachedReceiverScreenKey: attachedScreenKey,
 			hasActiveCloseFinished,
-			interpolatorReady: !!isInterpolatorReady,
+			isScreenReady,
 			pairChangedDuringClose,
 			pairDestinationScreenKey: pairDestination,
 			pairHasBoundaryLink: automaticLink !== undefined,
@@ -189,7 +199,7 @@ export const useBoundaryContentPortalAttachment = ({
 			automaticScreenKey: automaticReceiverScreenKey,
 			destinationReady:
 				requestedDestinationScreenKey === activeReceiverScreenKey ||
-				!!isInterpolatorReady,
+				isScreenReady,
 			destinationScreenKey: requestedDestinationScreenKey,
 			handoffTarget,
 			sourceScreenKey:
@@ -209,13 +219,18 @@ export const useBoundaryContentPortalAttachment = ({
 
 		const activatingPairDestination =
 			!!pairDestination &&
-			!!isInterpolatorReady &&
+			isScreenReady &&
 			nextReceiverScreenKey === pairDestination;
 
-		const canActivateReceiver =
-			returningFromActiveClose ||
-			activatingPairDestination ||
-			animationProgress > 0;
+		const canActivateReceiver = canActivateHandoffReceiver({
+			returningFromActiveClose,
+			activatingPairDestination,
+			animationProgress,
+			receiverIsActiveDestination:
+				!returningFromActiveClose &&
+				nextReceiverScreenKey === activeReceiverScreenKey,
+			destinationIsScreenReady: activeReceiverIsScreenReady?.get(),
+		});
 
 		if (nextReceiverScreenKey && receiverReady && canActivateReceiver) {
 			attachedReceiverScreenKey.set(nextReceiverScreenKey);

package/src/components/boundary/portal/components/boundary-portal/components/host.tsx

@@ -7,7 +7,7 @@ import {
 	type ViewStyle,
 } from "react-native";
 import Animated from "react-native-reanimated";
-import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
+import { useBuilderStore } from "../../../../../../providers/screen/builder";
 import { PORTAL_POINTER_EVENTS } from "../../../teleport";
 import { useHostMeasurement } from "../hooks/use-host-measurement";
 import { registerHost, unregisterHost } from "../stores/host-registry.store";
@@ -25,7 +25,7 @@ type HostImplProps = PublicHostProps & {
 };
 
 function HostImpl({ fallback = false, style }: HostImplProps) {
-	const screenKey = useDescriptorsStore((s) => s.derivations.currentScreenKey);
+	const screenKey = useBuilderStore((s) => s.derivations.currentScreenKey);
 	const generatedHostKeyRef = useRef<string | null>(null);
 
 	if (generatedHostKeyRef.current === null) {

package/src/components/boundary/portal/components/boundary-portal/components/portal-boundary-host.tsx

@@ -12,7 +12,7 @@ import Animated, {
 	useAnimatedStyle,
 } from "react-native-reanimated";
 import { NO_STYLES } from "../../../../../../constants";
-import { composeSlotStyleWithLocalTransform } from "../../../../../../providers/screen/styles/helpers/compose-slot-style";
+import { composeSlotStyleWithLocalTransform } from "../../../../../../providers/screen/orchestrator/styles/helpers/compose-slot-style";
 import { NativePortalHost, PORTAL_POINTER_EVENTS } from "../../../teleport";
 import { resolveBoundaryLocalMeasurement } from "../helpers/local-measurement";
 import { resolvePortalOffsetStyle } from "../helpers/offset-style";

package/src/components/boundary/portal/components/boundary-portal/hooks/use-boundary-portal-attachment.ts

@@ -1,6 +1,6 @@
 import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
-import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
-import { useScreenSlotStore } from "../../../../../../providers/screen/styles";
+import { useBuilderStore } from "../../../../../../providers/screen/builder";
+import { useOrchestratorStore } from "../../../../../../providers/screen/orchestrator";
 import { useBoundaryRootStore } from "../../../../providers/boundary-root.provider";
 import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
 import { useActiveHostKey } from "../stores/host-registry.store";
@@ -20,10 +20,10 @@ export const useBoundaryPortalAttachment = ({
 
 		return root.localMeasurement;
 	});
-	const currentScreenKey = useDescriptorsStore(
+	const currentScreenKey = useBuilderStore(
 		(s) => s.derivations.currentScreenKey,
 	);
-	const slotsMap = useScreenSlotStore((store) => store.slotsMap);
+	const slotsMap = useOrchestratorStore((store) => store.slotsMap);
 	const portalHostName = useSharedValue<string | null>(null);
 	const portalHostReady = useSharedValue(false);
 	const escapeHostKey = useActiveHostKey(currentScreenKey);

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

@@ -9,11 +9,11 @@ import {
 import type { View } from "react-native";
 import type { AnimatedRef } from "react-native-reanimated";
 import { useAnimatedRef, useSharedValue } from "react-native-reanimated";
-import { useDescriptorsStore } from "../../../providers/screen/descriptors";
+import { useBuilderStore } from "../../../providers/screen/builder";
 import {
 	useComposedSlotStyles,
 	useSlotStackingStyles,
-} from "../../../providers/screen/styles";
+} from "../../../providers/screen/orchestrator/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";
@@ -99,7 +99,7 @@ export const {
 			escapeClipping,
 		});
 
-		const currentScreenKey = useDescriptorsStore(
+		const currentScreenKey = useBuilderStore(
 			(s) => s.derivations.currentScreenKey,
 		);
 		const isCurrentScreenClosing = useBlankStackStore(

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

@@ -86,13 +86,13 @@ export const isMeasurementInViewport = (
 
 export const correctMeasuredBoundsForVisibilityGate = ({
 	measured,
-	visibilityBlocked,
+	isScreenReady,
 	visibilityBlockOffset,
 	viewportWidth,
 	viewportHeight,
 }: {
 	measured: MeasuredDimensions;
-	visibilityBlocked: boolean;
+	isScreenReady: boolean;
 	visibilityBlockOffset: number;
 	viewportWidth: number;
 	viewportHeight: number;
@@ -100,7 +100,7 @@ export const correctMeasuredBoundsForVisibilityGate = ({
 	"worklet";
 
 	if (
-		!visibilityBlocked ||
+		isScreenReady ||
 		visibilityBlockOffset <= 0 ||
 		isMeasurementInViewport(measured, viewportWidth, viewportHeight)
 	) {

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

@@ -1,14 +1,19 @@
 /** 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 { LayoutChangeEvent } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
 import Animated, { useComposedEventHandler } from "react-native-reanimated";
 import {
 	ScrollMetadataOwnerProvider,
 	useScrollGestureCoordination,
-} from "../providers/screen/gestures/scroll-coordination";
-import { useSlotProps, useSlotStyles } from "../providers/screen/styles";
+} from "../providers/screen/motion/gestures/scroll-coordination";
+import {
+	useSlotProps,
+	useSlotStyles,
+} from "../providers/screen/orchestrator/styles";
 import type { TransitionAwareProps } from "../types/screen.types";
+import { useContentLayout } from "./screen/container/hooks/use-content-layout";
 
 interface CreateTransitionAwareComponentOptions {
 	isScrollable?: boolean;
@@ -110,17 +115,27 @@ export function createTransitionAwareComponent<P extends object>(
 			children,
 			style,
 			styleId,
+			onLayout,
 			animatedProps: userAnimatedProps,
 			...rest
 		} = props as any;
 
 		const associatedStyles = useSlotStyles(styleId);
 		const associatedProps = useSlotProps(styleId);
+		const measureLayout = useContentLayout(styleId);
 
 		return (
 			<AnimatedComponent
 				{...(rest as any)}
 				ref={ref}
+				onLayout={
+					measureLayout
+						? (event: LayoutChangeEvent) => {
+								measureLayout(event);
+								onLayout?.(event);
+							}
+						: onLayout
+				}
 				style={[style, associatedStyles]}
 				animatedProps={userAnimatedProps ?? associatedProps}
 			>

package/src/components/overlay/helpers/create-overlay-interpolator-frame.ts

@@ -1,5 +1,5 @@
-import { updateDerivations } from "../../../providers/screen/animation/helpers/derivations";
-import type { ScreenInterpolatorFrame } from "../../../providers/screen/animation/helpers/pipeline";
+import { updateDerivations } from "../../../providers/screen/orchestrator/helpers/derivations";
+import type { ScreenInterpolatorFrame } from "../../../providers/screen/orchestrator/helpers/pipeline";
 
 export const shouldUseOverlayGestureDriver = (
 	overlayFrame: ScreenInterpolatorFrame,

package/src/components/overlay/helpers/get-active-overlay.ts

@@ -2,8 +2,6 @@ import type { BaseStackScene } from "../../../types/stack.types";
 
 type StackScene = BaseStackScene;
 
-import { isOverlayVisible } from "../../../utils/overlay/visibility";
-
 export type FloatOverlayEntry = {
 	scene: StackScene;
 	overlayIndex: number;
@@ -19,7 +17,6 @@ export type FloatOverlayTransitionEntry = FloatOverlayEntry & {
  */
 export function getFloatOverlayStack(
 	scenes: StackScene[],
-	transitionsAlwaysOn: boolean,
 ): FloatOverlayEntry[] {
 	const candidates: FloatOverlayEntry[] = [];
 
@@ -27,11 +24,7 @@ export function getFloatOverlayStack(
 		const scene = scenes[index];
 		const options = scene?.descriptor?.options;
 
-		if (!transitionsAlwaysOn && !options?.enableTransitions) {
-			continue;
-		}
-
-		if (isOverlayVisible(options)) {
+		if (options?.overlay && options?.overlayShown !== false) {
 			candidates.push({ scene, overlayIndex: index });
 		}
 	}

package/src/components/overlay/helpers/retain-ready-overlay-resources.ts

@@ -1,47 +1,38 @@
-import type { ScreenAnimationContextValue } from "../../../providers/screen/animation/animation.provider";
-import type { ScreenSlotContextValue } from "../../../providers/screen/styles/slot.provider";
+import type { SharedValue } from "react-native-reanimated";
+import type { OrchestratorState } from "../../../providers/screen/orchestrator/orchestrator.provider";
 import type { FloatOverlayEntry } from "./get-active-overlay";
 
 export type ReadyOverlayResources = {
-	overlayAnimationStore: ScreenAnimationContextValue;
-	overlaySlots: ScreenSlotContextValue;
+	overlayAnimationStore: OrchestratorState;
 	driverScene: FloatOverlayEntry["scene"];
-	driverAnimationStore: ScreenAnimationContextValue;
-	driverSlots: ScreenSlotContextValue;
+	driverAnimationStore: OrchestratorState;
+	driverIsScreenReady: SharedValue<boolean>;
 };
 
 export function retainReadyOverlayResources(
 	previous: ReadyOverlayResources | null,
-	overlayAnimationStore: ScreenAnimationContextValue | null,
-	overlaySlots: ScreenSlotContextValue | null,
+	overlayAnimationStore: OrchestratorState | null,
 	driverScene: FloatOverlayEntry["scene"],
-	driverAnimationStore: ScreenAnimationContextValue | null,
-	driverSlots: ScreenSlotContextValue | null,
+	driverAnimationStore: OrchestratorState | null,
+	driverIsScreenReady: SharedValue<boolean> | null,
 ): ReadyOverlayResources | null {
-	if (
-		!overlayAnimationStore ||
-		!overlaySlots ||
-		!driverAnimationStore ||
-		!driverSlots
-	) {
+	if (!overlayAnimationStore || !driverAnimationStore || !driverIsScreenReady) {
 		return previous;
 	}
 
 	if (
 		previous?.overlayAnimationStore === overlayAnimationStore &&
-		previous.overlaySlots === overlaySlots &&
 		previous.driverScene === driverScene &&
 		previous.driverAnimationStore === driverAnimationStore &&
-		previous.driverSlots === driverSlots
+		previous.driverIsScreenReady === driverIsScreenReady
 	) {
 		return previous;
 	}
 
 	return {
 		overlayAnimationStore,
-		overlaySlots,
 		driverScene,
 		driverAnimationStore,
-		driverSlots,
+		driverIsScreenReady,
 	};
 }

package/src/components/overlay/helpers/run-overlay-slot-interpolator.ts

@@ -1,22 +1,19 @@
-import type { ScreenInterpolatorFrame } from "../../../providers/screen/animation/helpers/pipeline";
-import { createInterpolatorScope } from "../../../providers/screen/styles/helpers/create-interpolator-scope";
-import { normalizeSlots } from "../../../providers/screen/styles/helpers/normalize-slots";
-import { selectInterpolatorFrame } from "../../../providers/screen/styles/helpers/select-interpolator-frame";
+import type { ScreenInterpolatorFrame } from "../../../providers/screen/orchestrator/helpers/pipeline";
+import { createInterpolatorScope } from "../../../providers/screen/orchestrator/styles/helpers/create-interpolator-scope";
+import { normalizeSlots } from "../../../providers/screen/orchestrator/styles/helpers/normalize-slots";
+import { selectInterpolatorFrame } from "../../../providers/screen/orchestrator/styles/helpers/select-interpolator-frame";
 import type {
 	NormalizedTransitionSlotStyle,
 	ScreenStyleInterpolator,
-	ScreenTransitionAccessor,
 } from "../../../types/animation.types";
 import { logger } from "../../../utils/logger";
 
 export const runOverlaySlotInterpolator = ({
 	frame,
 	interpolator,
-	transition,
 }: {
 	frame: ScreenInterpolatorFrame;
 	interpolator: ScreenStyleInterpolator | undefined;
-	transition: ScreenTransitionAccessor;
 }): NormalizedTransitionSlotStyle | undefined => {
 	"worklet";
 
@@ -29,7 +26,6 @@ export const runOverlaySlotInterpolator = ({
 			createInterpolatorScope({
 				frame,
 				selectedFrame: selectInterpolatorFrame(frame, false),
-				transition,
 			}),
 		);
 

package/src/components/overlay/hooks/use-overlay-slot.ts

@@ -1,4 +1,3 @@
-import { useMemo } from "react";
 import { useWindowDimensions } from "react-native";
 import {
 	type SharedValue,
@@ -7,9 +6,7 @@ import {
 	useDerivedValue,
 } from "react-native-reanimated";
 import { NO_PROPS, NO_STYLES } from "../../../constants";
-import type { ScreenAnimationContextValue } from "../../../providers/screen/animation/animation.provider";
-import { useBuildTransitionAccessor } from "../../../providers/screen/animation/helpers/accessors/use-build-transition-accessor";
-import { collectInterpolatorSharedValues } from "../../../providers/screen/styles/helpers/collect-interpolator-shared-values";
+import type { OrchestratorState } from "../../../providers/screen/orchestrator/orchestrator.provider";
 import type {
 	NormalizedTransitionSlotStyle,
 	ScreenStyleInterpolator,
@@ -27,42 +24,23 @@ export const useOverlaySlot = ({
 	driverAnimationStore,
 	previousOverlayAnimationStore,
 	driverInterpolator,
-	interpolatorReady,
+	isScreenReady,
+	ancestorIsScreenReady,
 	isIncoming,
 }: {
-	overlayAnimationStore: ScreenAnimationContextValue;
+	overlayAnimationStore: OrchestratorState;
 	overlayInterpolator: ScreenStyleInterpolator | undefined;
-	driverAnimationStore: ScreenAnimationContextValue;
-	previousOverlayAnimationStore?: ScreenAnimationContextValue;
+	driverAnimationStore: OrchestratorState;
+	previousOverlayAnimationStore?: OrchestratorState;
 	driverInterpolator: ScreenStyleInterpolator | undefined;
-	interpolatorReady: SharedValue<number>;
+	isScreenReady: SharedValue<boolean>;
+	ancestorIsScreenReady: SharedValue<boolean> | null;
 	isIncoming: boolean;
 }) => {
 	const { height } = useWindowDimensions();
-	const overlayTransition = useBuildTransitionAccessor(overlayAnimationStore);
-	const driverTransition = useBuildTransitionAccessor(driverAnimationStore);
-
-	const interpolatorSharedValues = useMemo(
-		() =>
-			collectInterpolatorSharedValues([
-				overlayInterpolator,
-				driverInterpolator,
-			]),
-		[overlayInterpolator, driverInterpolator],
-	);
-
 	const overlaySlot = useDerivedValue<
 		NormalizedTransitionSlotStyle | undefined
 	>(() => {
-		"worklet";
-		overlayAnimationStore.screenInterpolatorPropsRevision.get();
-		driverAnimationStore.screenInterpolatorPropsRevision.get();
-		previousOverlayAnimationStore?.screenInterpolatorPropsRevision.get();
-
-		for (let index = 0; index < interpolatorSharedValues.length; index++) {
-			interpolatorSharedValues[index]?.get();
-		}
-
 		const overlayFrame = overlayAnimationStore.screenInterpolatorProps.get();
 		const driverFrame = driverAnimationStore.screenInterpolatorProps.get();
 		const overlayOwnsGesture = shouldUseOverlayGestureDriver(
@@ -81,7 +59,6 @@ export const useOverlaySlot = ({
 			interpolator: overlayOwnsGesture
 				? overlayInterpolator
 				: driverInterpolator,
-			transition: overlayOwnsGesture ? overlayTransition : driverTransition,
 		});
 	});
 
@@ -92,7 +69,11 @@ export const useOverlaySlot = ({
 			return NO_STYLES;
 		}
 
-		if (isIncoming && !interpolatorReady.get()) {
+		if (
+			isIncoming &&
+			!isScreenReady.get() &&
+			(ancestorIsScreenReady?.get() ?? true)
+		) {
 			return {
 				transform: [{ translateY: getVisibilityBlockOffset(height) }],
 			};

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

@@ -1,5 +1,4 @@
 import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
-import { useStackCoreStore } from "../../../providers/stack/core.provider";
 
 import {
 	getFloatOverlayStack,
@@ -13,11 +12,9 @@ import { OverlayHost } from "./overlay-host";
  */
 export function FloatOverlay() {
 	const scenes = useBlankStackStore((store) => store.scenes);
-	const transitionsAlwaysOn = useStackCoreStore(
-		(store) => store.flags.TRANSITIONS_ALWAYS_ON,
-	);
 
-	const overlayStack = getFloatOverlayStack(scenes, transitionsAlwaysOn);
+	const overlayStack = getFloatOverlayStack(scenes);
+
 	if (overlayStack.length === 0) {
 		return null;
 	}