react-native-screen-transitions 4.0.0-alpha.1 → 4.0.0-alpha.3

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

@@ -1,19 +1,20 @@
 import type React from "react";
-import { memo, useMemo } from "react";
-import type { View } from "react-native";
-import Animated, { useAnimatedRef } from "react-native-reanimated";
+import { memo, useLayoutEffect } from "react";
+import Animated from "react-native-reanimated";
 import {
 	useComposedSlotStyles,
 	useSlotLayoutStyles,
 } from "../../../providers/screen/styles";
-import { prepareStyleForBounds } from "../../../utils/bounds/helpers/styles/styles";
-import { useRegisterTarget } from "../hooks/use-register-target";
+import { logger } from "../../../utils/logger";
 import {
 	BoundaryContentPortal,
 	BoundaryContentPortalHost,
 } from "../portal/components/boundary-content-portal";
 import { BoundaryPortal } from "../portal/components/boundary-portal";
-import { useBoundaryRootContext } from "../providers/boundary-root.provider";
+import {
+	TARGET_OUTSIDE_ROOT_WARNING,
+	useBoundaryRootStore,
+} from "../providers/boundary-root.provider";
 
 type BoundaryTargetProps = Omit<
 	React.ComponentProps<typeof Animated.View>,
@@ -22,19 +23,26 @@ type BoundaryTargetProps = Omit<
 	children?: React.ReactNode;
 };
 
-export const BoundaryTarget = memo(function BoundaryTarget(
-	props: BoundaryTargetProps,
-) {
-	const { children, pointerEvents, style, ...rest } = props;
-	const targetAnimatedRef = useAnimatedRef<View>();
-	const targetEscapePlaceholderRef = useAnimatedRef<View>();
-	const rootContext = useBoundaryRootContext();
+export const BOUNDARY_TARGET_ACTIVE_PROP = "__boundaryTargetActive" as const;
+type InternalBoundaryTargetProps = BoundaryTargetProps & {
+	[BOUNDARY_TARGET_ACTIVE_PROP]?: boolean;
+};
+
+const BoundaryTargetInner = (props: InternalBoundaryTargetProps) => {
+	const {
+		[BOUNDARY_TARGET_ACTIVE_PROP]: active,
+		children,
+		pointerEvents,
+		style,
+		...rest
+	} = props;
+	const rootContext = useBoundaryRootStore();
 	const boundaryId = rootContext?.boundTag.tag;
-	const isActiveTarget = rootContext?.activeTargetRef === targetAnimatedRef;
+	const isActiveTarget = active === true && rootContext !== null;
 	const portalRuntime = rootContext?.portalRuntime;
 	const handoffEnabled = isActiveTarget && rootContext?.handoffEnabled === true;
 	const shouldEscapeTargetToScreenHost =
-		portalRuntime?.escapeClipping === true && boundaryId !== undefined;
+		isActiveTarget && portalRuntime?.escapeClipping === true;
 
 	const shouldApplyAssociatedStyleInline =
 		isActiveTarget && portalRuntime?.escapeClipping !== true;
@@ -46,24 +54,26 @@ export const BoundaryTarget = memo(function BoundaryTarget(
 		style,
 	);
 	const portalLayoutStyle = useSlotLayoutStyles(rootContext?.boundTag.tag);
-	const preparedStyles = useMemo(() => prepareStyleForBounds(style), [style]);
-
-	const measurementRef = shouldEscapeTargetToScreenHost
-		? targetEscapePlaceholderRef
-		: targetAnimatedRef;
+	const measurementRef = isActiveTarget
+		? rootContext.measurementRef
+		: undefined;
 
-	useRegisterTarget({ preparedStyles, measurementRef, targetAnimatedRef });
+	useLayoutEffect(() => {
+		if (__DEV__ && rootContext === null) {
+			logger.warn(TARGET_OUTSIDE_ROOT_WARNING);
+		}
+	}, [rootContext]);
 
 	return (
 		<BoundaryPortal
 			boundaryId={boundaryId ?? ""}
 			enabled={shouldEscapeTargetToScreenHost}
-			placeholderRef={targetEscapePlaceholderRef}
+			placeholderRef={measurementRef}
 		>
 			<Animated.View
 				{...rest}
 				pointerEvents={pointerEvents}
-				ref={targetAnimatedRef}
+				ref={shouldEscapeTargetToScreenHost ? undefined : measurementRef}
 				style={[
 					style,
 					shouldApplyAssociatedStyleInline ? associatedTargetStyles : undefined,
@@ -86,4 +96,8 @@ export const BoundaryTarget = memo(function BoundaryTarget(
 			</Animated.View>
 		</BoundaryPortal>
 	);
-});
+};
+
+export const BoundaryTarget = memo(
+	BoundaryTargetInner,
+) as React.NamedExoticComponent<BoundaryTargetProps>;

package/src/components/boundary/create-boundary-component.tsx

@@ -1,9 +1,20 @@
-import { type ComponentType, forwardRef, memo } from "react";
+import {
+	type ComponentType,
+	cloneElement,
+	forwardRef,
+	memo,
+	useMemo,
+} from "react";
 import Animated from "react-native-reanimated";
+import {
+	BOUNDARY_TARGET_ACTIVE_PROP,
+	BoundaryTarget,
+} from "./components/boundary-target";
 import { BoundaryContentPortalHost } from "./portal/components/boundary-content-portal";
 import { BoundaryPortal } from "./portal/components/boundary-portal";
 import { BoundaryRootProvider } from "./providers/boundary-root.provider";
 import type { BoundaryComponentProps } from "./types";
+import { resolveBoundaryTarget } from "./utils/resolve-boundary-target";
 
 interface CreateBoundaryComponentOptions {
 	alreadyAnimated?: boolean;
@@ -36,6 +47,18 @@ export function createBoundaryComponent<P extends object>(
 			children,
 			...rest
 		} = props as any;
+		const targetResolution = useMemo(() => {
+			return resolveBoundaryTarget(children, {
+				isTarget: (element) => element.type === BoundaryTarget,
+				mapTarget: (element, selected) =>
+					cloneElement(element, {
+						[BOUNDARY_TARGET_ACTIVE_PROP]: selected,
+					} as any),
+			});
+		}, [children]);
+		const targetStyle = (
+			targetResolution.target?.props as { style?: unknown } | undefined
+		)?.style;
 
 		return (
 			<BoundaryRootProvider
@@ -45,14 +68,17 @@ export function createBoundaryComponent<P extends object>(
 				forwardedRef={forwardedRef}
 				group={group}
 				handoff={handoff}
+				hasTarget={targetResolution.target !== null}
 				id={id}
 				style={style}
+				targetCount={targetResolution.targetCount}
+				targetStyle={targetStyle}
 			>
 				{(root) => (
 					<BoundaryPortal
 						boundaryId={root.boundTag.tag}
 						enabled={root.shouldRenderBoundaryRootThroughPortal}
-						placeholderRef={root.rootEscapePlaceholderRef}
+						placeholderRef={root.measurementRef}
 					>
 						<AnimatedComponent
 							{...rest}
@@ -65,7 +91,7 @@ export function createBoundaryComponent<P extends object>(
 								enabled={root.shouldRenderHandoffHost}
 								screenKey={root.currentScreenKey}
 							>
-								{children}
+								{targetResolution.children}
 							</BoundaryContentPortalHost>
 						</AnimatedComponent>
 					</BoundaryPortal>

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

@@ -19,7 +19,9 @@ import { logger } from "../../../../utils/logger";
 import type { MeasureBoundary } from "../../types";
 import { getInitialDestinationMeasurementSignal } from "../../utils/destination-signals";
 
-const HANDSHAKE_RETRY_DELAY_MS = 100;
+// A missed layout should be retried on the next frame. The previous 100 ms
+// interval made each ordinary Android layout miss visibly delay navigation.
+const HANDSHAKE_RETRY_DELAY_MS = 16;
 /**
  * A destination whose initial handshake never completes must not hold the
  * transition gate forever. After this budget, release the block with a warning
@@ -122,25 +124,32 @@ export const useInitialDestinationMeasurement = ({
 	useAnimatedReaction(
 		() => {
 			"worklet";
+
+			if (
+				!destinationEnabled ||
+				!initialDestinationPairKey ||
+				isBlockingLifecycleStart.get() <= 0
+			) {
+				return null;
+			}
+
+			if (progress.get() > 0) {
+				return null;
+			}
+
 			const retryTick = retryToken.get();
-			const isWaitingForOpenToStart = progress.get() <= 0;
-			const sourceScreenKey = initialDestinationPairKey
-				? getSourceScreenKeyFromPairKey(initialDestinationPairKey)
-				: undefined;
+			const sourceScreenKey = getSourceScreenKeyFromPairKey(
+				initialDestinationPairKey,
+			);
 			const signal = getInitialDestinationMeasurementSignal({
-				enabled:
-					destinationEnabled &&
-					isWaitingForOpenToStart &&
-					isBlockingLifecycleStart.get() > 0,
+				enabled: destinationEnabled,
 				destinationPairKey,
 				ancestorDestinationPairKey,
 				linkId: linkKey,
 				group,
 				destinationPresent: getEntry(tag, currentScreenKey) !== null,
-				sourcePresent:
-					sourceScreenKey !== undefined &&
-					getEntry(tag, sourceScreenKey) !== null,
-				linkState: initialDestinationPairKey ? pairs.get() : undefined,
+				sourcePresent: getEntry(tag, sourceScreenKey) !== null,
+				linkState: pairs.get(),
 			});
 
 			return [
@@ -149,8 +158,13 @@ export const useInitialDestinationMeasurement = ({
 				retryTick,
 			] as const;
 		},
-		([measurePairKey, action, retryTick], previous) => {
+		(next, previous) => {
 			"worklet";
+			if (!next) {
+				return;
+			}
+
+			const [measurePairKey, action, retryTick] = next;
 			if (!measurePairKey || !action) {
 				return;
 			}

package/src/components/boundary/hooks/lifecycles/use-refresh-boundary.ts

@@ -37,19 +37,16 @@ export const useRefreshBoundary = ({
 		"willAnimate",
 	);
 	const refreshClosing = AnimationStore.getValue(refreshScreenKey, "closing");
-	const refreshEntering = AnimationStore.getValue(refreshScreenKey, "entering");
-	const refreshAnimating = AnimationStore.getValue(
-		refreshScreenKey,
-		"progressAnimating",
-	);
-	const refreshProgress = AnimationStore.getValue(
-		refreshScreenKey,
-		"transitionProgress",
-	);
 
 	useAnimatedReaction(
 		() => {
 			"worklet";
+
+			const shouldRefresh = enabled && !!refreshWillAnimate.get();
+			if (!shouldRefresh) {
+				return null;
+			}
+
 			return getRefreshBoundarySignal({
 				enabled,
 				currentScreenKey,
@@ -59,11 +56,8 @@ export const useRefreshBoundary = ({
 				nextScreenKey,
 				linkId: linkKey,
 				group,
-				shouldRefresh: !!refreshWillAnimate.get(),
+				shouldRefresh,
 				closing: !!refreshClosing.get(),
-				entering: !!refreshEntering.get(),
-				animating: !!refreshAnimating.get(),
-				progress: refreshProgress.get(),
 				linkState: pairs.get(),
 			});
 		},

package/src/components/boundary/hooks/use-boundary-measurement.ts

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import type { View } from "react-native";
-import type { AnimatedRef, StyleProps } from "react-native-reanimated";
+import type { AnimatedRef } from "react-native-reanimated";
 import type { BoundTag } from "../../../stores/bounds/types";
 import { prepareStyleForBounds } from "../../../utils/bounds/helpers/styles/styles";
 import type { BoundaryConfigProps } from "../types";
@@ -19,9 +19,8 @@ interface UseBoundaryMeasurementParams {
 	currentScreenKey: string;
 	/** Surface to measure: a nested target's placeholder, else the root. */
 	measuredRef: AnimatedRef<View>;
-	/** Root's own style; ignored when a nested target supplies its own. */
+	/** Style belonging to the selected measurement surface. */
 	style?: unknown;
-	targetPreparedStyles?: StyleProps;
 	handoff: boolean;
 	escapeClipping: boolean;
 	config: BoundaryConfigProps;
@@ -39,7 +38,6 @@ export const useBoundaryMeasurement = ({
 	currentScreenKey,
 	measuredRef,
 	style,
-	targetPreparedStyles,
 	handoff,
 	escapeClipping,
 	config,
@@ -50,11 +48,7 @@ export const useBoundaryMeasurement = ({
 		[anchor, scaleMode, target, method],
 	);
 
-	const rootPreparedStyles = useMemo(
-		() => prepareStyleForBounds(style),
-		[style],
-	);
-	const preparedStyles = targetPreparedStyles ?? rootPreparedStyles;
+	const preparedStyles = useMemo(() => prepareStyleForBounds(style), [style]);
 
 	const measureBoundary = useMeasurer({
 		enabled,

package/src/components/boundary/hooks/use-measurer.ts

@@ -1,13 +1,8 @@
 import { useCallback } from "react";
 import type { View } from "react-native";
 import { useWindowDimensions } from "react-native";
-import {
-	type AnimatedRef,
-	measure,
-	type StyleProps,
-} from "react-native-reanimated";
+import type { AnimatedRef, StyleProps } from "react-native-reanimated";
 import { applyMeasuredBoundsWrites } from "../../../providers/helpers/measured-bounds-writes";
-import { useOriginContext } from "../../../providers/screen/origin.provider";
 import { useScreenSlots } from "../../../providers/screen/styles";
 import type { BoundTag } from "../../../stores/bounds/types";
 import { ScrollStore } from "../../../stores/scroll.store";
@@ -16,9 +11,9 @@ import { getVisibilityBlockOffset } from "../../../utils/visibility-block-offset
 import type { MeasureBoundary } from "../types";
 import {
 	attachScrollSnapshotToMeasuredBounds,
+	correctMeasuredBoundsForVisibilityGate,
 	isMeasurementInViewport,
 	measureWithOverscrollAwareness,
-	normalizeMeasuredBoundsWithVisibilityGate,
 } from "../utils/measured-bounds";
 
 interface UseMeasurerParams {
@@ -49,7 +44,6 @@ export const useMeasurer = ({
 		currentScreenKey,
 		"pendingLifecycleStartBlockCount",
 	);
-	const { originRef } = useOriginContext();
 	const { visibilityBlocked } = useScreenSlots();
 
 	return useCallback(
@@ -61,14 +55,12 @@ export const useMeasurer = ({
 				measuredAnimatedRef,
 				scrollState.get(),
 			);
-			const measuredOrigin = measure(originRef);
 
-			if (!measured || !measuredOrigin) return;
+			if (!measured) return;
 
-			const normalizedMeasured = normalizeMeasuredBoundsWithVisibilityGate({
+			const correctedMeasured = correctMeasuredBoundsForVisibilityGate({
 				measured,
-				origin: measuredOrigin,
-				visibilityBlocked: escapeClipping && visibilityBlocked.get(),
+				visibilityBlocked: visibilityBlocked.get(),
 				visibilityBlockOffset: getVisibilityBlockOffset(viewportHeight),
 				viewportWidth,
 				viewportHeight,
@@ -88,7 +80,7 @@ export const useMeasurer = ({
 				target.type !== "destination" ||
 				!shouldGuardDestinationViewport ||
 				isMeasurementInViewport(
-					normalizedMeasured,
+					correctedMeasured,
 					viewportWidth,
 					viewportHeight,
 				);
@@ -96,7 +88,7 @@ export const useMeasurer = ({
 			if (!viewportAllowsDestinationWrite) return;
 
 			const measuredWithScroll = attachScrollSnapshotToMeasuredBounds(
-				normalizedMeasured,
+				correctedMeasured,
 				scrollMetadata.get(),
 			);
 
@@ -125,7 +117,6 @@ export const useMeasurer = ({
 			scrollState,
 			scrollMetadata,
 			pendingLifecycleStartBlockCount,
-			originRef,
 			visibilityBlocked,
 		],
 	);

package/src/components/boundary/index.tsx

@@ -1,10 +1,6 @@
 import { forwardRef } from "react";
-import {
-	Pressable,
-	type PressableProps,
-	View,
-	type ViewProps,
-} from "react-native";
+import { View, type ViewProps } from "react-native";
+import { Pressable, type PressableProps } from "react-native-gesture-handler";
 import { BoundaryTarget } from "./components/boundary-target";
 import { createBoundaryComponent } from "./create-boundary-component";
 import { Host } from "./portal";
@@ -52,12 +48,12 @@ type BoundaryRootComponent = typeof BoundaryRoot;
  *
  * Use:
  * - `Boundary` for passive and pressable shared elements.
- * - `Boundary.Target` to measure a nested descendant instead of the root.
+ * - `Boundary.Target` as a direct child to measure it instead of the root.
  * - `Boundary.Host` to make clipping-escape host placement explicit.
  */
 export interface BoundaryComponent extends BoundaryRootComponent {
 	/**
-	 * Optional nested measurement override inside a boundary root.
+	 * Optional direct-child measurement override inside a boundary root.
 	 */
 	Target: typeof BoundaryTarget;
 	/**

package/src/components/boundary/portal/components/boundary-content-portal/helpers/active-handoff-receiver.ts

@@ -0,0 +1,103 @@
+type ReceiverRoute = {
+	key: string;
+};
+
+type ReceiverScene = {
+	activity: string;
+	route: ReceiverRoute;
+};
+
+type ResolveActiveHandoffReceiverParams = {
+	focusedIndex: number;
+	routes: ReceiverRoute[];
+	scenes: ReceiverScene[];
+};
+
+export const resolveActiveHandoffReceiver = ({
+	focusedIndex,
+	routes,
+	scenes,
+}: ResolveActiveHandoffReceiverParams): string | null => {
+	for (let index = scenes.length - 1; index >= 0; index--) {
+		const scene = scenes[index];
+		if (scene?.activity === "closing") {
+			return scene.route.key;
+		}
+	}
+
+	return routes[focusedIndex]?.key ?? null;
+};
+
+export const resolvePreviousHandoffReceiver = ({
+	focusedIndex,
+	routes,
+	scenes,
+}: ResolveActiveHandoffReceiverParams): string | null => {
+	for (let index = scenes.length - 1; index >= 0; index--) {
+		if (scenes[index]?.activity !== "closing") {
+			continue;
+		}
+
+		for (let previousIndex = index - 1; previousIndex >= 0; previousIndex--) {
+			const previousScene = scenes[previousIndex];
+			if (previousScene?.activity !== "closing") {
+				return previousScene?.route.key ?? null;
+			}
+		}
+	}
+
+	return routes[focusedIndex]?.key ?? null;
+};
+
+export const resolveHandoffAttachmentCandidate = ({
+	activeReceiverClosing,
+	activeReceiverScreenKey,
+	attachedReceiverScreenKey,
+	hasActiveCloseFinished,
+	interpolatorReady,
+	pairChangedDuringClose = false,
+	pairDestinationScreenKey,
+	previousReceiverScreenKey,
+}: {
+	activeReceiverClosing: boolean;
+	activeReceiverScreenKey: string | null;
+	attachedReceiverScreenKey: string;
+	hasActiveCloseFinished: boolean;
+	interpolatorReady: boolean;
+	pairChangedDuringClose?: boolean;
+	pairDestinationScreenKey: string | null;
+	previousReceiverScreenKey: string | null;
+}) => {
+	"worklet";
+
+	if (
+		activeReceiverClosing &&
+		interpolatorReady &&
+		pairDestinationScreenKey &&
+		pairChangedDuringClose
+	) {
+		return pairDestinationScreenKey;
+	}
+
+	if (
+		hasActiveCloseFinished &&
+		attachedReceiverScreenKey === activeReceiverScreenKey
+	) {
+		return previousReceiverScreenKey;
+	}
+
+	if (hasActiveCloseFinished) {
+		return attachedReceiverScreenKey;
+	}
+
+	if (
+		activeReceiverClosing &&
+		attachedReceiverScreenKey !== activeReceiverScreenKey &&
+		interpolatorReady &&
+		pairDestinationScreenKey
+	) {
+		return pairDestinationScreenKey;
+	}
+
+	return activeReceiverScreenKey;
+};