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

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

@@ -1,224 +0,0 @@
-import { useCallback, useLayoutEffect } from "react";
-import {
-	cancelAnimation,
-	runOnUI,
-	useAnimatedReaction,
-	useSharedValue,
-	withDelay,
-	withTiming,
-} from "react-native-reanimated";
-import { useDescriptorsStore } from "../../../../providers/screen/descriptors";
-import { AnimationStore } from "../../../../stores/animation.store";
-import { getSourceScreenKeyFromPairKey } from "../../../../stores/bounds/helpers/link-pairs.helpers";
-import { getEntry } from "../../../../stores/bounds/internals/entries";
-import { getLink } from "../../../../stores/bounds/internals/links";
-import { pairs } from "../../../../stores/bounds/internals/state";
-import type { BoundTag } from "../../../../stores/bounds/types";
-import { SystemStore } from "../../../../stores/system.store";
-import { logger } from "../../../../utils/logger";
-import type { MeasureBoundary } from "../../types";
-import { getInitialDestinationMeasurementSignal } from "../../utils/destination-signals";
-
-const HANDSHAKE_RETRY_DELAY_MS = 100;
-/**
- * A destination whose initial handshake never completes must not hold the
- * transition gate forever. After this budget, release the block with a warning
- * so the open proceeds without that boundary.
- */
-const MAX_HANDSHAKE_RETRIES = 20;
-
-interface UseInitialDestinationMeasurementParams {
-	boundTag: BoundTag;
-	enabled: boolean;
-	escapeClipping: boolean;
-	measureBoundary: MeasureBoundary;
-}
-
-export const useInitialDestinationMeasurement = ({
-	boundTag,
-	enabled,
-	escapeClipping,
-	measureBoundary,
-}: UseInitialDestinationMeasurementParams) => {
-	const { tag, linkKey, group } = boundTag;
-	const currentScreenKey = useDescriptorsStore(
-		(s) => s.derivations.currentScreenKey,
-	);
-	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
-	const destinationPairKey = useDescriptorsStore(
-		(s) => s.derivations.destinationPairKey,
-	);
-	const ancestorDestinationPairKey = useDescriptorsStore(
-		(s) => s.derivations.ancestorDestinationPairKey,
-	);
-	const destinationEnabled = enabled && !nextScreenKey;
-	const initialDestinationPairKey =
-		destinationPairKey ?? ancestorDestinationPairKey;
-	const progress = AnimationStore.getValue(
-		currentScreenKey,
-		"transitionProgress",
-	);
-
-	const {
-		actions: { blockLifecycleStart, unblockLifecycleStart },
-	} = SystemStore.getBag(currentScreenKey);
-
-	const isBlockingLifecycleStart = useSharedValue(0);
-	const retryToken = useSharedValue(0);
-	const handshakeRetries = useSharedValue(0);
-	const hasGivenUp = useSharedValue(0);
-
-	const releaseLifecycleStartBlock = useCallback(() => {
-		"worklet";
-		cancelAnimation(retryToken);
-
-		if (!isBlockingLifecycleStart.get()) {
-			return;
-		}
-
-		isBlockingLifecycleStart.set(0);
-		unblockLifecycleStart();
-	}, [isBlockingLifecycleStart, retryToken, unblockLifecycleStart]);
-
-	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;
-		}
-
-		blockLifecycleStart();
-		isBlockingLifecycleStart.set(1);
-	}, [blockLifecycleStart, isBlockingLifecycleStart, progress]);
-
-	useLayoutEffect(() => {
-		if (!destinationEnabled || !initialDestinationPairKey) {
-			return;
-		}
-
-		runOnUI(claimLifecycleStartBlock)();
-
-		return () => {
-			if (escapeClipping) {
-				// The portal host owns the release after this boundary hands off.
-				return;
-			}
-
-			// This is an abandonment fallback, not a second release. Run it on the UI
-			// runtime so it serializes with the handshake's guarded release.
-			runOnUI(releaseLifecycleStartBlock)();
-		};
-	}, [
-		claimLifecycleStartBlock,
-		destinationEnabled,
-		escapeClipping,
-		initialDestinationPairKey,
-		releaseLifecycleStartBlock,
-	]);
-
-	useAnimatedReaction(
-		() => {
-			"worklet";
-			const retryTick = retryToken.get();
-			const isWaitingForOpenToStart = progress.get() <= 0;
-			const sourceScreenKey = initialDestinationPairKey
-				? getSourceScreenKeyFromPairKey(initialDestinationPairKey)
-				: undefined;
-			const signal = getInitialDestinationMeasurementSignal({
-				enabled:
-					destinationEnabled &&
-					isWaitingForOpenToStart &&
-					isBlockingLifecycleStart.get() > 0,
-				destinationPairKey,
-				ancestorDestinationPairKey,
-				linkId: linkKey,
-				group,
-				destinationPresent: getEntry(tag, currentScreenKey) !== null,
-				sourcePresent:
-					sourceScreenKey !== undefined &&
-					getEntry(tag, sourceScreenKey) !== null,
-				linkState: initialDestinationPairKey ? pairs.get() : undefined,
-			});
-
-			return [
-				signal?.pairKey ?? null,
-				signal?.action ?? null,
-				retryTick,
-			] as const;
-		},
-		([measurePairKey, action, retryTick], previous) => {
-			"worklet";
-			if (!measurePairKey || !action) {
-				return;
-			}
-
-			const previousMeasurePairKey = previous?.[0];
-			const previousAction = previous?.[1];
-			const previousRetryTick = previous?.[2];
-			const shouldHandleSignal =
-				measurePairKey !== previousMeasurePairKey ||
-				action !== previousAction ||
-				retryTick !== previousRetryTick;
-
-			if (!shouldHandleSignal) {
-				return;
-			}
-
-			if (hasGivenUp.get()) {
-				return;
-			}
-
-			if (action === "release") {
-				releaseLifecycleStartBlock();
-				handshakeRetries.set(0);
-				return;
-			}
-
-			if (action === "measure") {
-				measureBoundary({
-					type: "destination",
-					pairKey: measurePairKey,
-				});
-			}
-
-			const link = getLink(measurePairKey, linkKey);
-			const linkComplete = !!link?.source && !!link.destination;
-
-			if (linkComplete || action === "complete") {
-				cancelAnimation(retryToken);
-				handshakeRetries.set(0);
-				if (escapeClipping) {
-					// Screen-level escape has a second readiness phase after destination
-					// matching: the host must commit before the transition starts, or
-					// the payload can disappear for a frame.
-					return;
-				}
-				releaseLifecycleStartBlock();
-				return;
-			}
-
-			if (handshakeRetries.get() >= MAX_HANDSHAKE_RETRIES) {
-				hasGivenUp.set(1);
-				releaseLifecycleStartBlock();
-				logger.warn(
-					`Boundary "${linkKey}" never formed a complete source/destination link after ${MAX_HANDSHAKE_RETRIES} attempts; releasing the transition gate without it. One side is likely off-viewport or unmounted.`,
-				);
-				return;
-			}
-
-			// Keep the lifecycle blocked while registration, measurement, or source
-			// attachment settles. The retry token also retries rejected destination bounds.
-			handshakeRetries.set(handshakeRetries.get() + 1);
-			cancelAnimation(retryToken);
-			retryToken.set(
-				withDelay(
-					HANDSHAKE_RETRY_DELAY_MS,
-					withTiming(retryToken.get() + 1, { duration: 0 }),
-				),
-			);
-		},
-	);
-};

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

@@ -1,317 +0,0 @@
-import { useCallback, useLayoutEffect, useState } from "react";
-import {
-	runOnJS,
-	useAnimatedProps,
-	useAnimatedReaction,
-	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 { 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 {
-	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";
-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 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 settledHostWillAnimate = AnimationStore.getValue(
-		settledHostScreenKey ?? currentScreenKey,
-		"willAnimate",
-	);
-	const settledHostClosing = AnimationStore.getValue(
-		settledHostScreenKey ?? currentScreenKey,
-		"closing",
-	);
-	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));
-		},
-		[],
-	);
-
-	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 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,
-					progressAnimating,
-					progressSettled,
-					willAnimate,
-				}),
-				isSettledHostReady: progressSettled === 1 && progressAnimating === 0,
-				pairsState: pairs.get(),
-				settledHostScreenKey,
-				sourcePairKey,
-			});
-		},
-		(signal, previousSignal) => {
-			"worklet";
-			if (shallowEqual(previousSignal, signal)) {
-				return;
-			}
-
-			if (signal.status === "pending") {
-				canSwitchPortalHostImmediately.set(0);
-				return;
-			}
-
-			const hostScreenKey =
-				signal.status === "complete" ? signal.hostScreenKey : null;
-			let previousOwnerPairKey: string | undefined;
-
-			if (previousSignal?.status === "complete") {
-				previousOwnerPairKey = previousSignal.ownerPairKey ?? undefined;
-			}
-
-			const canSwitchImmediately = canSwitchHandoffHostImmediately({
-				hostScreenKey,
-				ownerPairKey:
-					signal.status === "complete" ? signal.ownerPairKey : undefined,
-				previousOwnerPairKey,
-			});
-
-			canSwitchPortalHostImmediately.set(canSwitchImmediately ? 1 : 0);
-
-			if (canSwitchImmediately && hostScreenKey) {
-				const hostName = createBoundaryContentPortalHostName(
-					hostScreenKey,
-					boundaryId,
-				);
-				requestedPortalHostName.set(hostName);
-				visiblePortalHostName.set(hostName);
-			}
-
-			runOnJS(updatePortalOwnership)(
-				signal.hostScreenKey,
-				signal.ownerPairKey,
-				signal.ownerScreenKey ?? undefined,
-			);
-		},
-	);
-
-	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,
-			});
-
-			return {
-				isInterpolatorReady,
-				nextVisibleName,
-				requestedName,
-				shouldTeleport,
-				teleport,
-				visibleName,
-			};
-		},
-		(state, previousState) => {
-			"worklet";
-			if (shallowEqual(previousState, state)) {
-				return;
-			}
-
-			if (state.nextVisibleName !== state.visibleName) {
-				visiblePortalHostName.set(state.nextVisibleName);
-			}
-		},
-	);
-
-	const teleportProps = useAnimatedProps(() => {
-		"worklet";
-
-		const slot = activeSlotsMap.get()[boundaryId];
-		const {
-			pointerEvents: _pointerEvents,
-			teleport,
-			...slotProps
-		} = slot?.props ?? {};
-		const shouldTeleport = shouldAttachBoundaryPortal({
-			enabled,
-			teleport,
-		});
-		const visibleName = visiblePortalHostName.get();
-
-		return {
-			...slotProps,
-			hostName:
-				shouldTeleport && visibleName
-					? visibleName
-					: PORTAL_HOST_NAME_RESET_VALUE,
-		};
-	});
-
-	return {
-		teleportProps,
-		visiblePortalHostName,
-	};
-};

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

@@ -1,79 +0,0 @@
-import {
-	type ComponentProps,
-	type ComponentType,
-	memo,
-	type ReactNode,
-} from "react";
-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";
-
-type NullableHostNamePortalProps = Omit<
-	ComponentProps<NonNullable<typeof TeleportPortal>>,
-	"hostName"
-> & {
-	hostName?: string | null;
-};
-
-const AnimatedNativePortal = TeleportPortal
-	? Animated.createAnimatedComponent(
-			TeleportPortal as ComponentType<NullableHostNamePortalProps>,
-		)
-	: null;
-
-type BoundaryPortalSlotProps = {
-	id: string;
-	children: ReactNode;
-	enabled: boolean;
-	animatedProps: any;
-	placeholderRef?: AnimatedRef<View>;
-};
-
-export const BoundaryPortalSlot = memo(function BoundaryPortalSlot({
-	id,
-	children,
-	enabled,
-	animatedProps,
-	placeholderRef,
-}: BoundaryPortalSlotProps) {
-	const isPortalEnabled = enabled && isTeleportAvailable;
-
-	if (__DEV__ && enabled && !id) {
-		logger.warnOnce(
-			"portal:missing-id",
-			"A boundary portal was rendered without an id; rendering inline.",
-		);
-	}
-
-	const { handleOnLayout, placeholderStyle } = usePlaceholderStyles();
-
-	if (isPortalEnabled && AnimatedNativePortal) {
-		return (
-			<Animated.View
-				ref={placeholderRef}
-				onLayout={({ nativeEvent: { layout } }) =>
-					runOnUI(handleOnLayout)(layout)
-				}
-				style={placeholderStyle}
-				pointerEvents={PORTAL_POINTER_EVENTS}
-				collapsable={false}
-			>
-				<AnimatedNativePortal
-					animatedProps={animatedProps}
-					name={id}
-					pointerEvents={PORTAL_POINTER_EVENTS}
-				>
-					{children}
-				</AnimatedNativePortal>
-			</Animated.View>
-		);
-	}
-
-	return children;
-});