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

package/src/adapters/with-screen-transitions/stack-layout.tsx

@@ -1,10 +1,14 @@
 import type { NavigationState, Route } from "@react-navigation/native";
-import { useMemo } from "react";
+import { memo, type ReactNode, useMemo } from "react";
 import { StyleSheet } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { Overlay } from "../../components/overlay";
-import { Screen } from "../../components/screen/screen";
-import { BlankStackStoreProvider } from "../../providers/stack/blank-stack.provider";
+import { ScreenLayers } from "../../components/screen-layers";
+import { useNavigationHelpers } from "../../navigators/blank-stack/hooks/use-navigation-helpers";
+import { BlankStackStoreProvider } from "../../navigators/blank-stack/state/blank-stack.provider";
+import { BuilderProvider } from "../../providers/builder";
+import { MotionProvider } from "../../providers/motion";
+import { OrchestratorProvider } from "../../providers/orchestrator";
 import type { BaseStackDescriptor, BaseStackRoute } from "../../types";
 import {
 	ScreenTransitionsAdapterProvider,
@@ -171,7 +175,7 @@ function ScreenTransitionsStackContent({
 	return (
 		<ScreenTransitionsAdapterProvider value={adapterContextValue}>
 			<BlankStackStoreProvider value={blankStackValue}>
-				<Overlay.Float />
+				<Overlay />
 				{children}
 			</BlankStackStoreProvider>
 		</ScreenTransitionsAdapterProvider>
@@ -188,6 +192,24 @@ export function ScreenTransitionsStackLayout(
 	);
 }
 
+const NativeSceneMotion = memo(function NativeSceneMotion({
+	children,
+}: {
+	children: ReactNode;
+}) {
+	const { requestDismiss } = useNavigationHelpers();
+	return (
+		<MotionProvider onDismissRequest={requestDismiss}>
+			<OrchestratorProvider>
+				<ScreenLayers onDismissRequest={requestDismiss}>
+					{children}
+				</ScreenLayers>
+			</OrchestratorProvider>
+			<NativeStackLifecycle />
+		</MotionProvider>
+	);
+});
+
 export function ScreenTransitionsScreenLayout({
 	screenLayout,
 	screenLayoutArgs,
@@ -201,16 +223,27 @@ export function ScreenTransitionsScreenLayout({
 		? screenLayout(screenLayoutArgs)
 		: screenLayoutArgs.children;
 
-	if (sceneIndex === undefined) {
+	const scene = sceneIndex === undefined ? undefined : scenes[sceneIndex];
+	const descriptors = useMemo(
+		() =>
+			scene
+				? {
+						current: scene.descriptor,
+						previous: scene.previousDescriptor,
+						next: scene.nextDescriptor,
+					}
+				: undefined,
+		[scene],
+	);
+
+	if (!scene || !descriptors) {
 		return <>{children}</>;
 	}
 
-	const scene = scenes[sceneIndex];
-
 	return (
-		<Screen routeKey={scene.route.key} lifecycle={NativeStackLifecycle}>
-			{children}
-		</Screen>
+		<BuilderProvider routeKey={scene.route.key} descriptors={descriptors}>
+			<NativeSceneMotion>{children}</NativeSceneMotion>
+		</BuilderProvider>
 	);
 }
 

package/src/components/boundary/components/boundary-lifecycle.tsx

@@ -1,9 +1,14 @@
-import { memo } from "react";
+import { memo, useMemo } from "react";
 import type { View } from "react-native";
 import type { AnimatedRef } from "react-native-reanimated";
-import { useBuilderStore } from "../../../providers/screen/builder";
+import { useBuilderStore } from "../../../providers/builder";
 import type { BoundTag } from "../../../stores/bounds/types";
-import { useBoundaryMeasurement } from "../hooks/use-boundary-measurement";
+import { prepareStyleForBounds } from "../../../utils/bounds/helpers/styles/styles";
+import { useBoundaryPresence } from "../hooks/lifecycles/use-boundary-presence";
+import { useInitialDestinationMeasurement } from "../hooks/lifecycles/use-initial-destination-measurement";
+import { useInitialSourceMeasurement } from "../hooks/lifecycles/use-initial-source-measurement";
+import { useRefreshBoundary } from "../hooks/lifecycles/use-refresh-boundary";
+import { useMeasurer } from "../hooks/use-measurer";
 import type {
 	BoundaryConfigProps,
 	BoundaryLocalMeasurementValue,
@@ -36,17 +41,48 @@ export const BoundaryLifecycle = memo(function BoundaryLifecycle({
 		(s) => s.derivations.hasConfiguredInterpolator,
 	);
 
-	useBoundaryMeasurement({
-		boundTag,
+	const runtimeEnabled = enabled && hasConfiguredInterpolator;
+	const preparedStyles = useMemo(() => prepareStyleForBounds(style), [style]);
+
+	const measureBoundary = useMeasurer({
 		enabled,
-		runtimeEnabled: enabled && hasConfiguredInterpolator,
+		boundTag,
 		currentScreenKey,
-		measuredRef,
-		style,
+		preparedStyles,
+		measuredAnimatedRef: measuredRef,
 		handoff,
 		escapeClipping,
 		localMeasurement,
-		config,
+	});
+
+	// Presence and source capture must not depend on this screen owning an
+	// interpolator: a nested source can participate in a transition owned by a
+	// different navigator.
+	useBoundaryPresence({
+		enabled,
+		boundTag,
+		currentScreenKey,
+		boundaryConfig: config,
+		handoff,
+		escapeClipping,
+	});
+
+	useInitialSourceMeasurement({
+		enabled,
+		measureBoundary,
+		boundTag,
+	});
+
+	useInitialDestinationMeasurement({
+		boundTag,
+		enabled: runtimeEnabled,
+		measureBoundary,
+	});
+
+	useRefreshBoundary({
+		enabled: runtimeEnabled,
+		boundTag,
+		measureBoundary,
 	});
 
 	return null;

package/src/components/boundary/components/boundary-target.tsx

@@ -1,16 +1,9 @@
 import type React from "react";
 import { memo, useLayoutEffect } from "react";
 import Animated from "react-native-reanimated";
-import {
-	useComposedSlotStyles,
-	useSlotLayoutStyles,
-} from "../../../providers/screen/orchestrator/styles";
 import { logger } from "../../../utils/logger";
-import {
-	BoundaryContentPortal,
-	BoundaryContentPortalHost,
-} from "../portal/components/boundary-content-portal";
-import { BoundaryPortal } from "../portal/components/boundary-portal";
+import { useComposedBoundaryStyle } from "../hooks/use-composed-boundary-style";
+import { Portal } from "../portal/components/portal";
 import {
 	TARGET_OUTSIDE_ROOT_WARNING,
 	useOptionalBoundaryRootStore,
@@ -44,16 +37,13 @@ const BoundaryTargetInner = (props: InternalBoundaryTargetProps) => {
 	const shouldEscapeTargetToScreenHost =
 		isActiveTarget && portalRuntime?.escapeClipping === true;
 
-	const shouldApplyAssociatedStyleInline =
-		isActiveTarget && portalRuntime?.escapeClipping !== true;
-	const shouldApplyPortalLayoutStyle =
-		isActiveTarget && portalRuntime?.escapeClipping === true;
-
-	const associatedTargetStyles = useComposedSlotStyles(
-		rootContext?.boundTag.tag,
+	const associatedTargetStyles = useComposedBoundaryStyle(
+		rootContext?.slotsMap,
+		boundaryId,
 		style,
+		shouldEscapeTargetToScreenHost ? "layout" : "full",
 	);
-	const portalLayoutStyle = useSlotLayoutStyles(rootContext?.boundTag.tag);
+
 	const measurementRef = isActiveTarget
 		? rootContext.measurementRef
 		: undefined;
@@ -65,7 +55,8 @@ const BoundaryTargetInner = (props: InternalBoundaryTargetProps) => {
 	}, [rootContext]);
 
 	return (
-		<BoundaryPortal
+		<Portal
+			mode="escapeClipping"
 			boundaryId={boundaryId ?? ""}
 			enabled={shouldEscapeTargetToScreenHost}
 			placeholderRef={measurementRef}
@@ -74,27 +65,14 @@ const BoundaryTargetInner = (props: InternalBoundaryTargetProps) => {
 				{...rest}
 				pointerEvents={pointerEvents}
 				ref={shouldEscapeTargetToScreenHost ? undefined : measurementRef}
-				style={[
-					style,
-					shouldApplyAssociatedStyleInline ? associatedTargetStyles : undefined,
-					shouldApplyPortalLayoutStyle ? portalLayoutStyle : undefined,
-				]}
+				style={[style, isActiveTarget ? associatedTargetStyles : undefined]}
 				collapsable={false}
 			>
-				<BoundaryContentPortalHost
-					boundaryId={boundaryId ?? ""}
-					enabled={handoffEnabled}
-					screenKey={rootContext?.currentScreenKey ?? ""}
-				>
-					<BoundaryContentPortal
-						boundaryId={boundaryId}
-						enabled={handoffEnabled}
-					>
-						{children}
-					</BoundaryContentPortal>
-				</BoundaryContentPortalHost>
+				<Portal mode="handoff" boundaryId={boundaryId} enabled={handoffEnabled}>
+					{children}
+				</Portal>
 			</Animated.View>
-		</BoundaryPortal>
+		</Portal>
 	);
 };
 

package/src/components/boundary/create-boundary-component.tsx

@@ -10,11 +10,7 @@ import {
 	BOUNDARY_TARGET_ACTIVE_PROP,
 	BoundaryTarget,
 } from "./components/boundary-target";
-import {
-	BoundaryContentPortal,
-	BoundaryContentPortalHost,
-} from "./portal/components/boundary-content-portal";
-import { BoundaryPortal } from "./portal/components/boundary-portal";
+import { Portal } from "./portal/components/portal";
 import { BoundaryRootProvider } from "./providers/boundary-root.provider";
 import type { BoundaryComponentProps } from "./types";
 import { resolveBoundaryTarget } from "./utils/resolve-boundary-target";
@@ -50,6 +46,12 @@ export function createBoundaryComponent<P extends object>(
 			children,
 			...rest
 		} = props as any;
+
+		const config = useMemo(
+			() => ({ anchor, scaleMode, target, method }),
+			[anchor, scaleMode, target, method],
+		);
+
 		const targetResolution = useMemo(() => {
 			return resolveBoundaryTarget(children, {
 				isTarget: (element) => element.type === BoundaryTarget,
@@ -59,13 +61,14 @@ export function createBoundaryComponent<P extends object>(
 					} as any),
 			});
 		}, [children]);
+
 		const targetStyle = (
 			targetResolution.target?.props as { style?: unknown } | undefined
 		)?.style;
 
 		return (
 			<BoundaryRootProvider
-				config={{ anchor, scaleMode, target, method }}
+				config={config}
 				enabled={enabled}
 				escapeClipping={escapeClipping}
 				forwardedRef={forwardedRef}
@@ -78,7 +81,8 @@ export function createBoundaryComponent<P extends object>(
 				targetStyle={targetStyle}
 			>
 				{(root) => (
-					<BoundaryPortal
+					<Portal
+						mode="escapeClipping"
 						boundaryId={root.boundTag.tag}
 						enabled={root.shouldRenderBoundaryRootThroughPortal}
 						placeholderRef={root.measurementRef}
@@ -89,20 +93,15 @@ export function createBoundaryComponent<P extends object>(
 							style={[style, root.attachedStyle]}
 							collapsable={false}
 						>
-							<BoundaryContentPortalHost
+							<Portal
+								mode="handoff"
 								boundaryId={root.boundTag.tag}
 								enabled={root.shouldRenderHandoffHost}
-								screenKey={root.currentScreenKey}
 							>
-								<BoundaryContentPortal
-									boundaryId={root.boundTag.tag}
-									enabled={root.shouldRenderHandoffHost}
-								>
-									{targetResolution.children}
-								</BoundaryContentPortal>
-							</BoundaryContentPortalHost>
+								{targetResolution.children}
+							</Portal>
 						</AnimatedComponent>
-					</BoundaryPortal>
+					</Portal>
 				)}
 			</BoundaryRootProvider>
 		);

package/src/components/boundary/helpers/presentation.ts

@@ -0,0 +1,88 @@
+import type { DerivedValue } from "react-native-reanimated";
+import { getLinkKeyFromTag } from "../../../stores/bounds/helpers/link-pairs.helpers";
+import type {
+	boundaryRegistry,
+	pairs,
+} from "../../../stores/bounds/internals/state";
+import type { BoundaryHandoffTarget } from "../../../types/animation.types";
+
+export type { BoundaryPairPresentation } from "../../../providers/orchestrator/helpers/use-pair-presentation";
+
+import type { BoundaryPairPresentation } from "../../../providers/orchestrator/helpers/use-pair-presentation";
+
+export type BoundaryPresentationState = {
+	presentations: readonly (
+		| DerivedValue<BoundaryPairPresentation | undefined>
+		| null
+		| undefined
+	)[];
+	pairs: ReturnType<typeof pairs.get>;
+	entries: ReturnType<typeof boundaryRegistry.get>;
+};
+
+export function resolveBoundaryPresentation(
+	screenKey: string,
+	boundaryId: string,
+	state: BoundaryPresentationState,
+) {
+	"worklet";
+	const linkKey = getLinkKeyFromTag(boundaryId);
+	let result: BoundaryPairPresentation | undefined;
+	for (const value of state.presentations) {
+		const presentation = value?.get();
+		if (!presentation) continue;
+		const pair = state.pairs[presentation.pairKey];
+		const link = pair?.links[linkKey];
+		if (!link || (link.group && pair.groups[link.group]?.activeId !== linkKey))
+			continue;
+		const sourceKey = link.source?.screenKey ?? presentation.sourceKey;
+		const destinationKey =
+			link.destination?.screenKey ?? presentation.destinationKey;
+		if (sourceKey !== screenKey && destinationKey !== screenKey) continue;
+		// A preparing or completed pair cannot displace a live presentation.
+		if (result && !presentation.ready) continue;
+		result = { ...presentation, sourceKey, destinationKey };
+	}
+	return result;
+}
+
+export function resolveBoundaryReceiver(
+	presentation: BoundaryPairPresentation | undefined,
+	target: BoundaryHandoffTarget | undefined,
+	screenKey: string,
+) {
+	"worklet";
+	if (!presentation) return screenKey;
+	return presentation.ready && target !== "source"
+		? presentation.destinationKey
+		: presentation.sourceKey;
+}
+
+export function resolveBoundaryHandoff(
+	screenKey: string,
+	boundaryId: string,
+	state: BoundaryPresentationState,
+) {
+	"worklet";
+	let receiver = screenKey;
+	const visited: Record<string, true> = {};
+	while (!visited[receiver]) {
+		visited[receiver] = true;
+		const p = resolveBoundaryPresentation(receiver, boundaryId, state);
+		if (!p) break;
+		const slot = (p.sourceKey === receiver ? p.source : p.destination)[
+			boundaryId
+		];
+		const next = resolveBoundaryReceiver(
+			p,
+			slot?.props?.handoffTarget ??
+				p.destination[boundaryId]?.props?.handoffTarget ??
+				p.source[boundaryId]?.props?.handoffTarget,
+			receiver,
+		);
+		if (next === receiver || !state.entries[boundaryId]?.screens[next]?.handoff)
+			break;
+		receiver = next;
+	}
+	return receiver;
+}

package/src/components/boundary/hooks/lifecycles/use-initial-destination-measurement.ts

@@ -7,9 +7,9 @@ import {
 	withTiming,
 } from "react-native-reanimated";
 import { scheduleOnUI } from "react-native-worklets";
-import { useBuilderStore } from "../../../../providers/screen/builder";
-import { useMotionStore } from "../../../../providers/screen/motion";
-import { useBlankStackStore } from "../../../../providers/stack/blank-stack.provider";
+import { useBlankStackStore } from "../../../../navigators/blank-stack/state/blank-stack.provider";
+import { useBuilderStore } from "../../../../providers/builder";
+import { useMotionStore } from "../../../../providers/motion";
 import {
 	createScreenPairKey,
 	getSourceScreenKeyFromPairKey,

package/src/components/boundary/hooks/lifecycles/use-initial-source-measurement.ts

@@ -1,5 +1,5 @@
 import { useAnimatedReaction, useSharedValue } from "react-native-reanimated";
-import { useBuilderStore } from "../../../../providers/screen/builder";
+import { useBuilderStore } from "../../../../providers/builder";
 import { getPairKeyForSource } from "../../../../stores/bounds/internals/links";
 import { pairs } from "../../../../stores/bounds/internals/state";
 import type { BoundTag } from "../../../../stores/bounds/types";

package/src/components/boundary/hooks/lifecycles/use-refresh-boundary.ts

@@ -1,6 +1,6 @@
 import { useAnimatedReaction } from "react-native-reanimated";
-import { useBuilderStore } from "../../../../providers/screen/builder";
-import { useOptionalMotionStore } from "../../../../providers/screen/motion";
+import { useBuilderStore } from "../../../../providers/builder";
+import { useOptionalMotionStore } from "../../../../providers/motion";
 import {
 	getPairKeyForDestination,
 	getPairKeyForSource,

package/src/components/boundary/hooks/use-boundary-presentation.ts

@@ -0,0 +1,82 @@
+import { useMemo } from "react";
+import { useDerivedValue, useSharedValue } from "react-native-reanimated";
+import { NO_PROPS, NO_STYLES } from "../../../constants";
+import { useOptionalBlankStackStore } from "../../../navigators/blank-stack/state/blank-stack.provider";
+import { useBuilderStore } from "../../../providers/builder";
+import { useScreenRelationships } from "../../../providers/builder/topology";
+import {
+	useOptionalOrchestratorStore,
+	useOrchestratorStore,
+} from "../../../providers/orchestrator";
+import {
+	areResettableStatesBySlotEqual,
+	type ResettableStyleStatesBySlot,
+	resolveSlotStyles,
+} from "../../../providers/orchestrator/styles/helpers/resolve-slot-styles";
+import {
+	boundaryRegistry,
+	pairs,
+} from "../../../stores/bounds/internals/state";
+import {
+	type BoundaryPresentationState,
+	resolveBoundaryHandoff,
+	resolveBoundaryPresentation,
+} from "../helpers/presentation";
+
+// Screens are discovered through existing providers. React only wires subscriptions;
+// their live UI values decide ownership, including retained closing screens.
+export function useBoundaryPresentation(boundaryId: string, enabled = true) {
+	const screenKey = useBuilderStore((s) => s.derivations.currentScreenKey);
+	const scenes = useOptionalBlankStackStore((s) => s?.scenes);
+	const keys = useMemo(
+		() => (enabled ? (scenes?.map((s) => s.route.key) ?? [screenKey]) : []),
+		[scenes, screenKey, enabled],
+	);
+	const pairPresentations = useOptionalOrchestratorStore(
+		keys,
+		(s) => s.pairPresentation,
+	);
+	const localSlots = useOrchestratorStore((s) => s.slotsMap);
+	const { parentScreenKey } = useScreenRelationships();
+	const ancestorSlots = useOptionalOrchestratorStore(
+		parentScreenKey,
+		(s) => s.slotsMap,
+	);
+	const previous = useSharedValue<ResettableStyleStatesBySlot>(NO_PROPS);
+
+	const presentation = useDerivedValue(() => {
+		const state: BoundaryPresentationState = {
+			presentations: pairPresentations,
+			pairs: pairs.get(),
+			entries: boundaryRegistry.get(),
+		};
+		const owner = resolveBoundaryPresentation(screenKey, boundaryId, state);
+		const receiver = resolveBoundaryHandoff(screenKey, boundaryId, state);
+		const ownedSlot = owner?.ready
+			? (owner.sourceKey === screenKey ? owner.source : owner.destination)[
+					boundaryId
+				]
+			: undefined;
+
+		const fallback = localSlots.get()[boundaryId];
+		const { resolvedStylesMap, nextPreviousStyleStatesBySlot } =
+			resolveSlotStyles({
+				localStylesMaps: [{ [boundaryId]: ownedSlot ?? fallback ?? {} }],
+				ancestorStylesMap: ownedSlot
+					? (ancestorSlots?.get() ?? NO_STYLES)
+					: NO_STYLES,
+				previousStyleStatesBySlot: previous.get(),
+			});
+		if (
+			!areResettableStatesBySlotEqual(
+				previous.get(),
+				nextPreviousStyleStatesBySlot,
+			)
+		) {
+			previous.set(nextPreviousStyleStatesBySlot);
+		}
+		return { owner, receiver, slots: resolvedStylesMap };
+	});
+	const slotsMap = useDerivedValue(() => presentation.get().slots);
+	return { presentation, slotsMap };
+}

package/src/components/boundary/hooks/use-composed-boundary-style.ts

@@ -0,0 +1,58 @@
+import { useMemo } from "react";
+import {
+	type SharedValue,
+	type StyleProps,
+	useAnimatedStyle,
+} from "react-native-reanimated";
+import { NO_STYLES } from "../../../constants";
+import {
+	composeSlotStyleWithLocalTransform,
+	getLocalTransformForSlotComposition,
+} from "../../../providers/orchestrator/styles/helpers/compose-slot-style";
+import type { NormalizedTransitionInterpolatedStyle } from "../../../types/animation.types";
+
+export function useComposedBoundaryStyle(
+	slots: SharedValue<NormalizedTransitionInterpolatedStyle> | undefined,
+	id: string | undefined,
+	style?: unknown,
+	kind: "full" | "stacking" | "layout" = "full",
+) {
+	const local = useMemo(
+		() => getLocalTransformForSlotComposition(style),
+		[style],
+	);
+
+	return useAnimatedStyle(() => {
+		const slot = id ? slots?.get()[id] : undefined;
+		const value: StyleProps = slot?.style ?? NO_STYLES;
+		if (kind === "stacking")
+			return { zIndex: value.zIndex ?? 0, elevation: value.elevation ?? 0 };
+
+		if (kind === "layout") {
+			const {
+				width,
+				height,
+				minWidth,
+				minHeight,
+				maxWidth,
+				maxHeight,
+				aspectRatio,
+			} = value;
+
+			return {
+				width,
+				height,
+				minWidth,
+				minHeight,
+				maxWidth,
+				maxHeight,
+				aspectRatio,
+			};
+		}
+		return composeSlotStyleWithLocalTransform(
+			value,
+			local,
+			slot?.boundsLocalTransform,
+		);
+	});
+}

package/src/components/boundary/hooks/use-measurer.ts

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import type { View } from "react-native";
 import { useWindowDimensions } from "react-native";
 import type { AnimatedRef, StyleProps } from "react-native-reanimated";
-import { useMotionStore } from "../../../providers/screen/motion";
+import { useMotionStore } from "../../../providers/motion";
 import { setEntry } from "../../../stores/bounds/internals/entries";
 import {
 	setDestination,

package/src/components/boundary/index.tsx

@@ -1,9 +1,13 @@
-import { forwardRef } from "react";
+import {
+	type ComponentProps,
+	forwardRef,
+	type NamedExoticComponent,
+} from "react";
 import { View, type ViewProps } from "react-native";
 import { Pressable, type PressableProps } from "react-native-gesture-handler";
 import { BoundaryTarget } from "./components/boundary-target";
 import { createBoundaryComponent } from "./create-boundary-component";
-import { Host } from "./portal";
+import { PortalOverlay } from "./portal/components/portal-overlay";
 import type { BoundaryComponentProps } from "./types";
 
 export { createBoundaryComponent };
@@ -26,7 +30,6 @@ BoundaryPrimitive.displayName = "Transition.Boundary.Primitive";
 const BoundaryRoot = createBoundaryComponent(BoundaryPrimitive);
 BoundaryRoot.displayName = "Transition.Boundary";
 BoundaryTarget.displayName = "Transition.Boundary.Target";
-Host.displayName = "Transition.Boundary.Host";
 
 type BoundaryRootComponent = typeof BoundaryRoot;
 
@@ -55,12 +58,14 @@ export interface BoundaryComponent extends BoundaryRootComponent {
 	/**
 	 * Explicit host for clipping-escape placement.
 	 */
-	Host: typeof Host;
+	Host: NamedExoticComponent<
+		Omit<ComponentProps<typeof PortalOverlay>, "fallback">
+	>;
 }
 
 export type BoundaryProps = BoundaryComponentProps<BoundaryPrimitiveProps>;
 
 export const Boundary = Object.assign(BoundaryRoot, {
 	Target: BoundaryTarget,
-	Host,
+	Host: PortalOverlay,
 }) as BoundaryComponent;

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

@@ -0,0 +1,36 @@
+import { type ComponentProps, memo } from "react";
+import { StyleSheet } from "react-native";
+import Animated from "react-native-reanimated";
+import { NativePortalHost, PORTAL_POINTER_EVENTS } from "../teleport";
+
+const AnimatedHost = NativePortalHost
+	? Animated.createAnimatedComponent(NativePortalHost)
+	: null;
+
+/**
+ * The native receiving point for a Portal whose destination matches `name`.
+ *
+ * Handoff places this inside a boundary, filling its local frame. Escape-clipping
+ * places it inside a PortalOverlay, which supplies
+ * the boundary's size, offset, and animated styles. This component only renders
+ * the receiver; destination selection and measurement belong to its callers.
+ */
+export const PortalHost = memo(function PortalHost({
+	name,
+	style = styles.inline,
+}: {
+	name: string;
+	style?: ComponentProps<typeof Animated.View>["style"];
+}) {
+	return AnimatedHost ? (
+		<AnimatedHost
+			name={name}
+			pointerEvents={PORTAL_POINTER_EVENTS}
+			style={style}
+		/>
+	) : null;
+});
+
+const styles = StyleSheet.create({
+	inline: { ...StyleSheet.absoluteFill, overflow: "visible" },
+});