react-native-screen-transitions 3.11.2 → 3.11.3

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

@@ -1,61 +1,37 @@
-import { useLayoutEffect } from "react";
 import type { View } from "react-native";
 import {
 	cancelAnimation,
+	type MeasuredDimensions,
 	measure,
-	runOnUI,
-	type SharedValue,
 	useAnimatedReaction,
 	useAnimatedRef,
 	useSharedValue,
 	withDelay,
 	withTiming,
 } from "react-native-reanimated";
-import { ScrollStore } from "../../../../../../stores/scroll.store";
-import { getVisibilityBlockOffset } from "../../../../../../utils/visibility-block-offset";
-import {
-	adjustedMeasuredBoundsForOverscrollDeltas,
-	correctMeasuredBoundsForVisibilityGate,
-} from "../../../../utils/measured-bounds";
-import {
-	clearPortalHostBounds,
-	setPortalHostBounds,
-} from "../stores/host-bounds.store";
 
 const HOST_MEASUREMENT_RETRY_DELAY_MS = 16;
 
 type UseHostMeasurementParams = {
-	capturesScroll: boolean;
-	enabled: boolean;
-	hostKey: string;
-	screenKey: string;
-	visibilityBlocked: SharedValue<boolean>;
-	viewportHeight: number;
-	viewportWidth: number;
+	measurementKey: string | null;
 };
 
 export const useHostMeasurement = ({
-	capturesScroll,
-	enabled,
-	hostKey,
-	screenKey,
-	visibilityBlocked,
-	viewportHeight,
-	viewportWidth,
+	measurementKey,
 }: UseHostMeasurementParams) => {
 	const hostRef = useAnimatedRef<View>();
-	const scrollMetadata = ScrollStore.getValue(screenKey, "metadata");
-	const hasMeasuredHost = useSharedValue(false);
+	const hostBounds = useSharedValue<MeasuredDimensions | null>(null);
+	const measuredKey = useSharedValue<string | null>(null);
 	const retryToken = useSharedValue(0);
 
 	useAnimatedReaction(
 		() => {
 			"worklet";
-			if (!enabled) {
+			if (!measurementKey) {
 				return null;
 			}
 
-			return [hasMeasuredHost.get(), retryToken.get()] as const;
+			return [measurementKey, measuredKey.get(), retryToken.get()] as const;
 		},
 		(state) => {
 			"worklet";
@@ -64,9 +40,8 @@ export const useHostMeasurement = ({
 				return;
 			}
 
-			const [hasAlreadyMeasured] = state;
-
-			if (!enabled || hasAlreadyMeasured) {
+			const [requestedKey, completedKey] = state;
+			if (requestedKey === completedKey) {
 				return;
 			}
 
@@ -85,23 +60,7 @@ export const useHostMeasurement = ({
 
 			cancelAnimation(retryToken);
 
-			// A measurement taken mid rubber-band would bake the transient
-			// overscroll displacement into the host frame. Store the at-rest
-			// position instead; clamped scroll deltas share that basis.
-			const currentScroll = scrollMetadata.get();
-			const overscrollNormalized = capturesScroll
-				? adjustedMeasuredBoundsForOverscrollDeltas(measured, currentScroll)
-				: measured;
-
-			const correctedMeasured = correctMeasuredBoundsForVisibilityGate({
-				measured: overscrollNormalized,
-				visibilityBlocked: visibilityBlocked.get(),
-				visibilityBlockOffset: getVisibilityBlockOffset(viewportHeight),
-				viewportWidth,
-				viewportHeight,
-			});
-
-			if (correctedMeasured.width <= 0 || correctedMeasured.height <= 0) {
+			if (measured.width <= 0 || measured.height <= 0) {
 				cancelAnimation(retryToken);
 				retryToken.set(
 					withDelay(
@@ -112,27 +71,21 @@ export const useHostMeasurement = ({
 				return;
 			}
 
-			setPortalHostBounds(hostKey, {
-				x: correctedMeasured.x,
-				y: correctedMeasured.y,
-				width: correctedMeasured.width,
-				height: correctedMeasured.height,
-				pageX: correctedMeasured.pageX,
-				pageY: correctedMeasured.pageY,
-				scroll: capturesScroll ? currentScroll : null,
+			hostBounds.set({
+				x: measured.x,
+				y: measured.y,
+				width: measured.width,
+				height: measured.height,
+				pageX: measured.pageX,
+				pageY: measured.pageY,
 			});
-
-			hasMeasuredHost.set(true);
+			measuredKey.set(requestedKey);
 		},
 	);
 
-	useLayoutEffect(() => {
-		return () => {
-			runOnUI(clearPortalHostBounds)(hostKey);
-		};
-	}, [hostKey]);
-
 	return {
+		hostBounds,
 		hostRef,
+		measuredKey,
 	};
 };

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

@@ -71,6 +71,7 @@ const EnabledBoundaryPortal = memo(function EnabledBoundaryPortal({
 	}
 
 	const { teleportProps } = useBoundaryPortalAttachment({ boundaryId });
+
 	const { handleOnLayout, placeholderStyle } = usePlaceholderStyles();
 
 	return (

package/src/shared/components/boundary/portal/components/boundary-portal/stores/portal-boundary-host.store.ts

@@ -1,14 +1,15 @@
 import { useSyncExternalStore } from "react";
 import type { SharedValue } from "react-native-reanimated";
 import type { NormalizedTransitionInterpolatedStyle } from "../../../../../../types/animation.types";
+import type { BoundaryLocalMeasurementValue } from "../../../../types";
 
 export type ActivePortalBoundaryHost = {
 	boundaryId: string;
 	hostKey: string;
+	localMeasurement: BoundaryLocalMeasurementValue;
 	pairKey: string;
 	portalHostName: string;
 	portalHostReady: SharedValue<boolean>;
-	screenKey: string;
 	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
 };
 
@@ -54,10 +55,10 @@ const isSameHost = (
 	return (
 		a.boundaryId === b.boundaryId &&
 		a.hostKey === b.hostKey &&
+		a.localMeasurement === b.localMeasurement &&
 		a.pairKey === b.pairKey &&
 		a.portalHostName === b.portalHostName &&
 		a.portalHostReady === b.portalHostReady &&
-		a.screenKey === b.screenKey &&
 		a.slotsMap === b.slotsMap
 	);
 };

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

@@ -8,7 +8,7 @@ import {
 } from "react";
 import type { View } from "react-native";
 import type { AnimatedRef } from "react-native-reanimated";
-import { useAnimatedRef } from "react-native-reanimated";
+import { useAnimatedRef, useSharedValue } from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../providers/screen/descriptors";
 import {
 	useComposedSlotStyles,
@@ -19,7 +19,7 @@ import { createBoundTag } from "../../../stores/bounds/helpers/link-pairs.helper
 import type { BoundTag } from "../../../stores/bounds/types";
 import createProvider from "../../../utils/create-provider";
 import { logger } from "../../../utils/logger";
-import { useBoundaryMeasurement } from "../hooks/use-boundary-measurement";
+import { BoundaryLifecycle } from "../components/boundary-lifecycle";
 import {
 	type BoundaryPortalRuntime,
 	resolveBoundaryPortal,
@@ -27,6 +27,8 @@ import {
 import type {
 	BoundaryConfigProps,
 	BoundaryId,
+	BoundaryLocalMeasurement,
+	BoundaryLocalMeasurementValue,
 	BoundaryOwnProps,
 } from "../types";
 
@@ -44,6 +46,7 @@ export type BoundaryRootRenderState = {
 	boundTag: BoundTag;
 	currentScreenKey: string;
 	handoffEnabled: boolean;
+	localMeasurement: BoundaryLocalMeasurementValue;
 	measurementRef: AnimatedRef<View>;
 	portalRuntime: BoundaryPortalRuntime;
 	ref: AnimatedRef<View>;
@@ -96,7 +99,9 @@ export const { BoundaryRootProvider, useBoundaryRootStore } = createProvider(
 			(s) => s.derivations.currentScreenKey,
 		);
 		const isCurrentScreenClosing = useBlankStackStore(
-			(store) => store?.scenesByKey[currentScreenKey]?.activity === "closing",
+			(store) =>
+				portalRuntime.handoff &&
+				store?.scenesByKey[currentScreenKey]?.activity === "closing",
 		);
 		const retainedBoundTagRef = useRef(requestedBoundTag);
 		const shouldRetainClosingBoundTag =
@@ -110,10 +115,6 @@ export const { BoundaryRootProvider, useBoundaryRootStore } = createProvider(
 		}
 
 		const boundTag = retainedBoundTagRef.current;
-		const hasConfiguredInterpolator = useDescriptorsStore(
-			(s) => s.derivations.hasConfiguredInterpolator,
-		);
-		const runtimeEnabled = enabled && hasConfiguredInterpolator;
 		// Associated slot styles attach whenever the boundary is enabled,
 		// independent of whether an interpolator is configured for this transition.
 		const shouldAttachAssociatedStyles = enabled;
@@ -123,6 +124,9 @@ export const { BoundaryRootProvider, useBoundaryRootStore } = createProvider(
 		const associatedStackingStyles = useSlotStackingStyles(boundTag.tag);
 		const rootRef = useAnimatedRef<View>();
 		const measurementRef = useAnimatedRef<View>();
+		const localMeasurement = useSharedValue<BoundaryLocalMeasurement | null>(
+			null,
+		);
 
 		useLayoutEffect(() => {
 			if (__DEV__ && targetCount > 1) {
@@ -137,18 +141,6 @@ export const { BoundaryRootProvider, useBoundaryRootStore } = createProvider(
 
 		useImperativeHandle(forwardedRef, () => rootRef.current as any, [rootRef]);
 
-		useBoundaryMeasurement({
-			boundTag,
-			enabled,
-			runtimeEnabled,
-			currentScreenKey,
-			measuredRef,
-			style: hasTarget ? targetStyle : style,
-			handoff: portalRuntime.handoff,
-			escapeClipping: portalRuntime.escapeClipping,
-			config,
-		});
-
 		const shouldRenderBoundaryRootThroughPortal =
 			shouldEscapeBoundaryRootToScreenHost && !hasTarget;
 		const handoffEnabled = enabled && portalRuntime.handoff;
@@ -173,6 +165,7 @@ export const { BoundaryRootProvider, useBoundaryRootStore } = createProvider(
 				boundTag,
 				currentScreenKey,
 				handoffEnabled,
+				localMeasurement,
 				measurementRef,
 				portalRuntime,
 				ref: rootRef,
@@ -185,6 +178,7 @@ export const { BoundaryRootProvider, useBoundaryRootStore } = createProvider(
 				currentScreenKey,
 				handoffEnabled,
 				hasTarget,
+				localMeasurement,
 				measurementRef,
 				portalRuntime,
 				rootRef,
@@ -194,7 +188,22 @@ export const { BoundaryRootProvider, useBoundaryRootStore } = createProvider(
 
 		return {
 			value,
-			children: children(value),
+			children: (
+				<>
+					{children(value)}
+					<BoundaryLifecycle
+						boundTag={boundTag}
+						config={config}
+						currentScreenKey={currentScreenKey}
+						enabled={enabled}
+						escapeClipping={portalRuntime.escapeClipping}
+						handoff={portalRuntime.handoff}
+						localMeasurement={localMeasurement}
+						measuredRef={measuredRef}
+						style={hasTarget ? targetStyle : style}
+					/>
+				</>
+			),
 		};
 	},
 );

package/src/shared/components/boundary/types.ts

@@ -1,3 +1,4 @@
+import type { MeasuredDimensions, SharedValue } from "react-native-reanimated";
 import type { ScreenPairKey } from "../../stores/bounds/types";
 import type { BoundsOptions } from "../../utils/bounds/types/options";
 
@@ -60,3 +61,11 @@ export type MeasureTarget =
 	  };
 
 export type MeasureBoundary = (target: MeasureTarget) => void;
+
+export type BoundaryLocalMeasurement = {
+	bounds: MeasuredDimensions;
+	pairKey: ScreenPairKey;
+};
+
+export type BoundaryLocalMeasurementValue =
+	SharedValue<BoundaryLocalMeasurement | null>;

package/src/shared/components/boundary/utils/refresh-signals.ts

@@ -34,6 +34,7 @@ export const getRefreshBoundarySignal = (params: {
 	linkId: string;
 	group?: string;
 	shouldRefresh: boolean;
+	settled?: boolean;
 	closing: boolean;
 	linkState?: LinkPairsState;
 }): RefreshBoundarySignal | null => {
@@ -46,13 +47,14 @@ export const getRefreshBoundarySignal = (params: {
 		linkId,
 		group,
 		shouldRefresh,
+		settled = false,
 		closing,
 		linkState,
 	} = params;
 
 	if (!enabled) return null;
 
-	if (!shouldRefresh) {
+	if (!shouldRefresh && (!group || !settled)) {
 		return null;
 	}
 
@@ -95,16 +97,33 @@ export const getRefreshBoundarySignal = (params: {
 	// Source side:
 	// When the activeId changes, trigger a refresh to ensure the source bounds are captured.
 	if (sourcePairKey) {
-		const activeId = linkState?.[sourcePairKey]?.groups?.[group]?.activeId;
+		const pair = linkState?.[sourcePairKey];
+		const groupState = pair?.groups?.[group];
+		const activeId = groupState?.activeId;
 
 		if (activeId !== linkId) {
 			return null;
 		}
 
+		// The opening member is captured by the initial handshake. A settled
+		// refresh is only needed after selection moves to another member.
+		if (
+			!shouldRefresh &&
+			(groupState?.initialId === undefined ||
+				activeId === groupState.initialId ||
+				!!pair?.links?.[linkId]?.source)
+		) {
+			return null;
+		}
+
 		return buildRefreshSignal(
 			"source",
 			sourcePairKey,
-			[group, linkId, closing ? "closing" : "settled"].join("|"),
+			[
+				group,
+				linkId,
+				shouldRefresh ? (closing ? "closing" : "settled") : "retarget",
+			].join("|"),
 		);
 	}
 
@@ -114,8 +133,9 @@ export const getRefreshBoundarySignal = (params: {
 
 	// Destination side:
 	// When the activeId changes, trigger a refresh to ensure the destination bounds are captured.
-	const activeId =
-		linkState?.[refreshDestinationPairKey]?.groups?.[group]?.activeId;
+	const pair = linkState?.[refreshDestinationPairKey];
+	const groupState = pair?.groups?.[group];
+	const activeId = groupState?.activeId;
 
 	// Destination retargeting should only measure a concrete member that already
 	// participates in the pair. Missing members fall back to initialId at resolve.
@@ -123,9 +143,22 @@ export const getRefreshBoundarySignal = (params: {
 		return null;
 	}
 
+	if (
+		!shouldRefresh &&
+		(groupState?.initialId === undefined ||
+			activeId === groupState.initialId ||
+			!!pair?.links?.[linkId]?.destination)
+	) {
+		return null;
+	}
+
 	return buildRefreshSignal(
 		"destination",
 		refreshDestinationPairKey,
-		[group, linkId, closing ? "closing" : "settled"].join("|"),
+		[
+			group,
+			linkId,
+			shouldRefresh ? (closing ? "closing" : "settled") : "retarget",
+		].join("|"),
 	);
 };

package/src/shared/components/screen-container/layers/backdrop.tsx

@@ -1,6 +1,6 @@
 import { type ComponentType, memo, useCallback, useMemo } from "react";
 import { Pressable, StyleSheet } from "react-native";
-import Animated, { runOnUI } from "react-native-reanimated";
+import Animated, { runOnJS, runOnUI } from "react-native-reanimated";
 import { DefaultSnapSpec } from "../../../configs/specs";
 import { useNavigationHelpers } from "../../../hooks/navigation/use-navigation-helpers";
 import { useDescriptorsStore } from "../../../providers/screen/descriptors";
@@ -23,7 +23,7 @@ export const BackdropLayer = memo(function BackdropLayer({
 	backdropBehavior: BackdropBehavior;
 	isBackdropActive: boolean;
 }) {
-	const { dismissScreen } = useNavigationHelpers();
+	const { isRemovePrevented, requestDismiss } = useNavigationHelpers();
 
 	const routeKey = useDescriptorsStore(
 		(store) => store.derivations.currentScreenKey,
@@ -34,9 +34,10 @@ export const BackdropLayer = memo(function BackdropLayer({
 	const rawSnapPoints = useDescriptorsStore(
 		(store) => store.options.snapPoints,
 	);
-	const canDismiss = useDescriptorsStore(
+	const isGestureDismissEnabled = useDescriptorsStore(
 		(store) => store.options.gestureEnabled !== false,
 	);
+	const canDismiss = isGestureDismissEnabled && !isRemovePrevented;
 	const transitionSpec = useDescriptorsStore(
 		(store) => store.options.transitionSpec,
 	);
@@ -56,14 +57,14 @@ export const BackdropLayer = memo(function BackdropLayer({
 
 	const handleBackdropPress = useCallback(() => {
 		if (backdropBehavior === "dismiss") {
-			dismissScreen();
+			requestDismiss();
 			return;
 		}
 
 		if (backdropBehavior === "collapse") {
 			// No snap points → fallback to dismiss
 			if (!rawSnapPoints || rawSnapPoints.length === 0) {
-				dismissScreen();
+				requestDismiss();
 				return;
 			}
 
@@ -108,8 +109,11 @@ export const BackdropLayer = memo(function BackdropLayer({
 					animations,
 					targetProgress,
 					animationProgress,
-					onAnimationFinish: shouldDismiss ? dismissScreen : undefined,
 				});
+
+				if (shouldDismiss) {
+					runOnJS(requestDismiss)();
+				}
 			})();
 		}
 	}, [
@@ -121,7 +125,7 @@ export const BackdropLayer = memo(function BackdropLayer({
 		rawSnapPoints,
 		canDismiss,
 		transitionSpec,
-		dismissScreen,
+		requestDismiss,
 		routeKey,
 	]);
 

package/src/shared/components/screen-lifecycle/hooks/helpers/close-interception-rules.ts

@@ -0,0 +1,64 @@
+interface CloseInterceptionState {
+	enabled: boolean;
+	ownsAction: boolean;
+	ancestorDismissing: boolean;
+	routeIndex: number;
+	focusedIndex: number;
+}
+
+interface NavigationRouteLike {
+	key: string;
+	state?: NavigationStateLike;
+}
+
+interface NavigationStateLike {
+	key?: string;
+	routes: NavigationRouteLike[];
+}
+
+interface NavigationActionLike {
+	source?: unknown;
+	target?: unknown;
+}
+
+const containsRouteKey = (
+	routes: NavigationRouteLike[],
+	routeKey: string,
+): boolean =>
+	routes.some(
+		(route) =>
+			route.key === routeKey ||
+			(route.state ? containsRouteKey(route.state.routes, routeKey) : false),
+	);
+
+export const doesNavigatorOwnCloseAction = ({
+	state,
+	action,
+}: {
+	state: NavigationStateLike;
+	action: NavigationActionLike;
+}): boolean => {
+	if (typeof action.target === "string") {
+		return action.target === state.key;
+	}
+
+	if (typeof action.source === "string") {
+		return containsRouteKey(state.routes, action.source);
+	}
+
+	return true;
+};
+
+/** Only the focused removable route owns a stack close transition. */
+export const shouldInterceptClose = ({
+	enabled,
+	ownsAction,
+	ancestorDismissing,
+	routeIndex,
+	focusedIndex,
+}: CloseInterceptionState) =>
+	enabled &&
+	ownsAction &&
+	!ancestorDismissing &&
+	routeIndex > 0 &&
+	routeIndex === focusedIndex;

package/src/shared/components/screen-lifecycle/hooks/use-close-completion.ts

@@ -0,0 +1,28 @@
+import {
+	runOnJS,
+	type SharedValue,
+	useAnimatedReaction,
+} from "react-native-reanimated";
+
+export const useCloseCompletion = ({
+	closing,
+	animationProgress,
+	onComplete,
+}: {
+	closing: SharedValue<number>;
+	animationProgress: SharedValue<number>;
+	onComplete: () => void;
+}) => {
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			return !!closing.get() && animationProgress.get() <= 0;
+		},
+		(complete, previouslyComplete) => {
+			"worklet";
+			if (complete && !previouslyComplete) {
+				runOnJS(onComplete)();
+			}
+		},
+	);
+};