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

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

@@ -1,318 +1,115 @@
-import { useCallback, useLayoutEffect, useState } from "react";
 import {
+	type SharedValue,
 	useAnimatedProps,
-	useAnimatedReaction,
 	useSharedValue,
 } from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
 import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
 import { useScreenSlots } from "../../../../../../providers/screen/styles";
-import { useRegisteredScreenSlots } from "../../../../../../providers/screen/styles/stores/slot-references.store";
+import { hasCloseTransitionFinished } from "../../../../../../providers/screen/styles/helpers/transition-visual-state";
 import { AnimationStore } from "../../../../../../stores/animation.store";
-import { getSourceScreenKeyFromPairKey } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
 import { pairs } from "../../../../../../stores/bounds/internals/state";
+import { SystemStore } from "../../../../../../stores/system.store";
+import { resolveEnteringHandoffTarget } from "../../../utils/handoff-target";
 import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
-import {
-	canSwitchHandoffHostImmediately,
-	isHandoffHostClosingComplete,
-	type PortalOwnershipSignal,
-	resolveBoundaryPortalOwnership,
-} from "../../../utils/ownership";
-import { shallowEqual } from "../../../utils/shallow-equal";
-import { shouldAttachBoundaryPortal } from "../../../utils/teleport-control";
-import { resolveNextVisiblePortalHostName } from "../../../utils/visible-host";
+import { isTeleportEnabled } from "../../../utils/teleport-control";
 import { createBoundaryContentPortalHostName } from "../helpers/host-name";
 
 interface UseBoundaryContentPortalAttachmentParams {
 	boundaryId: string;
-	enabled: boolean;
 }
 
+type AttachedDestination = {
+	animationProgress: SharedValue<number>;
+	closing: SharedValue<number>;
+	screenKey: string;
+};
+
 export const useBoundaryContentPortalAttachment = ({
 	boundaryId,
-	enabled,
 }: UseBoundaryContentPortalAttachmentParams) => {
-	const ownScreenSlots = useScreenSlots();
+	const { slotsMap } = useScreenSlots();
 	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
 	const currentScreenKey = useDescriptorsStore(
 		(s) => s.derivations.currentScreenKey,
 	);
-	const [ownership, setOwnership] = useState<Extract<
-		PortalOwnershipSignal,
-		{ status: "complete" }
-	> | null>(null);
-
-	const styleOwnerScreenKey = ownership?.ownerScreenKey ?? currentScreenKey;
-	const ownerScreenSlots = useRegisteredScreenSlots(styleOwnerScreenKey);
-	const activeScreenSlots = ownerScreenSlots ?? ownScreenSlots;
-	const {
-		nextInterpolatorReady: activeNextInterpolatorReady,
-		slotsMap: activeSlotsMap,
-	} = activeScreenSlots;
-	const requestedPortalHostName = useSharedValue<string | null>(null);
-	const visiblePortalHostName = useSharedValue<string | null>(null);
-	const canSwitchPortalHostImmediately = useSharedValue(0);
-
-	const targetScreenKey = ownership ? ownership.hostScreenKey : null;
-	const settledHostScreenKey = ownership?.hostScreenKey ?? null;
-	const settledHostProgress = AnimationStore.getValue(
-		settledHostScreenKey ?? currentScreenKey,
-		"progressSettled",
-	);
-	const settledHostAnimating = AnimationStore.getValue(
-		settledHostScreenKey ?? currentScreenKey,
-		"progressAnimating",
-	);
-	const settledHostWillAnimate = AnimationStore.getValue(
-		settledHostScreenKey ?? currentScreenKey,
-		"willAnimate",
+	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
+	const destinationScreenKey = nextScreenKey ?? currentScreenKey;
+	const destinationAnimationProgress = SystemStore.getValue(
+		destinationScreenKey,
+		"animationProgress",
 	);
-	const settledHostClosing = AnimationStore.getValue(
-		settledHostScreenKey ?? currentScreenKey,
+	const destinationClosing = AnimationStore.getValue(
+		destinationScreenKey,
 		"closing",
 	);
-	const handoffHostName =
-		targetScreenKey !== null
-			? createBoundaryContentPortalHostName(targetScreenKey, boundaryId)
-			: null;
-
-	const updatePortalOwnership = useCallback(
-		(
-			hostScreenKey: string | null,
-			ownerPairKey?: string,
-			ownerScreenKey?: string,
-		) => {
-			if (hostScreenKey && ownerPairKey && ownerScreenKey) {
-				setOwnership((current) => {
-					if (
-						current?.hostScreenKey === hostScreenKey &&
-						current.ownerPairKey === ownerPairKey &&
-						current.ownerScreenKey === ownerScreenKey
-					) {
-						return current;
-					}
-
-					return {
-						hostScreenKey,
-						ownerPairKey,
-						ownerScreenKey,
-						status: "complete",
-					};
-				});
-				return;
-			}
-
-			setOwnership((current) => (current ? null : current));
-		},
-		[],
-	);
-
-	useLayoutEffect(() => {
-		if (!enabled || !ownership || !handoffHostName) {
-			requestedPortalHostName.set(null);
-			visiblePortalHostName.set(null);
-			return;
-		}
-
-		requestedPortalHostName.set(handoffHostName);
-	}, [
-		enabled,
-		handoffHostName,
-		ownership,
-		requestedPortalHostName,
-		visiblePortalHostName,
-	]);
-
-	useLayoutEffect(() => {
-		return () => {
-			requestedPortalHostName.set(null);
-			visiblePortalHostName.set(null);
-		};
-	}, [requestedPortalHostName, visiblePortalHostName]);
-
-	useAnimatedReaction(
-		() => {
-			"worklet";
-			if (!enabled) {
-				return {
-					hostScreenKey: null,
-					ownerPairKey: sourcePairKey,
-					ownerScreenKey: null,
-					status: "clear",
-				};
-			}
-
-			const progressAnimating = settledHostAnimating.get();
-			const progressSettled = settledHostProgress.get();
-			const willAnimate = settledHostWillAnimate.get();
-			const closing = settledHostClosing.get();
-			const isOwnedHostClosing =
-				!!closing &&
-				!!ownership &&
-				settledHostScreenKey === ownership.hostScreenKey;
-
-			if (isOwnedHostClosing && ownership) {
-				const isClosingComplete = isHandoffHostClosingComplete({
-					closing,
-					progressAnimating,
-					progressSettled,
-					willAnimate,
-				});
-
-				if (!isClosingComplete) {
-					return ownership;
-				}
-
-				const sourceScreenKey = getSourceScreenKeyFromPairKey(
-					ownership.ownerPairKey,
-				);
-
-				return {
-					hostScreenKey: sourceScreenKey,
-					ownerPairKey: ownership.ownerPairKey,
-					ownerScreenKey: sourceScreenKey,
-					status: "complete",
-				};
-			}
-
-			if (!sourcePairKey) {
-				return {
-					hostScreenKey: null,
-					ownerPairKey: sourcePairKey,
-					ownerScreenKey: null,
-					status: "clear",
-				};
-			}
-
-			return resolveBoundaryPortalOwnership({
-				boundaryId,
-				currentScreenKey,
-				handoff: true,
-				isSettledHostClosingComplete: isHandoffHostClosingComplete({
-					closing,
-					progressAnimating,
-					progressSettled,
-					willAnimate,
-				}),
-				isSettledHostReady: progressSettled === 1 && progressAnimating === 0,
-				pairsState: pairs.get(),
-				settledHostScreenKey,
-				sourcePairKey,
-			});
-		},
-		(signal, previousSignal) => {
-			"worklet";
-			if (shallowEqual(previousSignal, signal)) {
-				return;
-			}
-
-			if (signal.status === "pending") {
-				canSwitchPortalHostImmediately.set(0);
-				return;
-			}
-
-			const hostScreenKey =
-				signal.status === "complete" ? signal.hostScreenKey : null;
-			let previousOwnerPairKey: string | undefined;
-
-			if (previousSignal?.status === "complete") {
-				previousOwnerPairKey = previousSignal.ownerPairKey ?? undefined;
-			}
-
-			const canSwitchImmediately = canSwitchHandoffHostImmediately({
-				hostScreenKey,
-				ownerPairKey:
-					signal.status === "complete" ? signal.ownerPairKey : undefined,
-				previousOwnerPairKey,
-			});
-
-			canSwitchPortalHostImmediately.set(canSwitchImmediately ? 1 : 0);
-
-			if (canSwitchImmediately && hostScreenKey) {
-				const hostName = createBoundaryContentPortalHostName(
-					hostScreenKey,
-					boundaryId,
-				);
-				requestedPortalHostName.set(hostName);
-				visiblePortalHostName.set(hostName);
-			}
-
-			scheduleOnRN(
-				updatePortalOwnership,
-				signal.hostScreenKey,
-				signal.ownerPairKey,
-				signal.ownerScreenKey ?? undefined,
-			);
-		},
-	);
 
-	useAnimatedReaction(
-		() => {
-			"worklet";
-			const slot = activeSlotsMap.get()[boundaryId];
-			const teleport = slot?.props?.teleport;
-			const shouldTeleport = shouldAttachBoundaryPortal({
-				enabled,
-				teleport,
-			});
-			const requestedName = requestedPortalHostName.get();
-			const visibleName = visiblePortalHostName.get();
-			const isInterpolatorReady = activeNextInterpolatorReady.get();
-			const nextVisibleName = resolveNextVisiblePortalHostName({
-				canSwitchImmediately: canSwitchPortalHostImmediately.get() === 1,
-				isInterpolatorReady: isInterpolatorReady === 1,
-				requestedName,
-				shouldTeleport,
-				visibleName,
-			});
-
-			return {
-				isInterpolatorReady,
-				nextVisibleName,
-				requestedName,
-				shouldTeleport,
-				teleport,
-				visibleName,
-			};
-		},
-		(state, previousState) => {
-			"worklet";
-			if (shallowEqual(previousState, state)) {
-				return;
-			}
-
-			if (state.nextVisibleName !== state.visibleName) {
-				visiblePortalHostName.set(state.nextVisibleName);
-			}
-		},
-	);
+	// `nextScreenKey` can change while the previously attached destination is
+	// still closing. Retain that destination's lifecycle shared values so this
+	// payload follows the screen that actually hosts it, not the newest route.
+	const attachedDestination = useSharedValue<AttachedDestination | null>(null);
 
 	const teleportProps = useAnimatedProps(() => {
 		"worklet";
 
-		const slot = activeSlotsMap.get()[boundaryId];
+		const slot = slotsMap.get()[boundaryId];
 		const {
 			pointerEvents: _pointerEvents,
 			teleport,
 			...slotProps
 		} = slot?.props ?? {};
-		const shouldTeleport = shouldAttachBoundaryPortal({
-			enabled,
-			teleport,
-		});
-		const visibleName = visiblePortalHostName.get();
+
+		const animationProgress = destinationAnimationProgress.get();
+		const shouldTeleport = isTeleportEnabled(teleport);
+		const pairsState = pairs.get();
+
+		const enteringTargetScreenKey = shouldTeleport
+			? resolveEnteringHandoffTarget({
+					animationProgress,
+					boundaryId,
+					currentScreenKey,
+					pairsState,
+					sourcePairKey,
+				})
+			: null;
+
+		if (enteringTargetScreenKey) {
+			// A valid entering pair is the only event that replaces the current
+			// attachment and its lifecycle owner.
+			attachedDestination.set({
+				animationProgress: destinationAnimationProgress,
+				closing: destinationClosing,
+				screenKey: enteringTargetScreenKey,
+			});
+		}
+
+		const attached = attachedDestination.get();
+		const hasAttachedCloseFinished =
+			attached !== null &&
+			hasCloseTransitionFinished({
+				animationProgress: attached.animationProgress.get(),
+				closing: attached.closing.get(),
+			});
+
+		// Missing or changing pairs do not imply a return: keep the current host
+		// until its own screen visually closes. At that point, target the source
+		// host explicitly instead of `null` so Teleport restores source dimensions.
+		const targetScreenKey = enteringTargetScreenKey
+			? enteringTargetScreenKey
+			: shouldTeleport
+				? hasAttachedCloseFinished
+					? currentScreenKey
+					: (attached?.screenKey ?? null)
+				: null;
+
+		const targetHostName = targetScreenKey
+			? createBoundaryContentPortalHostName(targetScreenKey, boundaryId)
+			: PORTAL_HOST_NAME_RESET_VALUE;
 
 		return {
 			...slotProps,
-			hostName:
-				shouldTeleport && visibleName
-					? visibleName
-					: PORTAL_HOST_NAME_RESET_VALUE,
+			hostName: targetHostName,
 		};
 	});
 
-	return {
-		teleportProps,
-		visiblePortalHostName,
-	};
+	return { teleportProps };
 };

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

@@ -33,30 +33,49 @@ const AnimatedNativePortal = NativePortal
 			NativePortal as ComponentType<NullableHostNamePortalProps>,
 		)
 	: null;
+const EnabledNativePortal = AnimatedNativePortal as NonNullable<
+	typeof AnimatedNativePortal
+>;
 
 export const BoundaryContentPortal = memo(function BoundaryContentPortal({
 	boundaryId,
 	children,
 	enabled,
 }: BoundaryContentPortalProps) {
-	const shouldEnablePortal = enabled && boundaryId !== undefined;
-	const { teleportProps } = useBoundaryContentPortalAttachment({
-		boundaryId: boundaryId ?? "",
-		enabled: shouldEnablePortal,
-	});
+	if (
+		!enabled ||
+		boundaryId === undefined ||
+		!isTeleportAvailable ||
+		!AnimatedNativePortal
+	) {
+		return children;
+	}
+
+	return (
+		<EnabledBoundaryContentPortal boundaryId={boundaryId}>
+			{children}
+		</EnabledBoundaryContentPortal>
+	);
+});
+
+const EnabledBoundaryContentPortal = memo(
+	function EnabledBoundaryContentPortal({
+		boundaryId,
+		children,
+	}: Omit<BoundaryContentPortalProps, "enabled"> & { boundaryId: string }) {
+		const { teleportProps } = useBoundaryContentPortalAttachment({
+			boundaryId,
+		});
 
-	if (shouldEnablePortal && isTeleportAvailable && AnimatedNativePortal) {
 		return (
-			<AnimatedNativePortal
+			<EnabledNativePortal
 				animatedProps={teleportProps}
 				name={boundaryId}
 				pointerEvents={PORTAL_POINTER_EVENTS}
 				style={StyleSheet.absoluteFill}
 			>
 				{children}
-			</AnimatedNativePortal>
+			</EnabledNativePortal>
 		);
-	}
-
-	return children;
-});
+	},
+);

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

@@ -1,4 +1,4 @@
-import { memo, useCallback, useLayoutEffect, useRef } from "react";
+import { memo, useLayoutEffect, useRef } from "react";
 import {
 	type StyleProp,
 	StyleSheet,
@@ -9,7 +9,6 @@ import {
 import Animated from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
 import { useScreenSlots } from "../../../../../../providers/screen/styles";
-import { SystemStore } from "../../../../../../stores/system.store";
 import { PORTAL_POINTER_EVENTS } from "../../../teleport";
 import { useHostMeasurement } from "../hooks/use-host-measurement";
 import { registerHost, unregisterHost } from "../stores/host-registry.store";
@@ -28,7 +27,6 @@ type HostImplProps = PublicHostProps & {
 
 function HostImpl({ fallback = false, style }: HostImplProps) {
 	const screenKey = useDescriptorsStore((s) => s.derivations.currentScreenKey);
-	const { unblockLifecycleStart } = SystemStore.getBag(screenKey).actions;
 	const generatedHostKeyRef = useRef<string | null>(null);
 
 	if (generatedHostKeyRef.current === null) {
@@ -54,7 +52,6 @@ function HostImpl({ fallback = false, style }: HostImplProps) {
 
 	useLayoutEffect(() => {
 		registerHost({
-			capturesScroll,
 			fallback,
 			hostKey,
 			screenKey,
@@ -63,13 +60,7 @@ function HostImpl({ fallback = false, style }: HostImplProps) {
 		return () => {
 			unregisterHost(screenKey, hostKey);
 		};
-	}, [capturesScroll, fallback, hostKey, screenKey]);
-
-	const handleUnblocking = useCallback(() => {
-		// Each destination boundary contributes one lifecycle start block. Release
-		// only this host's block so unrelated boundary and user blocks stay intact.
-		unblockLifecycleStart();
-	}, [unblockLifecycleStart]);
+	}, [fallback, hostKey, screenKey]);
 
 	const boundaryHosts = measurement.canRenderHosts
 		? activeBoundaryHosts.map((host) => (
@@ -80,7 +71,6 @@ function HostImpl({ fallback = false, style }: HostImplProps) {
 						styles.boundaryHostViewport,
 						{ width: viewportWidth, height: viewportHeight },
 					]}
-					onLayout={handleUnblocking}
 				>
 					<PortalBoundaryHost host={host} style={StyleSheet.absoluteFill} />
 				</View>

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

@@ -1,19 +1,24 @@
-import { memo } from "react";
-import { type StyleProp, StyleSheet, type ViewStyle } from "react-native";
-import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { memo, useCallback } from "react";
+import {
+	I18nManager,
+	type StyleProp,
+	StyleSheet,
+	type ViewStyle,
+} from "react-native";
+import Animated, {
+	useAnimatedStyle,
+	useFrameCallback,
+	useSharedValue,
+} from "react-native-reanimated";
 import { NO_STYLES } from "../../../../../../constants";
 import { composeSlotStyleWithLocalTransform } from "../../../../../../providers/screen/styles/helpers/compose-slot-style";
-import { AnimationStore } from "../../../../../../stores/animation.store";
-import { getSourceScreenKeyFromPairKey } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
 import { getLink } from "../../../../../../stores/bounds/internals/links";
-import {
-	getClampedScrollAxisDelta,
-	ScrollStore,
-} from "../../../../../../stores/scroll.store";
+import { SystemStore } from "../../../../../../stores/system.store";
 import type { ScrollMeasuredDimensions } from "../../../../utils/measured-bounds";
 import { NativePortalHost, PORTAL_POINTER_EVENTS } from "../../../teleport";
 import { hasLocalSlot } from "../helpers/has-local-slot";
 import { resolvePortalOffsetStyle } from "../helpers/offset-style";
+import { getPortalHostBounds } from "../stores/host-bounds.store";
 import type { ActivePortalBoundaryHost } from "../stores/portal-boundary-host.store";
 
 const AnimatedPortalBoundaryHost = NativePortalHost
@@ -29,19 +34,39 @@ export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 	host,
 	style,
 }: PortalBoundaryHostProps) {
-	// Cross-screen landing-rect scroll tracking: the flight interpolates toward
-	// the source rect stored at measure time, but the source screen stays
-	// scrollable while the pair closes (destination pointer events are
-	// released). These are read per-frame so the landing point follows the
-	// live source scroll instead of the stale snapshot.
-	const sourceScrollMetadata = ScrollStore.getValue(
-		getSourceScreenKeyFromPairKey(host.pairKey),
-		"metadata",
-	);
-	const hostVisualProgress = AnimationStore.getValue(
-		host.screenKey,
-		"visualProgress",
-	);
+	const geometryReadyFrames = useSharedValue(0);
+	const { unblockLifecycleStart } = SystemStore.getBag(host.screenKey).actions;
+
+	const handleFrame = useCallback(() => {
+		"worklet";
+		if (host.portalHostReady.get()) {
+			return;
+		}
+
+		const link = getLink(host.pairKey, host.boundaryId);
+		const hasGeometry =
+			link?.source !== null &&
+			link !== undefined &&
+			getPortalHostBounds(host.hostKey) !== null &&
+			hasLocalSlot(host.localStylesMaps.get(), host.boundaryId);
+
+		if (!hasGeometry) {
+			geometryReadyFrames.set(0);
+			return;
+		}
+
+		if (geometryReadyFrames.get() === 0) {
+			// Give the source frame, host offset, and slot style one UI frame to
+			// reach native before Teleport targets this receiver.
+			geometryReadyFrames.set(1);
+			return;
+		}
+
+		host.portalHostReady.set(true);
+		unblockLifecycleStart();
+	}, [geometryReadyFrames, host, unblockLifecycleStart]);
+
+	useFrameCallback(handleFrame, true);
 
 	const hostStyle = useAnimatedStyle(() => {
 		"worklet";
@@ -55,43 +80,13 @@ export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 		const sourceBounds = link.source.bounds as ScrollMeasuredDimensions;
 		const isCrossScreenPortal = link.source.screenKey !== host.screenKey;
 
-		let landingShift: { x: number; y: number } | undefined;
-
-		if (isCrossScreenPortal) {
-			// Weight by distance-to-landing so the destination end of the flight
-			// stays pinned: no correction while the content sits over the
-			// destination rect (progress 1), full correction at touchdown on the
-			// source rect (progress 0).
-			const landingWeight =
-				1 - Math.min(Math.max(hostVisualProgress.get(), 0), 1);
-
-			if (landingWeight > 0) {
-				const liveScroll = sourceScrollMetadata.get();
-				const capturedScroll = sourceBounds.scroll ?? null;
-
-				// Scroll offset grows as content moves up/left, so the rect's
-				// on-screen position shifts by the negative delta.
-				landingShift = {
-					x:
-						-getClampedScrollAxisDelta(
-							liveScroll,
-							capturedScroll,
-							"horizontal",
-						) * landingWeight,
-					y:
-						-getClampedScrollAxisDelta(liveScroll, capturedScroll, "vertical") *
-						landingWeight,
-				};
-			}
-		}
-
 		return resolvePortalOffsetStyle({
 			bounds: sourceBounds,
 			hostKey: host.hostKey,
 			placement: isCrossScreenPortal ? "cross-screen" : "same-screen",
-			landingShift,
 		});
 	});
+
 	const contentFrameStyle = useAnimatedStyle(() => {
 		"worklet";
 		const link = getLink(host.pairKey, host.boundaryId);
@@ -118,10 +113,7 @@ export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 		// cleanup frame. If the current local interpolator layers did not emit this
 		// boundary id, any resolved style here is cleanup/stale residue and should
 		// not be drawn by the host.
-		if (
-			host.escapeClipping &&
-			!hasLocalSlot(host.localStylesMaps.get(), host.boundaryId)
-		) {
+		if (!hasLocalSlot(host.localStylesMaps.get(), host.boundaryId)) {
 			return NO_STYLES;
 		}
 
@@ -155,10 +147,20 @@ export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 	);
 });
 
+// The teleport offset is a physical page delta measured from the screen's
+// left edge, so the content box must anchor there too. Under native RTL,
+// `left: 0` swaps to a right-edge anchor; `end: 0` is the physical left edge
+// in RTL regardless of the swap setting.
 const styles = StyleSheet.create({
-	content: {
-		left: 0,
-		position: "absolute",
-		top: 0,
-	},
+	content: I18nManager.isRTL
+		? {
+				end: 0,
+				position: "absolute",
+				top: 0,
+			}
+		: {
+				left: 0,
+				position: "absolute",
+				top: 0,
+			},
 });