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

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-boundary-portal-attachment.ts

@@ -1,229 +1,98 @@
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { useLayoutEffect } 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 { getLinkKeyFromTag } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
 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 { isTeleportEnabled } from "../../../utils/teleport-control";
 import { createBoundaryPortalHostName } from "../helpers/host-name";
 import { useActiveHostKey } from "../stores/host-registry.store";
 import {
-	dropStalePortalBoundaryHosts,
 	mountPortalBoundaryHost,
 	unmountPortalBoundaryHostByName,
 } from "../stores/portal-boundary-host.store";
 
 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 unmountOwnedPortalBoundaryHosts = useCallback(() => {
-		for (const portalHostName of mountedPortalBoundaryHostNamesRef.current) {
-			unmountPortalBoundaryHostByName(portalHostName);
-		}
-
-		mountedPortalBoundaryHostNamesRef.current.clear();
-	}, []);
+	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);
 
 	useLayoutEffect(() => {
-		if (!enabled || !ownership || !escapeHostKey) {
-			requestedPortalHostName.set(null);
-			visiblePortalHostName.set(null);
-			unmountOwnedPortalBoundaryHosts();
+		if (!sourcePairKey || !escapeHostKey) {
+			portalHostName.set(null);
+			portalHostReady.set(false);
 			return;
 		}
 
-		const portalHostName = createBoundaryPortalHostName(
+		const nextPortalHostName = createBoundaryPortalHostName(
 			escapeHostKey,
 			boundaryId,
-			ownership.ownerPairKey,
+			sourcePairKey,
 		);
 
 		mountPortalBoundaryHost({
 			boundaryId,
-			escapeClipping: true,
 			hostKey: escapeHostKey,
 			localStylesMaps,
-			pairKey: ownership.ownerPairKey,
-			portalHostName,
+			pairKey: sourcePairKey,
+			portalHostName: nextPortalHostName,
+			portalHostReady,
 			screenKey: currentScreenKey,
 			slotsMap,
 		});
-		mountedPortalBoundaryHostNamesRef.current.add(portalHostName);
+		portalHostName.set(nextPortalHostName);
 
-		// 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);
+		return () => {
+			portalHostName.set(null);
+			portalHostReady.set(false);
+			unmountPortalBoundaryHostByName(nextPortalHostName);
+		};
 	}, [
 		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 +102,40 @@ export const useBoundaryPortalAttachment = ({
 			teleport,
 			...slotProps
 		} = slot?.props ?? {};
-		const shouldTeleport = shouldAttachBoundaryPortal({
-			enabled,
-			teleport,
-		});
-		const visibleName = visiblePortalHostName.get();
+		const shouldTeleport = isTeleportEnabled(teleport);
+		const hostName = portalHostName.get();
+		const pair = sourcePairKey ? pairs.get()[sourcePairKey] : undefined;
+		const linkKey = getLinkKeyFromTag(boundaryId);
+		const link = pair?.links[linkKey];
+		const hasActiveLink =
+			link?.source !== null &&
+			link !== undefined &&
+			(!link.group || pair?.groups[link.group]?.activeId === linkKey);
+		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 };
 };

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

@@ -1,8 +1,35 @@
-import { memo, type ReactNode } from "react";
+import {
+	type ComponentProps,
+	type ComponentType,
+	memo,
+	type ReactNode,
+} from "react";
 import type { View } from "react-native";
-import type { AnimatedRef } from "react-native-reanimated";
-import { BoundaryPortalSlot } from "./components/portal-slot";
+import Animated, { type AnimatedRef, runOnUI } from "react-native-reanimated";
+import { logger } from "../../../../../utils/logger";
+import {
+	isTeleportAvailable,
+	PORTAL_POINTER_EVENTS,
+	NativePortal as TeleportPortal,
+} from "../../teleport";
 import { useBoundaryPortalAttachment } from "./hooks/use-boundary-portal-attachment";
+import { usePlaceholderStyles } from "./hooks/use-placeholder-styles";
+
+type NullableHostNamePortalProps = Omit<
+	ComponentProps<NonNullable<typeof TeleportPortal>>,
+	"hostName"
+> & {
+	hostName?: string | null;
+};
+
+const AnimatedNativePortal = TeleportPortal
+	? Animated.createAnimatedComponent(
+			TeleportPortal as ComponentType<NullableHostNamePortalProps>,
+		)
+	: null;
+const EnabledNativePortal = AnimatedNativePortal as NonNullable<
+	typeof AnimatedNativePortal
+>;
 
 type BoundaryPortalProps = {
 	boundaryId: string;
@@ -17,19 +44,52 @@ export const BoundaryPortal = memo(function BoundaryPortal({
 	enabled,
 	placeholderRef,
 }: BoundaryPortalProps) {
-	const { teleportProps } = useBoundaryPortalAttachment({
-		boundaryId,
-		enabled,
-	});
+	if (!enabled || !isTeleportAvailable || !AnimatedNativePortal) {
+		return children;
+	}
 
 	return (
-		<BoundaryPortalSlot
-			id={boundaryId}
-			enabled={enabled}
-			animatedProps={teleportProps}
+		<EnabledBoundaryPortal
+			boundaryId={boundaryId}
 			placeholderRef={placeholderRef}
 		>
 			{children}
-		</BoundaryPortalSlot>
+		</EnabledBoundaryPortal>
+	);
+});
+
+const EnabledBoundaryPortal = memo(function EnabledBoundaryPortal({
+	boundaryId,
+	children,
+	placeholderRef,
+}: Omit<BoundaryPortalProps, "enabled">) {
+	if (__DEV__ && !boundaryId) {
+		logger.warnOnce(
+			"portal:missing-id",
+			"A boundary portal was rendered without an id; rendering inline.",
+		);
+	}
+
+	const { teleportProps } = useBoundaryPortalAttachment({ boundaryId });
+	const { handleOnLayout, placeholderStyle } = usePlaceholderStyles();
+
+	return (
+		<Animated.View
+			ref={placeholderRef}
+			onLayout={({ nativeEvent: { layout } }) =>
+				runOnUI(handleOnLayout)(layout)
+			}
+			style={placeholderStyle}
+			pointerEvents={PORTAL_POINTER_EVENTS}
+			collapsable={false}
+		>
+			<EnabledNativePortal
+				animatedProps={teleportProps}
+				name={boundaryId}
+				pointerEvents={PORTAL_POINTER_EVENTS}
+			>
+				{children}
+			</EnabledNativePortal>
+		</Animated.View>
 	);
 });

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

@@ -4,7 +4,6 @@ export type HostRegistration = {
 	hostKey: string;
 	screenKey: string;
 	fallback: boolean;
-	capturesScroll: boolean;
 };
 
 type HostRegistrySnapshot = Record<string, string>;

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

@@ -5,11 +5,11 @@ import type { NormalizedTransitionInterpolatedStyle } from "../../../../../../ty
 
 export type ActivePortalBoundaryHost = {
 	boundaryId: string;
-	escapeClipping: boolean;
 	hostKey: string;
 	localStylesMaps: SharedValue<LocalStyleLayers>;
 	pairKey: string;
 	portalHostName: string;
+	portalHostReady: SharedValue<boolean>;
 	screenKey: string;
 	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
 };
@@ -55,11 +55,11 @@ const isSameHost = (
 ) => {
 	return (
 		a.boundaryId === b.boundaryId &&
-		a.escapeClipping === b.escapeClipping &&
 		a.hostKey === b.hostKey &&
 		a.localStylesMaps === b.localStylesMaps &&
 		a.pairKey === b.pairKey &&
 		a.portalHostName === b.portalHostName &&
+		a.portalHostReady === b.portalHostReady &&
 		a.screenKey === b.screenKey &&
 		a.slotsMap === b.slotsMap
 	);
@@ -85,43 +85,6 @@ export const unmountPortalBoundaryHostByName = (
 	emit();
 };
 
-/**
- * Post-handoff GC: drop every receiver for this boundary except the one now
- * visible (`keepPortalHostName`). Called once the new host is confirmed on
- * screen so the superseded receivers stop rendering.
- */
-export const dropStalePortalBoundaryHosts = ({
-	boundaryId,
-	keepPortalHostName,
-}: {
-	boundaryId: string;
-	keepPortalHostName: string;
-}) => {
-	if (!activeBoundaryHosts.has(keepPortalHostName)) {
-		return;
-	}
-
-	let didDelete = false;
-
-	for (const [hostEntryKey, host] of activeBoundaryHosts) {
-		if (
-			host.boundaryId !== boundaryId ||
-			host.portalHostName === keepPortalHostName
-		) {
-			continue;
-		}
-
-		activeBoundaryHosts.delete(hostEntryKey);
-		didDelete = true;
-	}
-
-	if (!didDelete) {
-		return;
-	}
-
-	emit();
-};
-
 const subscribe = (listener: () => void) => {
 	listeners.add(listener);
 

package/src/components/boundary/portal/utils/handoff-target.ts

@@ -0,0 +1,48 @@
+import { getLinkKeyFromTag } from "../../../../stores/bounds/helpers/link-pairs.helpers";
+import type {
+	LinkPairsState,
+	ScreenKey,
+	ScreenPairKey,
+} from "../../../../stores/bounds/types";
+
+type ResolveEnteringHandoffTargetParams = {
+	animationProgress: number;
+	boundaryId: string;
+	currentScreenKey: ScreenKey;
+	pairsState: LinkPairsState;
+	sourcePairKey?: ScreenPairKey;
+};
+
+/** Resolve only the immediate A -> B entering handoff. */
+export const resolveEnteringHandoffTarget = ({
+	animationProgress,
+	boundaryId,
+	currentScreenKey,
+	pairsState,
+	sourcePairKey,
+}: ResolveEnteringHandoffTargetParams): ScreenKey | null => {
+	"worklet";
+
+	if (!sourcePairKey || animationProgress <= 0) {
+		return null;
+	}
+
+	const pair = pairsState[sourcePairKey];
+	const linkKey = getLinkKeyFromTag(boundaryId);
+	const link = pair?.links[linkKey];
+
+	if (
+		link?.status !== "complete" ||
+		link.source.screenKey !== currentScreenKey ||
+		!link.source.handoff ||
+		!link.destination.handoff
+	) {
+		return null;
+	}
+
+	if (link.group && pair.groups[link.group]?.activeId !== linkKey) {
+		return null;
+	}
+
+	return link.destination.screenKey;
+};

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

@@ -1,17 +1,33 @@
 import { logger } from "../../../../utils/logger";
 import { isTeleportAvailable } from "../teleport";
 
-export type BoundaryPortalRuntime = {
+export type BoundaryPortalRuntime = Readonly<{
 	handoff: boolean;
 	escapeClipping: boolean;
-	enabled: 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,
@@ -22,11 +38,7 @@ export const resolveBoundaryPortal = ({
 	const enabled = resolvedHandoff || resolvedEscapeClipping;
 
 	if (!enabled) {
-		return {
-			handoff: false,
-			escapeClipping: false,
-			enabled: false,
-		};
+		return DISABLED_RUNTIME;
 	}
 
 	if (!isTeleportAvailable) {
@@ -35,16 +47,12 @@ export const resolveBoundaryPortal = ({
 			"react-native-teleport is not installed; handoff and escapeClipping boundaries will render inline.",
 		);
 
-		return {
-			handoff: false,
-			escapeClipping: false,
-			enabled: false,
-		};
+		return DISABLED_RUNTIME;
 	}
 
-	return {
-		handoff: resolvedHandoff,
-		escapeClipping: resolvedEscapeClipping,
-		enabled,
-	};
+	return resolvedHandoff
+		? resolvedEscapeClipping
+			? HANDOFF_ESCAPE_CLIPPING_RUNTIME
+			: HANDOFF_RUNTIME
+		: ESCAPE_CLIPPING_RUNTIME;
 };

package/src/components/boundary/portal/utils/teleport-control.ts

@@ -11,15 +11,3 @@ export const isTeleportEnabled = (
 
 	return teleport?.enabled !== false;
 };
-
-export const shouldAttachBoundaryPortal = ({
-	enabled,
-	teleport,
-}: {
-	enabled: boolean;
-	teleport?: BoundaryTeleportControl;
-}) => {
-	"worklet";
-
-	return enabled && isTeleportEnabled(teleport);
-};