react-native-screen-transitions 4.0.0-alpha.6 → 4.0.0-alpha.8

package/src/components/boundary/index.tsx

@@ -24,11 +24,7 @@ const BoundaryPrimitive = forwardRef<View, BoundaryPrimitiveProps>(
 BoundaryPrimitive.displayName = "Transition.Boundary.Primitive";
 
 const BoundaryRoot = createBoundaryComponent(BoundaryPrimitive);
-const BoundaryView = createBoundaryComponent(View);
-const BoundaryTrigger = createBoundaryComponent(Pressable);
 BoundaryRoot.displayName = "Transition.Boundary";
-BoundaryView.displayName = "Transition.Boundary.View";
-BoundaryTrigger.displayName = "Transition.Boundary.Trigger";
 BoundaryTarget.displayName = "Transition.Boundary.Target";
 Host.displayName = "Transition.Boundary.Host";
 
@@ -60,14 +56,6 @@ export interface BoundaryComponent extends BoundaryRootComponent {
 	 * Explicit host for clipping-escape placement.
 	 */
 	Host: typeof Host;
-	/**
-	 * @deprecated Use `Transition.Boundary` without `onPress`.
-	 */
-	View: typeof BoundaryView;
-	/**
-	 * @deprecated Use `Transition.Boundary` with `onPress`.
-	 */
-	Trigger: typeof BoundaryTrigger;
 }
 
 export type BoundaryProps = BoundaryComponentProps<BoundaryPrimitiveProps>;
@@ -75,6 +63,4 @@ export type BoundaryProps = BoundaryComponentProps<BoundaryPrimitiveProps>;
 export const Boundary = Object.assign(BoundaryRoot, {
 	Target: BoundaryTarget,
 	Host,
-	View: BoundaryView,
-	Trigger: BoundaryTrigger,
 }) as BoundaryComponent;

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

@@ -1,8 +1,11 @@
 import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
-import { useStack } from "../../../../../../hooks/navigation/use-stack";
 import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
-import { useScreenSlots } from "../../../../../../providers/screen/styles";
+import {
+	useOptionalScreenSlotStore,
+	useScreenSlotStore,
+} from "../../../../../../providers/screen/styles";
 import { hasCloseTransitionFinished } from "../../../../../../providers/screen/styles/helpers/transition-visual-state";
+import { useBlankStackStore } from "../../../../../../providers/stack/blank-stack.provider";
 import { AnimationStore } from "../../../../../../stores/animation.store";
 import { getLinkKeyFromTag } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
 import { getEntry } from "../../../../../../stores/bounds/internals/entries";
@@ -24,15 +27,26 @@ interface UseBoundaryContentPortalAttachmentParams {
 export const useBoundaryContentPortalAttachment = ({
 	boundaryId,
 }: UseBoundaryContentPortalAttachmentParams) => {
-	const { nextInterpolatorReady, slotsMap } = useScreenSlots();
+	const slotsMap = useScreenSlotStore((store) => store.slotsMap);
 
 	const currentScreenKey = useDescriptorsStore(
 		(s) => s.derivations.currentScreenKey,
 	);
+	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
 	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
+	const destinationSlots = useOptionalScreenSlotStore(
+		nextScreenKey ?? currentScreenKey,
+	);
+	const unavailableInterpolatorReady = useSharedValue(0);
+	const interpolatorReady =
+		destinationSlots?.interpolatorReady ?? unavailableInterpolatorReady;
 
-	const activeReceiverScreenKey = useStack(resolveActiveHandoffReceiver);
-	const previousReceiverScreenKey = useStack(resolvePreviousHandoffReceiver);
+	const activeReceiverScreenKey = useBlankStackStore(
+		resolveActiveHandoffReceiver,
+	);
+	const previousReceiverScreenKey = useBlankStackStore(
+		resolvePreviousHandoffReceiver,
+	);
 
 	const activeReceiverAnimationProgress = SystemStore.getValue(
 		activeReceiverScreenKey ?? currentScreenKey,
@@ -85,7 +99,7 @@ export const useBoundaryContentPortalAttachment = ({
 				? link.destination.screenKey
 				: null;
 
-		const interpolatorReady = nextInterpolatorReady.get();
+		const isInterpolatorReady = interpolatorReady.get();
 		const attachedScreenKey = attachedReceiverScreenKey.get();
 
 		const nextReceiverScreenKey = resolveHandoffAttachmentCandidate({
@@ -93,7 +107,7 @@ export const useBoundaryContentPortalAttachment = ({
 			activeReceiverScreenKey,
 			attachedReceiverScreenKey: attachedScreenKey,
 			hasActiveCloseFinished,
-			interpolatorReady: !!interpolatorReady,
+			interpolatorReady: !!isInterpolatorReady,
 			pairChangedDuringClose,
 			pairDestinationScreenKey: pairDestination,
 			previousReceiverScreenKey,
@@ -110,7 +124,7 @@ export const useBoundaryContentPortalAttachment = ({
 
 		const activatingPairDestination =
 			!!pairDestination &&
-			!!interpolatorReady &&
+			!!isInterpolatorReady &&
 			nextReceiverScreenKey === pairDestination;
 
 		const canActivateReceiver =

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

@@ -8,7 +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 { PORTAL_POINTER_EVENTS } from "../../../teleport";
 import { useHostMeasurement } from "../hooks/use-host-measurement";
 import { registerHost, unregisterHost } from "../stores/host-registry.store";
@@ -34,20 +33,17 @@ 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(() => {
@@ -71,7 +67,13 @@ function HostImpl({ fallback = false, style }: HostImplProps) {
 				{ width: viewportWidth, height: viewportHeight },
 			]}
 		>
-			<PortalBoundaryHost host={host} style={StyleSheet.absoluteFill} />
+			<PortalBoundaryHost
+				host={host}
+				hostBounds={measurement.hostBounds}
+				hostMeasurementKey={measurementKey}
+				measuredHostKey={measurement.measuredKey}
+				style={StyleSheet.absoluteFill}
+			/>
 		</View>
 	));
 

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

@@ -1,4 +1,4 @@
-import { memo, useCallback } from "react";
+import { memo } from "react";
 import {
 	I18nManager,
 	type StyleProp,
@@ -6,97 +6,86 @@ import {
 	type ViewStyle,
 } from "react-native";
 import Animated, {
+	type MeasuredDimensions,
+	type SharedValue,
+	useAnimatedReaction,
 	useAnimatedStyle,
-	useFrameCallback,
-	useSharedValue,
 } from "react-native-reanimated";
 import { NO_STYLES } from "../../../../../../constants";
 import { composeSlotStyleWithLocalTransform } from "../../../../../../providers/screen/styles/helpers/compose-slot-style";
-import { getLink } from "../../../../../../stores/bounds/internals/links";
-import { SystemStore } from "../../../../../../stores/system.store";
-import type { ScrollMeasuredDimensions } from "../../../../utils/measured-bounds";
 import { NativePortalHost, PORTAL_POINTER_EVENTS } from "../../../teleport";
+import { resolveBoundaryLocalMeasurement } from "../helpers/local-measurement";
 import { resolvePortalOffsetStyle } from "../helpers/offset-style";
-import { getPortalHostBounds } from "../stores/host-bounds.store";
 import type { ActivePortalBoundaryHost } from "../stores/portal-boundary-host.store";
 
 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) {
-	const geometryReadyFrames = useSharedValue(0);
-	const { unblockLifecycleStart } = SystemStore.getBag(host.screenKey).actions;
-
-	const handleFrame = useCallback(() => {
-		"worklet";
-		if (host.portalHostReady.get()) {
-			return;
-		}
-
-		const link = getLink(host.pairKey, host.boundaryId);
-		const hasSource = !!link?.source;
-		const hasHostBounds = getPortalHostBounds(host.hostKey) !== null;
-		const hasSlot = host.slotsMap.get()[host.boundaryId] !== undefined;
-		const hasGeometry = hasSource && hasHostBounds && hasSlot;
-
-		if (!hasGeometry) {
-			geometryReadyFrames.set(0);
-			return;
-		}
-
-		if (geometryReadyFrames.get() === 0) {
-			// Give the source frame, host offset, and slot style one UI frame to
-			// reach native before Teleport targets this receiver.
-			geometryReadyFrames.set(1);
-			return;
-		}
-
-		host.portalHostReady.set(true);
-		unblockLifecycleStart();
-	}, [geometryReadyFrames, host, unblockLifecycleStart]);
-
-	useFrameCallback(handleFrame, true);
+	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;
-
 		return resolvePortalOffsetStyle({
-			bounds: sourceBounds,
-			hostKey: host.hostKey,
-			placement: isCrossScreenPortal ? "cross-screen" : "same-screen",
+			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(() => {

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,69 +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;
+	bounds: MeasuredDimensions;
+	hostBounds: MeasuredDimensions | null;
 };
 
 export const resolvePortalOffsetStyle = ({
 	bounds,
-	hostKey,
-	placement,
+	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 },
-			{ translateX: bounds.pageX - adjustedHostPageX },
+			{ translateY: bounds.pageY - hostPageY },
+			{ translateX: bounds.pageX - hostPageX },
 		],
 	};
 };

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

@@ -1,9 +1,10 @@
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
+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,
@@ -14,44 +15,57 @@ type UseActivePortalBoundaryHostParams = {
 	boundaryId: string;
 	currentScreenKey: string;
 	escapeHostKey?: string;
+	localMeasurement: BoundaryLocalMeasurementValue;
 	portalHostName: SharedValue<string | null>;
 	portalHostReady: SharedValue<boolean>;
 	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
 };
 
-type ActivePortal = {
-	pairKey: ScreenPairKey;
+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 [activePortal, setActivePortal] = useState<ActivePortal | null>(null);
-	const activePairKeyRef = useRef<ScreenPairKey | null>(null);
-
-	const updateActivePortal = useCallback((pairKey: ScreenPairKey | null) => {
-		if (activePairKeyRef.current === pairKey) {
-			return;
-		}
+	const [activePairKey, setActivePairKey] = useState<ScreenPairKey | null>(
+		null,
+	);
 
-		activePairKeyRef.current = pairKey;
-		setActivePortal(pairKey ? { pairKey } : null);
+	const updateActivePairKey = useCallback((pairKey: ScreenPairKey | null) => {
+		setActivePairKey(pairKey);
 	}, []);
 
 	useAnimatedReaction(
 		() => {
 			"worklet";
-			const isBoundaryAnimating = slotsMap.get()[boundaryId] !== undefined;
-			if (!isBoundaryAnimating) {
-				return null;
-			}
+			const pairKey = getPairKeyForSource(boundaryId, currentScreenKey);
+			const measurement = localMeasurement.get();
 
-			return getPairKeyForSource(boundaryId, currentScreenKey);
+			return resolveActivePortalPairKey({
+				pairKey,
+				measurementPairKey: measurement?.pairKey,
+				hasAnimatedSlot: slotsMap.get()[boundaryId] !== undefined,
+			});
 		},
 		(pairKey, previousPairKey) => {
 			"worklet";
@@ -59,12 +73,12 @@ export const useActivePortalBoundaryHost = ({
 				return;
 			}
 
-			scheduleOnRN(updateActivePortal, pairKey);
+			scheduleOnRN(updateActivePairKey, pairKey);
 		},
 	);
 
 	useLayoutEffect(() => {
-		if (!activePortal || !escapeHostKey) {
+		if (!activePairKey || !escapeHostKey) {
 			portalHostName.set(null);
 			portalHostReady.set(false);
 			return;
@@ -73,16 +87,16 @@ export const useActivePortalBoundaryHost = ({
 		const nextPortalHostName = createBoundaryPortalHostName(
 			escapeHostKey,
 			boundaryId,
-			activePortal.pairKey,
+			activePairKey,
 		);
 
 		mountPortalBoundaryHost({
 			boundaryId,
 			hostKey: escapeHostKey,
-			pairKey: activePortal.pairKey,
+			localMeasurement,
+			pairKey: activePairKey,
 			portalHostName: nextPortalHostName,
 			portalHostReady,
-			screenKey: currentScreenKey,
 			slotsMap,
 		});
 		portalHostName.set(nextPortalHostName);
@@ -93,10 +107,10 @@ export const useActivePortalBoundaryHost = ({
 			unmountPortalBoundaryHostByName(nextPortalHostName);
 		};
 	}, [
-		activePortal,
+		activePairKey,
 		boundaryId,
-		currentScreenKey,
 		escapeHostKey,
+		localMeasurement,
 		portalHostName,
 		portalHostReady,
 		slotsMap,

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

@@ -1,6 +1,7 @@
 import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
-import { useScreenSlots } from "../../../../../../providers/screen/styles";
+import { useScreenSlotStore } from "../../../../../../providers/screen/styles";
+import { useBoundaryRootStore } from "../../../../providers/boundary-root.provider";
 import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
 import { isTeleportEnabled } from "../../../utils/teleport-control";
 import { useActiveHostKey } from "../stores/host-registry.store";
@@ -13,10 +14,17 @@ interface UseBoundaryPortalAttachmentParams {
 export const useBoundaryPortalAttachment = ({
 	boundaryId,
 }: UseBoundaryPortalAttachmentParams) => {
+	const localMeasurement = useBoundaryRootStore((root) => {
+		if (!root) {
+			throw new Error("Boundary portal attachment requires a boundary root.");
+		}
+
+		return root.localMeasurement;
+	});
 	const currentScreenKey = useDescriptorsStore(
 		(s) => s.derivations.currentScreenKey,
 	);
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useScreenSlotStore((store) => store.slotsMap);
 	const portalHostName = useSharedValue<string | null>(null);
 	const portalHostReady = useSharedValue(false);
 	const escapeHostKey = useActiveHostKey(currentScreenKey);
@@ -25,6 +33,7 @@ export const useBoundaryPortalAttachment = ({
 		boundaryId,
 		currentScreenKey,
 		escapeHostKey,
+		localMeasurement,
 		portalHostName,
 		portalHostReady,
 		slotsMap,
@@ -39,10 +48,12 @@ export const useBoundaryPortalAttachment = ({
 			teleport,
 			...slotProps
 		} = slot?.props ?? {};
+
 		const shouldAttach =
 			slot !== undefined &&
 			isTeleportEnabled(teleport) &&
 			portalHostReady.get();
+
 		const hostName = shouldAttach
 			? portalHostName.get()
 			: PORTAL_HOST_NAME_RESET_VALUE;