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

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,
+			},
 });

package/src/components/boundary/portal/components/boundary-portal/helpers/active-pair.ts

@@ -0,0 +1,36 @@
+import { getLinkKeyFromTag } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
+import type {
+	LinkPairsState,
+	ScreenPairKey,
+} from "../../../../../../stores/bounds/types";
+
+type HasActiveBoundaryPortalLinkParams = {
+	boundaryId: string;
+	pairsState: LinkPairsState;
+	sourcePairKey?: ScreenPairKey;
+};
+
+export const hasActiveBoundaryPortalLink = ({
+	boundaryId,
+	pairsState,
+	sourcePairKey,
+}: HasActiveBoundaryPortalLinkParams): boolean => {
+	"worklet";
+	if (!sourcePairKey) {
+		return false;
+	}
+
+	const pair = pairsState[sourcePairKey];
+	const linkKey = getLinkKeyFromTag(boundaryId);
+	const link = pair?.links[linkKey];
+
+	if (!link?.source) {
+		return false;
+	}
+
+	if (link.group && pair.groups[link.group]?.activeId !== linkKey) {
+		return false;
+	}
+
+	return true;
+};

package/src/components/boundary/portal/components/boundary-portal/helpers/offset-style.ts

@@ -19,19 +19,12 @@ type ResolvePortalOffsetStyleParams = {
 	bounds: ScrollMeasuredDimensions;
 	hostKey: string;
 	placement: PortalOffsetPlacement;
-	/**
-	 * Live correction applied on top of the stored source placement. Used by
-	 * cross-screen hosts to keep the landing rect tracking the source screen's
-	 * scroll while the source is interactive mid-flight.
-	 */
-	landingShift?: { x: number; y: number };
 };
 
 export const resolvePortalOffsetStyle = ({
 	bounds,
 	hostKey,
 	placement,
-	landingShift,
 }: ResolvePortalOffsetStyleParams): StyleProps => {
 	"worklet";
 	const hostBounds = getPortalHostBounds(hostKey);
@@ -69,8 +62,8 @@ export const resolvePortalOffsetStyle = ({
 
 	return {
 		transform: [
-			{ translateY: bounds.pageY - adjustedHostPageY + (landingShift?.y ?? 0) },
-			{ translateX: bounds.pageX - adjustedHostPageX + (landingShift?.x ?? 0) },
+			{ translateY: bounds.pageY - adjustedHostPageY },
+			{ translateX: bounds.pageX - adjustedHostPageX },
 		],
 	};
 };

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

@@ -0,0 +1,114 @@
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { type SharedValue, useAnimatedReaction } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+import type { LocalStyleLayers } from "../../../../../../providers/screen/styles/helpers/resolve-slot-styles";
+import { pairs } from "../../../../../../stores/bounds/internals/state";
+import type { ScreenPairKey } from "../../../../../../stores/bounds/types";
+import type { NormalizedTransitionInterpolatedStyle } from "../../../../../../types/animation.types";
+import { createBoundaryPortalHostName } from "../../../utils/naming";
+import { hasActiveBoundaryPortalLink } from "../helpers/active-pair";
+import {
+	mountPortalBoundaryHost,
+	unmountPortalBoundaryHostByName,
+} from "../stores/portal-boundary-host.store";
+
+type UseActivePortalBoundaryHostParams = {
+	boundaryId: string;
+	currentScreenKey: string;
+	escapeHostKey?: string;
+	localStylesMaps: SharedValue<LocalStyleLayers>;
+	portalHostName: SharedValue<string | null>;
+	portalHostReady: SharedValue<boolean>;
+	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
+	sourcePairKey?: ScreenPairKey;
+};
+
+export const useActivePortalBoundaryHost = ({
+	boundaryId,
+	currentScreenKey,
+	escapeHostKey,
+	localStylesMaps,
+	portalHostName,
+	portalHostReady,
+	slotsMap,
+	sourcePairKey,
+}: UseActivePortalBoundaryHostParams) => {
+	const [hasActiveLink, setHasActiveLink] = useState(false);
+	const sourcePairKeyRef = useRef(sourcePairKey);
+	sourcePairKeyRef.current = sourcePairKey;
+
+	const updateActiveLink = useCallback(
+		(
+			observedSourcePairKey: ScreenPairKey | undefined,
+			nextHasActiveLink: boolean,
+		) => {
+			if (sourcePairKeyRef.current !== observedSourcePairKey) {
+				return;
+			}
+
+			setHasActiveLink(nextHasActiveLink);
+		},
+		[],
+	);
+
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			return hasActiveBoundaryPortalLink({
+				boundaryId,
+				pairsState: pairs.get(),
+				sourcePairKey,
+			});
+		},
+		(nextHasActiveLink, previousHasActiveLink) => {
+			"worklet";
+			if (nextHasActiveLink === previousHasActiveLink) {
+				return;
+			}
+
+			scheduleOnRN(updateActiveLink, sourcePairKey, nextHasActiveLink);
+		},
+	);
+
+	useLayoutEffect(() => {
+		if (!hasActiveLink || !sourcePairKey || !escapeHostKey) {
+			portalHostName.set(null);
+			portalHostReady.set(false);
+			return;
+		}
+
+		const nextPortalHostName = createBoundaryPortalHostName(
+			escapeHostKey,
+			boundaryId,
+			sourcePairKey,
+		);
+
+		mountPortalBoundaryHost({
+			boundaryId,
+			hostKey: escapeHostKey,
+			localStylesMaps,
+			pairKey: sourcePairKey,
+			portalHostName: nextPortalHostName,
+			portalHostReady,
+			screenKey: currentScreenKey,
+			slotsMap,
+		});
+		portalHostName.set(nextPortalHostName);
+
+		return () => {
+			portalHostName.set(null);
+			portalHostReady.set(false);
+			unmountPortalBoundaryHostByName(nextPortalHostName);
+		};
+	}, [
+		boundaryId,
+		currentScreenKey,
+		escapeHostKey,
+		localStylesMaps,
+		portalHostName,
+		portalHostReady,
+		sourcePairKey,
+		slotsMap,
+		hasActiveLink,
+	]);
+};

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

@@ -1,228 +1,62 @@
-import { useCallback, useLayoutEffect, useRef, 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 { hasCloseTransitionFinished } from "../../../../../../providers/screen/styles/helpers/transition-visual-state";
+import { AnimationStore } from "../../../../../../stores/animation.store";
 import { pairs } from "../../../../../../stores/bounds/internals/state";
+import { SystemStore } from "../../../../../../stores/system.store";
 import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
-import {
-	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 { createBoundaryPortalHostName } from "../helpers/host-name";
+import { isTeleportEnabled } from "../../../utils/teleport-control";
+import { hasActiveBoundaryPortalLink } from "../helpers/active-pair";
 import { useActiveHostKey } from "../stores/host-registry.store";
-import {
-	dropStalePortalBoundaryHosts,
-	mountPortalBoundaryHost,
-	unmountPortalBoundaryHostByName,
-} from "../stores/portal-boundary-host.store";
+import { useActivePortalBoundaryHost } from "./use-active-portal-boundary-host";
 
 interface UseBoundaryPortalAttachmentParams {
 	boundaryId: string;
-	enabled: boolean;
 }
 
+type AttachedDestination = {
+	animationProgress: SharedValue<number>;
+	closing: SharedValue<number>;
+};
+
 export const useBoundaryPortalAttachment = ({
 	boundaryId,
-	enabled,
 }: UseBoundaryPortalAttachmentParams) => {
 	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
 	const currentScreenKey = useDescriptorsStore(
 		(s) => s.derivations.currentScreenKey,
 	);
-	const { localStylesMaps, nextInterpolatorReady, slotsMap } = useScreenSlots();
-	const [ownership, setOwnership] = useState<Extract<
-		PortalOwnershipSignal,
-		{ status: "complete" }
-	> | null>(null);
-	const requestedPortalHostName = useSharedValue<string | null>(null);
-	const visiblePortalHostName = useSharedValue<string | null>(null);
-	const mountedPortalBoundaryHostNamesRef = useRef(new Set<string>());
-	const escapeHostKey = useActiveHostKey(enabled ? currentScreenKey : 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));
-		},
-		[],
+	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
+	const destinationScreenKey = nextScreenKey ?? currentScreenKey;
+	const destinationAnimationProgress = SystemStore.getValue(
+		destinationScreenKey,
+		"animationProgress",
 	);
+	const destinationClosing = AnimationStore.getValue(
+		destinationScreenKey,
+		"closing",
+	);
+	const { localStylesMaps, slotsMap } = useScreenSlots();
+	const portalHostName = useSharedValue<string | null>(null);
+	const portalHostReady = useSharedValue(false);
+	const attachedDestination = useSharedValue<AttachedDestination | null>(null);
+	const escapeHostKey = useActiveHostKey(currentScreenKey);
 
-	const unmountOwnedPortalBoundaryHosts = useCallback(() => {
-		for (const portalHostName of mountedPortalBoundaryHostNamesRef.current) {
-			unmountPortalBoundaryHostByName(portalHostName);
-		}
-
-		mountedPortalBoundaryHostNamesRef.current.clear();
-	}, []);
-
-	useLayoutEffect(() => {
-		if (!enabled || !ownership || !escapeHostKey) {
-			requestedPortalHostName.set(null);
-			visiblePortalHostName.set(null);
-			unmountOwnedPortalBoundaryHosts();
-			return;
-		}
-
-		const portalHostName = createBoundaryPortalHostName(
-			escapeHostKey,
-			boundaryId,
-			ownership.ownerPairKey,
-		);
-
-		mountPortalBoundaryHost({
-			boundaryId,
-			escapeClipping: true,
-			hostKey: escapeHostKey,
-			localStylesMaps,
-			pairKey: ownership.ownerPairKey,
-			portalHostName,
-			screenKey: currentScreenKey,
-			slotsMap,
-		});
-		mountedPortalBoundaryHostNamesRef.current.add(portalHostName);
-
-		// Request the new receiver immediately, but keep the currently visible
-		// receiver until the new interpolator is ready. This avoids a no-host gap
-		// during rapid close/open retargets.
-		requestedPortalHostName.set(portalHostName);
-	}, [
+	useActivePortalBoundaryHost({
 		boundaryId,
 		currentScreenKey,
-		enabled,
 		escapeHostKey,
 		localStylesMaps,
-		ownership,
-		requestedPortalHostName,
+		portalHostName,
+		portalHostReady,
+		sourcePairKey,
 		slotsMap,
-		unmountOwnedPortalBoundaryHosts,
-		visiblePortalHostName,
-	]);
-
-	useLayoutEffect(() => {
-		return () => {
-			requestedPortalHostName.set(null);
-			visiblePortalHostName.set(null);
-			unmountOwnedPortalBoundaryHosts();
-		};
-	}, [
-		requestedPortalHostName,
-		unmountOwnedPortalBoundaryHosts,
-		visiblePortalHostName,
-	]);
-
-	useAnimatedReaction(
-		() => {
-			"worklet";
-			if (!enabled || !sourcePairKey) {
-				return {
-					hostScreenKey: null,
-					ownerPairKey: sourcePairKey,
-					ownerScreenKey: null,
-					status: "clear",
-				};
-			}
-
-			return resolveBoundaryPortalOwnership({
-				boundaryId,
-				currentScreenKey,
-				handoff: false,
-				pairsState: pairs.get(),
-				sourcePairKey,
-			});
-		},
-		(signal, previousSignal) => {
-			"worklet";
-			if (shallowEqual(previousSignal, signal)) {
-				return;
-			}
-
-			scheduleOnRN(
-				updatePortalOwnership,
-				signal.hostScreenKey,
-				signal.ownerPairKey,
-				signal.ownerScreenKey ?? undefined,
-			);
-		},
-	);
-
-	useAnimatedReaction(
-		() => {
-			"worklet";
-			const slot = slotsMap.get()[boundaryId];
-			const teleport = slot?.props?.teleport;
-			const shouldTeleport = shouldAttachBoundaryPortal({
-				enabled,
-				teleport,
-			});
-			const requestedName = requestedPortalHostName.get();
-			const visibleName = visiblePortalHostName.get();
-			const isInterpolatorReady = nextInterpolatorReady.get();
-			const nextVisibleName = resolveNextVisiblePortalHostName({
-				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);
-				return;
-			}
-
-			if (state.visibleName && state.visibleName === state.requestedName) {
-				scheduleOnRN(dropStalePortalBoundaryHosts, {
-					boundaryId,
-					keepPortalHostName: state.visibleName,
-				});
-			}
-		},
-	);
+	});
 
 	const teleportProps = useAnimatedProps(() => {
 		"worklet";
@@ -233,23 +67,38 @@ export const useBoundaryPortalAttachment = ({
 			teleport,
 			...slotProps
 		} = slot?.props ?? {};
-		const shouldTeleport = shouldAttachBoundaryPortal({
-			enabled,
-			teleport,
+		const shouldTeleport = isTeleportEnabled(teleport);
+		const hostName = portalHostName.get();
+		const hasActiveLink = hasActiveBoundaryPortalLink({
+			boundaryId,
+			pairsState: pairs.get(),
+			sourcePairKey,
 		});
-		const visibleName = visiblePortalHostName.get();
+		const hasAttachableHost =
+			shouldTeleport && hasActiveLink && portalHostReady.get() && hostName;
+
+		if (hasAttachableHost) {
+			attachedDestination.set({
+				animationProgress: destinationAnimationProgress,
+				closing: destinationClosing,
+			});
+		}
+
+		const attached = attachedDestination.get();
+		const hasAttachedCloseFinished =
+			attached !== null &&
+			hasCloseTransitionFinished({
+				animationProgress: attached.animationProgress.get(),
+				closing: attached.closing.get(),
+			});
+		const canAttach = hasAttachableHost && !hasAttachedCloseFinished;
+		const targetHostName = canAttach ? hostName : PORTAL_HOST_NAME_RESET_VALUE;
 
 		return {
 			...slotProps,
-			hostName:
-				shouldTeleport && visibleName
-					? visibleName
-					: PORTAL_HOST_NAME_RESET_VALUE,
+			hostName: targetHostName,
 		};
 	});
 
-	return {
-		teleportProps,
-		visiblePortalHostName,
-	};
+	return { teleportProps };
 };