react-native-screen-transitions 3.8.0 → 3.9.0-alpha.0

package/src/shared/components/{create-boundary-component → boundary}/hooks/use-measurer.ts

@@ -1,20 +1,23 @@
 import { useCallback } from "react";
 import type { View } from "react-native";
 import { useWindowDimensions } from "react-native";
-import type { AnimatedRef, StyleProps } from "react-native-reanimated";
-import { setEntry } from "../../../stores/bounds/internals/entries";
 import {
-	setDestination,
-	setSource,
-} from "../../../stores/bounds/internals/links";
+	type AnimatedRef,
+	measure,
+	type StyleProps,
+} from "react-native-reanimated";
+import { applyMeasuredBoundsWrites } from "../../../providers/helpers/measured-bounds-writes";
+import { useOriginContext } from "../../../providers/screen/origin.provider";
+import type { BoundsPortalAttachTarget } from "../../../stores/bounds/types";
 import { ScrollStore } from "../../../stores/scroll.store";
 import { SystemStore } from "../../../stores/system.store";
-import { getVisibilityBlockOffset } from "../../../utils/visibility-block-offset";
+import { getActiveScrollHost } from "../portal/stores/host-registry.store";
 import type { MeasureBoundary } from "../types";
 import {
-	applyVisibilityBlockOffset,
+	attachScrollSnapshotToMeasuredBounds,
 	isMeasurementInViewport,
 	measureWithOverscrollAwareness,
+	normalizeMeasuredBoundsToOrigin,
 } from "../utils/measured-bounds";
 
 interface UseMeasurerParams {
@@ -25,6 +28,7 @@ interface UseMeasurerParams {
 	currentScreenKey: string;
 	preparedStyles: StyleProps;
 	measuredAnimatedRef: AnimatedRef<View>;
+	portalHost?: BoundsPortalAttachTarget;
 }
 
 export const useMeasurer = ({
@@ -35,15 +39,18 @@ export const useMeasurer = ({
 	currentScreenKey,
 	preparedStyles,
 	measuredAnimatedRef,
+	portalHost,
 }: UseMeasurerParams): MeasureBoundary => {
 	const { width: viewportWidth, height: viewportHeight } =
 		useWindowDimensions();
 
 	const scrollState = ScrollStore.getValue(currentScreenKey, "coordination");
+	const scrollMetadata = ScrollStore.getValue(currentScreenKey, "metadata");
 	const pendingLifecycleStartBlockCount = SystemStore.getValue(
 		currentScreenKey,
 		"pendingLifecycleStartBlockCount",
 	);
+	const { originRef } = useOriginContext();
 
 	return useCallback(
 		(target) => {
@@ -54,21 +61,14 @@ export const useMeasurer = ({
 				measuredAnimatedRef,
 				scrollState.get(),
 			);
+			const measuredOrigin = measure(originRef);
 
-			if (!measured) return;
+			if (!measured || !measuredOrigin) return;
 
-			// Source boundaries do not need offset correction. Only destination
-			// captures can measure while the visibility gate is still blocked.
-			const shouldAdjustBlockedDestination =
-				target.type === "destination" &&
-				pendingLifecycleStartBlockCount.get() > 0;
-
-			const normalizedMeasured = shouldAdjustBlockedDestination
-				? applyVisibilityBlockOffset(
-						measured,
-						getVisibilityBlockOffset(viewportHeight),
-					)
-				: measured;
+			const normalizedMeasured = normalizeMeasuredBoundsToOrigin(
+				measured,
+				measuredOrigin,
+			);
 
 			/**
 			 * - Destination Pass -
@@ -91,33 +91,26 @@ export const useMeasurer = ({
 
 			if (!viewportAllowsDestinationWrite) return;
 
-			// Set the bounds entry on every measure to avoid any stale measurements
-			// for the public read API.
-			setEntry(entryTag, currentScreenKey, {
-				bounds: normalizedMeasured,
-			});
-
-			if (target.type === "source") {
-				setSource(
-					target.pairKey,
-					linkId,
-					currentScreenKey,
-					normalizedMeasured,
-					preparedStyles,
-					group,
-				);
-			}
+			const measuredWithScroll = attachScrollSnapshotToMeasuredBounds(
+				normalizedMeasured,
+				scrollMetadata.get(),
+			);
+			const sourceHost =
+				target.type === "source"
+					? (getActiveScrollHost(currentScreenKey) ?? undefined)
+					: undefined;
 
-			if (target.type === "destination") {
-				setDestination(
-					target.pairKey,
-					linkId,
-					currentScreenKey,
-					normalizedMeasured,
-					preparedStyles,
-					group,
-				);
-			}
+			applyMeasuredBoundsWrites({
+				entryTag,
+				linkId,
+				group,
+				currentScreenKey,
+				measured: measuredWithScroll,
+				preparedStyles,
+				linkWrite: target,
+				portalHost,
+				sourceHost,
+			});
 		},
 		[
 			enabled,
@@ -127,10 +120,13 @@ export const useMeasurer = ({
 			currentScreenKey,
 			preparedStyles,
 			measuredAnimatedRef,
+			portalHost,
 			viewportWidth,
 			viewportHeight,
 			scrollState,
+			scrollMetadata,
 			pendingLifecycleStartBlockCount,
+			originRef,
 		],
 	);
 };

package/src/shared/components/{create-boundary-component → boundary}/hooks/use-refresh-boundary.ts

@@ -1,4 +1,5 @@
 import { useAnimatedReaction } from "react-native-reanimated";
+import { useDescriptorsStore } from "../../../providers/screen/descriptors";
 import { AnimationStore } from "../../../stores/animation.store";
 import { pairs } from "../../../stores/bounds/internals/state";
 import type { MeasureBoundary } from "../types";
@@ -6,25 +7,28 @@ import { getRefreshBoundarySignal } from "../utils/refresh-signals";
 
 interface UseRefreshBoundaryParams {
 	enabled: boolean;
-	currentScreenKey: string;
-	preferredSourceScreenKey?: string;
-	nextScreenKey?: string;
 	linkId: string;
 	group?: string;
-	ancestorScreenKeys: string[];
 	measureBoundary: MeasureBoundary;
 }
 
 export const useRefreshBoundary = ({
 	enabled,
-	currentScreenKey,
-	preferredSourceScreenKey,
-	nextScreenKey,
 	linkId,
 	group,
-	ancestorScreenKeys,
 	measureBoundary,
 }: UseRefreshBoundaryParams) => {
+	const currentScreenKey = useDescriptorsStore(
+		(s) => s.derivations.currentScreenKey,
+	);
+	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
+	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
+	const destinationPairKey = useDescriptorsStore(
+		(s) => s.derivations.destinationPairKey,
+	);
+	const ancestorDestinationPairKey = useDescriptorsStore(
+		(s) => s.derivations.ancestorDestinationPairKey,
+	);
 	// Source-side boundaries refresh from the next screen's lifecycle pulse.
 	// Destination-side boundaries have no next screen, so they refresh from self.
 	const refreshScreenKey = nextScreenKey ?? currentScreenKey;
@@ -49,17 +53,18 @@ export const useRefreshBoundary = ({
 			return getRefreshBoundarySignal({
 				enabled,
 				currentScreenKey,
-				preferredSourceScreenKey,
+				sourcePairKey,
+				destinationPairKey,
+				ancestorDestinationPairKey,
 				nextScreenKey,
 				linkId,
 				group,
-				ancestorScreenKeys,
 				shouldRefresh: !!refreshWillAnimate.get(),
 				closing: !!refreshClosing.get(),
 				entering: !!refreshEntering.get(),
 				animating: !!refreshAnimating.get(),
 				progress: refreshProgress.get(),
-				linkState: group || ancestorScreenKeys.length ? pairs.get() : undefined,
+				linkState: pairs.get(),
 			});
 		},
 		(refreshSignal, prevRefreshSignal) => {

package/src/shared/components/{create-boundary-component → boundary}/index.tsx

@@ -1,7 +1,13 @@
 import { Pressable, View } from "react-native";
 import { BoundaryTarget } from "./components/boundary-target";
 import { createBoundaryComponent } from "./create-boundary-component";
+import { Host } from "./portal";
 
+export type {
+	BoundaryPortal,
+	BoundaryPortalAttachTarget,
+	BoundaryPortalOptions,
+} from "./types";
 export { createBoundaryComponent };
 
 const BoundaryView = createBoundaryComponent(View, {
@@ -11,6 +17,7 @@ const BoundaryTrigger = createBoundaryComponent(Pressable);
 BoundaryView.displayName = "Transition.Boundary.View";
 BoundaryTrigger.displayName = "Transition.Boundary.Trigger";
 BoundaryTarget.displayName = "Transition.Boundary.Target";
+Host.displayName = "Transition.Boundary.Host";
 
 /**
  * Shared-boundary components.
@@ -29,6 +36,7 @@ BoundaryTarget.displayName = "Transition.Boundary.Target";
  * - `Boundary.View` for passive/shared elements.
  * - `Boundary.Trigger` for tappable elements that start navigation.
  * - `Boundary.Target` to measure a nested descendant instead of the owner.
+ * - `Boundary.Host` to make nested portal placement explicit.
  */
 export const Boundary = {
 	/**
@@ -43,4 +51,8 @@ export const Boundary = {
 	 * Optional nested measurement override inside a boundary owner.
 	 */
 	Target: BoundaryTarget,
+	/**
+	 * Explicit portal host for scrollable or otherwise clipped coordinate spaces.
+	 */
+	Host: Host,
 };

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

@@ -0,0 +1,114 @@
+import { memo, useLayoutEffect, useRef } from "react";
+import {
+	type StyleProp,
+	StyleSheet,
+	useWindowDimensions,
+	View,
+	type ViewStyle,
+} from "react-native";
+import Animated from "react-native-reanimated";
+import { useDescriptorsStore } from "../../../../providers/screen/descriptors";
+import { useHostMeasurement } from "../hooks/use-host-measurement";
+import { registerHost, unregisterHost } from "../stores/host-registry.store";
+import { useActivePortalBoundaryHosts } from "../stores/portal-boundary-host.store";
+import { PortalBoundaryHost } from "./portal-boundary-host";
+
+let nextHostId = 0;
+
+export type PublicHostProps = {
+	style?: StyleProp<ViewStyle>;
+};
+
+type HostImplProps = PublicHostProps & {
+	fallback?: boolean;
+};
+
+function HostImpl({ fallback = false, style }: HostImplProps) {
+	const screenKey = useDescriptorsStore((s) => s.derivations.currentScreenKey);
+	const generatedHostKeyRef = useRef<string | null>(null);
+
+	if (generatedHostKeyRef.current === null) {
+		generatedHostKeyRef.current = `${screenKey}-host-${nextHostId++}`;
+	}
+
+	const hostKey = fallback ? screenKey : generatedHostKeyRef.current;
+	const capturesScroll = !fallback;
+	const activeBoundaryHosts = useActivePortalBoundaryHosts(hostKey);
+	const { height: viewportHeight, width: viewportWidth } =
+		useWindowDimensions();
+
+	const measurement = useHostMeasurement({
+		capturesScroll,
+		enabled: activeBoundaryHosts.length > 0,
+		hostKey,
+		screenKey,
+	});
+
+	useLayoutEffect(() => {
+		registerHost({
+			capturesScroll,
+			fallback,
+			hostKey,
+			screenKey,
+		});
+
+		return () => {
+			unregisterHost(screenKey, hostKey);
+		};
+	}, [capturesScroll, fallback, hostKey, screenKey]);
+
+	const boundaryHosts = measurement.canRenderHosts
+		? activeBoundaryHosts.map((host) => (
+				<View
+					key={host.boundaryId}
+					pointerEvents="box-none"
+					style={[
+						styles.boundaryHostViewport,
+						{ width: viewportWidth, height: viewportHeight },
+					]}
+				>
+					<PortalBoundaryHost host={host} style={StyleSheet.absoluteFill} />
+				</View>
+			))
+		: null;
+
+	return (
+		<Animated.View
+			ref={measurement.hostRef}
+			pointerEvents="box-none"
+			style={[
+				styles.host,
+				{ width: viewportWidth, height: viewportHeight },
+				style,
+			]}
+			collapsable={false}
+		>
+			{boundaryHosts}
+		</Animated.View>
+	);
+}
+
+export const Host = memo(function Host(props: PublicHostProps) {
+	return <HostImpl {...props} />;
+});
+
+export const ScreenFallbackHost = memo(function ScreenFallbackHost() {
+	return <HostImpl fallback />;
+});
+
+const styles = StyleSheet.create({
+	host: {
+		elevation: 999999,
+		left: 0,
+		overflow: "visible",
+		position: "absolute",
+		top: 0,
+		zIndex: 999999,
+	},
+	boundaryHostViewport: {
+		left: 0,
+		overflow: "visible",
+		position: "absolute",
+		top: 0,
+	},
+});

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

@@ -0,0 +1,90 @@
+import { memo } from "react";
+import type { StyleProp, ViewStyle } from "react-native";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { PortalHost as NativePortalHost } from "react-native-teleport";
+import { NO_STYLES } from "../../../../constants";
+import { AnimationStore } from "../../../../stores/animation.store";
+import { getSourceScreenKeyFromPairKey } from "../../../../stores/bounds/helpers/link-pairs.helpers";
+import { getLink } from "../../../../stores/bounds/internals/links";
+import { GestureStore } from "../../../../stores/gesture.store";
+import { ScrollStore } from "../../../../stores/scroll.store";
+import type { ActivePortalBoundaryHost } from "../stores/portal-boundary-host.store";
+import { createPortalBoundaryHostName } from "../utils/naming";
+import {
+	type PortalOffsetPlacement,
+	resolvePortalOffsetStyle,
+} from "../utils/offset-style";
+
+const AnimatedPortalBoundaryHost =
+	Animated.createAnimatedComponent(NativePortalHost);
+
+type PortalBoundaryHostProps = {
+	host: ActivePortalBoundaryHost;
+	style?: StyleProp<ViewStyle>;
+};
+
+export const PortalBoundaryHost = memo(function PortalBoundaryHost({
+	host,
+	style,
+}: PortalBoundaryHostProps) {
+	const hostName = createPortalBoundaryHostName(host.hostKey, host.boundaryId);
+	const hostClosing = AnimationStore.getValue(host.screenKey, "closing");
+	const hostProgress = AnimationStore.getValue(
+		host.screenKey,
+		"transitionProgress",
+	);
+	const hostGestureDismissing = GestureStore.getValue(
+		host.screenKey,
+		"dismissing",
+	);
+	const hostScrollMetadata = ScrollStore.getValue(host.screenKey, "metadata");
+	const sourceScrollMetadata = ScrollStore.getValue(
+		getSourceScreenKeyFromPairKey(host.pairKey),
+		"metadata",
+	);
+	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 || !link.destination) {
+			return NO_STYLES;
+		}
+
+		// Make the coordinate case explicit before resolving the host offset.
+		// The resolver owns the math; this component decides which screen/scroll
+		// relationship the active portal is in.
+		const isCrossScreenPortal = link.source.screenKey !== host.screenKey;
+		const isHostClosing =
+			hostClosing.get() === 1 || hostGestureDismissing.get() === 1;
+		const placement: PortalOffsetPlacement = !isCrossScreenPortal
+			? "same-screen"
+			: isHostClosing
+				? "cross-screen-close"
+				: "cross-screen-open";
+
+		// A source that originated inside its own scroll host moves with that
+		// ScrollView while this portal stays attached over here. Shifting the
+		// source rect by the clamped source scroll travel keeps the return
+		// landing point on the live placeholder, so the close detach is seamless.
+		const trackSourceScroll =
+			isCrossScreenPortal && link.source.sourceHost?.capturesScroll === true;
+
+		return resolvePortalOffsetStyle({
+			bounds: link.source.bounds,
+			hostCurrentScroll:
+				placement === "cross-screen-close" ? hostScrollMetadata.get() : null,
+			hostKey: host.hostKey,
+			placement,
+			sourceCurrentScroll: trackSourceScroll
+				? sourceScrollMetadata.get()
+				: null,
+			hostProgress: hostProgress.get(),
+			trackSourceScroll,
+		});
+	});
+
+	return (
+		<AnimatedPortalBoundaryHost name={hostName} style={[style, hostStyle]} />
+	);
+});

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

@@ -0,0 +1,10 @@
+import { memo } from "react";
+import { PortalProvider as NativePortalProvider } from "react-native-teleport";
+
+export const PortalProvider = memo(function PortalProvider({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return <NativePortalProvider>{children}</NativePortalProvider>;
+});