react-native-screen-transitions 4.0.0-alpha.7 → 4.0.0-alpha.8

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

@@ -1,8 +1,11 @@
 import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
-import { useStack } from "../../../../../../hooks/navigation/use-stack";
 import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
-import { useScreenSlots } from "../../../../../../providers/screen/styles";
+import {
+	useOptionalScreenSlotStore,
+	useScreenSlotStore,
+} from "../../../../../../providers/screen/styles";
 import { hasCloseTransitionFinished } from "../../../../../../providers/screen/styles/helpers/transition-visual-state";
+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";
@@ -24,15 +27,26 @@ interface UseBoundaryContentPortalAttachmentParams {
 export const useBoundaryContentPortalAttachment = ({
 	boundaryId,
 }: UseBoundaryContentPortalAttachmentParams) => {
-	const { nextInterpolatorReady, slotsMap } = useScreenSlots();
+	const slotsMap = useScreenSlotStore((store) => store.slotsMap);
 
 	const currentScreenKey = useDescriptorsStore(
 		(s) => s.derivations.currentScreenKey,
 	);
+	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
 	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
+	const destinationSlots = useOptionalScreenSlotStore(
+		nextScreenKey ?? currentScreenKey,
+	);
+	const unavailableInterpolatorReady = useSharedValue(0);
+	const interpolatorReady =
+		destinationSlots?.interpolatorReady ?? unavailableInterpolatorReady;
 
-	const activeReceiverScreenKey = useStack(resolveActiveHandoffReceiver);
-	const previousReceiverScreenKey = useStack(resolvePreviousHandoffReceiver);
+	const activeReceiverScreenKey = useBlankStackStore(
+		resolveActiveHandoffReceiver,
+	);
+	const previousReceiverScreenKey = useBlankStackStore(
+		resolvePreviousHandoffReceiver,
+	);
 
 	const activeReceiverAnimationProgress = SystemStore.getValue(
 		activeReceiverScreenKey ?? currentScreenKey,
@@ -85,7 +99,7 @@ export const useBoundaryContentPortalAttachment = ({
 				? link.destination.screenKey
 				: null;
 
-		const interpolatorReady = nextInterpolatorReady.get();
+		const isInterpolatorReady = interpolatorReady.get();
 		const attachedScreenKey = attachedReceiverScreenKey.get();
 
 		const nextReceiverScreenKey = resolveHandoffAttachmentCandidate({
@@ -93,7 +107,7 @@ export const useBoundaryContentPortalAttachment = ({
 			activeReceiverScreenKey,
 			attachedReceiverScreenKey: attachedScreenKey,
 			hasActiveCloseFinished,
-			interpolatorReady: !!interpolatorReady,
+			interpolatorReady: !!isInterpolatorReady,
 			pairChangedDuringClose,
 			pairDestinationScreenKey: pairDestination,
 			previousReceiverScreenKey,
@@ -110,7 +124,7 @@ export const useBoundaryContentPortalAttachment = ({
 
 		const activatingPairDestination =
 			!!pairDestination &&
-			!!interpolatorReady &&
+			!!isInterpolatorReady &&
 			nextReceiverScreenKey === pairDestination;
 
 		const canActivateReceiver =

package/src/components/boundary/portal/components/boundary-portal/hooks/use-active-portal-boundary-host.ts

@@ -21,6 +21,23 @@ type UseActivePortalBoundaryHostParams = {
 	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
 };
 
+export const resolveActivePortalPairKey = ({
+	pairKey,
+	measurementPairKey,
+	hasAnimatedSlot,
+}: {
+	pairKey: ScreenPairKey | null;
+	measurementPairKey: ScreenPairKey | null | undefined;
+	hasAnimatedSlot: boolean;
+}): ScreenPairKey | null => {
+	"worklet";
+	if (!pairKey || measurementPairKey !== pairKey || !hasAnimatedSlot) {
+		return null;
+	}
+
+	return pairKey;
+};
+
 export const useActivePortalBoundaryHost = ({
 	boundaryId,
 	currentScreenKey,
@@ -43,11 +60,12 @@ export const useActivePortalBoundaryHost = ({
 			"worklet";
 			const pairKey = getPairKeyForSource(boundaryId, currentScreenKey);
 			const measurement = localMeasurement.get();
-			if (!pairKey || measurement?.pairKey !== pairKey) {
-				return null;
-			}
 
-			return pairKey;
+			return resolveActivePortalPairKey({
+				pairKey,
+				measurementPairKey: measurement?.pairKey,
+				hasAnimatedSlot: slotsMap.get()[boundaryId] !== undefined,
+			});
 		},
 		(pairKey, previousPairKey) => {
 			"worklet";

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

@@ -1,7 +1,7 @@
 import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
-import { useScreenSlots } from "../../../../../../providers/screen/styles";
-import type { BoundaryLocalMeasurementValue } from "../../../../types";
+import { useScreenSlotStore } from "../../../../../../providers/screen/styles";
+import { useBoundaryRootStore } from "../../../../providers/boundary-root.provider";
 import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
 import { isTeleportEnabled } from "../../../utils/teleport-control";
 import { useActiveHostKey } from "../stores/host-registry.store";
@@ -9,17 +9,22 @@ import { useActivePortalBoundaryHost } from "./use-active-portal-boundary-host";
 
 interface UseBoundaryPortalAttachmentParams {
 	boundaryId: string;
-	localMeasurement: BoundaryLocalMeasurementValue;
 }
 
 export const useBoundaryPortalAttachment = ({
 	boundaryId,
-	localMeasurement,
 }: UseBoundaryPortalAttachmentParams) => {
+	const localMeasurement = useBoundaryRootStore((root) => {
+		if (!root) {
+			throw new Error("Boundary portal attachment requires a boundary root.");
+		}
+
+		return root.localMeasurement;
+	});
 	const currentScreenKey = useDescriptorsStore(
 		(s) => s.derivations.currentScreenKey,
 	);
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useScreenSlotStore((store) => store.slotsMap);
 	const portalHostName = useSharedValue<string | null>(null);
 	const portalHostReady = useSharedValue(false);
 	const escapeHostKey = useActiveHostKey(currentScreenKey);

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

@@ -5,9 +5,9 @@ import {
 	type ReactNode,
 } from "react";
 import type { View } from "react-native";
-import Animated, { type AnimatedRef, runOnUI } from "react-native-reanimated";
+import Animated, { type AnimatedRef } from "react-native-reanimated";
+import { scheduleOnUI } from "react-native-worklets";
 import { logger } from "../../../../../utils/logger";
-import type { BoundaryLocalMeasurementValue } from "../../../types";
 import {
 	isTeleportAvailable,
 	PORTAL_POINTER_EVENTS,
@@ -36,7 +36,6 @@ type BoundaryPortalProps = {
 	boundaryId: string;
 	children: ReactNode;
 	enabled: boolean;
-	localMeasurement?: BoundaryLocalMeasurementValue;
 	placeholderRef?: AnimatedRef<View>;
 };
 
@@ -44,22 +43,15 @@ export const BoundaryPortal = memo(function BoundaryPortal({
 	boundaryId,
 	children,
 	enabled,
-	localMeasurement,
 	placeholderRef,
 }: BoundaryPortalProps) {
-	if (
-		!enabled ||
-		!localMeasurement ||
-		!isTeleportAvailable ||
-		!AnimatedNativePortal
-	) {
+	if (!enabled || !isTeleportAvailable || !AnimatedNativePortal) {
 		return children;
 	}
 
 	return (
 		<EnabledBoundaryPortal
 			boundaryId={boundaryId}
-			localMeasurement={localMeasurement}
 			placeholderRef={placeholderRef}
 		>
 			{children}
@@ -70,11 +62,8 @@ export const BoundaryPortal = memo(function BoundaryPortal({
 const EnabledBoundaryPortal = memo(function EnabledBoundaryPortal({
 	boundaryId,
 	children,
-	localMeasurement,
 	placeholderRef,
-}: Omit<BoundaryPortalProps, "enabled" | "localMeasurement"> & {
-	localMeasurement: BoundaryLocalMeasurementValue;
-}) {
+}: Omit<BoundaryPortalProps, "enabled">) {
 	if (__DEV__ && !boundaryId) {
 		logger.warnOnce(
 			"portal:missing-id",
@@ -82,10 +71,7 @@ const EnabledBoundaryPortal = memo(function EnabledBoundaryPortal({
 		);
 	}
 
-	const { teleportProps } = useBoundaryPortalAttachment({
-		boundaryId,
-		localMeasurement,
-	});
+	const { teleportProps } = useBoundaryPortalAttachment({ boundaryId });
 
 	const { handleOnLayout, placeholderStyle } = usePlaceholderStyles();
 
@@ -93,7 +79,7 @@ const EnabledBoundaryPortal = memo(function EnabledBoundaryPortal({
 		<Animated.View
 			ref={placeholderRef}
 			onLayout={({ nativeEvent: { layout } }) =>
-				runOnUI(handleOnLayout)(layout)
+				scheduleOnUI(handleOnLayout, layout)
 			}
 			style={placeholderStyle}
 			pointerEvents={PORTAL_POINTER_EVENTS}

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

@@ -68,10 +68,14 @@ type BoundaryRootProviderProps = Pick<
 	targetStyle?: unknown;
 };
 
-export const { BoundaryRootProvider, useBoundaryRootStore } = createProvider(
-	"BoundaryRoot",
-	{ guarded: false },
-)<BoundaryRootProviderProps, BoundaryRootContextValue>(
+export const {
+	BoundaryRootProvider,
+	useBoundaryRootStore,
+	useOptionalBoundaryRootStore,
+} = createProvider("BoundaryRoot")<
+	BoundaryRootProviderProps,
+	BoundaryRootContextValue
+>(
 	({
 		children,
 		config,
@@ -101,7 +105,7 @@ export const { BoundaryRootProvider, useBoundaryRootStore } = createProvider(
 		const isCurrentScreenClosing = useBlankStackStore(
 			(store) =>
 				portalRuntime.handoff &&
-				store?.scenesByKey[currentScreenKey]?.activity === "closing",
+				store.scenesByKey[currentScreenKey]?.activity === "closing",
 		);
 		const retainedBoundTagRef = useRef(requestedBoundTag);
 		const shouldRetainClosingBoundTag =

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

@@ -0,0 +1,41 @@
+import { updateDerivations } from "../../../providers/screen/animation/helpers/derivations";
+import type { ScreenInterpolatorFrame } from "../../../providers/screen/animation/helpers/pipeline";
+
+export const shouldUseOverlayGestureDriver = (
+	overlayFrame: ScreenInterpolatorFrame,
+	driverFrame: ScreenInterpolatorFrame,
+): boolean => {
+	"worklet";
+	const gesture = overlayFrame.current.gesture;
+
+	return (
+		driverFrame.current.route.key !== overlayFrame.current.route.key &&
+		!!(gesture.dragging || gesture.dismissing || gesture.settling)
+	);
+};
+
+export const createOverlayInterpolatorFrame = ({
+	overlayFrame,
+	driverFrame,
+	previousOverlayFrame,
+}: {
+	overlayFrame: ScreenInterpolatorFrame;
+	driverFrame: ScreenInterpolatorFrame;
+	previousOverlayFrame?: ScreenInterpolatorFrame;
+}): ScreenInterpolatorFrame => {
+	"worklet";
+	const current = overlayFrame.current;
+	const driverIsCurrent = driverFrame.current.route.key === current.route.key;
+	const frame: ScreenInterpolatorFrame = {
+		...overlayFrame,
+		previous: previousOverlayFrame?.current,
+		current,
+		next: driverIsCurrent ? undefined : driverFrame.current,
+		layouts: current.layouts,
+	};
+
+	updateDerivations(frame);
+	frame.stackProgress = overlayFrame.stackProgress;
+
+	return frame;
+};

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

@@ -1,39 +1,109 @@
-import type { StackScene } from "../../../hooks/navigation/use-stack";
+import type { BaseStackScene } from "../../../types/stack.types";
+
+type StackScene = BaseStackScene;
+
 import { isOverlayVisible } from "../../../utils/overlay/visibility";
 
+export type FloatOverlayActivity = "active" | "inert" | "inactive" | "closing";
+
+export type FloatOverlayEntry = {
+	scene: StackScene;
+	overlayIndex: number;
+	activity: FloatOverlayActivity;
+};
+
+export type FloatOverlayTransitionEntry = FloatOverlayEntry & {
+	driverScene: StackScene;
+};
+
+type OverlayCandidate = Omit<FloatOverlayEntry, "activity">;
+
+const resolveOverlayActivity = (
+	scene: StackScene,
+	distanceFromTop: number,
+): FloatOverlayActivity => {
+	if (distanceFromTop === 0 && scene.activity === "closing") {
+		return "closing";
+	}
+
+	if (distanceFromTop === 0) {
+		return "active";
+	}
+
+	if (distanceFromTop === 1) {
+		return "inert";
+	}
+
+	return "inactive";
+};
+
 /**
- * Find the active float overlay from scenes.
- * Scans from the top of the stack downward to find the first screen
- * with a visible overlay.
+ * Finds every visible floating-overlay checkpoint in stack order.
+ *
+ * The newest checkpoint owns the active overlay. Its immediate predecessor
+ * remains visible and inert; all older checkpoints are retained but inactive.
+ * This mirrors the screen activity window without making plain screens create
+ * a new overlay checkpoint.
  */
-export function getActiveFloatOverlay(
+export function getFloatOverlayStack(
 	scenes: StackScene[],
-	index: number,
 	transitionsAlwaysOn: boolean,
-): { scene: StackScene; overlayIndex: number } | null {
-	if (scenes.length === 0) {
-		return null;
-	}
-
-	// When navigating back, closing scenes are kept at the top of the local stack
-	// while the focused index already points to the destination screen. We need to
-	// start scanning from the actual top of the stack so the overlay can animate
-	// out together with its closing screen instead of disappearing immediately.
-	const startIndex = Math.max(index, scenes.length - 1);
+): FloatOverlayEntry[] {
+	const candidates: OverlayCandidate[] = [];
 
-	for (let i = startIndex; i >= 0; i--) {
-		const scene = scenes[i];
+	for (let index = 0; index < scenes.length; index += 1) {
+		const scene = scenes[index];
 		const options = scene?.descriptor?.options;
 
-		// Skip screens without enableTransitions (native-stack only)
 		if (!transitionsAlwaysOn && !options?.enableTransitions) {
 			continue;
 		}
 
 		if (isOverlayVisible(options)) {
-			return { scene, overlayIndex: i };
+			candidates.push({ scene, overlayIndex: index });
 		}
 	}
 
-	return null;
+	const topIndex = candidates.length - 1;
+	return candidates.map((candidate, index) => ({
+		...candidate,
+		activity: resolveOverlayActivity(candidate.scene, topIndex - index),
+	}));
+}
+
+export function getFloatOverlayTransitions(
+	overlayStack: FloatOverlayEntry[],
+	scenes: StackScene[],
+): FloatOverlayTransitionEntry[] {
+	const topScene = scenes[scenes.length - 1];
+
+	return overlayStack.map((entry, index) => {
+		const nextEntry = overlayStack[index + 1];
+		let nextPresentedEntry: FloatOverlayEntry | undefined;
+
+		for (
+			let nextIndex = index + 1;
+			nextIndex < overlayStack.length;
+			nextIndex++
+		) {
+			const candidate = overlayStack[nextIndex];
+			if (candidate?.scene.activity !== "closing") {
+				nextPresentedEntry = candidate;
+				break;
+			}
+		}
+
+		const driverScene =
+			entry.scene.activity === "closing" && nextEntry
+				? entry.scene
+				: (nextPresentedEntry?.scene ??
+					nextEntry?.scene ??
+					topScene ??
+					entry.scene);
+
+		return {
+			...entry,
+			driverScene,
+		};
+	});
 }

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

@@ -0,0 +1,38 @@
+import type { ScreenAnimationContextValue } from "../../../providers/screen/animation/animation.provider";
+import type { ScreenSlotContextValue } from "../../../providers/screen/styles/slot.provider";
+import type { FloatOverlayEntry } from "./get-active-overlay";
+
+export type ReadyOverlayResources = {
+	overlayAnimationStore: ScreenAnimationContextValue;
+	driverScene: FloatOverlayEntry["scene"];
+	driverAnimationStore: ScreenAnimationContextValue;
+	driverSlots: ScreenSlotContextValue;
+};
+
+export function retainReadyOverlayResources(
+	previous: ReadyOverlayResources | null,
+	overlayAnimationStore: ScreenAnimationContextValue | null,
+	driverScene: FloatOverlayEntry["scene"],
+	driverAnimationStore: ScreenAnimationContextValue | null,
+	driverSlots: ScreenSlotContextValue | null,
+): ReadyOverlayResources | null {
+	if (!overlayAnimationStore || !driverAnimationStore || !driverSlots) {
+		return previous;
+	}
+
+	if (
+		previous?.overlayAnimationStore === overlayAnimationStore &&
+		previous.driverScene === driverScene &&
+		previous.driverAnimationStore === driverAnimationStore &&
+		previous.driverSlots === driverSlots
+	) {
+		return previous;
+	}
+
+	return {
+		overlayAnimationStore,
+		driverScene,
+		driverAnimationStore,
+		driverSlots,
+	};
+}

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

@@ -0,0 +1,48 @@
+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 {
+	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";
+
+	if (!interpolator) {
+		return undefined;
+	}
+
+	try {
+		const raw = interpolator(
+			createInterpolatorScope({
+				frame,
+				selectedFrame: selectInterpolatorFrame(frame, false),
+				transition,
+			}),
+		);
+
+		if (!raw?.overlay) {
+			return undefined;
+		}
+
+		return normalizeSlots({ overlay: raw.overlay }).overlay;
+	} catch (_) {
+		if (__DEV__) {
+			logger.warn("screenStyleInterpolator must be a worklet");
+		}
+
+		return undefined;
+	}
+};

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

@@ -0,0 +1,121 @@
+import { useMemo } from "react";
+import { useWindowDimensions } from "react-native";
+import {
+	type SharedValue,
+	useAnimatedProps,
+	useAnimatedStyle,
+	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 {
+	NormalizedTransitionSlotStyle,
+	ScreenStyleInterpolator,
+} from "../../../types/animation.types";
+import { getVisibilityBlockOffset } from "../../../utils/visibility-block-offset";
+import {
+	createOverlayInterpolatorFrame,
+	shouldUseOverlayGestureDriver,
+} from "../helpers/create-overlay-interpolator-frame";
+import { runOverlaySlotInterpolator } from "../helpers/run-overlay-slot-interpolator";
+
+export const useOverlaySlot = ({
+	overlayAnimationStore,
+	overlayInterpolator,
+	driverAnimationStore,
+	previousOverlayAnimationStore,
+	driverInterpolator,
+	interpolatorReady,
+	isIncoming,
+}: {
+	overlayAnimationStore: ScreenAnimationContextValue;
+	overlayInterpolator: ScreenStyleInterpolator | undefined;
+	driverAnimationStore: ScreenAnimationContextValue;
+	previousOverlayAnimationStore?: ScreenAnimationContextValue;
+	driverInterpolator: ScreenStyleInterpolator | undefined;
+	interpolatorReady: SharedValue<number>;
+	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(
+			overlayFrame,
+			driverFrame,
+		);
+		const frame = createOverlayInterpolatorFrame({
+			overlayFrame,
+			driverFrame: overlayOwnsGesture ? overlayFrame : driverFrame,
+			previousOverlayFrame:
+				previousOverlayAnimationStore?.screenInterpolatorProps.get(),
+		});
+
+		return runOverlaySlotInterpolator({
+			frame,
+			interpolator: overlayOwnsGesture
+				? overlayInterpolator
+				: driverInterpolator,
+			transition: overlayOwnsGesture ? overlayTransition : driverTransition,
+		});
+	});
+
+	const animatedStyle = useAnimatedStyle(() => {
+		"worklet";
+		const slot = overlaySlot.get();
+		if (!slot) {
+			return NO_STYLES;
+		}
+
+		if (isIncoming && !interpolatorReady.get()) {
+			return {
+				transform: [{ translateY: getVisibilityBlockOffset(height) }],
+			};
+		}
+
+		return slot.style ?? NO_STYLES;
+	});
+
+	const animatedProps = useAnimatedProps(() => {
+		"worklet";
+		const slotProps = overlaySlot.get()?.props;
+		if (!slotProps) {
+			return NO_PROPS;
+		}
+
+		const {
+			pointerEvents: _pointerEvents,
+			teleport: _teleport,
+			...props
+		} = slotProps;
+
+		return props;
+	});
+
+	return { animatedProps, animatedStyle };
+};