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

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

@@ -1,318 +1,140 @@
-import { useCallback, useLayoutEffect, useState } from "react";
-import {
-	useAnimatedProps,
-	useAnimatedReaction,
-	useSharedValue,
-} from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
+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 { 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 { getLinkKeyFromTag } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
+import { getEntry } from "../../../../../../stores/bounds/internals/entries";
 import { pairs } from "../../../../../../stores/bounds/internals/state";
+import { SystemStore } from "../../../../../../stores/system.store";
 import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
+import { isTeleportEnabled } from "../../../utils/teleport-control";
 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";
+	resolveActiveHandoffReceiver,
+	resolveHandoffAttachmentCandidate,
+	resolvePreviousHandoffReceiver,
+} from "../helpers/active-handoff-receiver";
 import { createBoundaryContentPortalHostName } from "../helpers/host-name";
 
 interface UseBoundaryContentPortalAttachmentParams {
 	boundaryId: string;
-	enabled: boolean;
 }
 
 export const useBoundaryContentPortalAttachment = ({
 	boundaryId,
-	enabled,
 }: UseBoundaryContentPortalAttachmentParams) => {
-	const ownScreenSlots = useScreenSlots();
-	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
+	const { nextInterpolatorReady, slotsMap } = useScreenSlots();
+
 	const currentScreenKey = useDescriptorsStore(
 		(s) => s.derivations.currentScreenKey,
 	);
-	const [ownership, setOwnership] = useState<Extract<
-		PortalOwnershipSignal,
-		{ status: "complete" }
-	> | null>(null);
+	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
 
-	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 activeReceiverScreenKey = useStack(resolveActiveHandoffReceiver);
+	const previousReceiverScreenKey = useStack(resolvePreviousHandoffReceiver);
 
-	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 activeReceiverAnimationProgress = SystemStore.getValue(
+		activeReceiverScreenKey ?? currentScreenKey,
+		"animationProgress",
 	);
-	const settledHostClosing = AnimationStore.getValue(
-		settledHostScreenKey ?? currentScreenKey,
-		"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));
-		},
-		[],
+	const activeReceiverClosing = AnimationStore.getValue(
+		activeReceiverScreenKey ?? currentScreenKey,
+		"closing",
 	);
 
-	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 attachedReceiverScreenKey = useSharedValue(currentScreenKey);
+	const sourcePairBeforeClose = useSharedValue<string | null>(null);
 
-			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",
-				};
-			}
+	const teleportProps = useAnimatedProps(() => {
+		"worklet";
 
-			if (!sourcePairKey) {
-				return {
-					hostScreenKey: null,
-					ownerPairKey: sourcePairKey,
-					ownerScreenKey: null,
-					status: "clear",
-				};
-			}
+		const slot = slotsMap.get()[boundaryId];
+		const {
+			pointerEvents: _pointerEvents,
+			teleport,
+			...slotProps
+		} = slot?.props ?? {};
 
-			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;
-			}
+		const shouldTeleport = isTeleportEnabled(teleport);
+		const closing = activeReceiverClosing.get();
+		const animationProgress = activeReceiverAnimationProgress.get();
 
-			if (signal.status === "pending") {
-				canSwitchPortalHostImmediately.set(0);
-				return;
-			}
+		if (!closing) {
+			sourcePairBeforeClose.set(sourcePairKey ?? null);
+		}
 
-			const hostScreenKey =
-				signal.status === "complete" ? signal.hostScreenKey : null;
-			let previousOwnerPairKey: string | undefined;
+		const pairChangedDuringClose =
+			!!closing &&
+			!!sourcePairKey &&
+			sourcePairKey !== sourcePairBeforeClose.get();
 
-			if (previousSignal?.status === "complete") {
-				previousOwnerPairKey = previousSignal.ownerPairKey ?? undefined;
-			}
+		const hasActiveCloseFinished = hasCloseTransitionFinished({
+			closing,
+			animationProgress,
+		});
 
-			const canSwitchImmediately = canSwitchHandoffHostImmediately({
-				hostScreenKey,
-				ownerPairKey:
-					signal.status === "complete" ? signal.ownerPairKey : undefined,
-				previousOwnerPairKey,
-			});
+		const pair = sourcePairKey ? pairs.get()[sourcePairKey] : null;
+		const link = pair?.links[getLinkKeyFromTag(boundaryId)];
+
+		const pairDestination =
+			link?.status === "complete" &&
+			(!link.group ||
+				pair?.groups[link.group]?.activeId === getLinkKeyFromTag(boundaryId))
+				? link.destination.screenKey
+				: null;
+
+		const interpolatorReady = nextInterpolatorReady.get();
+		const attachedScreenKey = attachedReceiverScreenKey.get();
+
+		const nextReceiverScreenKey = resolveHandoffAttachmentCandidate({
+			activeReceiverClosing: !!closing,
+			activeReceiverScreenKey,
+			attachedReceiverScreenKey: attachedScreenKey,
+			hasActiveCloseFinished,
+			interpolatorReady: !!interpolatorReady,
+			pairChangedDuringClose,
+			pairDestinationScreenKey: pairDestination,
+			previousReceiverScreenKey,
+		});
 
-			canSwitchPortalHostImmediately.set(canSwitchImmediately ? 1 : 0);
+		const receiverEntry = nextReceiverScreenKey
+			? getEntry(boundaryId, nextReceiverScreenKey)
+			: null;
 
-			if (canSwitchImmediately && hostScreenKey) {
-				const hostName = createBoundaryContentPortalHostName(
-					hostScreenKey,
-					boundaryId,
-				);
-				requestedPortalHostName.set(hostName);
-				visiblePortalHostName.set(hostName);
-			}
+		const receiverReady = receiverEntry?.handoff === true;
 
-			scheduleOnRN(
-				updatePortalOwnership,
-				signal.hostScreenKey,
-				signal.ownerPairKey,
-				signal.ownerScreenKey ?? undefined,
-			);
-		},
-	);
+		const returningFromActiveClose =
+			hasActiveCloseFinished && attachedScreenKey === activeReceiverScreenKey;
 
-	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,
-			});
+		const activatingPairDestination =
+			!!pairDestination &&
+			!!interpolatorReady &&
+			nextReceiverScreenKey === pairDestination;
 
-			return {
-				isInterpolatorReady,
-				nextVisibleName,
-				requestedName,
-				shouldTeleport,
-				teleport,
-				visibleName,
-			};
-		},
-		(state, previousState) => {
-			"worklet";
-			if (shallowEqual(previousState, state)) {
-				return;
-			}
+		const canActivateReceiver =
+			returningFromActiveClose ||
+			activatingPairDestination ||
+			animationProgress > 0;
 
-			if (state.nextVisibleName !== state.visibleName) {
-				visiblePortalHostName.set(state.nextVisibleName);
-			}
-		},
-	);
+		if (nextReceiverScreenKey && receiverReady && canActivateReceiver) {
+			attachedReceiverScreenKey.set(nextReceiverScreenKey);
+		}
 
-	const teleportProps = useAnimatedProps(() => {
-		"worklet";
+		const targetScreenKey = shouldTeleport
+			? attachedReceiverScreenKey.get()
+			: null;
 
-		const slot = activeSlotsMap.get()[boundaryId];
-		const {
-			pointerEvents: _pointerEvents,
-			teleport,
-			...slotProps
-		} = slot?.props ?? {};
-		const shouldTeleport = shouldAttachBoundaryPortal({
-			enabled,
-			teleport,
-		});
-		const visibleName = visiblePortalHostName.get();
+		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,29 +60,20 @@ function HostImpl({ fallback = false, style }: HostImplProps) {
 		return () => {
 			unregisterHost(screenKey, hostKey);
 		};
-	}, [capturesScroll, fallback, hostKey, screenKey]);
+	}, [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]);
-
-	const boundaryHosts = measurement.canRenderHosts
-		? activeBoundaryHosts.map((host) => (
-				<View
-					key={host.portalHostName}
-					pointerEvents={PORTAL_POINTER_EVENTS}
-					style={[
-						styles.boundaryHostViewport,
-						{ width: viewportWidth, height: viewportHeight },
-					]}
-					onLayout={handleUnblocking}
-				>
-					<PortalBoundaryHost host={host} style={StyleSheet.absoluteFill} />
-				</View>
-			))
-		: null;
+	const boundaryHosts = activeBoundaryHosts.map((host) => (
+		<View
+			key={host.portalHostName}
+			pointerEvents={PORTAL_POINTER_EVENTS}
+			style={[
+				styles.boundaryHostViewport,
+				{ width: viewportWidth, height: viewportHeight },
+			]}
+		>
+			<PortalBoundaryHost host={host} style={StyleSheet.absoluteFill} />
+		</View>
+	));
 
 	return (
 		<Animated.View