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

package/lib/typescript/shared/utils/bounds/navigation/zoom/targets.d.ts

@@ -0,0 +1,22 @@
+import type { MeasuredDimensions } from "react-native-reanimated";
+import type { BoundsLink, BoundsNavigationZoomOptions } from "../../../../types/bounds.types";
+import type { Layout } from "../../../../types/screen.types";
+import type { BoundsAnchor } from "../../types/options";
+type ZoomContentTarget = Exclude<BoundsNavigationZoomOptions["target"], undefined>;
+export declare function getZoomContentTarget({ explicitTarget, screenLayout, link, }: {
+    explicitTarget: BoundsNavigationZoomOptions["target"];
+    screenLayout: Layout;
+    link: BoundsLink;
+}): ZoomContentTarget;
+export declare function getZoomContentAnchor({ explicitTarget, screenLayout, link, }: {
+    explicitTarget: BoundsNavigationZoomOptions["target"];
+    screenLayout: Layout;
+    link: BoundsLink;
+}): BoundsAnchor;
+export declare function resolveZoomTrackingContentTarget({ contentTarget, link, screenLayout, }: {
+    contentTarget: ZoomContentTarget;
+    link: BoundsLink;
+    screenLayout: Layout;
+}): MeasuredDimensions | undefined;
+export {};
+//# sourceMappingURL=targets.d.ts.map

package/lib/typescript/shared/utils/bounds/navigation/zoom/targets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"targets.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/utils/bounds/navigation/zoom/targets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,KAAK,EACX,UAAU,EACV,2BAA2B,EAC3B,MAAM,gCAAgC,CAAC;AACxC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD,KAAK,iBAAiB,GAAG,OAAO,CAC/B,2BAA2B,CAAC,QAAQ,CAAC,EACrC,SAAS,CACT,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACpC,cAAc,EACd,YAAY,EACZ,IAAI,GACJ,EAAE;IACF,cAAc,EAAE,2BAA2B,CAAC,QAAQ,CAAC,CAAC;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,UAAU,CAAC;CACjB,GAAG,iBAAiB,CAiDpB;AAED,wBAAgB,oBAAoB,CAAC,EACpC,cAAc,EACd,YAAY,EACZ,IAAI,GACJ,EAAE;IACF,cAAc,EAAE,2BAA2B,CAAC,QAAQ,CAAC,CAAC;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,UAAU,CAAC;CACjB,GAAG,YAAY,CAsBf;AAED,wBAAgB,gCAAgC,CAAC,EAChD,aAAa,EACb,IAAI,EACJ,YAAY,GACZ,EAAE;IACF,aAAa,EAAE,iBAAiB,CAAC;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;CACrB,GAAG,kBAAkB,GAAG,SAAS,CAmBjC"}

package/lib/typescript/shared/utils/bounds/navigation/zoom/types.d.ts

@@ -6,7 +6,7 @@ export type ZoomInterpolatedStyle = BoundsNavigationZoomStyle & {
 };
 export type BuildZoomStylesParams = {
     tag?: string;
-    zoomOptions?: BoundsNavigationZoomOptions;
     props: BoundsInterpolationProps;
+    zoomOptions?: BoundsNavigationZoomOptions;
 };
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/shared/utils/bounds/navigation/zoom/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/utils/bounds/navigation/zoom/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,kCAAkC,EAClC,gCAAgC,EAChC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EACX,wBAAwB,EACxB,2BAA2B,EAC3B,yBAAyB,EACzB,MAAM,gCAAgC,CAAC;AAExC,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAAG;IAC/D,CAAC,kCAAkC,CAAC,CAAC,EAAE,yBAAyB,CAAC,OAAO,kCAAkC,CAAC,CAAC;IAC5G,CAAC,gCAAgC,CAAC,CAAC,EAAE,yBAAyB,CAAC,OAAO,gCAAgC,CAAC,CAAC;CACxG,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,2BAA2B,CAAC;IAC1C,KAAK,EAAE,wBAAwB,CAAC;CAChC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/utils/bounds/navigation/zoom/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,kCAAkC,EAClC,gCAAgC,EAChC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EACX,wBAAwB,EACxB,2BAA2B,EAC3B,yBAAyB,EACzB,MAAM,gCAAgC,CAAC;AAExC,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAAG;IAC/D,CAAC,kCAAkC,CAAC,CAAC,EAAE,yBAAyB,CAAC,OAAO,kCAAkC,CAAC,CAAC;IAC5G,CAAC,gCAAgC,CAAC,CAAC,EAAE,yBAAyB,CAAC,OAAO,gCAAgC,CAAC,CAAC;CACxG,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,wBAAwB,CAAC;IAChC,WAAW,CAAC,EAAE,2BAA2B,CAAC;CAC1C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-screen-transitions",
-	"version": "3.9.0-beta.2",
+	"version": "3.9.0",
 	"description": "Easy screen transitions for React Native and Expo",
 	"author": "Ed",
 	"license": "MIT",
@@ -85,7 +85,7 @@
 		"react-native-reanimated": ">=3.16.0 || >=4.0.0-",
 		"react-native-safe-area-context": "*",
 		"react-native-screens": ">=4.4.0",
-		"react-native-teleport": ">=1.1.0 <2.0.0"
+		"react-native-teleport": ">=1.1.0 <1.1.11"
 	},
 	"peerDependenciesMeta": {
 		"react-native-teleport": {

package/src/shared/components/boundary/components/boundary-target.tsx

@@ -8,31 +8,38 @@ import {
 } from "../../../providers/screen/styles";
 import { prepareStyleForBounds } from "../../../utils/bounds/helpers/styles/styles";
 import { useRegisterTarget } from "../hooks/use-register-target";
-import { BoundaryContentPortal } from "../portal/components/boundary-content-portal";
+import {
+	BoundaryContentPortal,
+	BoundaryContentPortalHost,
+} from "../portal/components/boundary-content-portal";
 import { BoundaryPortal } from "../portal/components/boundary-portal";
 import { useBoundaryRootContext } from "../providers/boundary-root.provider";
 
-type BoundaryTargetProps = React.ComponentProps<typeof Animated.View>;
+type BoundaryTargetProps = Omit<
+	React.ComponentProps<typeof Animated.View>,
+	"children"
+> & {
+	children?: React.ReactNode;
+};
 
 export const BoundaryTarget = memo(function BoundaryTarget(
 	props: BoundaryTargetProps,
 ) {
-	const { pointerEvents, style, ...rest } = props;
+	const { children, pointerEvents, style, ...rest } = props;
 	const targetAnimatedRef = useAnimatedRef<View>();
 	const targetEscapePlaceholderRef = useAnimatedRef<View>();
 	const rootContext = useBoundaryRootContext();
 	const boundaryId = rootContext?.boundTag.tag;
 	const isActiveTarget = rootContext?.activeTargetRef === targetAnimatedRef;
 	const portalRuntime = rootContext?.portalRuntime;
-	const portalPointerEvents =
-		typeof pointerEvents === "string" ? pointerEvents : undefined;
+	const handoffEnabled = isActiveTarget && rootContext?.handoffEnabled === true;
 	const shouldEscapeTargetToScreenHost =
 		portalRuntime?.escapeClipping === true && boundaryId !== undefined;
 
 	const shouldApplyAssociatedStyleInline =
-		isActiveTarget && portalRuntime?.enabled !== true;
+		isActiveTarget && portalRuntime?.escapeClipping !== true;
 	const shouldApplyPortalLayoutStyle =
-		isActiveTarget && portalRuntime?.enabled === true;
+		isActiveTarget && portalRuntime?.escapeClipping === true;
 
 	const associatedTargetStyles = useComposedSlotStyles(
 		rootContext?.boundTag.tag,
@@ -52,27 +59,31 @@ export const BoundaryTarget = memo(function BoundaryTarget(
 			boundaryId={boundaryId ?? ""}
 			enabled={shouldEscapeTargetToScreenHost}
 			placeholderRef={targetEscapePlaceholderRef}
-			pointerEvents={portalPointerEvents}
 		>
-			<BoundaryContentPortal
-				boundaryId={boundaryId}
-				enabled={portalRuntime?.handoff === true}
-				pointerEvents={portalPointerEvents}
+			<Animated.View
+				{...rest}
+				pointerEvents={pointerEvents}
+				ref={targetAnimatedRef}
+				style={[
+					style,
+					shouldApplyAssociatedStyleInline ? associatedTargetStyles : undefined,
+					shouldApplyPortalLayoutStyle ? portalLayoutStyle : undefined,
+				]}
+				collapsable={false}
 			>
-				<Animated.View
-					{...rest}
-					pointerEvents={pointerEvents}
-					ref={targetAnimatedRef}
-					style={[
-						style,
-						shouldApplyAssociatedStyleInline
-							? associatedTargetStyles
-							: undefined,
-						shouldApplyPortalLayoutStyle ? portalLayoutStyle : undefined,
-					]}
-					collapsable={false}
-				/>
-			</BoundaryContentPortal>
+				<BoundaryContentPortalHost
+					boundaryId={boundaryId ?? ""}
+					enabled={handoffEnabled}
+					screenKey={rootContext?.currentScreenKey ?? ""}
+				>
+					<BoundaryContentPortal
+						boundaryId={boundaryId}
+						enabled={handoffEnabled}
+					>
+						{children}
+					</BoundaryContentPortal>
+				</BoundaryContentPortalHost>
+			</Animated.View>
 		</BoundaryPortal>
 	);
 });

package/src/shared/components/boundary/hooks/lifecycles/use-initial-destination-measurement.ts

@@ -80,21 +80,26 @@ export const useInitialDestinationMeasurement = ({
 		unblockLifecycleStart();
 	}, [isBlockingLifecycleStart, retryToken, unblockLifecycleStart]);
 
-	useLayoutEffect(() => {
-		if (
-			!destinationEnabled ||
-			!initialDestinationPairKey ||
-			progress.get() > 0 ||
-			isBlockingLifecycleStart.get()
-		) {
+	const claimLifecycleStartBlock = useCallback(() => {
+		"worklet";
+
+		// The progress check and block claim must share one UI-thread operation.
+		// Otherwise a JS-thread layout effect can observe zero, enqueue the block,
+		// and let the opening animation start before that block reaches the UI thread.
+		if (progress.get() > 0 || isBlockingLifecycleStart.get()) {
 			return;
 		}
 
-		// Boundary layout effects run before the parent screen's open intent. Claim
-		// this boundary's startup block before the transition controller can consume
-		// the request; the UI-thread handshake below releases it once matching is done.
 		blockLifecycleStart();
 		isBlockingLifecycleStart.set(1);
+	}, [blockLifecycleStart, isBlockingLifecycleStart, progress]);
+
+	useLayoutEffect(() => {
+		if (!destinationEnabled || !initialDestinationPairKey) {
+			return;
+		}
+
+		runOnUI(claimLifecycleStartBlock)();
 
 		return () => {
 			if (escapeClipping) {
@@ -107,12 +112,10 @@ export const useInitialDestinationMeasurement = ({
 			runOnUI(releaseLifecycleStartBlock)();
 		};
 	}, [
-		blockLifecycleStart,
+		claimLifecycleStartBlock,
 		destinationEnabled,
 		escapeClipping,
 		initialDestinationPairKey,
-		isBlockingLifecycleStart,
-		progress,
 		releaseLifecycleStartBlock,
 	]);
 

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

@@ -1,7 +1,7 @@
 import { memo, type ReactNode } from "react";
 import { StyleSheet } from "react-native";
 import Animated from "react-native-reanimated";
-import { NativePortalHost } from "../../../teleport";
+import { NativePortalHost, PORTAL_POINTER_EVENTS } from "../../../teleport";
 import { createBoundaryContentPortalHostName } from "../helpers/host-name";
 
 const AnimatedPortalHost = NativePortalHost
@@ -34,7 +34,11 @@ export const BoundaryContentPortalHost = memo(
 		return (
 			<>
 				{children}
-				<AnimatedPortalHost name={portalHostName} style={styles.host} />
+				<AnimatedPortalHost
+					name={portalHostName}
+					pointerEvents={PORTAL_POINTER_EVENTS}
+					style={styles.host}
+				/>
 			</>
 		);
 	},

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

@@ -9,6 +9,7 @@ import { useDescriptorsStore } from "../../../../../../providers/screen/descript
 import { useScreenSlots } from "../../../../../../providers/screen/styles";
 import { useRegisteredScreenSlots } from "../../../../../../providers/screen/styles/stores/slot-references.store";
 import { AnimationStore } from "../../../../../../stores/animation.store";
+import { getSourceScreenKeyFromPairKey } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
 import { pairs } from "../../../../../../stores/bounds/internals/state";
 import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
 import {
@@ -132,7 +133,7 @@ export const useBoundaryContentPortalAttachment = ({
 	useAnimatedReaction(
 		() => {
 			"worklet";
-			if (!enabled || !sourcePairKey) {
+			if (!enabled) {
 				return {
 					hostScreenKey: null,
 					ownerPairKey: sourcePairKey,
@@ -144,13 +145,51 @@ export const useBoundaryContentPortalAttachment = ({
 			const progressAnimating = settledHostAnimating.get();
 			const progressSettled = settledHostProgress.get();
 			const willAnimate = settledHostWillAnimate.get();
+			const closing = settledHostClosing.get();
+			const isOwnedHostClosing =
+				!!closing &&
+				!!ownership &&
+				settledHostScreenKey === ownership.hostScreenKey;
+
+			if (isOwnedHostClosing && ownership) {
+				const isClosingComplete = isHandoffHostClosingComplete({
+					closing,
+					progressAnimating,
+					progressSettled,
+					willAnimate,
+				});
+
+				if (!isClosingComplete) {
+					return ownership;
+				}
+
+				const sourceScreenKey = getSourceScreenKeyFromPairKey(
+					ownership.ownerPairKey,
+				);
+
+				return {
+					hostScreenKey: sourceScreenKey,
+					ownerPairKey: ownership.ownerPairKey,
+					ownerScreenKey: sourceScreenKey,
+					status: "complete",
+				};
+			}
+
+			if (!sourcePairKey) {
+				return {
+					hostScreenKey: null,
+					ownerPairKey: sourcePairKey,
+					ownerScreenKey: null,
+					status: "clear",
+				};
+			}
 
 			return resolveBoundaryPortalOwnership({
 				boundaryId,
 				currentScreenKey,
 				handoff: true,
 				isSettledHostClosingComplete: isHandoffHostClosingComplete({
-					closing: settledHostClosing.get(),
+					closing,
 					progressAnimating,
 					progressSettled,
 					willAnimate,
@@ -251,7 +290,11 @@ export const useBoundaryContentPortalAttachment = ({
 		"worklet";
 
 		const slot = activeSlotsMap.get()[boundaryId];
-		const { teleport, ...slotProps } = slot?.props ?? {};
+		const {
+			pointerEvents: _pointerEvents,
+			teleport,
+			...slotProps
+		} = slot?.props ?? {};
 		const shouldTeleport = shouldAttachBoundaryPortal({
 			enabled,
 			teleport,

package/src/shared/components/boundary/portal/components/boundary-content-portal/index.tsx

@@ -4,9 +4,13 @@ import {
 	memo,
 	type ReactNode,
 } from "react";
-import type { ViewProps } from "react-native";
+import { StyleSheet } from "react-native";
 import Animated from "react-native-reanimated";
-import { isTeleportAvailable, NativePortal } from "../../teleport";
+import {
+	isTeleportAvailable,
+	NativePortal,
+	PORTAL_POINTER_EVENTS,
+} from "../../teleport";
 import { useBoundaryContentPortalAttachment } from "./hooks/use-boundary-content-portal-attachment";
 
 export { BoundaryContentPortalHost } from "./components/host";
@@ -15,7 +19,6 @@ type BoundaryContentPortalProps = {
 	boundaryId?: string;
 	children: ReactNode;
 	enabled: boolean;
-	pointerEvents?: ViewProps["pointerEvents"];
 };
 
 type NullableHostNamePortalProps = Omit<
@@ -35,7 +38,6 @@ export const BoundaryContentPortal = memo(function BoundaryContentPortal({
 	boundaryId,
 	children,
 	enabled,
-	pointerEvents,
 }: BoundaryContentPortalProps) {
 	const shouldEnablePortal = enabled && boundaryId !== undefined;
 	const { teleportProps } = useBoundaryContentPortalAttachment({
@@ -48,7 +50,8 @@ export const BoundaryContentPortal = memo(function BoundaryContentPortal({
 			<AnimatedNativePortal
 				animatedProps={teleportProps}
 				name={boundaryId}
-				pointerEvents={pointerEvents}
+				pointerEvents={PORTAL_POINTER_EVENTS}
+				style={StyleSheet.absoluteFill}
 			>
 				{children}
 			</AnimatedNativePortal>

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

@@ -10,6 +10,7 @@ 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";
 import { useActivePortalBoundaryHosts } from "../stores/portal-boundary-host.store";
@@ -74,7 +75,7 @@ function HostImpl({ fallback = false, style }: HostImplProps) {
 		? activeBoundaryHosts.map((host) => (
 				<View
 					key={host.portalHostName}
-					pointerEvents="none"
+					pointerEvents={PORTAL_POINTER_EVENTS}
 					style={[
 						styles.boundaryHostViewport,
 						{ width: viewportWidth, height: viewportHeight },
@@ -89,7 +90,7 @@ function HostImpl({ fallback = false, style }: HostImplProps) {
 	return (
 		<Animated.View
 			ref={measurement.hostRef}
-			pointerEvents="none"
+			pointerEvents={PORTAL_POINTER_EVENTS}
 			style={[
 				styles.host,
 				{ width: viewportWidth, height: viewportHeight },

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

@@ -11,7 +11,7 @@ import {
 	ScrollStore,
 } from "../../../../../../stores/scroll.store";
 import type { ScrollMeasuredDimensions } from "../../../../utils/measured-bounds";
-import { NativePortalHost } from "../../../teleport";
+import { NativePortalHost, PORTAL_POINTER_EVENTS } from "../../../teleport";
 import { hasLocalSlot } from "../helpers/has-local-slot";
 import { resolvePortalOffsetStyle } from "../helpers/offset-style";
 import type { ActivePortalBoundaryHost } from "../stores/portal-boundary-host.store";
@@ -48,7 +48,7 @@ export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 		// 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) {
+		if (!link?.source) {
 			return NO_STYLES;
 		}
 
@@ -95,7 +95,7 @@ export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 	const contentFrameStyle = useAnimatedStyle(() => {
 		"worklet";
 		const link = getLink(host.pairKey, host.boundaryId);
-		if (!link?.source || !link.destination) {
+		if (!link?.source) {
 			return NO_STYLES;
 		}
 
@@ -142,12 +142,13 @@ export const PortalBoundaryHost = memo(function PortalBoundaryHost({
 
 	return (
 		<Animated.View
-			pointerEvents="none"
+			pointerEvents={PORTAL_POINTER_EVENTS}
 			style={[style, hostStyle]}
 			collapsable={false}
 		>
 			<AnimatedPortalBoundaryHost
 				name={host.portalHostName}
+				pointerEvents={PORTAL_POINTER_EVENTS}
 				style={[styles.content, contentFrameStyle, slotStyle]}
 			/>
 		</Animated.View>

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

@@ -4,11 +4,12 @@ import {
 	memo,
 	type ReactNode,
 } from "react";
-import type { View, ViewProps } from "react-native";
+import type { View } from "react-native";
 import Animated, { type AnimatedRef, runOnUI } from "react-native-reanimated";
 import { logger } from "../../../../../../utils/logger";
 import {
 	isTeleportAvailable,
+	PORTAL_POINTER_EVENTS,
 	NativePortal as TeleportPortal,
 } from "../../../teleport";
 import { usePlaceholderStyles } from "../hooks/use-placeholder-styles";
@@ -31,7 +32,6 @@ type BoundaryPortalSlotProps = {
 	children: ReactNode;
 	enabled: boolean;
 	animatedProps: any;
-	pointerEvents?: ViewProps["pointerEvents"];
 	placeholderRef?: AnimatedRef<View>;
 };
 
@@ -40,7 +40,6 @@ export const BoundaryPortalSlot = memo(function BoundaryPortalSlot({
 	children,
 	enabled,
 	animatedProps,
-	pointerEvents,
 	placeholderRef,
 }: BoundaryPortalSlotProps) {
 	const isPortalEnabled = enabled && isTeleportAvailable;
@@ -62,13 +61,13 @@ export const BoundaryPortalSlot = memo(function BoundaryPortalSlot({
 					runOnUI(handleOnLayout)(layout)
 				}
 				style={placeholderStyle}
-				pointerEvents={pointerEvents}
+				pointerEvents={PORTAL_POINTER_EVENTS}
 				collapsable={false}
 			>
 				<AnimatedNativePortal
 					animatedProps={animatedProps}
 					name={id}
-					pointerEvents={pointerEvents}
+					pointerEvents={PORTAL_POINTER_EVENTS}
 				>
 					{children}
 				</AnimatedNativePortal>

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

@@ -227,7 +227,11 @@ export const useBoundaryPortalAttachment = ({
 		"worklet";
 
 		const slot = slotsMap.get()[boundaryId];
-		const { teleport, ...slotProps } = slot?.props ?? {};
+		const {
+			pointerEvents: _pointerEvents,
+			teleport,
+			...slotProps
+		} = slot?.props ?? {};
 		const shouldTeleport = shouldAttachBoundaryPortal({
 			enabled,
 			teleport,

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

@@ -1,5 +1,5 @@
 import { memo, type ReactNode } from "react";
-import type { View, ViewProps } from "react-native";
+import type { View } from "react-native";
 import type { AnimatedRef } from "react-native-reanimated";
 import { BoundaryPortalSlot } from "./components/portal-slot";
 import { useBoundaryPortalAttachment } from "./hooks/use-boundary-portal-attachment";
@@ -9,7 +9,6 @@ type BoundaryPortalProps = {
 	children: ReactNode;
 	enabled: boolean;
 	placeholderRef?: AnimatedRef<View>;
-	pointerEvents?: ViewProps["pointerEvents"];
 };
 
 export const BoundaryPortal = memo(function BoundaryPortal({
@@ -17,7 +16,6 @@ export const BoundaryPortal = memo(function BoundaryPortal({
 	children,
 	enabled,
 	placeholderRef,
-	pointerEvents,
 }: BoundaryPortalProps) {
 	const { teleportProps } = useBoundaryPortalAttachment({
 		boundaryId,
@@ -30,7 +28,6 @@ export const BoundaryPortal = memo(function BoundaryPortal({
 			enabled={enabled}
 			animatedProps={teleportProps}
 			placeholderRef={placeholderRef}
-			pointerEvents={pointerEvents}
 		>
 			{children}
 		</BoundaryPortalSlot>

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

@@ -39,6 +39,7 @@ const SafeNativePortalProvider: ComponentType<{ children: ReactNode }> | null =
 
 export const isTeleportAvailable =
 	mod !== null && SafeNativePortalProvider !== null;
+export const PORTAL_POINTER_EVENTS = "box-none" as const;
 export const NativePortal: ComponentType<any> | null = mod?.Portal ?? null;
 export const NativePortalProvider: ComponentType<any> | null =
 	SafeNativePortalProvider;

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

@@ -196,7 +196,7 @@ export const resolveBoundaryPortalOwnership = ({
 	const linkKey = getLinkKeyFromTag(boundaryId);
 	const link = getPairLink(pairsState, sourcePairKey, linkKey);
 
-	if (link?.status !== "complete") {
+	if (!link?.source) {
 		return pendingSignal(sourcePairKey);
 	}
 
@@ -220,6 +220,10 @@ export const resolveBoundaryPortalOwnership = ({
 		};
 	}
 
+	if (link.status !== "complete") {
+		return pendingSignal(sourcePairKey);
+	}
+
 	let hostScreenKey = link.destination.screenKey;
 	let ownerPairKey = sourcePairKey;
 	const seenScreenKeys: ScreenKey[] = [

package/src/shared/components/boundary/providers/boundary-root.provider.tsx

@@ -4,6 +4,7 @@ import {
 	useCallback,
 	useImperativeHandle,
 	useMemo,
+	useRef,
 	useState,
 } from "react";
 import type { View } from "react-native";
@@ -59,6 +60,7 @@ export type BoundaryRootRenderState = {
 	attachedStyle: unknown;
 	boundTag: BoundTag;
 	currentScreenKey: string;
+	handoffEnabled: boolean;
 	portalRuntime: BoundaryPortalRuntime;
 	ref: AnimatedRef<View>;
 	rootEscapePlaceholderRef: AnimatedRef<View>;
@@ -96,7 +98,7 @@ export const {
 		id,
 		style,
 	}) => {
-		const boundTag = useMemo(
+		const requestedBoundTag = useMemo(
 			() => createBoundTag(String(id), group),
 			[id, group],
 		);
@@ -108,6 +110,21 @@ export const {
 		const currentScreenKey = useDescriptorsStore(
 			(s) => s.derivations.currentScreenKey,
 		);
+		const currentActivity = useDescriptorsStore(
+			(s) => s.descriptors.current.activity,
+		);
+		const retainedBoundTagRef = useRef(requestedBoundTag);
+		const shouldRetainClosingBoundTag =
+			portalRuntime.handoff && currentActivity === "closing";
+
+		// Navigation can update a retained closing route's params before that
+		// route leaves the stack. Keep its handoff identity stable so the payload
+		// remains attached to the closing destination instead of being orphaned.
+		if (!shouldRetainClosingBoundTag) {
+			retainedBoundTagRef.current = requestedBoundTag;
+		}
+
+		const boundTag = retainedBoundTagRef.current;
 		const hasConfiguredInterpolator = useDescriptorsStore(
 			(s) => s.derivations.hasConfiguredInterpolator,
 		);
@@ -183,6 +200,7 @@ export const {
 
 		const shouldRenderBoundaryRootThroughPortal =
 			shouldEscapeBoundaryRootToScreenHost && !hasActiveTarget;
+		const handoffEnabled = enabled && portalRuntime.handoff;
 		// A nested active target takes the full associated style, so the root keeps
 		// only its stacking context. Root-owned escape-clipping moves the root
 		// through a screen host, so its associated style is applied through the
@@ -204,19 +222,21 @@ export const {
 				activeTargetRef: targetEntry?.ref ?? null,
 				boundTag,
 				currentScreenKey,
+				handoffEnabled,
 				portalRuntime,
 				registerTargetRef,
 				ref: rootRef,
 				rootEscapePlaceholderRef,
 				shouldRenderBoundaryRootThroughPortal,
-				shouldRenderHandoffHost: enabled && portalRuntime.handoff,
+				shouldRenderHandoffHost: handoffEnabled && !hasActiveTarget,
 				unregisterTargetRef,
 			}),
 			[
 				attachedStyle,
 				boundTag,
 				currentScreenKey,
-				enabled,
+				handoffEnabled,
+				hasActiveTarget,
 				portalRuntime,
 				registerTargetRef,
 				rootRef,

package/src/shared/configs/index.ts

@@ -8,12 +8,13 @@ import {
 	SlideFromTop,
 	ZoomIn,
 } from "./presets";
-import { DefaultSnapSpec, DefaultSpec, FlingSpec } from "./specs";
+import { DefaultSnapSpec, DefaultSpec, FlingSpec, Zoom } from "./specs";
 
 export const Specs = {
 	DefaultSpec,
 	DefaultSnapSpec,
 	FlingSpec,
+	Zoom,
 };
 
 export const Presets = {