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

package/src/shared/components/boundary/portal/stores/host-registry.store.ts

@@ -1,6 +1,4 @@
 import { useSyncExternalStore } from "react";
-import { makeMutable } from "react-native-reanimated";
-import type { SourceHostRef } from "../../../../stores/bounds/types";
 
 export type HostRegistration = {
 	hostKey: string;
@@ -19,13 +17,11 @@ const hostStacks = new Map<string, HostRegistration[]>();
 let snapshot: HostRegistrySnapshot = EMPTY_SNAPSHOT;
 
 /**
- * UI-readable mirror of each screen's active host, kept only for hosts that
- * capture scroll. Measurement worklets read it to record which scroll-scoped
- * host a source boundary originated from — at measure time, without any React
- * subscription on the boundary itself.
+ * 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
+ * the back, so the active host is the last real (non-fallback) host, falling
+ * back to the first entry and finally to the screen's own key.
  */
-const activeScrollHosts = makeMutable<Record<string, SourceHostRef>>({});
-
 const getActiveHostFromStack = (
 	screenKey: string,
 	stack: HostRegistration[] | undefined,
@@ -54,27 +50,8 @@ const buildSnapshot = (): HostRegistrySnapshot => {
 	return nextSnapshot;
 };
 
-const buildScrollHostSnapshot = (): Record<string, SourceHostRef> => {
-	const nextSnapshot: Record<string, SourceHostRef> = {};
-
-	for (const [screenKey, stack] of hostStacks) {
-		const activeHostKey = getActiveHostFromStack(screenKey, stack);
-		const activeHost = stack.find((host) => host.hostKey === activeHostKey);
-
-		if (activeHost?.capturesScroll) {
-			nextSnapshot[screenKey] = {
-				hostKey: activeHost.hostKey,
-				capturesScroll: true,
-			};
-		}
-	}
-
-	return nextSnapshot;
-};
-
 const emit = () => {
 	snapshot = buildSnapshot();
-	activeScrollHosts.set(buildScrollHostSnapshot());
 
 	for (const listener of listeners) {
 		listener();
@@ -143,29 +120,6 @@ export const getActiveHostKey = (screenKey: string) => {
 	return snapshot[screenKey] ?? screenKey;
 };
 
-/**
- * The screen's active host, if it captures scroll. Worklet-safe: measurement
- * code calls this on the UI thread while writing source bounds.
- */
-export const getActiveScrollHost = (
-	screenKey: string,
-): SourceHostRef | null => {
-	"worklet";
-	return activeScrollHosts.get()[screenKey] ?? null;
-};
-
-export const getHostCapturesScroll = (hostKey: string) => {
-	for (const stack of hostStacks.values()) {
-		const host = stack.find((registration) => registration.hostKey === hostKey);
-
-		if (host) {
-			return host.capturesScroll;
-		}
-	}
-
-	return false;
-};
-
 export const useActiveHostKey = (screenKey?: string | null) => {
 	return useSyncExternalStore(
 		subscribe,
@@ -177,6 +131,5 @@ export const useActiveHostKey = (screenKey?: string | null) => {
 export const resetHostRegistry = () => {
 	hostStacks.clear();
 	snapshot = EMPTY_SNAPSHOT;
-	activeScrollHosts.set({});
 	emit();
 };

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

@@ -1,11 +1,17 @@
 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";
 
 export type ActivePortalBoundaryHost = {
 	boundaryId: string;
-	capturesScroll: boolean;
+	escapeClipping: boolean;
 	hostKey: string;
+	localStylesMaps: SharedValue<LocalStyleLayers>;
 	pairKey: string;
+	portalHostName: string;
 	screenKey: string;
+	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
 };
 
 type PortalSnapshot = {
@@ -49,25 +55,72 @@ const isSameHost = (
 ) => {
 	return (
 		a.boundaryId === b.boundaryId &&
-		a.capturesScroll === b.capturesScroll &&
+		a.escapeClipping === b.escapeClipping &&
 		a.hostKey === b.hostKey &&
+		a.localStylesMaps === b.localStylesMaps &&
 		a.pairKey === b.pairKey &&
-		a.screenKey === b.screenKey
+		a.portalHostName === b.portalHostName &&
+		a.screenKey === b.screenKey &&
+		a.slotsMap === b.slotsMap
 	);
 };
 
 export const mountPortalBoundaryHost = (host: ActivePortalBoundaryHost) => {
-	const previous = activeBoundaryHosts.get(host.boundaryId);
+	const previous = activeBoundaryHosts.get(host.portalHostName);
 	if (previous && isSameHost(previous, host)) {
 		return;
 	}
 
-	activeBoundaryHosts.set(host.boundaryId, host);
+	activeBoundaryHosts.set(host.portalHostName, host);
 	emit();
 };
 
 export const unmountPortalBoundaryHost = (boundaryId: string) => {
-	if (!activeBoundaryHosts.delete(boundaryId)) {
+	let didDelete = false;
+
+	for (const [hostEntryKey, host] of activeBoundaryHosts) {
+		if (host.boundaryId !== boundaryId) {
+			continue;
+		}
+
+		activeBoundaryHosts.delete(hostEntryKey);
+		didDelete = true;
+	}
+
+	if (!didDelete) {
+		return;
+	}
+
+	emit();
+};
+
+/**
+ * Post-handoff GC: drop every receiver for this boundary except the one now
+ * visible (`keepPortalHostName`). Called once the new host is confirmed on
+ * screen so the superseded receivers stop rendering.
+ */
+export const dropStalePortalBoundaryHosts = ({
+	boundaryId,
+	keepPortalHostName,
+}: {
+	boundaryId: string;
+	keepPortalHostName: string;
+}) => {
+	let didDelete = false;
+
+	for (const [hostEntryKey, host] of activeBoundaryHosts) {
+		if (
+			host.boundaryId !== boundaryId ||
+			host.portalHostName === keepPortalHostName
+		) {
+			continue;
+		}
+
+		activeBoundaryHosts.delete(hostEntryKey);
+		didDelete = true;
+	}
+
+	if (!didDelete) {
 		return;
 	}
 

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

@@ -1,4 +1,4 @@
-import type { ComponentType } from "react";
+import { type ComponentType, createElement, type ReactNode } from "react";
 
 /**
  * `react-native-teleport` is an optional peer dependency. The require sits in a
@@ -9,13 +9,38 @@ import type { ComponentType } from "react";
  * rendering; everything else keeps working.
  */
 let mod: any = null;
+let managerMod: any = null;
+let providerViewMod: any = null;
 try {
 	mod = require("react-native-teleport");
+	managerMod = require("react-native-teleport/lib/module/contexts/PortalManager");
+	providerViewMod = require("react-native-teleport/lib/module/views/PortalProvider");
 } catch {}
 
-export const isTeleportAvailable = mod !== null;
+const NativePortalProviderView: ComponentType<{ children: ReactNode }> | null =
+	providerViewMod?.default ?? null;
+const PortalManagerProvider: ComponentType<{ children: ReactNode }> | null =
+	managerMod?.PortalManagerProvider ?? null;
+
+const SafeNativePortalProvider: ComponentType<{ children: ReactNode }> | null =
+	PortalManagerProvider
+		? ({ children }: { children: ReactNode }) => {
+				const managedChildren = createElement(
+					PortalManagerProvider,
+					null,
+					children,
+				);
+
+				return NativePortalProviderView
+					? createElement(NativePortalProviderView, null, managedChildren)
+					: managedChildren;
+			}
+		: null;
+
+export const isTeleportAvailable =
+	mod !== null && SafeNativePortalProvider !== null;
 export const NativePortal: ComponentType<any> | null = mod?.Portal ?? null;
 export const NativePortalProvider: ComponentType<any> | null =
-	mod?.PortalProvider ?? null;
+	SafeNativePortalProvider;
 export const NativePortalHost: ComponentType<any> | null =
 	mod?.PortalHost ?? null;

package/src/shared/components/boundary/portal/utils/has-local-slot.ts

@@ -0,0 +1,16 @@
+import type { LocalStyleLayers } from "../../../../providers/screen/styles/helpers/resolve-slot-styles";
+
+export const hasLocalSlot = (
+	localStylesMaps: LocalStyleLayers,
+	slotId: string,
+) => {
+	"worklet";
+
+	for (let index = 0; index < localStylesMaps.length; index++) {
+		if (localStylesMaps[index]?.[slotId] !== undefined) {
+			return true;
+		}
+	}
+
+	return false;
+};

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

@@ -1,10 +1,20 @@
 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}-${boundaryId}${PORTAL_HOST_NAME_SUFFIX}`;
+	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}`;
 };

package/src/shared/components/boundary/portal/utils/offset-style.ts

@@ -1,171 +1,76 @@
-import {
-	interpolate,
-	type MeasuredDimensions,
-	type StyleProps,
-} from "react-native-reanimated";
+import type { StyleProps } from "react-native-reanimated";
 import { getClampedScrollAxisDelta } from "../../../../stores/scroll.store";
-import type { ScrollMetadataState } from "../../../../types/gesture.types";
+import type { ScrollMeasuredDimensions } from "../../utils/measured-bounds";
 import { getPortalHostBounds } from "../stores/host-bounds.store";
 
-export type PortalOffsetPlacement =
-	| "same-screen"
-	| "cross-screen-open"
-	| "cross-screen-close";
+/**
+ * The two portal coordinate cases we support:
+ *
+ * - same-screen: source and host live on the same screen; re-base the stored
+ *   host frame onto the source measurement's scroll snapshot.
+ * - cross-screen: source and host live on different screens; the host is the
+ *   replacement coordinate space, so destination scroll is inherited naturally
+ *   from host placement instead of manually propagated.
+ */
+export type PortalOffsetPlacement = "same-screen" | "cross-screen";
 
 type ResolvePortalOffsetStyleParams = {
-	alignHostToBoundsScroll?: boolean;
-	bounds: MeasuredDimensions;
-	boundsCurrentScroll?: ScrollMetadataState | null;
-	/**
-	 * Express the source rect in its scroll host's live frame: the rect is
-	 * shifted by the clamped travel of `sourceCurrentScroll` since the scroll
-	 * snapshot stored on `bounds`. Independent of the host scroll fallback
-	 * chain below — that chain compensates the attached host's own scrolling.
-	 */
-	compensateSourceScroll?: boolean;
-	currentScroll?: ScrollMetadataState | null;
-	hostCurrentScroll?: ScrollMetadataState | null;
+	/** Source rect, carrying the scroll snapshot taken at measure time. */
+	bounds: ScrollMeasuredDimensions;
 	hostKey: string;
-	hostProgress?: number;
-	includeScrollOffsets?: boolean;
+	placement: PortalOffsetPlacement;
 	/**
-	 * The three portal coordinate cases we support:
-	 *
-	 * - same-screen: source and host are on the same screen; align the stored
-	 *   host frame to the source measurement's scroll snapshot once.
-	 * - cross-screen-open: source and host are on different screens; host
-	 *   placement is static during the open/idle portion.
-	 * - cross-screen-close: source and host are on different screens; the
-	 *   dismissal needs the host's live scroll frame until the portal detaches.
+	 * Live correction applied on top of the stored source placement. Used by
+	 * cross-screen hosts to keep the landing rect tracking the source screen's
+	 * scroll while the source is interactive mid-flight.
 	 */
-	placement?: PortalOffsetPlacement;
-	position?: "absolute" | "relative";
-	sourceCurrentScroll?: ScrollMetadataState | null;
-	trackSourceScroll?: boolean;
+	landingShift?: { x: number; y: number };
 };
 
 export const resolvePortalOffsetStyle = ({
-	alignHostToBoundsScroll = false,
 	bounds,
-	boundsCurrentScroll,
-	compensateSourceScroll = false,
-	currentScroll,
-	hostCurrentScroll,
 	hostKey,
-	hostProgress = 0,
-	includeScrollOffsets = true,
 	placement,
-	position = "relative",
-	sourceCurrentScroll,
-	trackSourceScroll = false,
+	landingShift,
 }: ResolvePortalOffsetStyleParams): StyleProps => {
 	"worklet";
 	const hostBounds = getPortalHostBounds(hostKey);
-	const shouldAlignHostToBoundsScroll = placement
-		? placement === "same-screen"
-		: alignHostToBoundsScroll;
-	const shouldCompensateSourceScroll =
-		trackSourceScroll || compensateSourceScroll;
-	const shouldIncludeHostScrollOffsets = placement
-		? placement === "cross-screen-close"
-		: includeScrollOffsets;
-	const boundsScrollSnapshot =
-		(bounds as { scroll?: ScrollMetadataState | null }).scroll ?? null;
-	const sourceScrollSnapshot = shouldCompensateSourceScroll
-		? boundsScrollSnapshot
-		: null;
-	const sourceScrollDeltaX = shouldCompensateSourceScroll
+	const boundsScrollSnapshot = bounds.scroll ?? null;
+	const hostBoundsScrollSnapshot = hostBounds?.scroll ?? null;
+
+	// same-screen re-bases the static host frame onto the source scroll snapshot.
+	// Cross-screen hosts are the chosen replacement coordinate space, so their
+	// destination scroll is represented by where the host itself is mounted.
+	const alignHostToBoundsScroll = placement === "same-screen";
+
+	const hostSnapshotDeltaX = alignHostToBoundsScroll
 		? getClampedScrollAxisDelta(
-				sourceCurrentScroll ?? null,
-				sourceScrollSnapshot,
+				boundsScrollSnapshot,
+				hostBoundsScrollSnapshot,
 				"horizontal",
 			)
 		: 0;
-	const sourceScrollDeltaY = shouldCompensateSourceScroll
+	const hostSnapshotDeltaY = alignHostToBoundsScroll
 		? getClampedScrollAxisDelta(
-				sourceCurrentScroll ?? null,
-				sourceScrollSnapshot,
+				boundsScrollSnapshot,
+				hostBoundsScrollSnapshot,
 				"vertical",
 			)
 		: 0;
-	const sourcePageX = bounds.pageX - sourceScrollDeltaX;
-	const sourcePageY = bounds.pageY - sourceScrollDeltaY;
-	const boundsScroll = shouldIncludeHostScrollOffsets
-		? (boundsScrollSnapshot ?? boundsCurrentScroll ?? currentScroll ?? null)
-		: null;
-	const hostBoundsScrollSnapshot = hostBounds?.scroll ?? null;
-	const hostBoundsScroll = shouldIncludeHostScrollOffsets
-		? hostBoundsScrollSnapshot
-		: null;
-	const resolvedHostCurrentScroll =
-		hostCurrentScroll ?? boundsScroll ?? hostBoundsScroll ?? null;
-	const hostSnapshotDeltaX =
-		shouldAlignHostToBoundsScroll && !shouldIncludeHostScrollOffsets
-			? getClampedScrollAxisDelta(
-					boundsScrollSnapshot,
-					hostBoundsScrollSnapshot,
-					"horizontal",
-				)
-			: 0;
-	const hostSnapshotDeltaY =
-		shouldAlignHostToBoundsScroll && !shouldIncludeHostScrollOffsets
-			? getClampedScrollAxisDelta(
-					boundsScrollSnapshot,
-					hostBoundsScrollSnapshot,
-					"vertical",
-				)
-			: 0;
-	// Deltas are clamped to the layout range: iOS rubber-band offsets are
-	// outside the real scroll range and must not become coordinate-space deltas.
-	const hostScrollDeltaX = getClampedScrollAxisDelta(
-		resolvedHostCurrentScroll,
-		hostBoundsScroll,
-		"horizontal",
-	);
-	const hostScrollDeltaY = getClampedScrollAxisDelta(
-		resolvedHostCurrentScroll,
-		hostBoundsScroll,
-		"vertical",
-	);
 
+	// Without registered host bounds the host frame is the origin, so the source
+	// page position becomes the offset directly.
 	const adjustedHostPageX = hostBounds
-		? hostBounds.pageX -
-			hostSnapshotDeltaX -
-			interpolate(hostProgress, [0, 1], [hostScrollDeltaX, 0])
+		? hostBounds.pageX - hostSnapshotDeltaX
 		: 0;
 	const adjustedHostPageY = hostBounds
-		? hostBounds.pageY -
-			hostSnapshotDeltaY -
-			interpolate(hostProgress, [0, 1], [hostScrollDeltaY, 0])
+		? hostBounds.pageY - hostSnapshotDeltaY
 		: 0;
-	const boundsScrollDeltaX = shouldIncludeHostScrollOffsets
-		? getClampedScrollAxisDelta(
-				currentScroll ?? null,
-				boundsScroll,
-				"horizontal",
-			)
-		: 0;
-	const boundsScrollDeltaY = shouldIncludeHostScrollOffsets
-		? getClampedScrollAxisDelta(currentScroll ?? null, boundsScroll, "vertical")
-		: 0;
-	const offsetX = hostBounds
-		? sourcePageX - adjustedHostPageX
-		: sourcePageX - boundsScrollDeltaX;
-	const offsetY = hostBounds
-		? sourcePageY - adjustedHostPageY
-		: sourcePageY - boundsScrollDeltaY;
-	const transform = [{ translateY: offsetY }, { translateX: offsetX }];
-
-	if (position === "absolute") {
-		return {
-			left: 0,
-			position: "absolute",
-			top: 0,
-			transform,
-		};
-	}
 
 	return {
-		transform,
+		transform: [
+			{ translateY: bounds.pageY - adjustedHostPageY + (landingShift?.y ?? 0) },
+			{ translateX: bounds.pageX - adjustedHostPageX + (landingShift?.x ?? 0) },
+		],
 	};
 };