react-native-screen-transitions 4.0.0-alpha.0 → 4.0.0-alpha.10

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";
@@ -28,11 +24,7 @@ const BoundaryPrimitive = forwardRef<View, BoundaryPrimitiveProps>(
 BoundaryPrimitive.displayName = "Transition.Boundary.Primitive";
 
 const BoundaryRoot = createBoundaryComponent(BoundaryPrimitive);
-const BoundaryView = createBoundaryComponent(View);
-const BoundaryTrigger = createBoundaryComponent(Pressable);
 BoundaryRoot.displayName = "Transition.Boundary";
-BoundaryView.displayName = "Transition.Boundary.View";
-BoundaryTrigger.displayName = "Transition.Boundary.Trigger";
 BoundaryTarget.displayName = "Transition.Boundary.Target";
 Host.displayName = "Transition.Boundary.Host";
 
@@ -52,26 +44,18 @@ 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;
 	/**
 	 * Explicit host for clipping-escape placement.
 	 */
 	Host: typeof Host;
-	/**
-	 * @deprecated Use `Transition.Boundary` without `onPress`.
-	 */
-	View: typeof BoundaryView;
-	/**
-	 * @deprecated Use `Transition.Boundary` with `onPress`.
-	 */
-	Trigger: typeof BoundaryTrigger;
 }
 
 export type BoundaryProps = BoundaryComponentProps<BoundaryPrimitiveProps>;
@@ -79,6 +63,4 @@ export type BoundaryProps = BoundaryComponentProps<BoundaryPrimitiveProps>;
 export const Boundary = Object.assign(BoundaryRoot, {
 	Target: BoundaryTarget,
 	Host,
-	View: BoundaryView,
-	Trigger: BoundaryTrigger,
 }) as BoundaryComponent;

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

@@ -46,7 +46,11 @@ export const BoundaryContentPortalHost = memo(
 
 const styles = StyleSheet.create({
 	host: {
-		...StyleSheet.absoluteFillObject,
+		position: "absolute",
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0,
 		overflow: "visible",
 	},
 });

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;
+};

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

@@ -1,318 +1,154 @@
-import { useCallback, useLayoutEffect, useState } from "react";
-import {
-	useAnimatedProps,
-	useAnimatedReaction,
-	useSharedValue,
-} from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
+import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
-import { useScreenSlots } from "../../../../../../providers/screen/styles";
-import { useRegisteredScreenSlots } from "../../../../../../providers/screen/styles/stores/slot-references.store";
+import {
+	useOptionalScreenSlotStore,
+	useScreenSlotStore,
+} from "../../../../../../providers/screen/styles";
+import { hasCloseTransitionFinished } from "../../../../../../providers/screen/styles/helpers/transition-visual-state";
+import { useBlankStackStore } from "../../../../../../providers/stack/blank-stack.provider";
 import { AnimationStore } from "../../../../../../stores/animation.store";
-import { getSourceScreenKeyFromPairKey } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
+import { getLinkKeyFromTag } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
+import { getEntry } from "../../../../../../stores/bounds/internals/entries";
 import { pairs } from "../../../../../../stores/bounds/internals/state";
+import { SystemStore } from "../../../../../../stores/system.store";
 import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
+import { isTeleportEnabled } from "../../../utils/teleport-control";
 import {
-	canSwitchHandoffHostImmediately,
-	isHandoffHostClosingComplete,
-	type PortalOwnershipSignal,
-	resolveBoundaryPortalOwnership,
-} from "../../../utils/ownership";
-import { shallowEqual } from "../../../utils/shallow-equal";
-import { shouldAttachBoundaryPortal } from "../../../utils/teleport-control";
-import { resolveNextVisiblePortalHostName } from "../../../utils/visible-host";
+	resolveActiveHandoffReceiver,
+	resolveHandoffAttachmentCandidate,
+	resolvePreviousHandoffReceiver,
+} from "../helpers/active-handoff-receiver";
 import { createBoundaryContentPortalHostName } from "../helpers/host-name";
 
 interface UseBoundaryContentPortalAttachmentParams {
 	boundaryId: string;
-	enabled: boolean;
 }
 
 export const useBoundaryContentPortalAttachment = ({
 	boundaryId,
-	enabled,
 }: UseBoundaryContentPortalAttachmentParams) => {
-	const ownScreenSlots = useScreenSlots();
-	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
+	const slotsMap = useScreenSlotStore((store) => store.slotsMap);
+
 	const currentScreenKey = useDescriptorsStore(
 		(s) => s.derivations.currentScreenKey,
 	);
-	const [ownership, setOwnership] = useState<Extract<
-		PortalOwnershipSignal,
-		{ status: "complete" }
-	> | null>(null);
-
-	const styleOwnerScreenKey = ownership?.ownerScreenKey ?? currentScreenKey;
-	const ownerScreenSlots = useRegisteredScreenSlots(styleOwnerScreenKey);
-	const activeScreenSlots = ownerScreenSlots ?? ownScreenSlots;
-	const {
-		nextInterpolatorReady: activeNextInterpolatorReady,
-		slotsMap: activeSlotsMap,
-	} = activeScreenSlots;
-	const requestedPortalHostName = useSharedValue<string | null>(null);
-	const visiblePortalHostName = useSharedValue<string | null>(null);
-	const canSwitchPortalHostImmediately = useSharedValue(0);
-
-	const targetScreenKey = ownership ? ownership.hostScreenKey : null;
-	const settledHostScreenKey = ownership?.hostScreenKey ?? null;
-	const settledHostProgress = AnimationStore.getValue(
-		settledHostScreenKey ?? currentScreenKey,
-		"progressSettled",
-	);
-	const settledHostAnimating = AnimationStore.getValue(
-		settledHostScreenKey ?? currentScreenKey,
-		"progressAnimating",
+	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
+	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
+	const destinationSlots = useOptionalScreenSlotStore(
+		nextScreenKey ?? currentScreenKey,
 	);
-	const settledHostWillAnimate = AnimationStore.getValue(
-		settledHostScreenKey ?? currentScreenKey,
-		"willAnimate",
+	const unavailableInterpolatorReady = useSharedValue(0);
+	const interpolatorReady =
+		destinationSlots?.interpolatorReady ?? unavailableInterpolatorReady;
+
+	const activeReceiverScreenKey = useBlankStackStore(
+		resolveActiveHandoffReceiver,
 	);
-	const settledHostClosing = AnimationStore.getValue(
-		settledHostScreenKey ?? currentScreenKey,
-		"closing",
+	const previousReceiverScreenKey = useBlankStackStore(
+		resolvePreviousHandoffReceiver,
 	);
-	const handoffHostName =
-		targetScreenKey !== null
-			? createBoundaryContentPortalHostName(targetScreenKey, boundaryId)
-			: null;
-
-	const updatePortalOwnership = useCallback(
-		(
-			hostScreenKey: string | null,
-			ownerPairKey?: string,
-			ownerScreenKey?: string,
-		) => {
-			if (hostScreenKey && ownerPairKey && ownerScreenKey) {
-				setOwnership((current) => {
-					if (
-						current?.hostScreenKey === hostScreenKey &&
-						current.ownerPairKey === ownerPairKey &&
-						current.ownerScreenKey === ownerScreenKey
-					) {
-						return current;
-					}
 
-					return {
-						hostScreenKey,
-						ownerPairKey,
-						ownerScreenKey,
-						status: "complete",
-					};
-				});
-				return;
-			}
-
-			setOwnership((current) => (current ? null : current));
-		},
-		[],
+	const activeReceiverAnimationProgress = SystemStore.getValue(
+		activeReceiverScreenKey ?? currentScreenKey,
+		"animationProgress",
 	);
 
-	useLayoutEffect(() => {
-		if (!enabled || !ownership || !handoffHostName) {
-			requestedPortalHostName.set(null);
-			visiblePortalHostName.set(null);
-			return;
-		}
-
-		requestedPortalHostName.set(handoffHostName);
-	}, [
-		enabled,
-		handoffHostName,
-		ownership,
-		requestedPortalHostName,
-		visiblePortalHostName,
-	]);
-
-	useLayoutEffect(() => {
-		return () => {
-			requestedPortalHostName.set(null);
-			visiblePortalHostName.set(null);
-		};
-	}, [requestedPortalHostName, visiblePortalHostName]);
-
-	useAnimatedReaction(
-		() => {
-			"worklet";
-			if (!enabled) {
-				return {
-					hostScreenKey: null,
-					ownerPairKey: sourcePairKey,
-					ownerScreenKey: null,
-					status: "clear",
-				};
-			}
-
-			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 activeReceiverClosing = AnimationStore.getValue(
+		activeReceiverScreenKey ?? currentScreenKey,
+		"closing",
+	);
 
-				const sourceScreenKey = getSourceScreenKeyFromPairKey(
-					ownership.ownerPairKey,
-				);
+	const attachedReceiverScreenKey = useSharedValue(currentScreenKey);
+	const sourcePairBeforeClose = useSharedValue<string | null>(null);
 
-				return {
-					hostScreenKey: sourceScreenKey,
-					ownerPairKey: ownership.ownerPairKey,
-					ownerScreenKey: sourceScreenKey,
-					status: "complete",
-				};
-			}
+	const teleportProps = useAnimatedProps(() => {
+		"worklet";
 
-			if (!sourcePairKey) {
-				return {
-					hostScreenKey: null,
-					ownerPairKey: sourcePairKey,
-					ownerScreenKey: null,
-					status: "clear",
-				};
-			}
+		const slot = slotsMap.get()[boundaryId];
+		const {
+			pointerEvents: _pointerEvents,
+			teleport,
+			...slotProps
+		} = slot?.props ?? {};
 
-			return resolveBoundaryPortalOwnership({
-				boundaryId,
-				currentScreenKey,
-				handoff: true,
-				isSettledHostClosingComplete: isHandoffHostClosingComplete({
-					closing,
-					progressAnimating,
-					progressSettled,
-					willAnimate,
-				}),
-				isSettledHostReady: progressSettled === 1 && progressAnimating === 0,
-				pairsState: pairs.get(),
-				settledHostScreenKey,
-				sourcePairKey,
-			});
-		},
-		(signal, previousSignal) => {
-			"worklet";
-			if (shallowEqual(previousSignal, signal)) {
-				return;
-			}
+		const shouldTeleport = isTeleportEnabled(teleport);
+		const closing = activeReceiverClosing.get();
+		const animationProgress = activeReceiverAnimationProgress.get();
 
-			if (signal.status === "pending") {
-				canSwitchPortalHostImmediately.set(0);
-				return;
-			}
+		if (!closing) {
+			sourcePairBeforeClose.set(sourcePairKey ?? null);
+		}
 
-			const hostScreenKey =
-				signal.status === "complete" ? signal.hostScreenKey : null;
-			let previousOwnerPairKey: string | undefined;
+		const pairChangedDuringClose =
+			!!closing &&
+			!!sourcePairKey &&
+			sourcePairKey !== sourcePairBeforeClose.get();
 
-			if (previousSignal?.status === "complete") {
-				previousOwnerPairKey = previousSignal.ownerPairKey ?? undefined;
-			}
+		const hasActiveCloseFinished = hasCloseTransitionFinished({
+			closing,
+			animationProgress,
+		});
 
-			const canSwitchImmediately = canSwitchHandoffHostImmediately({
-				hostScreenKey,
-				ownerPairKey:
-					signal.status === "complete" ? signal.ownerPairKey : undefined,
-				previousOwnerPairKey,
-			});
+		const pair = sourcePairKey ? pairs.get()[sourcePairKey] : null;
+		const link = pair?.links[getLinkKeyFromTag(boundaryId)];
+
+		const pairDestination =
+			link?.status === "complete" &&
+			(!link.group ||
+				pair?.groups[link.group]?.activeId === getLinkKeyFromTag(boundaryId))
+				? link.destination.screenKey
+				: null;
+
+		const isInterpolatorReady = interpolatorReady.get();
+		const attachedScreenKey = attachedReceiverScreenKey.get();
+
+		const nextReceiverScreenKey = resolveHandoffAttachmentCandidate({
+			activeReceiverClosing: !!closing,
+			activeReceiverScreenKey,
+			attachedReceiverScreenKey: attachedScreenKey,
+			hasActiveCloseFinished,
+			interpolatorReady: !!isInterpolatorReady,
+			pairChangedDuringClose,
+			pairDestinationScreenKey: pairDestination,
+			previousReceiverScreenKey,
+		});
 
-			canSwitchPortalHostImmediately.set(canSwitchImmediately ? 1 : 0);
+		const receiverEntry = nextReceiverScreenKey
+			? getEntry(boundaryId, nextReceiverScreenKey)
+			: null;
 
-			if (canSwitchImmediately && hostScreenKey) {
-				const hostName = createBoundaryContentPortalHostName(
-					hostScreenKey,
-					boundaryId,
-				);
-				requestedPortalHostName.set(hostName);
-				visiblePortalHostName.set(hostName);
-			}
+		const receiverReady = receiverEntry?.handoff === true;
 
-			scheduleOnRN(
-				updatePortalOwnership,
-				signal.hostScreenKey,
-				signal.ownerPairKey,
-				signal.ownerScreenKey ?? undefined,
-			);
-		},
-	);
+		const returningFromActiveClose =
+			hasActiveCloseFinished && attachedScreenKey === activeReceiverScreenKey;
 
-	useAnimatedReaction(
-		() => {
-			"worklet";
-			const slot = activeSlotsMap.get()[boundaryId];
-			const teleport = slot?.props?.teleport;
-			const shouldTeleport = shouldAttachBoundaryPortal({
-				enabled,
-				teleport,
-			});
-			const requestedName = requestedPortalHostName.get();
-			const visibleName = visiblePortalHostName.get();
-			const isInterpolatorReady = activeNextInterpolatorReady.get();
-			const nextVisibleName = resolveNextVisiblePortalHostName({
-				canSwitchImmediately: canSwitchPortalHostImmediately.get() === 1,
-				isInterpolatorReady: isInterpolatorReady === 1,
-				requestedName,
-				shouldTeleport,
-				visibleName,
-			});
+		const activatingPairDestination =
+			!!pairDestination &&
+			!!isInterpolatorReady &&
+			nextReceiverScreenKey === pairDestination;
 
-			return {
-				isInterpolatorReady,
-				nextVisibleName,
-				requestedName,
-				shouldTeleport,
-				teleport,
-				visibleName,
-			};
-		},
-		(state, previousState) => {
-			"worklet";
-			if (shallowEqual(previousState, state)) {
-				return;
-			}
+		const canActivateReceiver =
+			returningFromActiveClose ||
+			activatingPairDestination ||
+			animationProgress > 0;
 
-			if (state.nextVisibleName !== state.visibleName) {
-				visiblePortalHostName.set(state.nextVisibleName);
-			}
-		},
-	);
+		if (nextReceiverScreenKey && receiverReady && canActivateReceiver) {
+			attachedReceiverScreenKey.set(nextReceiverScreenKey);
+		}
 
-	const teleportProps = useAnimatedProps(() => {
-		"worklet";
+		const targetScreenKey = shouldTeleport
+			? attachedReceiverScreenKey.get()
+			: null;
 
-		const slot = activeSlotsMap.get()[boundaryId];
-		const {
-			pointerEvents: _pointerEvents,
-			teleport,
-			...slotProps
-		} = slot?.props ?? {};
-		const shouldTeleport = shouldAttachBoundaryPortal({
-			enabled,
-			teleport,
-		});
-		const visibleName = visiblePortalHostName.get();
+		const targetHostName = targetScreenKey
+			? createBoundaryContentPortalHostName(targetScreenKey, boundaryId)
+			: PORTAL_HOST_NAME_RESET_VALUE;
 
 		return {
 			...slotProps,
-			hostName:
-				shouldTeleport && visibleName
-					? visibleName
-					: PORTAL_HOST_NAME_RESET_VALUE,
+			hostName: targetHostName,
 		};
 	});
 
-	return {
-		teleportProps,
-		visiblePortalHostName,
-	};
+	return { teleportProps };
 };

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

@@ -33,30 +33,49 @@ const AnimatedNativePortal = NativePortal
 			NativePortal as ComponentType<NullableHostNamePortalProps>,
 		)
 	: null;
+const EnabledNativePortal = AnimatedNativePortal as NonNullable<
+	typeof AnimatedNativePortal
+>;
 
 export const BoundaryContentPortal = memo(function BoundaryContentPortal({
 	boundaryId,
 	children,
 	enabled,
 }: BoundaryContentPortalProps) {
-	const shouldEnablePortal = enabled && boundaryId !== undefined;
-	const { teleportProps } = useBoundaryContentPortalAttachment({
-		boundaryId: boundaryId ?? "",
-		enabled: shouldEnablePortal,
-	});
+	if (
+		!enabled ||
+		boundaryId === undefined ||
+		!isTeleportAvailable ||
+		!AnimatedNativePortal
+	) {
+		return children;
+	}
+
+	return (
+		<EnabledBoundaryContentPortal boundaryId={boundaryId}>
+			{children}
+		</EnabledBoundaryContentPortal>
+	);
+});
+
+const EnabledBoundaryContentPortal = memo(
+	function EnabledBoundaryContentPortal({
+		boundaryId,
+		children,
+	}: Omit<BoundaryContentPortalProps, "enabled"> & { boundaryId: string }) {
+		const { teleportProps } = useBoundaryContentPortalAttachment({
+			boundaryId,
+		});
 
-	if (shouldEnablePortal && isTeleportAvailable && AnimatedNativePortal) {
 		return (
-			<AnimatedNativePortal
+			<EnabledNativePortal
 				animatedProps={teleportProps}
 				name={boundaryId}
 				pointerEvents={PORTAL_POINTER_EVENTS}
 				style={StyleSheet.absoluteFill}
 			>
 				{children}
-			</AnimatedNativePortal>
+			</EnabledNativePortal>
 		);
-	}
-
-	return children;
-});
+	},
+);