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

package/src/components/boundary/portal/stores/portal-boundary-host.store.ts

@@ -0,0 +1,93 @@
+import { useSyncExternalStore } from "react";
+import type { SharedValue } from "react-native-reanimated";
+import type { NormalizedTransitionInterpolatedStyle } from "../../../../types/animation.types";
+import type { BoundaryLocalMeasurementValue } from "../../types";
+
+export type ActivePortalBoundaryHost = {
+	boundaryId: string;
+	hostKey: string;
+	localMeasurement: BoundaryLocalMeasurementValue;
+	portalHostName: string;
+	portalHostReady: SharedValue<boolean>;
+	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
+};
+
+type PortalSnapshot = {
+	hostsByScope: Record<string, ActivePortalBoundaryHost[]>;
+};
+
+const EMPTY_HOSTS: ActivePortalBoundaryHost[] = [];
+
+const listeners = new Set<() => void>();
+const activeBoundaryHosts = new Map<string, ActivePortalBoundaryHost>();
+
+let snapshot: PortalSnapshot = {
+	hostsByScope: {},
+};
+
+// Preserve other overlays' snapshots so a registration only rerenders its owners.
+const emit = (...hostKeys: string[]) => {
+	const hostsByScope = { ...snapshot.hostsByScope };
+	for (const hostKey of new Set(hostKeys)) {
+		hostsByScope[hostKey] = Array.from(activeBoundaryHosts.values()).filter(
+			(host) => host.hostKey === hostKey,
+		);
+		if (!hostsByScope[hostKey].length) delete hostsByScope[hostKey];
+	}
+	snapshot = { hostsByScope };
+	for (const listener of listeners) listener();
+};
+
+const isSameHost = (
+	a: ActivePortalBoundaryHost,
+	b: ActivePortalBoundaryHost,
+) => {
+	return (
+		a.boundaryId === b.boundaryId &&
+		a.hostKey === b.hostKey &&
+		a.localMeasurement === b.localMeasurement &&
+		a.portalHostName === b.portalHostName &&
+		a.portalHostReady === b.portalHostReady &&
+		a.slotsMap === b.slotsMap
+	);
+};
+
+export const mountPortalBoundaryHost = (host: ActivePortalBoundaryHost) => {
+	const previous = activeBoundaryHosts.get(host.portalHostName);
+	if (previous && isSameHost(previous, host)) {
+		return;
+	}
+
+	activeBoundaryHosts.set(host.portalHostName, host);
+	emit(host.hostKey, previous?.hostKey ?? host.hostKey);
+};
+
+export const unmountPortalBoundaryHostByName = (
+	portalHostName: string | null | undefined,
+) => {
+	const host = portalHostName
+		? activeBoundaryHosts.get(portalHostName)
+		: undefined;
+	if (!host) {
+		return;
+	}
+
+	activeBoundaryHosts.delete(host.portalHostName);
+	emit(host.hostKey);
+};
+
+const subscribe = (listener: () => void) => {
+	listeners.add(listener);
+
+	return () => {
+		listeners.delete(listener);
+	};
+};
+
+export const useActivePortalBoundaryHosts = (hostKey: string) => {
+	return useSyncExternalStore(
+		subscribe,
+		() => snapshot.hostsByScope[hostKey] ?? EMPTY_HOSTS,
+		() => EMPTY_HOSTS,
+	);
+};

package/src/components/boundary/portal/utils/naming.ts

@@ -10,3 +10,13 @@ export const createBoundaryPortalHostName = (
 };
 
 export const PORTAL_HOST_NAME_RESET_VALUE = null;
+
+const BOUNDARY_CONTENT_PORTAL_HOST_NAME_SUFFIX = "-content-portal-host";
+
+export const createHandoffHostName = (
+	screenKey: string,
+	boundaryId: string,
+) => {
+	"worklet";
+	return `${screenKey}-${boundaryId}${BOUNDARY_CONTENT_PORTAL_HOST_NAME_SUFFIX}`;
+};

package/src/components/boundary/portal/utils/resolve-portal.ts

@@ -1,58 +1,19 @@
+import type { BoundaryRuntimeFlags } from "../../../../stores/bounds/types";
 import { logger } from "../../../../utils/logger";
 import { isTeleportAvailable } from "../teleport";
 
-export type BoundaryPortalRuntime = Readonly<{
-	handoff: boolean;
-	escapeClipping: boolean;
-}>;
-
-type ResolveBoundaryPortalParams = {
-	handoff?: boolean;
-	escapeClipping?: boolean;
-};
-
-const DISABLED_RUNTIME: BoundaryPortalRuntime = {
-	handoff: false,
-	escapeClipping: false,
-};
-const HANDOFF_RUNTIME: BoundaryPortalRuntime = {
-	handoff: true,
-	escapeClipping: false,
-};
-const ESCAPE_CLIPPING_RUNTIME: BoundaryPortalRuntime = {
-	handoff: false,
-	escapeClipping: true,
-};
-const HANDOFF_ESCAPE_CLIPPING_RUNTIME: BoundaryPortalRuntime = {
-	handoff: true,
-	escapeClipping: true,
-};
-
 export const resolveBoundaryPortal = ({
-	handoff,
-	escapeClipping,
-}: ResolveBoundaryPortalParams): BoundaryPortalRuntime => {
-	const resolvedHandoff = handoff ?? false;
-	const resolvedEscapeClipping = escapeClipping ?? false;
-
-	const enabled = resolvedHandoff || resolvedEscapeClipping;
-
-	if (!enabled) {
-		return DISABLED_RUNTIME;
-	}
-
-	if (!isTeleportAvailable) {
+	handoff = false,
+	escapeClipping = false,
+}: BoundaryRuntimeFlags) => {
+	if (!isTeleportAvailable && (handoff || escapeClipping)) {
 		logger.warnOnce(
 			"boundary:teleport-missing",
 			"react-native-teleport is not installed; handoff and escapeClipping boundaries will render inline.",
 		);
-
-		return DISABLED_RUNTIME;
 	}
-
-	return resolvedHandoff
-		? resolvedEscapeClipping
-			? HANDOFF_ESCAPE_CLIPPING_RUNTIME
-			: HANDOFF_RUNTIME
-		: ESCAPE_CLIPPING_RUNTIME;
+	return {
+		handoff: isTeleportAvailable && handoff,
+		escapeClipping: isTeleportAvailable && escapeClipping,
+	};
 };

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

@@ -9,21 +9,16 @@ import {
 import type { View } from "react-native";
 import type { AnimatedRef } from "react-native-reanimated";
 import { useAnimatedRef, useSharedValue } from "react-native-reanimated";
-import { useBuilderStore } from "../../../providers/screen/builder";
-import {
-	useComposedSlotStyles,
-	useSlotStackingStyles,
-} from "../../../providers/screen/orchestrator/styles";
-import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
+import { useBlankStackStore } from "../../../navigators/blank-stack/state/blank-stack.provider";
+import { useBuilderStore } from "../../../providers/builder";
 import { createBoundTag } from "../../../stores/bounds/helpers/link-pairs.helpers";
 import type { BoundTag } from "../../../stores/bounds/types";
 import createProvider from "../../../utils/create-provider";
 import { logger } from "../../../utils/logger";
 import { BoundaryLifecycle } from "../components/boundary-lifecycle";
-import {
-	type BoundaryPortalRuntime,
-	resolveBoundaryPortal,
-} from "../portal/utils/resolve-portal";
+import { useBoundaryPresentation } from "../hooks/use-boundary-presentation";
+import { useComposedBoundaryStyle } from "../hooks/use-composed-boundary-style";
+import { resolveBoundaryPortal } from "../portal/utils/resolve-portal";
 import type {
 	BoundaryConfigProps,
 	BoundaryId,
@@ -42,13 +37,17 @@ export const TARGET_OUTSIDE_ROOT_WARNING =
 	"Boundary.Target must be rendered inside Transition.Boundary or a component created by createBoundaryComponent.";
 
 export type BoundaryRootRenderState = {
+	boundaryPresentation: ReturnType<
+		typeof useBoundaryPresentation
+	>["presentation"];
+	slotsMap: ReturnType<typeof useBoundaryPresentation>["slotsMap"];
 	attachedStyle: unknown;
 	boundTag: BoundTag;
 	currentScreenKey: string;
 	handoffEnabled: boolean;
 	localMeasurement: BoundaryLocalMeasurementValue;
 	measurementRef: AnimatedRef<View>;
-	portalRuntime: BoundaryPortalRuntime;
+	portalRuntime: ReturnType<typeof resolveBoundaryPortal>;
 	ref: AnimatedRef<View>;
 	shouldRenderBoundaryRootThroughPortal: boolean;
 	shouldRenderHandoffHost: boolean;
@@ -94,10 +93,10 @@ export const {
 			() => createBoundTag(String(id), group),
 			[id, group],
 		);
-		const portalRuntime = resolveBoundaryPortal({
-			handoff,
-			escapeClipping,
-		});
+		const portalRuntime = useMemo(
+			() => resolveBoundaryPortal({ handoff, escapeClipping }),
+			[handoff, escapeClipping],
+		);
 
 		const currentScreenKey = useBuilderStore(
 			(s) => s.derivations.currentScreenKey,
@@ -124,8 +123,19 @@ export const {
 		const shouldAttachAssociatedStyles = enabled;
 		const shouldEscapeBoundaryRootToScreenHost = portalRuntime.escapeClipping;
 
-		const associatedStyles = useComposedSlotStyles(boundTag.tag, style);
-		const associatedStackingStyles = useSlotStackingStyles(boundTag.tag);
+		const { presentation: boundaryPresentation, slotsMap } =
+			useBoundaryPresentation(
+				boundTag.tag,
+				enabled && (portalRuntime.handoff || portalRuntime.escapeClipping),
+			);
+
+		const associatedStyles = useComposedBoundaryStyle(
+			slotsMap,
+			boundTag.tag,
+			style,
+			hasTarget ? "stacking" : "full",
+		);
+
 		const rootRef = useAnimatedRef<View>();
 		const measurementRef = useAnimatedRef<View>();
 		const localMeasurement = useSharedValue<BoundaryLocalMeasurement | null>(
@@ -155,16 +165,16 @@ export const {
 		// Host-only handoff receivers still need the associated style: their
 		// handoff host is absolute-filled inside this root, so the root is the
 		// visual frame that animates the received payload.
-		const attachedStyle = shouldAttachAssociatedStyles
-			? hasTarget
-				? associatedStackingStyles
-				: shouldRenderBoundaryRootThroughPortal
-					? undefined
-					: associatedStyles
-			: undefined;
+		const attachedStyle =
+			shouldAttachAssociatedStyles &&
+			(hasTarget || !shouldRenderBoundaryRootThroughPortal)
+				? associatedStyles
+				: undefined;
 
 		const value = useMemo<BoundaryRootContextValue>(
 			() => ({
+				boundaryPresentation,
+				slotsMap,
 				attachedStyle,
 				boundTag,
 				currentScreenKey,
@@ -177,6 +187,8 @@ export const {
 				shouldRenderHandoffHost: handoffEnabled && !hasTarget,
 			}),
 			[
+				boundaryPresentation,
+				slotsMap,
 				attachedStyle,
 				boundTag,
 				currentScreenKey,

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

@@ -7,13 +7,10 @@ import Animated, { useComposedEventHandler } from "react-native-reanimated";
 import {
 	ScrollMetadataOwnerProvider,
 	useScrollGestureCoordination,
-} from "../providers/screen/motion/gestures/scroll-coordination";
-import {
-	useSlotProps,
-	useSlotStyles,
-} from "../providers/screen/orchestrator/styles";
+} from "../providers/motion/gestures/scroll-coordination";
+import { useSlotProps, useSlotStyles } from "../providers/orchestrator/styles";
 import type { TransitionAwareProps } from "../types/screen.types";
-import { useContentLayout } from "./screen/container/hooks/use-content-layout";
+import { useContentLayout } from "./screen-layers/hooks/use-content-layout";
 
 interface CreateTransitionAwareComponentOptions {
 	isScrollable?: boolean;

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

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

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

@@ -1,5 +1,5 @@
 import type { SharedValue } from "react-native-reanimated";
-import type { OrchestratorState } from "../../../providers/screen/orchestrator/orchestrator.provider";
+import type { OrchestratorState } from "../../../providers/orchestrator/orchestrator.provider";
 import type { FloatOverlayEntry } from "./get-active-overlay";
 
 export type ReadyOverlayResources = {

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

@@ -1,7 +1,7 @@
-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 { ScreenInterpolatorFrame } from "../../../providers/orchestrator/helpers/pipeline";
+import { createInterpolatorScope } from "../../../providers/orchestrator/styles/helpers/create-interpolator-scope";
+import { normalizeSlots } from "../../../providers/orchestrator/styles/helpers/normalize-slots";
+import { selectInterpolatorFrame } from "../../../providers/orchestrator/styles/helpers/select-interpolator-frame";
 import type {
 	NormalizedTransitionSlotStyle,
 	ScreenStyleInterpolator,

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

@@ -6,7 +6,7 @@ import {
 	useDerivedValue,
 } from "react-native-reanimated";
 import { NO_PROPS, NO_STYLES } from "../../../constants";
-import type { OrchestratorState } from "../../../providers/screen/orchestrator/orchestrator.provider";
+import type { OrchestratorState } from "../../../providers/orchestrator/orchestrator.provider";
 import type {
 	NormalizedTransitionSlotStyle,
 	ScreenStyleInterpolator,

package/src/components/overlay/index.tsx

@@ -0,0 +1,33 @@
+import { useBlankStackStore } from "../../navigators/blank-stack/state/blank-stack.provider";
+
+import {
+	getFloatOverlayStack,
+	getFloatOverlayTransitions,
+} from "./helpers/get-active-overlay";
+import { OverlayHost } from "./variations/overlay-host";
+
+/**
+ * Overlay component that renders above all screens.
+ * Gets routes and descriptors from stack context.
+ */
+export function Overlay() {
+	const scenes = useBlankStackStore((store) => store.scenes);
+
+	const overlayStack = getFloatOverlayStack(scenes);
+
+	if (overlayStack.length === 0) {
+		return null;
+	}
+
+	const overlayTransitions = getFloatOverlayTransitions(overlayStack, scenes);
+
+	return overlayTransitions.map(({ scene, driverScene }, layerIndex) => (
+		<OverlayHost
+			key={scene.route.key}
+			scene={scene}
+			driverScene={driverScene}
+			previousOverlayScene={overlayTransitions[layerIndex - 1]?.scene}
+			layerIndex={layerIndex}
+		/>
+	));
+}

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

@@ -4,14 +4,14 @@ import Animated, {
 	type SharedValue,
 	useDerivedValue,
 } from "react-native-reanimated";
-import { snapDescriptorToIndex } from "../../../animation/snap-to";
-import { useOptionalMotionStore } from "../../../providers/screen/motion";
-import { useOptionalOrchestratorStore } from "../../../providers/screen/orchestrator";
+import { snapDescriptorToIndex } from "../../../controls/snap-to";
+import { useBlankStackStore } from "../../../navigators/blank-stack/state/blank-stack.provider";
+import { useOptionalMotionStore } from "../../../providers/motion";
+import { useOptionalOrchestratorStore } from "../../../providers/orchestrator";
 import {
 	OrchestratorProvider,
 	type OrchestratorState,
-} from "../../../providers/screen/orchestrator/orchestrator.provider";
-import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
+} from "../../../providers/orchestrator/orchestrator.provider";
 import type { OverlayProps } from "../../../types/overlay.types";
 import type { FloatOverlayEntry } from "../helpers/get-active-overlay";
 import {

package/src/components/screen-layers/helpers/find-collapse-target.ts

@@ -0,0 +1,62 @@
+import { EPSILON } from "../../../constants";
+import { sanitizeSnapPoints } from "../../../providers/motion/gestures/shared/snap-points";
+
+interface FindCollapseTargetResult {
+	target: number;
+	shouldDismiss: boolean;
+}
+
+/**
+ * Finds the next lower snap point for backdrop collapse behavior.
+ *
+ * - If above min snap: returns next lower snap point
+ * - If at or below min snap: returns 0 (dismiss) if canDismiss, else stays at min
+ *
+ * @param currentProgress - Current animation progress
+ * @param snapPoints - Array of snap points
+ * @param canDismiss - Whether dismissing is allowed
+ */
+export function findCollapseTarget(
+	currentProgress: number,
+	snapPoints: number[],
+	canDismiss: boolean,
+): FindCollapseTargetResult {
+	"worklet";
+
+	const normalized = sanitizeSnapPoints(snapPoints, canDismiss);
+
+	if (normalized.length === 0) {
+		return canDismiss
+			? { target: 0, shouldDismiss: true }
+			: { target: currentProgress, shouldDismiss: false };
+	}
+
+	let minSnap = normalized[0];
+	let nextLowerSnap: number | null = null;
+
+	for (let i = 0; i < normalized.length; i++) {
+		const snap = normalized[i];
+		if (snap < minSnap) {
+			minSnap = snap;
+		}
+
+		if (
+			snap < currentProgress - EPSILON &&
+			(nextLowerSnap === null || snap > nextLowerSnap)
+		) {
+			nextLowerSnap = snap;
+		}
+	}
+
+	if (nextLowerSnap !== null) {
+		return { target: nextLowerSnap, shouldDismiss: false };
+	}
+
+	// At or below min snap → dismiss if allowed
+	if (canDismiss) {
+		return { target: 0, shouldDismiss: true };
+	}
+
+	// Can't dismiss, stay at min
+	return { target: minSnap, shouldDismiss: false };
+}

package/src/components/screen-layers/helpers/layer-component.tsx

@@ -0,0 +1,38 @@
+import { type ComponentType, type ReactNode, useMemo } from "react";
+import type { ViewProps } from "react-native";
+import Animated from "react-native-reanimated";
+import type { ScreenLayerComponentProps } from "../../../types";
+import { usesLayerRenderProps } from "./uses-layer-render-props";
+
+/** Adapts the two supported custom layer APIs without changing component identity. */
+export function LayerComponent({
+	component,
+	styles,
+	props,
+	pointerEvents,
+	children,
+	collapsable,
+}: ScreenLayerComponentProps & {
+	component?: ComponentType<any>;
+	children?: ReactNode;
+	collapsable?: ViewProps["collapsable"];
+}) {
+	const renderProps = component && usesLayerRenderProps(component);
+	const Component = useMemo<ComponentType<any>>(() => {
+		if (!component) return Animated.View;
+		return usesLayerRenderProps(component)
+			? component
+			: Animated.createAnimatedComponent(component);
+	}, [component]);
+	return (
+		<Component
+			{...(renderProps
+				? { styles, props }
+				: { style: styles, animatedProps: props })}
+			pointerEvents={pointerEvents}
+			collapsable={collapsable}
+		>
+			{children}
+		</Component>
+	);
+}

package/src/components/screen-layers/hooks/use-backdrop-pointer-events.ts

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { useAnimatedReaction } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+import { useBuilderStore } from "../../../providers/builder";
+import { useMotionStore } from "../../../providers/motion";
+import type { BackdropBehavior } from "../../../types/screen.types";
+
+interface BackdropPointerEventsResult {
+	pointerEvents: "box-none" | undefined;
+	backdropBehavior: BackdropBehavior;
+	isBackdropActive: boolean;
+}
+
+/**
+ * Returns pointer events and backdrop behavior based on screen options.
+ *
+ * - Runtime interpolator `backdropBehavior` takes precedence
+ * - Explicit descriptor `backdropBehavior` option is next
+ * - Otherwise defaults to 'block' (undefined = normal touch handling)
+ */
+export function useBackdropPointerEvents(): BackdropPointerEventsResult {
+	const screenOptions = useMotionStore((store) => store.options);
+	const descriptorBackdropBehavior = useBuilderStore(
+		(store) => store.options.backdropBehavior,
+	);
+	const [runtimeBackdropBehavior, setRuntimeBackdropBehavior] = useState<
+		BackdropBehavior | undefined
+	>(undefined);
+
+	useAnimatedReaction(
+		() => screenOptions.get().backdropBehavior,
+		(next, previous) => {
+			"worklet";
+			if (next !== previous) {
+				scheduleOnRN(setRuntimeBackdropBehavior, next);
+			}
+		},
+		[screenOptions],
+	);
+
+	const backdropBehavior: BackdropBehavior =
+		runtimeBackdropBehavior ?? descriptorBackdropBehavior ?? "block";
+
+	const pointerEvents =
+		backdropBehavior === "passthrough" ? "box-none" : undefined;
+
+	const isBackdropActive =
+		backdropBehavior === "dismiss" || backdropBehavior === "collapse";
+
+	return { pointerEvents, backdropBehavior, isBackdropActive };
+}

package/src/components/screen-layers/hooks/use-content-layout.ts

@@ -0,0 +1,84 @@
+import { useCallback } from "react";
+import { type LayoutChangeEvent, useWindowDimensions } from "react-native";
+import { scheduleOnUI } from "react-native-worklets";
+import { useOptionalBuilderStore } from "../../../providers/builder";
+import { useOptionalMotionStore } from "../../../providers/motion";
+import { LifecycleTransitionRequestKind } from "../../../providers/motion/hooks/use-transition-values";
+
+/** "content" identifies the full content wrapper and is reserved internally. */
+export function useContentLayout(styleId: string | undefined) {
+	const isContent = styleId === "content";
+	const builder = useOptionalBuilderStore((store) =>
+		isContent ||
+		(styleId !== undefined && store?.options.snapPoints?.includes(styleId))
+			? store
+			: null,
+	);
+	const { height: screenHeight } = useWindowDimensions();
+	const animations = useOptionalMotionStore((store) =>
+		builder ? store?.state : undefined,
+	);
+	const isFirstKey = builder?.derivations.isFirstKey;
+	const experimental_animateOnInitialMount =
+		builder?.options.experimental_animateOnInitialMount;
+	const snapPoint = isContent ? "auto" : styleId;
+	const measureSnap =
+		snapPoint !== undefined && builder?.options.snapPoints?.includes(snapPoint);
+
+	const handleLayout = useCallback(
+		(event: LayoutChangeEvent) => {
+			if (!animations) return;
+			const { targetProgress, resolvedAutoSnapPoint, measuredContentLayout } =
+				animations;
+			const { requestLifecycleTransition } = animations.actions;
+			const { width, height } = event.nativeEvent.layout;
+			if (width <= 0 || height <= 0) return;
+
+			const fraction = Math.min(height / screenHeight, 1);
+
+			scheduleOnUI(
+				(nextWidth: number, nextHeight: number, nextFraction: number) => {
+					"worklet";
+					if (isContent) {
+						measuredContentLayout.set({ width: nextWidth, height: nextHeight });
+					}
+					if (!measureSnap) return;
+
+					const isFirstMeasurement = resolvedAutoSnapPoint.get() <= 0;
+					resolvedAutoSnapPoint.set(nextFraction);
+
+					if (
+						!isFirstMeasurement ||
+						animations.transitionProgress.get() !== 0 ||
+						animations.progressAnimating.get() !== 0
+					) {
+						return;
+					}
+
+					if (isFirstKey && !experimental_animateOnInitialMount) {
+						targetProgress.set(nextFraction);
+						animations.transitionProgress.set(nextFraction);
+						return;
+					}
+
+					requestLifecycleTransition(
+						LifecycleTransitionRequestKind.Open,
+						nextFraction,
+					);
+				},
+				width,
+				height,
+				fraction,
+			);
+		},
+		[
+			animations,
+			isContent,
+			measureSnap,
+			isFirstKey,
+			screenHeight,
+			experimental_animateOnInitialMount,
+		],
+	);
+	return isContent || measureSnap ? handleLayout : undefined;
+}