react-native-screen-transitions 3.9.0-beta.1 → 3.9.0-beta.3

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, PORTAL_POINTER_EVENTS } 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,19 +135,20 @@ 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;
 	}
 
 	return (
 		<Animated.View
-			pointerEvents="none"
+			pointerEvents={PORTAL_POINTER_EVENTS}
 			style={[style, hostStyle]}
 			collapsable={false}
 		>
 			<AnimatedPortalBoundaryHost
 				name={host.portalHostName}
+				pointerEvents={PORTAL_POINTER_EVENTS}
 				style={[styles.content, contentFrameStyle, slotStyle]}
 			/>
 		</Animated.View>

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

@@ -0,0 +1,79 @@
+import {
+	type ComponentProps,
+	type ComponentType,
+	memo,
+	type ReactNode,
+} from "react";
+import type { View } from "react-native";
+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 { 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;
+	placeholderRef?: AnimatedRef<View>;
+};
+
+export const BoundaryPortalSlot = memo(function BoundaryPortalSlot({
+	id,
+	children,
+	enabled,
+	animatedProps,
+	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={PORTAL_POINTER_EVENTS}
+				collapsable={false}
+			>
+				<AnimatedNativePortal
+					animatedProps={animatedProps}
+					name={id}
+					pointerEvents={PORTAL_POINTER_EVENTS}
+				>
+					{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";
 
 /**

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

@@ -0,0 +1,254 @@
+import { useCallback, useLayoutEffect, useRef, 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 { pairs } from "../../../../../../stores/bounds/internals/state";
+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 { 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;
+}
+
+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 unmountOwnedPortalBoundaryHosts = useCallback(() => {
+		for (const portalHostName of mountedPortalBoundaryHostNamesRef.current) {
+			unmountPortalBoundaryHostByName(portalHostName);
+		}
+
+		mountedPortalBoundaryHostNamesRef.current.clear();
+	}, []);
+
+	useLayoutEffect(() => {
+		if (!enabled || !ownership || !escapeHostKey) {
+			requestedPortalHostName.set(null);
+			visiblePortalHostName.set(null);
+			unmountOwnedPortalBoundaryHosts();
+			return;
+		}
+
+		const portalHostName = createBoundaryPortalHostName(
+			escapeHostKey,
+			boundaryId,
+			ownership.ownerPairKey,
+		);
+
+		mountPortalBoundaryHost({
+			boundaryId,
+			escapeClipping: true,
+			hostKey: escapeHostKey,
+			localStylesMaps,
+			pairKey: ownership.ownerPairKey,
+			portalHostName,
+			screenKey: currentScreenKey,
+			slotsMap,
+		});
+		mountedPortalBoundaryHostNamesRef.current.add(portalHostName);
+
+		// 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);
+	}, [
+		boundaryId,
+		currentScreenKey,
+		enabled,
+		escapeHostKey,
+		localStylesMaps,
+		ownership,
+		requestedPortalHostName,
+		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;
+			}
+
+			runOnJS(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) {
+				runOnJS(dropStalePortalBoundaryHosts)({
+					boundaryId,
+					keepPortalHostName: state.visibleName,
+				});
+			}
+		},
+	);
+
+	const teleportProps = useAnimatedProps(() => {
+		"worklet";
+
+		const slot = slotsMap.get()[boundaryId];
+		const {
+			pointerEvents: _pointerEvents,
+			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/{hooks → components/boundary-portal/hooks}/use-host-measurement.ts

@@ -5,18 +5,21 @@ import {
 	measure,
 	runOnJS,
 	runOnUI,
+	type SharedValue,
 	useAnimatedReaction,
 	useAnimatedRef,
 	useSharedValue,
 	withDelay,
 	withTiming,
 } from "react-native-reanimated";
-import { useOriginContext } from "../../../../providers/screen/origin.provider";
-import { ScrollStore } from "../../../../stores/scroll.store";
+import { useOriginContext } from "../../../../../../providers/screen/origin.provider";
+import { ScrollStore } from "../../../../../../stores/scroll.store";
+import { getVisibilityBlockOffset } from "../../../../../../utils/visibility-block-offset";
 import {
 	adjustedMeasuredBoundsForOverscrollDeltas,
-	normalizeMeasuredBoundsToOrigin,
-} from "../../utils/measured-bounds";
+	isMeasurementInViewport,
+	normalizeMeasuredBoundsWithVisibilityGate,
+} from "../../../../utils/measured-bounds";
 import {
 	clearPortalHostBounds,
 	setPortalHostBounds,
@@ -29,6 +32,9 @@ type UseHostMeasurementParams = {
 	enabled: boolean;
 	hostKey: string;
 	screenKey: string;
+	visibilityBlocked: SharedValue<boolean>;
+	viewportHeight: number;
+	viewportWidth: number;
 };
 
 export const useHostMeasurement = ({
@@ -36,6 +42,9 @@ export const useHostMeasurement = ({
 	enabled,
 	hostKey,
 	screenKey,
+	visibilityBlocked,
+	viewportHeight,
+	viewportWidth,
 }: UseHostMeasurementParams) => {
 	const hostRef = useAnimatedRef<View>();
 	const scrollMetadata = ScrollStore.getValue(screenKey, "metadata");
@@ -91,10 +100,31 @@ export const useHostMeasurement = ({
 				? adjustedMeasuredBoundsForOverscrollDeltas(measured, currentScroll)
 				: measured;
 
-			const normalizedMeasured = normalizeMeasuredBoundsToOrigin(
-				overscrollNormalized,
-				measuredOrigin,
-			);
+			const normalizedMeasured = normalizeMeasuredBoundsWithVisibilityGate({
+				measured: overscrollNormalized,
+				origin: measuredOrigin,
+				visibilityBlocked: visibilityBlocked.get(),
+				visibilityBlockOffset: getVisibilityBlockOffset(viewportHeight),
+				viewportWidth,
+				viewportHeight,
+			});
+
+			if (
+				!isMeasurementInViewport(
+					normalizedMeasured,
+					viewportWidth,
+					viewportHeight,
+				)
+			) {
+				cancelAnimation(retryToken);
+				retryToken.set(
+					withDelay(
+						HOST_MEASUREMENT_RETRY_DELAY_MS,
+						withTiming(retryToken.get() + 1, { duration: 0 }),
+					),
+				);
+				return;
+			}
 
 			setPortalHostBounds(hostKey, {
 				x: normalizedMeasured.x,

package/src/shared/components/boundary/portal/{hooks → components/boundary-portal/hooks}/use-placeholder-styles.ts

@@ -1,31 +1,20 @@
 import { useCallback } from "react";
 import type { LayoutRectangle } from "react-native";
-import {
-	type SharedValue,
-	useAnimatedStyle,
-	useSharedValue,
-} from "react-native-reanimated";
+import { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 
-interface UsePlaceholderProps {
-	visiblePortalHostName: SharedValue<string | null>;
-}
-
-export const usePlaceholderStyles = ({
-	visiblePortalHostName,
-}: UsePlaceholderProps) => {
+export const usePlaceholderStyles = () => {
 	const placeholderWidth = useSharedValue(0);
 	const placeholderHeight = useSharedValue(0);
 	// Pin the placeholder to its measured size while content lives in the host,
-	// in the same UI frame the host name flips — no commit in between. Until the
+	// in the same UI frame the host name flips - no commit in between. Until the
 	// first layout lands (dims 0) sizing stays natural so an instant attach
 	// cannot collapse the slot.
 	const placeholderStyle = useAnimatedStyle(() => {
 		"worklet";
-		const isAttached = visiblePortalHostName.get() !== null;
 		const width = placeholderWidth.get();
 		const height = placeholderHeight.get();
 
-		if (!isAttached || width === 0) {
+		if (width === 0) {
 			return { width: "auto", height: "auto" } as const;
 		}
 

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

@@ -0,0 +1,35 @@
+import { 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 { useBoundaryPortalAttachment } from "./hooks/use-boundary-portal-attachment";
+
+type BoundaryPortalProps = {
+	boundaryId: string;
+	children: ReactNode;
+	enabled: boolean;
+	placeholderRef?: AnimatedRef<View>;
+};
+
+export const BoundaryPortal = memo(function BoundaryPortal({
+	boundaryId,
+	children,
+	enabled,
+	placeholderRef,
+}: BoundaryPortalProps) {
+	const { teleportProps } = useBoundaryPortalAttachment({
+		boundaryId,
+		enabled,
+	});
+
+	return (
+		<BoundaryPortalSlot
+			id={boundaryId}
+			enabled={enabled}
+			animatedProps={teleportProps}
+			placeholderRef={placeholderRef}
+		>
+			{children}
+		</BoundaryPortalSlot>
+	);
+});

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

@@ -1,6 +1,6 @@
 import { type MeasuredDimensions, makeMutable } from "react-native-reanimated";
-import { cloneScrollMetadataState } from "../../../../stores/scroll.store";
-import type { ScrollMetadataState } from "../../../../types/gesture.types";
+import { cloneScrollMetadataState } from "../../../../../../stores/scroll.store";
+import type { ScrollMetadataState } from "../../../../../../types/gesture.types";
 
 export type PortalHostBounds = MeasuredDimensions & {
 	scroll?: ScrollMetadataState | null;

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

@@ -1,7 +1,7 @@
 import { useSyncExternalStore } from "react";
 import type { SharedValue } from "react-native-reanimated";
-import type { LocalStyleLayers } from "../../../../providers/screen/styles/helpers/resolve-slot-styles";
-import type { NormalizedTransitionInterpolatedStyle } from "../../../../types/animation.types";
+import type { LocalStyleLayers } from "../../../../../../providers/screen/styles/helpers/resolve-slot-styles";
+import type { NormalizedTransitionInterpolatedStyle } from "../../../../../../types/animation.types";
 
 export type ActivePortalBoundaryHost = {
 	boundaryId: string;
@@ -75,19 +75,10 @@ export const mountPortalBoundaryHost = (host: ActivePortalBoundaryHost) => {
 	emit();
 };
 
-export const unmountPortalBoundaryHost = (boundaryId: string) => {
-	let didDelete = false;
-
-	for (const [hostEntryKey, host] of activeBoundaryHosts) {
-		if (host.boundaryId !== boundaryId) {
-			continue;
-		}
-
-		activeBoundaryHosts.delete(hostEntryKey);
-		didDelete = true;
-	}
-
-	if (!didDelete) {
+export const unmountPortalBoundaryHostByName = (
+	portalHostName: string | null | undefined,
+) => {
+	if (!portalHostName || !activeBoundaryHosts.delete(portalHostName)) {
 		return;
 	}
 
@@ -106,6 +97,10 @@ export const dropStalePortalBoundaryHosts = ({
 	boundaryId: string;
 	keepPortalHostName: string;
 }) => {
+	if (!activeBoundaryHosts.has(keepPortalHostName)) {
+		return;
+	}
+
 	let didDelete = false;
 
 	for (const [hostEntryKey, host] of activeBoundaryHosts) {

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

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

package/src/shared/components/boundary/portal/teleport.ts

@@ -5,8 +5,8 @@ import { type ComponentType, createElement, type ReactNode } from "react";
  * try/catch so Metro treats it as an optional dependency — an absent module no
  * longer fails the bundle, it throws at runtime and the catch swallows it.
  *
- * When teleport is missing, `portal`-enabled boundaries degrade to inline
- * rendering; everything else keeps working.
+ * When teleport is missing, handoff and escapeClipping boundaries degrade to
+ * inline rendering; everything else keeps working.
  */
 let mod: any = null;
 let managerMod: any = null;
@@ -39,6 +39,7 @@ const SafeNativePortalProvider: ComponentType<{ children: ReactNode }> | null =
 
 export const isTeleportAvailable =
 	mod !== null && SafeNativePortalProvider !== null;
+export const PORTAL_POINTER_EVENTS = "box-none" as const;
 export const NativePortal: ComponentType<any> | null = mod?.Portal ?? null;
 export const NativePortalProvider: ComponentType<any> | null =
 	SafeNativePortalProvider;

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

@@ -1,20 +1 @@
 export const PORTAL_HOST_NAME_RESET_VALUE = null;
-const PORTAL_HOST_NAME_SUFFIX = "-portal-host";
-const BOUNDARY_LOCAL_PORTAL_HOST_NAME_SUFFIX = "-boundary-local-portal-host";
-
-export const createPortalBoundaryHostName = (
-	hostKey: string,
-	boundaryId: string,
-	pairKey?: string | null,
-) => {
-	"worklet";
-	return `${hostKey}-${pairKey ? `${pairKey}-` : ""}${boundaryId}${PORTAL_HOST_NAME_SUFFIX}`;
-};
-
-export const createBoundaryLocalPortalHostName = (
-	screenKey: string,
-	boundaryId: string,
-) => {
-	"worklet";
-	return `${screenKey}-${boundaryId}${BOUNDARY_LOCAL_PORTAL_HOST_NAME_SUFFIX}`;
-};