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

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

@@ -1,19 +1,20 @@
 import { memo } from "react";
-import type { StyleProp, ViewStyle } from "react-native";
+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 { GestureStore } from "../../../../stores/gesture.store";
-import { ScrollStore } from "../../../../stores/scroll.store";
+import {
+	getClampedScrollAxisDelta,
+	ScrollStore,
+} from "../../../../stores/scroll.store";
+import type { ScrollMeasuredDimensions } from "../../utils/measured-bounds";
 import type { ActivePortalBoundaryHost } from "../stores/portal-boundary-host.store";
 import { NativePortalHost } from "../teleport";
-import { createPortalBoundaryHostName } from "../utils/naming";
-import {
-	type PortalOffsetPlacement,
-	resolvePortalOffsetStyle,
-} from "../utils/offset-style";
+import { hasLocalSlot } from "../utils/has-local-slot";
+import { resolvePortalOffsetStyle } from "../utils/offset-style";
 
 const AnimatedPortalBoundaryHost = NativePortalHost
 	? Animated.createAnimatedComponent(NativePortalHost)
@@ -28,21 +29,20 @@ 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");
+	// 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",
+	);
+
 	const hostStyle = useAnimatedStyle(() => {
 		"worklet";
 		// Strict per-member lookup — a fallback member's source rect would
@@ -52,38 +52,87 @@ export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 			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 sourceBounds = link.source.bounds as ScrollMeasuredDimensions;
 		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;
+
+		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: link.source.bounds,
-			hostCurrentScroll:
-				placement === "cross-screen-close" ? hostScrollMetadata.get() : null,
+			bounds: sourceBounds,
 			hostKey: host.hostKey,
-			placement,
-			sourceCurrentScroll: trackSourceScroll
-				? sourceScrollMetadata.get()
-				: null,
-			hostProgress: hostProgress.get(),
-			trackSourceScroll,
+			placement: isCrossScreenPortal ? "cross-screen" : "same-screen",
+			landingShift,
 		});
 	});
+	const contentFrameStyle = useAnimatedStyle(() => {
+		"worklet";
+		const link = getLink(host.pairKey, host.boundaryId);
+		if (!link?.source || !link.destination) {
+			return NO_STYLES;
+		}
+
+		const sourceBounds = link.source.bounds as ScrollMeasuredDimensions;
+
+		return {
+			height: sourceBounds.height,
+			width: sourceBounds.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(
+			slot?.style ?? NO_STYLES,
+			undefined,
+			slot?.boundsLocalTransform,
+		);
+	});
 
 	// Without `react-native-teleport` no portal ever mounts a boundary host, so
 	// this never renders — the guard just narrows the nullable animated host.
@@ -92,6 +141,23 @@ export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 	}
 
 	return (
-		<AnimatedPortalBoundaryHost name={hostName} style={[style, hostStyle]} />
+		<Animated.View
+			pointerEvents="none"
+			style={[style, hostStyle]}
+			collapsable={false}
+		>
+			<AnimatedPortalBoundaryHost
+				name={host.portalHostName}
+				style={[styles.content, contentFrameStyle, slotStyle]}
+			/>
+		</Animated.View>
 	);
 });
+
+const styles = StyleSheet.create({
+	content: {
+		left: 0,
+		position: "absolute",
+		top: 0,
+	},
+});