react-native-screen-transitions 3.9.0-beta.0 → 3.9.0-beta.2

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

@@ -0,0 +1,274 @@
+import { useCallback, useLayoutEffect, useState } from "react";
+import {
+	runOnJS,
+	useAnimatedProps,
+	useAnimatedReaction,
+	useSharedValue,
+} from "react-native-reanimated";
+import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
+import { useScreenSlots } from "../../../../../../providers/screen/styles";
+import { useRegisteredScreenSlots } from "../../../../../../providers/screen/styles/stores/slot-references.store";
+import { AnimationStore } from "../../../../../../stores/animation.store";
+import { pairs } from "../../../../../../stores/bounds/internals/state";
+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 { 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 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 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));
+		},
+		[],
+	);
+
+	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 || !sourcePairKey) {
+				return {
+					hostScreenKey: null,
+					ownerPairKey: sourcePairKey,
+					ownerScreenKey: null,
+					status: "clear",
+				};
+			}
+
+			const progressAnimating = settledHostAnimating.get();
+			const progressSettled = settledHostProgress.get();
+			const willAnimate = settledHostWillAnimate.get();
+
+			return resolveBoundaryPortalOwnership({
+				boundaryId,
+				currentScreenKey,
+				handoff: true,
+				isSettledHostClosingComplete: isHandoffHostClosingComplete({
+					closing: settledHostClosing.get(),
+					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);
+			}
+
+			runOnJS(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);
+			}
+		},
+	);
+
+	const teleportProps = useAnimatedProps(() => {
+		"worklet";
+
+		const slot = activeSlotsMap.get()[boundaryId];
+		const { teleport, ...slotProps } = slot?.props ?? {};
+		const shouldTeleport = shouldAttachBoundaryPortal({
+			enabled,
+			teleport,
+		});
+		const visibleName = visiblePortalHostName.get();
+
+		return {
+			...slotProps,
+			hostName:
+				shouldTeleport && visibleName
+					? visibleName
+					: PORTAL_HOST_NAME_RESET_VALUE,
+		};
+	});
+
+	return {
+		teleportProps,
+		visiblePortalHostName,
+	};
+};

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

@@ -0,0 +1,59 @@
+import {
+	type ComponentProps,
+	type ComponentType,
+	memo,
+	type ReactNode,
+} from "react";
+import type { ViewProps } from "react-native";
+import Animated from "react-native-reanimated";
+import { isTeleportAvailable, NativePortal } from "../../teleport";
+import { useBoundaryContentPortalAttachment } from "./hooks/use-boundary-content-portal-attachment";
+
+export { BoundaryContentPortalHost } from "./components/host";
+
+type BoundaryContentPortalProps = {
+	boundaryId?: string;
+	children: ReactNode;
+	enabled: boolean;
+	pointerEvents?: ViewProps["pointerEvents"];
+};
+
+type NullableHostNamePortalProps = Omit<
+	ComponentProps<NonNullable<typeof NativePortal>>,
+	"hostName"
+> & {
+	hostName?: string | null;
+};
+
+const AnimatedNativePortal = NativePortal
+	? Animated.createAnimatedComponent(
+			NativePortal as ComponentType<NullableHostNamePortalProps>,
+		)
+	: null;
+
+export const BoundaryContentPortal = memo(function BoundaryContentPortal({
+	boundaryId,
+	children,
+	enabled,
+	pointerEvents,
+}: BoundaryContentPortalProps) {
+	const shouldEnablePortal = enabled && boundaryId !== undefined;
+	const { teleportProps } = useBoundaryContentPortalAttachment({
+		boundaryId: boundaryId ?? "",
+		enabled: shouldEnablePortal,
+	});
+
+	if (shouldEnablePortal && isTeleportAvailable && AnimatedNativePortal) {
+		return (
+			<AnimatedNativePortal
+				animatedProps={teleportProps}
+				name={boundaryId}
+				pointerEvents={pointerEvents}
+			>
+				{children}
+			</AnimatedNativePortal>
+		);
+	}
+
+	return children;
+});

package/src/shared/components/boundary/portal/components/{host.tsx → boundary-portal/components/host.tsx}

@@ -7,8 +7,9 @@ import {
 	type ViewStyle,
 } from "react-native";
 import Animated from "react-native-reanimated";
-import { useDescriptorsStore } from "../../../../providers/screen/descriptors";
-import { SystemStore } from "../../../../stores/system.store";
+import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
+import { useScreenSlots } from "../../../../../../providers/screen/styles";
+import { SystemStore } from "../../../../../../stores/system.store";
 import { useHostMeasurement } from "../hooks/use-host-measurement";
 import { registerHost, unregisterHost } from "../stores/host-registry.store";
 import { useActivePortalBoundaryHosts } from "../stores/portal-boundary-host.store";
@@ -26,7 +27,7 @@ type HostImplProps = PublicHostProps & {
 
 function HostImpl({ fallback = false, style }: HostImplProps) {
 	const screenKey = useDescriptorsStore((s) => s.derivations.currentScreenKey);
-	const { drainLifecycleStartBlocks } = SystemStore.getBag(screenKey).actions;
+	const { unblockLifecycleStart } = SystemStore.getBag(screenKey).actions;
 	const generatedHostKeyRef = useRef<string | null>(null);
 
 	if (generatedHostKeyRef.current === null) {
@@ -36,6 +37,7 @@ function HostImpl({ fallback = false, style }: HostImplProps) {
 	const hostKey = fallback ? screenKey : generatedHostKeyRef.current;
 	const capturesScroll = !fallback;
 	const activeBoundaryHosts = useActivePortalBoundaryHosts(hostKey);
+	const { visibilityBlocked } = useScreenSlots();
 	const { height: viewportHeight, width: viewportWidth } =
 		useWindowDimensions();
 
@@ -44,6 +46,9 @@ function HostImpl({ fallback = false, style }: HostImplProps) {
 		enabled: activeBoundaryHosts.length > 0,
 		hostKey,
 		screenKey,
+		visibilityBlocked,
+		viewportHeight,
+		viewportWidth,
 	});
 
 	useLayoutEffect(() => {
@@ -60,15 +65,13 @@ function HostImpl({ fallback = false, style }: HostImplProps) {
 	}, [capturesScroll, fallback, hostKey, screenKey]);
 
 	const handleUnblocking = useCallback(() => {
-		// Screen-level escape keeps the open transition gated until portal hosts
-		// have committed layout. A screen may render more than one portal boundary
-		// host for the same lifecycle request, so the final host layout drains the
-		// outstanding start blocks for this screen.
-		drainLifecycleStartBlocks();
-	}, [drainLifecycleStartBlocks]);
+		// 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, idx, list) => (
+		? activeBoundaryHosts.map((host) => (
 				<View
 					key={host.portalHostName}
 					pointerEvents="none"
@@ -76,11 +79,7 @@ function HostImpl({ fallback = false, style }: HostImplProps) {
 						styles.boundaryHostViewport,
 						{ width: viewportWidth, height: viewportHeight },
 					]}
-					onLayout={() => {
-						if (list.length - 1 === idx) {
-							handleUnblocking();
-						}
-					}}
+					onLayout={handleUnblocking}
 				>
 					<PortalBoundaryHost host={host} style={StyleSheet.absoluteFill} />
 				</View>

package/src/shared/components/boundary/portal/components/{portal-boundary-host.tsx → boundary-portal/components/portal-boundary-host.tsx}

@@ -1,20 +1,20 @@
 import { memo } from "react";
 import { type StyleProp, StyleSheet, type ViewStyle } from "react-native";
 import Animated, { useAnimatedStyle } 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 { 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 type { ScrollMeasuredDimensions } from "../../utils/measured-bounds";
+} from "../../../../../../stores/scroll.store";
+import type { ScrollMeasuredDimensions } from "../../../../utils/measured-bounds";
+import { NativePortalHost } from "../../../teleport";
+import { hasLocalSlot } from "../helpers/has-local-slot";
+import { resolvePortalOffsetStyle } from "../helpers/offset-style";
 import type { ActivePortalBoundaryHost } from "../stores/portal-boundary-host.store";
-import { NativePortalHost } from "../teleport";
-import { hasLocalSlot } from "../utils/has-local-slot";
-import { resolvePortalOffsetStyle } from "../utils/offset-style";
 
 const AnimatedPortalBoundaryHost = NativePortalHost
 	? Animated.createAnimatedComponent(NativePortalHost)
@@ -45,7 +45,7 @@ export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 
 	const hostStyle = useAnimatedStyle(() => {
 		"worklet";
-		// Strict per-member lookup — a fallback member's source rect would
+		// Strict per-member lookup - a fallback member's source rect would
 		// misplace this host's teleported content.
 		const link = getLink(host.pairKey, host.boundaryId);
 		if (!link?.source || !link.destination) {
@@ -135,7 +135,7 @@ export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 	});
 
 	// Without `react-native-teleport` no portal ever mounts a boundary host, so
-	// this never renders — the guard just narrows the nullable animated host.
+	// this never renders - the guard just narrows the nullable animated host.
 	if (!AnimatedPortalBoundaryHost) {
 		return null;
 	}

package/src/shared/components/boundary/portal/components/boundary-portal/components/portal-slot.tsx

@@ -0,0 +1,80 @@
+import {
+	type ComponentProps,
+	type ComponentType,
+	memo,
+	type ReactNode,
+} from "react";
+import type { View, ViewProps } from "react-native";
+import Animated, { type AnimatedRef, runOnUI } from "react-native-reanimated";
+import { logger } from "../../../../../../utils/logger";
+import {
+	isTeleportAvailable,
+	NativePortal as TeleportPortal,
+} from "../../../teleport";
+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;
+
+type BoundaryPortalSlotProps = {
+	id: string;
+	children: ReactNode;
+	enabled: boolean;
+	animatedProps: any;
+	pointerEvents?: ViewProps["pointerEvents"];
+	placeholderRef?: AnimatedRef<View>;
+};
+
+export const BoundaryPortalSlot = memo(function BoundaryPortalSlot({
+	id,
+	children,
+	enabled,
+	animatedProps,
+	pointerEvents,
+	placeholderRef,
+}: BoundaryPortalSlotProps) {
+	const isPortalEnabled = enabled && isTeleportAvailable;
+
+	if (__DEV__ && enabled && !id) {
+		logger.warnOnce(
+			"portal:missing-id",
+			"A boundary portal was rendered without an id; rendering inline.",
+		);
+	}
+
+	const { handleOnLayout, placeholderStyle } = usePlaceholderStyles();
+
+	if (isPortalEnabled && AnimatedNativePortal) {
+		return (
+			<Animated.View
+				ref={placeholderRef}
+				onLayout={({ nativeEvent: { layout } }) =>
+					runOnUI(handleOnLayout)(layout)
+				}
+				style={placeholderStyle}
+				pointerEvents={pointerEvents}
+				collapsable={false}
+			>
+				<AnimatedNativePortal
+					animatedProps={animatedProps}
+					name={id}
+					pointerEvents={pointerEvents}
+				>
+					{children}
+				</AnimatedNativePortal>
+			</Animated.View>
+		);
+	}
+
+	return children;
+});

package/src/shared/components/boundary/portal/{utils → components/boundary-portal/helpers}/has-local-slot.ts

@@ -1,4 +1,4 @@
-import type { LocalStyleLayers } from "../../../../providers/screen/styles/helpers/resolve-slot-styles";
+import type { LocalStyleLayers } from "../../../../../../providers/screen/styles/helpers/resolve-slot-styles";
 
 export const hasLocalSlot = (
 	localStylesMaps: LocalStyleLayers,

package/src/shared/components/boundary/portal/components/boundary-portal/helpers/host-name.ts

@@ -0,0 +1,10 @@
+const BOUNDARY_PORTAL_HOST_NAME_SUFFIX = "-portal-host";
+
+export const createBoundaryPortalHostName = (
+	hostKey: string,
+	boundaryId: string,
+	pairKey?: string | null,
+) => {
+	"worklet";
+	return `${hostKey}-${pairKey ? `${pairKey}-` : ""}${boundaryId}${BOUNDARY_PORTAL_HOST_NAME_SUFFIX}`;
+};

package/src/shared/components/boundary/portal/{utils → components/boundary-portal/helpers}/offset-style.ts

@@ -1,6 +1,6 @@
 import type { StyleProps } from "react-native-reanimated";
-import { getClampedScrollAxisDelta } from "../../../../stores/scroll.store";
-import type { ScrollMeasuredDimensions } from "../../utils/measured-bounds";
+import { getClampedScrollAxisDelta } from "../../../../../../stores/scroll.store";
+import type { ScrollMeasuredDimensions } from "../../../../utils/measured-bounds";
 import { getPortalHostBounds } from "../stores/host-bounds.store";
 
 /**