react-native-screen-transitions 4.1.0-beta.0 → 4.1.0-beta.1

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

@@ -0,0 +1,101 @@
+import type { View } from "react-native";
+import {
+	cancelAnimation,
+	type MeasuredDimensions,
+	measure,
+	useAnimatedReaction,
+	useAnimatedRef,
+	useDerivedValue,
+	useSharedValue,
+	withDelay,
+	withTiming,
+} from "react-native-reanimated";
+
+import type { BoundaryLocalMeasurementValue } from "../../types";
+
+const HOST_MEASUREMENT_RETRY_DELAY_MS = 16;
+const MAX_HOST_MEASUREMENT_ATTEMPTS = 20;
+
+type UseHostMeasurementParams = {
+	measurementKey: string | null;
+	boundaryMeasurements: BoundaryLocalMeasurementValue[];
+};
+
+export const useHostMeasurement = ({
+	measurementKey,
+	boundaryMeasurements,
+}: UseHostMeasurementParams) => {
+	const hostRef = useAnimatedRef<View>();
+	const measurement = useSharedValue<{
+		key: string;
+		bounds: MeasuredDimensions;
+	} | null>(null);
+	const hostBounds = useDerivedValue(() => {
+		const captured = measurement.get();
+		return captured?.key === measurementKey ? captured.bounds : null;
+	});
+	const retryToken = useSharedValue(0);
+	const attempts = useSharedValue({ key: measurementKey, count: 0 });
+
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			if (!measurementKey) {
+				return null;
+			}
+
+			// Hosts mount before their screen is visible. Wait for source capture
+			// rather than caching the screen's initial offscreen position.
+			let hasSource = false;
+			for (const measurement of boundaryMeasurements) {
+				if (measurement.get()) {
+					hasSource = true;
+					break;
+				}
+			}
+			if (!hasSource) return null;
+			return [
+				measurementKey,
+				measurement.get()?.key ?? null,
+				retryToken.get(),
+			] as const;
+		},
+		(state) => {
+			"worklet";
+			if (!state) {
+				cancelAnimation(retryToken);
+				return;
+			}
+
+			const [requestedKey, completedKey] = state;
+			if (requestedKey === completedKey) {
+				return;
+			}
+
+			cancelAnimation(retryToken);
+			const count =
+				attempts.get().key === requestedKey ? attempts.get().count : 0;
+			if (count >= MAX_HOST_MEASUREMENT_ATTEMPTS) return;
+			attempts.set({ key: requestedKey, count: count + 1 });
+
+			const measured = measure(hostRef);
+			if (!measured || measured.width <= 0 || measured.height <= 0) {
+				if (count + 1 < MAX_HOST_MEASUREMENT_ATTEMPTS) {
+					retryToken.set(
+						withDelay(
+							HOST_MEASUREMENT_RETRY_DELAY_MS,
+							withTiming(retryToken.get() + 1, { duration: 0 }),
+						),
+					);
+				}
+				return;
+			}
+
+			measurement.set({ key: requestedKey, bounds: { ...measured } });
+		},
+	);
+	return {
+		hostBounds,
+		hostRef,
+	};
+};

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

@@ -0,0 +1,53 @@
+import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
+import { useBoundaryRootStore } from "../../providers/boundary-root.provider";
+import { useActiveHostKey } from "../stores/host-registry.store";
+import {
+	createHandoffHostName,
+	PORTAL_HOST_NAME_RESET_VALUE,
+} from "../utils/naming";
+import { useActivePortalBoundaryHost } from "./use-active-portal-boundary-host";
+
+export type PortalMode = "handoff" | "escapeClipping";
+
+export function usePortalDestination(boundaryId: string, mode: PortalMode) {
+	const { currentScreenKey, localMeasurement, slotsMap, boundaryPresentation } =
+		useBoundaryRootStore((s) => s);
+	const portalHostReady = useSharedValue(false);
+	const escapeHostKey = useActiveHostKey(
+		mode === "escapeClipping" ? currentScreenKey : null,
+	);
+	const portalHostName = useActivePortalBoundaryHost({
+		boundaryId,
+		escapeHostKey,
+		localMeasurement,
+		portalHostReady,
+		slotsMap,
+	});
+	const teleportProps = useAnimatedProps(() => {
+		"worklet";
+		const { owner, receiver, slots } = boundaryPresentation.get();
+		const slot = slots[boundaryId];
+		const {
+			pointerEvents: _pointerEvents,
+			handoffTarget: _handoffTarget,
+			...props
+		} = slot?.props ?? {};
+		let hostName: string | null = PORTAL_HOST_NAME_RESET_VALUE;
+		if (mode === "handoff") {
+			hostName = createHandoffHostName(receiver, boundaryId);
+		} else if (
+			owner?.ready &&
+			localMeasurement.get()?.pairKey === owner.pairKey &&
+			slot !== undefined &&
+			portalHostReady.get()
+		) {
+			hostName = portalHostName;
+		}
+
+		return { ...props, hostName };
+	});
+	return {
+		teleportProps,
+		localHostName: createHandoffHostName(currentScreenKey, boundaryId),
+	};
+}

package/src/components/boundary/portal/index.ts

@@ -1,2 +1 @@
-export { Host } from "./components/boundary-portal/components/host";
 export { PortalProvider } from "./components/portal-provider";

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

@@ -6,15 +6,9 @@ export type HostRegistration = {
 	fallback: boolean;
 };
 
-type HostRegistrySnapshot = Record<string, string>;
-
-const EMPTY_SNAPSHOT: HostRegistrySnapshot = {};
-
 const listeners = new Set<() => void>();
 const hostStacks = new Map<string, HostRegistration[]>();
 
-let snapshot: HostRegistrySnapshot = EMPTY_SNAPSHOT;
-
 /**
  * The active host for a screen. Stack ordering is the load-bearing invariant:
  * `registerHost` unshifts fallback hosts to the front and pushes real hosts to
@@ -39,19 +33,7 @@ const getActiveHostFromStack = (
 	return stack[0]?.hostKey ?? screenKey;
 };
 
-const buildSnapshot = (): HostRegistrySnapshot => {
-	const nextSnapshot: HostRegistrySnapshot = {};
-
-	for (const [screenKey, stack] of hostStacks) {
-		nextSnapshot[screenKey] = getActiveHostFromStack(screenKey, stack);
-	}
-
-	return nextSnapshot;
-};
-
 const emit = () => {
-	snapshot = buildSnapshot();
-
 	for (const listener of listeners) {
 		listener();
 	}
@@ -116,7 +98,7 @@ export const unregisterHost = (screenKey: string, hostKey: string) => {
 };
 
 export const getActiveHostKey = (screenKey: string) => {
-	return snapshot[screenKey] ?? screenKey;
+	return getActiveHostFromStack(screenKey, hostStacks.get(screenKey));
 };
 
 export const useActiveHostKey = (screenKey?: string | null) => {
@@ -129,6 +111,5 @@ export const useActiveHostKey = (screenKey?: string | null) => {
 
 export const resetHostRegistry = () => {
 	hostStacks.clear();
-	snapshot = EMPTY_SNAPSHOT;
 	emit();
 };

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

@@ -1,13 +1,12 @@
 import { useSyncExternalStore } from "react";
 import type { SharedValue } from "react-native-reanimated";
-import type { NormalizedTransitionInterpolatedStyle } from "../../../../../../types/animation.types";
-import type { BoundaryLocalMeasurementValue } from "../../../../types";
+import type { NormalizedTransitionInterpolatedStyle } from "../../../../types/animation.types";
+import type { BoundaryLocalMeasurementValue } from "../../types";
 
 export type ActivePortalBoundaryHost = {
 	boundaryId: string;
 	hostKey: string;
 	localMeasurement: BoundaryLocalMeasurementValue;
-	pairKey: string;
 	portalHostName: string;
 	portalHostReady: SharedValue<boolean>;
 	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
@@ -26,26 +25,17 @@ let snapshot: PortalSnapshot = {
 	hostsByScope: {},
 };
 
-const buildSnapshot = (): PortalSnapshot => {
-	const hostsByScope: Record<string, ActivePortalBoundaryHost[]> = {};
-
-	for (const host of activeBoundaryHosts.values()) {
-		const hosts = hostsByScope[host.hostKey] ?? [];
-		hosts.push(host);
-		hostsByScope[host.hostKey] = hosts;
-	}
-
-	return {
-		hostsByScope,
-	};
-};
-
-const emit = () => {
-	snapshot = buildSnapshot();
-
-	for (const listener of listeners) {
-		listener();
+// Preserve other overlays' snapshots so a registration only rerenders its owners.
+const emit = (...hostKeys: string[]) => {
+	const hostsByScope = { ...snapshot.hostsByScope };
+	for (const hostKey of new Set(hostKeys)) {
+		hostsByScope[hostKey] = Array.from(activeBoundaryHosts.values()).filter(
+			(host) => host.hostKey === hostKey,
+		);
+		if (!hostsByScope[hostKey].length) delete hostsByScope[hostKey];
 	}
+	snapshot = { hostsByScope };
+	for (const listener of listeners) listener();
 };
 
 const isSameHost = (
@@ -56,7 +46,6 @@ const isSameHost = (
 		a.boundaryId === b.boundaryId &&
 		a.hostKey === b.hostKey &&
 		a.localMeasurement === b.localMeasurement &&
-		a.pairKey === b.pairKey &&
 		a.portalHostName === b.portalHostName &&
 		a.portalHostReady === b.portalHostReady &&
 		a.slotsMap === b.slotsMap
@@ -70,17 +59,21 @@ export const mountPortalBoundaryHost = (host: ActivePortalBoundaryHost) => {
 	}
 
 	activeBoundaryHosts.set(host.portalHostName, host);
-	emit();
+	emit(host.hostKey, previous?.hostKey ?? host.hostKey);
 };
 
 export const unmountPortalBoundaryHostByName = (
 	portalHostName: string | null | undefined,
 ) => {
-	if (!portalHostName || !activeBoundaryHosts.delete(portalHostName)) {
+	const host = portalHostName
+		? activeBoundaryHosts.get(portalHostName)
+		: undefined;
+	if (!host) {
 		return;
 	}
 
-	emit();
+	activeBoundaryHosts.delete(host.portalHostName);
+	emit(host.hostKey);
 };
 
 const subscribe = (listener: () => void) => {

package/src/components/boundary/portal/utils/naming.ts

@@ -10,3 +10,13 @@ export const createBoundaryPortalHostName = (
 };
 
 export const PORTAL_HOST_NAME_RESET_VALUE = null;
+
+const BOUNDARY_CONTENT_PORTAL_HOST_NAME_SUFFIX = "-content-portal-host";
+
+export const createHandoffHostName = (
+	screenKey: string,
+	boundaryId: string,
+) => {
+	"worklet";
+	return `${screenKey}-${boundaryId}${BOUNDARY_CONTENT_PORTAL_HOST_NAME_SUFFIX}`;
+};

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

@@ -1,58 +1,19 @@
+import type { BoundaryRuntimeFlags } from "../../../../stores/bounds/types";
 import { logger } from "../../../../utils/logger";
 import { isTeleportAvailable } from "../teleport";
 
-export type BoundaryPortalRuntime = Readonly<{
-	handoff: boolean;
-	escapeClipping: 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,
-}: ResolveBoundaryPortalParams): BoundaryPortalRuntime => {
-	const resolvedHandoff = handoff ?? false;
-	const resolvedEscapeClipping = escapeClipping ?? false;
-
-	const enabled = resolvedHandoff || resolvedEscapeClipping;
-
-	if (!enabled) {
-		return DISABLED_RUNTIME;
-	}
-
-	if (!isTeleportAvailable) {
+	handoff = false,
+	escapeClipping = false,
+}: BoundaryRuntimeFlags) => {
+	if (!isTeleportAvailable && (handoff || escapeClipping)) {
 		logger.warnOnce(
 			"boundary:teleport-missing",
 			"react-native-teleport is not installed; handoff and escapeClipping boundaries will render inline.",
 		);
-
-		return DISABLED_RUNTIME;
 	}
-
-	return resolvedHandoff
-		? resolvedEscapeClipping
-			? HANDOFF_ESCAPE_CLIPPING_RUNTIME
-			: HANDOFF_RUNTIME
-		: ESCAPE_CLIPPING_RUNTIME;
+	return {
+		handoff: isTeleportAvailable && handoff,
+		escapeClipping: isTeleportAvailable && escapeClipping,
+	};
 };

package/src/components/boundary/providers/boundary-root.provider.tsx

@@ -10,20 +10,15 @@ import type { View } from "react-native";
 import type { AnimatedRef } from "react-native-reanimated";
 import { useAnimatedRef, useSharedValue } from "react-native-reanimated";
 import { useBuilderStore } from "../../../providers/screen/builder";
-import {
-	useComposedSlotStyles,
-	useSlotStackingStyles,
-} from "../../../providers/screen/orchestrator/styles";
 import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
 import { createBoundTag } from "../../../stores/bounds/helpers/link-pairs.helpers";
 import type { BoundTag } from "../../../stores/bounds/types";
 import createProvider from "../../../utils/create-provider";
 import { logger } from "../../../utils/logger";
 import { BoundaryLifecycle } from "../components/boundary-lifecycle";
-import {
-	type BoundaryPortalRuntime,
-	resolveBoundaryPortal,
-} from "../portal/utils/resolve-portal";
+import { useBoundaryPresentation } from "../hooks/use-boundary-presentation";
+import { useComposedBoundaryStyle } from "../hooks/use-composed-boundary-style";
+import { resolveBoundaryPortal } from "../portal/utils/resolve-portal";
 import type {
 	BoundaryConfigProps,
 	BoundaryId,
@@ -42,13 +37,17 @@ export const TARGET_OUTSIDE_ROOT_WARNING =
 	"Boundary.Target must be rendered inside Transition.Boundary or a component created by createBoundaryComponent.";
 
 export type BoundaryRootRenderState = {
+	boundaryPresentation: ReturnType<
+		typeof useBoundaryPresentation
+	>["presentation"];
+	slotsMap: ReturnType<typeof useBoundaryPresentation>["slotsMap"];
 	attachedStyle: unknown;
 	boundTag: BoundTag;
 	currentScreenKey: string;
 	handoffEnabled: boolean;
 	localMeasurement: BoundaryLocalMeasurementValue;
 	measurementRef: AnimatedRef<View>;
-	portalRuntime: BoundaryPortalRuntime;
+	portalRuntime: ReturnType<typeof resolveBoundaryPortal>;
 	ref: AnimatedRef<View>;
 	shouldRenderBoundaryRootThroughPortal: boolean;
 	shouldRenderHandoffHost: boolean;
@@ -94,10 +93,10 @@ export const {
 			() => createBoundTag(String(id), group),
 			[id, group],
 		);
-		const portalRuntime = resolveBoundaryPortal({
-			handoff,
-			escapeClipping,
-		});
+		const portalRuntime = useMemo(
+			() => resolveBoundaryPortal({ handoff, escapeClipping }),
+			[handoff, escapeClipping],
+		);
 
 		const currentScreenKey = useBuilderStore(
 			(s) => s.derivations.currentScreenKey,
@@ -124,8 +123,19 @@ export const {
 		const shouldAttachAssociatedStyles = enabled;
 		const shouldEscapeBoundaryRootToScreenHost = portalRuntime.escapeClipping;
 
-		const associatedStyles = useComposedSlotStyles(boundTag.tag, style);
-		const associatedStackingStyles = useSlotStackingStyles(boundTag.tag);
+		const { presentation: boundaryPresentation, slotsMap } =
+			useBoundaryPresentation(
+				boundTag.tag,
+				enabled && (portalRuntime.handoff || portalRuntime.escapeClipping),
+			);
+
+		const associatedStyles = useComposedBoundaryStyle(
+			slotsMap,
+			boundTag.tag,
+			style,
+			hasTarget ? "stacking" : "full",
+		);
+
 		const rootRef = useAnimatedRef<View>();
 		const measurementRef = useAnimatedRef<View>();
 		const localMeasurement = useSharedValue<BoundaryLocalMeasurement | null>(
@@ -155,16 +165,16 @@ export const {
 		// Host-only handoff receivers still need the associated style: their
 		// handoff host is absolute-filled inside this root, so the root is the
 		// visual frame that animates the received payload.
-		const attachedStyle = shouldAttachAssociatedStyles
-			? hasTarget
-				? associatedStackingStyles
-				: shouldRenderBoundaryRootThroughPortal
-					? undefined
-					: associatedStyles
-			: undefined;
+		const attachedStyle =
+			shouldAttachAssociatedStyles &&
+			(hasTarget || !shouldRenderBoundaryRootThroughPortal)
+				? associatedStyles
+				: undefined;
 
 		const value = useMemo<BoundaryRootContextValue>(
 			() => ({
+				boundaryPresentation,
+				slotsMap,
 				attachedStyle,
 				boundTag,
 				currentScreenKey,
@@ -177,6 +187,8 @@ export const {
 				shouldRenderHandoffHost: handoffEnabled && !hasTarget,
 			}),
 			[
+				boundaryPresentation,
+				slotsMap,
 				attachedStyle,
 				boundTag,
 				currentScreenKey,

package/src/components/screen/container/helpers/layer-component.tsx

@@ -0,0 +1,38 @@
+import { type ComponentType, type ReactNode, useMemo } from "react";
+import type { ViewProps } from "react-native";
+import Animated from "react-native-reanimated";
+import type { ScreenLayerComponentProps } from "../../../../types";
+import { usesLayerRenderProps } from "./uses-layer-render-props";
+
+/** Adapts the two supported custom layer APIs without changing component identity. */
+export function LayerComponent({
+	component,
+	styles,
+	props,
+	pointerEvents,
+	children,
+	collapsable,
+}: ScreenLayerComponentProps & {
+	component?: ComponentType<any>;
+	children?: ReactNode;
+	collapsable?: ViewProps["collapsable"];
+}) {
+	const renderProps = component && usesLayerRenderProps(component);
+	const Component = useMemo<ComponentType<any>>(() => {
+		if (!component) return Animated.View;
+		return usesLayerRenderProps(component)
+			? component
+			: Animated.createAnimatedComponent(component);
+	}, [component]);
+	return (
+		<Component
+			{...(renderProps
+				? { styles, props }
+				: { style: styles, animatedProps: props })}
+			pointerEvents={pointerEvents}
+			collapsable={collapsable}
+		>
+			{children}
+		</Component>
+	);
+}

package/src/components/screen/container/layers/backdrop.tsx

@@ -1,6 +1,5 @@
-import { type ComponentType, memo, useCallback, useMemo } from "react";
+import { memo, useCallback } from "react";
 import { Pressable, StyleSheet } from "react-native";
-import Animated from "react-native-reanimated";
 import { scheduleOnRN, scheduleOnUI } from "react-native-worklets";
 import { DefaultSnapSpec } from "../../../../configs/specs";
 import { useBuilderStore } from "../../../../providers/screen/builder";
@@ -15,7 +14,7 @@ import type {
 } from "../../../../types/screen.types";
 import { animateToProgress } from "../../../../utils/animation/animate-to-progress";
 import { findCollapseTarget } from "../helpers/find-collapse-target";
-import { usesLayerRenderProps } from "./render-component";
+import { LayerComponent } from "../helpers/layer-component";
 
 export const BackdropLayer = memo(function BackdropLayer({
 	backdropBehavior,
@@ -41,16 +40,6 @@ export const BackdropLayer = memo(function BackdropLayer({
 	const { targetProgress, animationProgress, resolvedAutoSnapPoint } =
 		animations;
 
-	const AnimatedBackdropComponent = useMemo(
-		() =>
-			BackdropComponent && !usesLayerRenderProps(BackdropComponent)
-				? Animated.createAnimatedComponent(
-						BackdropComponent as ComponentType<any>,
-					)
-				: null,
-		[BackdropComponent],
-	);
-
 	const handleBackdropPress = useCallback(() => {
 		if (backdropBehavior === "dismiss") {
 			onDismissRequest?.();
@@ -140,24 +129,12 @@ export const BackdropLayer = memo(function BackdropLayer({
 			pointerEvents={backdropBehavior === "passthrough" ? "none" : "auto"}
 			onPress={isBackdropActive ? handleBackdropPress : undefined}
 		>
-			{AnimatedBackdropComponent ? (
-				<AnimatedBackdropComponent
-					style={backdropStyles}
-					animatedProps={animatedBackdropProps}
-					pointerEvents={backdropPointerEvents}
-				/>
-			) : BackdropComponent ? (
-				<BackdropComponent
-					styles={backdropStyles}
-					props={backdropProps}
-					pointerEvents={backdropPointerEvents}
-				/>
-			) : (
-				<Animated.View
-					style={backdropStyles}
-					pointerEvents={backdropPointerEvents}
-				/>
-			)}
+			<LayerComponent
+				component={BackdropComponent}
+				styles={backdropStyles}
+				props={BackdropComponent ? backdropProps : undefined}
+				pointerEvents={backdropPointerEvents}
+			/>
 		</Pressable>
 	);
 });