react-native-screen-transitions 4.0.0-alpha.0 → 4.0.0-alpha.10

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

@@ -1,4 +1,4 @@
-import { memo, useCallback, useLayoutEffect, useRef } from "react";
+import { memo, useLayoutEffect, useRef } from "react";
 import {
 	type StyleProp,
 	StyleSheet,
@@ -8,8 +8,6 @@ import {
 } from "react-native";
 import Animated from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
-import { useScreenSlots } from "../../../../../../providers/screen/styles";
-import { SystemStore } from "../../../../../../stores/system.store";
 import { PORTAL_POINTER_EVENTS } from "../../../teleport";
 import { useHostMeasurement } from "../hooks/use-host-measurement";
 import { registerHost, unregisterHost } from "../stores/host-registry.store";
@@ -28,7 +26,6 @@ type HostImplProps = PublicHostProps & {
 
 function HostImpl({ fallback = false, style }: HostImplProps) {
 	const screenKey = useDescriptorsStore((s) => s.derivations.currentScreenKey);
-	const { unblockLifecycleStart } = SystemStore.getBag(screenKey).actions;
 	const generatedHostKeyRef = useRef<string | null>(null);
 
 	if (generatedHostKeyRef.current === null) {
@@ -36,25 +33,21 @@ 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();
 
+	const measurementKey = activeBoundaryHosts.length
+		? activeBoundaryHosts.map((host) => host.portalHostName).join("|")
+		: null;
+
 	const measurement = useHostMeasurement({
-		capturesScroll,
-		enabled: activeBoundaryHosts.length > 0,
-		hostKey,
-		screenKey,
-		visibilityBlocked,
-		viewportHeight,
-		viewportWidth,
+		measurementKey,
 	});
 
 	useLayoutEffect(() => {
 		registerHost({
-			capturesScroll,
 			fallback,
 			hostKey,
 			screenKey,
@@ -63,29 +56,26 @@ function HostImpl({ fallback = false, style }: HostImplProps) {
 		return () => {
 			unregisterHost(screenKey, hostKey);
 		};
-	}, [capturesScroll, fallback, hostKey, screenKey]);
-
-	const handleUnblocking = useCallback(() => {
-		// 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) => (
-				<View
-					key={host.portalHostName}
-					pointerEvents={PORTAL_POINTER_EVENTS}
-					style={[
-						styles.boundaryHostViewport,
-						{ width: viewportWidth, height: viewportHeight },
-					]}
-					onLayout={handleUnblocking}
-				>
-					<PortalBoundaryHost host={host} style={StyleSheet.absoluteFill} />
-				</View>
-			))
-		: null;
+	}, [fallback, hostKey, screenKey]);
+
+	const boundaryHosts = activeBoundaryHosts.map((host) => (
+		<View
+			key={host.portalHostName}
+			pointerEvents={PORTAL_POINTER_EVENTS}
+			style={[
+				styles.boundaryHostViewport,
+				{ width: viewportWidth, height: viewportHeight },
+			]}
+		>
+			<PortalBoundaryHost
+				host={host}
+				hostBounds={measurement.hostBounds}
+				hostMeasurementKey={measurementKey}
+				measuredHostKey={measurement.measuredKey}
+				style={StyleSheet.absoluteFill}
+			/>
+		</View>
+	));
 
 	return (
 		<Animated.View

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

@@ -1,18 +1,20 @@
 import { memo } from "react";
-import { type StyleProp, StyleSheet, type ViewStyle } from "react-native";
-import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import {
+	I18nManager,
+	type StyleProp,
+	StyleSheet,
+	type ViewStyle,
+} from "react-native";
+import Animated, {
+	type MeasuredDimensions,
+	type SharedValue,
+	useAnimatedReaction,
+	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 {
-	getClampedScrollAxisDelta,
-	ScrollStore,
-} 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 { resolveBoundaryLocalMeasurement } from "../helpers/local-measurement";
 import { resolvePortalOffsetStyle } from "../helpers/offset-style";
 import type { ActivePortalBoundaryHost } from "../stores/portal-boundary-host.store";
 
@@ -20,111 +22,74 @@ const AnimatedPortalBoundaryHost = NativePortalHost
 	? Animated.createAnimatedComponent(NativePortalHost)
 	: null;
 
+const getCurrentBoundaryBounds = (host: ActivePortalBoundaryHost) => {
+	"worklet";
+	return resolveBoundaryLocalMeasurement(
+		host.localMeasurement.get(),
+		host.pairKey,
+	);
+};
+
 type PortalBoundaryHostProps = {
 	host: ActivePortalBoundaryHost;
+	hostBounds: SharedValue<MeasuredDimensions | null>;
+	hostMeasurementKey: string | null;
+	measuredHostKey: SharedValue<string | null>;
 	style?: StyleProp<ViewStyle>;
 };
 
 export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 	host,
+	hostBounds,
+	hostMeasurementKey,
+	measuredHostKey,
 	style,
 }: PortalBoundaryHostProps) {
-	// Cross-screen landing-rect scroll tracking: the flight interpolates toward
-	// the source rect stored at measure time, but the source screen stays
-	// scrollable while the pair closes (destination pointer events are
-	// released). These are read per-frame so the landing point follows the
-	// live source scroll instead of the stale snapshot.
-	const sourceScrollMetadata = ScrollStore.getValue(
-		getSourceScreenKeyFromPairKey(host.pairKey),
-		"metadata",
-	);
-	const hostVisualProgress = AnimationStore.getValue(
-		host.screenKey,
-		"visualProgress",
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			return (
+				getCurrentBoundaryBounds(host) !== null &&
+				hostBounds.get() !== null &&
+				!!hostMeasurementKey &&
+				measuredHostKey.get() === hostMeasurementKey
+			);
+		},
+		(ready) => {
+			"worklet";
+			if (ready) {
+				host.portalHostReady.set(true);
+			}
+		},
 	);
 
 	const hostStyle = useAnimatedStyle(() => {
 		"worklet";
-		// 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) {
+		const boundaryBounds = getCurrentBoundaryBounds(host);
+		if (!boundaryBounds) {
 			return NO_STYLES;
 		}
 
-		const sourceBounds = link.source.bounds as ScrollMeasuredDimensions;
-		const isCrossScreenPortal = link.source.screenKey !== host.screenKey;
-
-		let landingShift: { x: number; y: number } | undefined;
-
-		if (isCrossScreenPortal) {
-			// Weight by distance-to-landing so the destination end of the flight
-			// stays pinned: no correction while the content sits over the
-			// destination rect (progress 1), full correction at touchdown on the
-			// source rect (progress 0).
-			const landingWeight =
-				1 - Math.min(Math.max(hostVisualProgress.get(), 0), 1);
-
-			if (landingWeight > 0) {
-				const liveScroll = sourceScrollMetadata.get();
-				const capturedScroll = sourceBounds.scroll ?? null;
-
-				// Scroll offset grows as content moves up/left, so the rect's
-				// on-screen position shifts by the negative delta.
-				landingShift = {
-					x:
-						-getClampedScrollAxisDelta(
-							liveScroll,
-							capturedScroll,
-							"horizontal",
-						) * landingWeight,
-					y:
-						-getClampedScrollAxisDelta(liveScroll, capturedScroll, "vertical") *
-						landingWeight,
-				};
-			}
-		}
-
 		return resolvePortalOffsetStyle({
-			bounds: sourceBounds,
-			hostKey: host.hostKey,
-			placement: isCrossScreenPortal ? "cross-screen" : "same-screen",
-			landingShift,
+			bounds: boundaryBounds,
+			hostBounds: hostBounds.get(),
 		});
 	});
+
 	const contentFrameStyle = useAnimatedStyle(() => {
 		"worklet";
-		const link = getLink(host.pairKey, host.boundaryId);
-		if (!link?.source) {
+		const boundaryBounds = getCurrentBoundaryBounds(host);
+		if (!boundaryBounds) {
 			return NO_STYLES;
 		}
 
-		const sourceBounds = link.source.bounds as ScrollMeasuredDimensions;
-
 		return {
-			height: sourceBounds.height,
-			width: sourceBounds.width,
+			height: boundaryBounds.height,
+			width: boundaryBounds.width,
 		};
 	});
 	const slotStyle = useAnimatedStyle(() => {
 		"worklet";
-		// `slotsMap` is the resolved map: it may contain real interpolator output,
-		// inherited styles, or resolver-created reset patches for slots that just
-		// disappeared. Normal components need those reset patches so stale styles
-		// clear correctly.
-		//
-		// A screen-level portal host is different. It is only the temporary visual
-		// receiver for teleported content, not the original component that needs a
-		// cleanup frame. If the current local interpolator layers did not emit this
-		// boundary id, any resolved style here is cleanup/stale residue and should
-		// not be drawn by the host.
-		if (
-			host.escapeClipping &&
-			!hasLocalSlot(host.localStylesMaps.get(), host.boundaryId)
-		) {
-			return NO_STYLES;
-		}
-
 		const slot = host.slotsMap.get()[host.boundaryId];
 
 		return composeSlotStyleWithLocalTransform(
@@ -155,10 +120,20 @@ export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 	);
 });
 
+// The teleport offset is a physical page delta measured from the screen's
+// left edge, so the content box must anchor there too. Under native RTL,
+// `left: 0` swaps to a right-edge anchor; `end: 0` is the physical left edge
+// in RTL regardless of the swap setting.
 const styles = StyleSheet.create({
-	content: {
-		left: 0,
-		position: "absolute",
-		top: 0,
-	},
+	content: I18nManager.isRTL
+		? {
+				end: 0,
+				position: "absolute",
+				top: 0,
+			}
+		: {
+				left: 0,
+				position: "absolute",
+				top: 0,
+			},
 });

package/src/components/boundary/portal/components/boundary-portal/helpers/local-measurement.ts

@@ -0,0 +1,10 @@
+import type { ScreenPairKey } from "../../../../../../stores/bounds/types";
+import type { BoundaryLocalMeasurement } from "../../../../types";
+
+export const resolveBoundaryLocalMeasurement = (
+	measurement: BoundaryLocalMeasurement | null,
+	pairKey: ScreenPairKey,
+) => {
+	"worklet";
+	return measurement?.pairKey === pairKey ? measurement.bounds : null;
+};

package/src/components/boundary/portal/components/boundary-portal/helpers/offset-style.ts

@@ -1,76 +1,25 @@
-import type { StyleProps } from "react-native-reanimated";
-import { getClampedScrollAxisDelta } from "../../../../../../stores/scroll.store";
-import type { ScrollMeasuredDimensions } from "../../../../utils/measured-bounds";
-import { getPortalHostBounds } from "../stores/host-bounds.store";
-
-/**
- * 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";
+import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
 
 type ResolvePortalOffsetStyleParams = {
-	/** Source rect, carrying the scroll snapshot taken at measure time. */
-	bounds: ScrollMeasuredDimensions;
-	hostKey: string;
-	placement: PortalOffsetPlacement;
-	/**
-	 * 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.
-	 */
-	landingShift?: { x: number; y: number };
+	bounds: MeasuredDimensions;
+	hostBounds: MeasuredDimensions | null;
 };
 
 export const resolvePortalOffsetStyle = ({
 	bounds,
-	hostKey,
-	placement,
-	landingShift,
+	hostBounds,
 }: ResolvePortalOffsetStyleParams): StyleProps => {
 	"worklet";
-	const hostBounds = getPortalHostBounds(hostKey);
-	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(
-				boundsScrollSnapshot,
-				hostBoundsScrollSnapshot,
-				"horizontal",
-			)
-		: 0;
-	const hostSnapshotDeltaY = alignHostToBoundsScroll
-		? getClampedScrollAxisDelta(
-				boundsScrollSnapshot,
-				hostBoundsScrollSnapshot,
-				"vertical",
-			)
-		: 0;
-
-	// 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
-		: 0;
-	const adjustedHostPageY = hostBounds
-		? hostBounds.pageY - hostSnapshotDeltaY
-		: 0;
+	// Both values are measured in page coordinates. Subtracting the host origin
+	// gives the boundary's local position inside that host, independent of which
+	// scroll container owns either view.
+	const hostPageX = hostBounds?.pageX ?? 0;
+	const hostPageY = hostBounds?.pageY ?? 0;
 
 	return {
 		transform: [
-			{ translateY: bounds.pageY - adjustedHostPageY + (landingShift?.y ?? 0) },
-			{ translateX: bounds.pageX - adjustedHostPageX + (landingShift?.x ?? 0) },
+			{ translateY: bounds.pageY - hostPageY },
+			{ translateX: bounds.pageX - hostPageX },
 		],
 	};
 };

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

@@ -0,0 +1,118 @@
+import { useCallback, useLayoutEffect, useState } from "react";
+import { type SharedValue, useAnimatedReaction } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+import { getPairKeyForSource } from "../../../../../../stores/bounds/internals/links";
+import type { ScreenPairKey } from "../../../../../../stores/bounds/types";
+import type { NormalizedTransitionInterpolatedStyle } from "../../../../../../types/animation.types";
+import type { BoundaryLocalMeasurementValue } from "../../../../types";
+import { createBoundaryPortalHostName } from "../../../utils/naming";
+import {
+	mountPortalBoundaryHost,
+	unmountPortalBoundaryHostByName,
+} from "../stores/portal-boundary-host.store";
+
+type UseActivePortalBoundaryHostParams = {
+	boundaryId: string;
+	currentScreenKey: string;
+	escapeHostKey?: string;
+	localMeasurement: BoundaryLocalMeasurementValue;
+	portalHostName: SharedValue<string | null>;
+	portalHostReady: SharedValue<boolean>;
+	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
+};
+
+export const resolveActivePortalPairKey = ({
+	pairKey,
+	measurementPairKey,
+	hasAnimatedSlot,
+}: {
+	pairKey: ScreenPairKey | null;
+	measurementPairKey: ScreenPairKey | null | undefined;
+	hasAnimatedSlot: boolean;
+}): ScreenPairKey | null => {
+	"worklet";
+	if (!pairKey || measurementPairKey !== pairKey || !hasAnimatedSlot) {
+		return null;
+	}
+
+	return pairKey;
+};
+
+export const useActivePortalBoundaryHost = ({
+	boundaryId,
+	currentScreenKey,
+	escapeHostKey,
+	localMeasurement,
+	portalHostName,
+	portalHostReady,
+	slotsMap,
+}: UseActivePortalBoundaryHostParams) => {
+	const [activePairKey, setActivePairKey] = useState<ScreenPairKey | null>(
+		null,
+	);
+
+	const updateActivePairKey = useCallback((pairKey: ScreenPairKey | null) => {
+		setActivePairKey(pairKey);
+	}, []);
+
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			const pairKey = getPairKeyForSource(boundaryId, currentScreenKey);
+			const measurement = localMeasurement.get();
+
+			return resolveActivePortalPairKey({
+				pairKey,
+				measurementPairKey: measurement?.pairKey,
+				hasAnimatedSlot: slotsMap.get()[boundaryId] !== undefined,
+			});
+		},
+		(pairKey, previousPairKey) => {
+			"worklet";
+			if (pairKey === previousPairKey) {
+				return;
+			}
+
+			scheduleOnRN(updateActivePairKey, pairKey);
+		},
+	);
+
+	useLayoutEffect(() => {
+		if (!activePairKey || !escapeHostKey) {
+			portalHostName.set(null);
+			portalHostReady.set(false);
+			return;
+		}
+
+		const nextPortalHostName = createBoundaryPortalHostName(
+			escapeHostKey,
+			boundaryId,
+			activePairKey,
+		);
+
+		mountPortalBoundaryHost({
+			boundaryId,
+			hostKey: escapeHostKey,
+			localMeasurement,
+			pairKey: activePairKey,
+			portalHostName: nextPortalHostName,
+			portalHostReady,
+			slotsMap,
+		});
+		portalHostName.set(nextPortalHostName);
+
+		return () => {
+			portalHostName.set(null);
+			portalHostReady.set(false);
+			unmountPortalBoundaryHostByName(nextPortalHostName);
+		};
+	}, [
+		activePairKey,
+		boundaryId,
+		escapeHostKey,
+		localMeasurement,
+		portalHostName,
+		portalHostReady,
+		slotsMap,
+	]);
+};