react-native-screen-transitions 4.1.0-alpha.0 → 4.1.0-beta.1

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

@@ -1,98 +0,0 @@
-import { useMemo } from "react";
-import type { View } from "react-native";
-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,
-	BoundaryLocalMeasurementValue,
-} from "../types";
-import { useBoundaryPresence } from "./lifecycles/use-boundary-presence";
-import { useInitialDestinationMeasurement } from "./lifecycles/use-initial-destination-measurement";
-import { useInitialSourceMeasurement } from "./lifecycles/use-initial-source-measurement";
-import { useRefreshBoundary } from "./lifecycles/use-refresh-boundary";
-import { useMeasurer } from "./use-measurer";
-
-interface UseBoundaryMeasurementParams {
-	boundTag: BoundTag;
-	/** Raw `enabled` prop — drives the measurer and the passive-source gate. */
-	enabled: boolean;
-	/** `enabled && hasConfiguredInterpolator` — gates presence + lifecycle. */
-	runtimeEnabled: boolean;
-	currentScreenKey: string;
-	/** Surface to measure: a nested target's placeholder, else the root. */
-	measuredRef: AnimatedRef<View>;
-	/** Style belonging to the selected measurement surface. */
-	style?: unknown;
-	handoff: boolean;
-	escapeClipping: boolean;
-	localMeasurement: BoundaryLocalMeasurementValue;
-	config: BoundaryConfigProps;
-}
-
-/**
- * Owns the full measurement lifecycle for a boundary: builds the measurer,
- * registers presence, runs the initial source/destination + refresh reactions,
- * and keeps the component itself away from the measurer.
- */
-export const useBoundaryMeasurement = ({
-	boundTag,
-	enabled,
-	runtimeEnabled,
-	currentScreenKey,
-	measuredRef,
-	style,
-	handoff,
-	escapeClipping,
-	localMeasurement,
-	config,
-}: UseBoundaryMeasurementParams) => {
-	const { anchor, scaleMode, target, method } = config;
-	const boundaryConfig = useMemo<BoundaryConfigProps>(
-		() => ({ anchor, scaleMode, target, method }),
-		[anchor, scaleMode, target, method],
-	);
-
-	const preparedStyles = useMemo(() => prepareStyleForBounds(style), [style]);
-
-	const measureBoundary = useMeasurer({
-		enabled,
-		boundTag,
-		currentScreenKey,
-		preparedStyles,
-		measuredAnimatedRef: measuredRef,
-		handoff,
-		escapeClipping,
-		localMeasurement,
-	});
-
-	// Presence and source capture must not depend on this screen owning an
-	// interpolator: a nested source can participate in a transition owned by a
-	// different navigator.
-	useBoundaryPresence({
-		enabled,
-		boundTag,
-		currentScreenKey,
-		boundaryConfig,
-		handoff,
-		escapeClipping,
-	});
-
-	useInitialSourceMeasurement({
-		enabled,
-		measureBoundary,
-		boundTag,
-	});
-
-	useInitialDestinationMeasurement({
-		boundTag,
-		enabled: runtimeEnabled,
-		measureBoundary,
-	});
-
-	useRefreshBoundary({
-		enabled: runtimeEnabled,
-		boundTag,
-		measureBoundary,
-	});
-};

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

@@ -1,56 +0,0 @@
-import { memo, type ReactNode } from "react";
-import { StyleSheet } from "react-native";
-import Animated from "react-native-reanimated";
-import { NativePortalHost, PORTAL_POINTER_EVENTS } from "../../../teleport";
-import { createBoundaryContentPortalHostName } from "../helpers/host-name";
-
-const AnimatedPortalHost = NativePortalHost
-	? Animated.createAnimatedComponent(NativePortalHost)
-	: null;
-
-type BoundaryContentPortalHostProps = {
-	boundaryId: string;
-	children: ReactNode;
-	enabled: boolean;
-	screenKey: string;
-};
-
-export const BoundaryContentPortalHost = memo(
-	function BoundaryContentPortalHost({
-		boundaryId,
-		children,
-		enabled,
-		screenKey,
-	}: BoundaryContentPortalHostProps) {
-		if (!enabled || !AnimatedPortalHost) {
-			return <>{children}</>;
-		}
-
-		const portalHostName = createBoundaryContentPortalHostName(
-			screenKey,
-			boundaryId,
-		);
-
-		return (
-			<>
-				{children}
-				<AnimatedPortalHost
-					name={portalHostName}
-					pointerEvents={PORTAL_POINTER_EVENTS}
-					style={styles.host}
-				/>
-			</>
-		);
-	},
-);
-
-const styles = StyleSheet.create({
-	host: {
-		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

@@ -1,192 +0,0 @@
-import type { ScreenPairKey } from "../../../../../../stores/bounds/types";
-import type { BoundaryHandoffTarget } from "../../../../../../types/animation.types";
-
-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,
-	pairHasBoundaryLink,
-	previousReceiverScreenKey,
-}: {
-	activeReceiverClosing: boolean;
-	activeReceiverScreenKey: string | null;
-	attachedReceiverScreenKey: string;
-	hasActiveCloseFinished: boolean;
-	interpolatorReady: boolean;
-	pairChangedDuringClose?: boolean;
-	pairDestinationScreenKey: string | null;
-	pairHasBoundaryLink?: boolean;
-	previousReceiverScreenKey: string | null;
-}) => {
-	"worklet";
-	const currentPairHasBoundaryLink =
-		pairHasBoundaryLink ?? pairDestinationScreenKey !== null;
-
-	if (
-		activeReceiverClosing &&
-		attachedReceiverScreenKey !== activeReceiverScreenKey &&
-		!currentPairHasBoundaryLink
-	) {
-		return attachedReceiverScreenKey;
-	}
-
-	if (
-		activeReceiverClosing &&
-		interpolatorReady &&
-		pairDestinationScreenKey &&
-		pairChangedDuringClose
-	) {
-		return pairDestinationScreenKey;
-	}
-
-	if (
-		activeReceiverClosing &&
-		pairChangedDuringClose &&
-		!currentPairHasBoundaryLink
-	) {
-		return hasActiveCloseFinished
-			? previousReceiverScreenKey
-			: attachedReceiverScreenKey;
-	}
-
-	if (
-		hasActiveCloseFinished &&
-		attachedReceiverScreenKey === activeReceiverScreenKey
-	) {
-		return previousReceiverScreenKey;
-	}
-
-	if (hasActiveCloseFinished) {
-		return attachedReceiverScreenKey;
-	}
-
-	if (
-		activeReceiverClosing &&
-		attachedReceiverScreenKey !== activeReceiverScreenKey &&
-		interpolatorReady &&
-		pairDestinationScreenKey
-	) {
-		return pairDestinationScreenKey;
-	}
-
-	return activeReceiverScreenKey;
-};
-
-export const resolveRequestedHandoffReceiver = ({
-	automaticScreenKey,
-	destinationReady = true,
-	destinationScreenKey,
-	handoffTarget,
-	sourceScreenKey,
-}: {
-	automaticScreenKey: string | null;
-	destinationReady?: boolean;
-	destinationScreenKey: string | null;
-	handoffTarget: BoundaryHandoffTarget | undefined;
-	sourceScreenKey: string | null;
-}) => {
-	"worklet";
-
-	if (handoffTarget === "source") {
-		return sourceScreenKey;
-	}
-
-	if (handoffTarget === "destination") {
-		return destinationReady ? destinationScreenKey : automaticScreenKey;
-	}
-
-	return automaticScreenKey;
-};
-
-export const resolveRequestedHandoffPairKey = ({
-	destinationPairHasCompleteLink,
-	destinationPairKey,
-	handoffTarget,
-	retainedSourcePairHasCompleteLink,
-	retainedSourcePairKey,
-	sourcePairHasCompleteLink,
-	sourcePairKey,
-}: {
-	destinationPairHasCompleteLink: boolean;
-	destinationPairKey: ScreenPairKey | undefined;
-	handoffTarget: BoundaryHandoffTarget | undefined;
-	retainedSourcePairHasCompleteLink: boolean;
-	retainedSourcePairKey: ScreenPairKey | undefined;
-	sourcePairHasCompleteLink: boolean;
-	sourcePairKey: ScreenPairKey | undefined;
-}) => {
-	"worklet";
-
-	if (handoffTarget === "source" || handoffTarget === "destination") {
-		if (sourcePairHasCompleteLink) {
-			return sourcePairKey;
-		}
-
-		if (destinationPairHasCompleteLink) {
-			return destinationPairKey;
-		}
-
-		if (retainedSourcePairHasCompleteLink) {
-			return retainedSourcePairKey;
-		}
-
-		return sourcePairKey ?? destinationPairKey ?? retainedSourcePairKey;
-	}
-
-	return sourcePairKey;
-};

package/src/components/boundary/portal/components/boundary-content-portal/helpers/host-name.ts

@@ -1,9 +0,0 @@
-const BOUNDARY_CONTENT_PORTAL_HOST_NAME_SUFFIX = "-content-portal-host";
-
-export const createBoundaryContentPortalHostName = (
-	screenKey: string,
-	boundaryId: string,
-) => {
-	"worklet";
-	return `${screenKey}-${boundaryId}${BOUNDARY_CONTENT_PORTAL_HOST_NAME_SUFFIX}`;
-};

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

@@ -1,237 +0,0 @@
-import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
-import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
-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 { getLinkKeyFromTag } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
-import { getEntry } from "../../../../../../stores/bounds/internals/entries";
-import {
-	getPairKeyForDestination,
-	getPairKeyForSource,
-} from "../../../../../../stores/bounds/internals/links";
-import { pairs } from "../../../../../../stores/bounds/internals/state";
-import type {
-	LinkPairState,
-	TagLink,
-} from "../../../../../../stores/bounds/types";
-import { SystemStore } from "../../../../../../stores/system.store";
-import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
-import {
-	resolveActiveHandoffReceiver,
-	resolveHandoffAttachmentCandidate,
-	resolvePreviousHandoffReceiver,
-	resolveRequestedHandoffPairKey,
-	resolveRequestedHandoffReceiver,
-} from "../helpers/active-handoff-receiver";
-import { createBoundaryContentPortalHostName } from "../helpers/host-name";
-
-interface UseBoundaryContentPortalAttachmentParams {
-	boundaryId: string;
-}
-
-const isCompleteActiveLink = (
-	pair: LinkPairState | null | undefined,
-	link: TagLink | undefined,
-	boundaryLinkKey: string,
-) => {
-	"worklet";
-
-	return (
-		link?.status === "complete" &&
-		(!link.group || pair?.groups[link.group]?.activeId === boundaryLinkKey)
-	);
-};
-
-export const useBoundaryContentPortalAttachment = ({
-	boundaryId,
-}: UseBoundaryContentPortalAttachmentParams) => {
-	const slotsMap = useScreenSlotStore((store) => store.slotsMap);
-
-	const currentScreenKey = useDescriptorsStore(
-		(s) => s.derivations.currentScreenKey,
-	);
-	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
-	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
-	const destinationPairKey = useDescriptorsStore(
-		(s) => s.derivations.destinationPairKey,
-	);
-	const destinationSlots = useOptionalScreenSlotStore(
-		nextScreenKey ?? currentScreenKey,
-	);
-	const unavailableInterpolatorReady = useSharedValue(0);
-	const interpolatorReady =
-		destinationSlots?.interpolatorReady ?? unavailableInterpolatorReady;
-
-	const activeReceiverScreenKey = useBlankStackStore(
-		resolveActiveHandoffReceiver,
-	);
-	const previousReceiverScreenKey = useBlankStackStore(
-		resolvePreviousHandoffReceiver,
-	);
-
-	const activeReceiverAnimationProgress = SystemStore.getValue(
-		activeReceiverScreenKey ?? currentScreenKey,
-		"animationProgress",
-	);
-
-	const activeReceiverClosing = AnimationStore.getValue(
-		activeReceiverScreenKey ?? currentScreenKey,
-		"closing",
-	);
-
-	const attachedReceiverScreenKey = useSharedValue(currentScreenKey);
-	const sourcePairBeforeClose = useSharedValue<string | null>(null);
-
-	const teleportProps = useAnimatedProps(() => {
-		"worklet";
-
-		const slot = slotsMap.get()[boundaryId];
-		const {
-			pointerEvents: _pointerEvents,
-			handoffTarget,
-			...slotProps
-		} = slot?.props ?? {};
-		const closing = activeReceiverClosing.get();
-		const animationProgress = activeReceiverAnimationProgress.get();
-
-		if (!closing) {
-			sourcePairBeforeClose.set(sourcePairKey ?? null);
-		}
-
-		const pairChangedDuringClose =
-			!!closing &&
-			!!sourcePairKey &&
-			sourcePairKey !== sourcePairBeforeClose.get();
-
-		const hasActiveCloseFinished = hasCloseTransitionFinished({
-			closing,
-			animationProgress,
-		});
-
-		const automaticPair = sourcePairKey ? pairs.get()[sourcePairKey] : null;
-		const boundaryLinkKey = getLinkKeyFromTag(boundaryId);
-		const automaticLink = automaticPair?.links[boundaryLinkKey];
-		const requestedSourcePairKey =
-			getPairKeyForSource(boundaryId, currentScreenKey) ?? sourcePairKey;
-		const requestedSourcePair = requestedSourcePairKey
-			? pairs.get()[requestedSourcePairKey]
-			: null;
-		const requestedSourceLink = requestedSourcePair?.links[boundaryLinkKey];
-
-		const pairDestination =
-			automaticLink?.status === "complete" &&
-			(!automaticLink.group ||
-				automaticPair?.groups[automaticLink.group]?.activeId ===
-					boundaryLinkKey)
-				? automaticLink.destination.screenKey
-				: null;
-		const requestedDestinationPairKey =
-			getPairKeyForDestination(boundaryId, currentScreenKey) ??
-			destinationPairKey;
-		const destinationPair = requestedDestinationPairKey
-			? pairs.get()[requestedDestinationPairKey]
-			: null;
-		const destinationLink = destinationPair?.links[boundaryLinkKey];
-		const retainedSourcePairKey = sourcePairBeforeClose.get() ?? undefined;
-		const retainedSourcePair = retainedSourcePairKey
-			? pairs.get()[retainedSourcePairKey]
-			: null;
-		const retainedSourceLink = retainedSourcePair?.links[boundaryLinkKey];
-		const requestedPairKey = resolveRequestedHandoffPairKey({
-			destinationPairHasCompleteLink: isCompleteActiveLink(
-				destinationPair,
-				destinationLink,
-				boundaryLinkKey,
-			),
-			destinationPairKey: requestedDestinationPairKey,
-			handoffTarget,
-			retainedSourcePairHasCompleteLink: isCompleteActiveLink(
-				retainedSourcePair,
-				retainedSourceLink,
-				boundaryLinkKey,
-			),
-			retainedSourcePairKey,
-			sourcePairHasCompleteLink: isCompleteActiveLink(
-				requestedSourcePair,
-				requestedSourceLink,
-				boundaryLinkKey,
-			),
-			sourcePairKey: requestedSourcePairKey,
-		});
-		const requestedPair = requestedPairKey
-			? pairs.get()[requestedPairKey]
-			: null;
-		const requestedLink = requestedPair?.links[boundaryLinkKey];
-
-		const isInterpolatorReady = interpolatorReady.get();
-		const attachedScreenKey = attachedReceiverScreenKey.get();
-
-		const automaticReceiverScreenKey = resolveHandoffAttachmentCandidate({
-			activeReceiverClosing: !!closing,
-			activeReceiverScreenKey,
-			attachedReceiverScreenKey: attachedScreenKey,
-			hasActiveCloseFinished,
-			interpolatorReady: !!isInterpolatorReady,
-			pairChangedDuringClose,
-			pairDestinationScreenKey: pairDestination,
-			pairHasBoundaryLink: automaticLink !== undefined,
-			previousReceiverScreenKey,
-		});
-		const requestedDestinationScreenKey =
-			requestedLink?.status === "complete"
-				? requestedLink.destination.screenKey
-				: null;
-		const nextReceiverScreenKey = resolveRequestedHandoffReceiver({
-			automaticScreenKey: automaticReceiverScreenKey,
-			destinationReady:
-				requestedDestinationScreenKey === activeReceiverScreenKey ||
-				!!isInterpolatorReady,
-			destinationScreenKey: requestedDestinationScreenKey,
-			handoffTarget,
-			sourceScreenKey:
-				requestedLink?.status === "complete"
-					? requestedLink.source.screenKey
-					: null,
-		});
-
-		const receiverEntry = nextReceiverScreenKey
-			? getEntry(boundaryId, nextReceiverScreenKey)
-			: null;
-
-		const receiverReady = receiverEntry?.handoff === true;
-
-		const returningFromActiveClose =
-			hasActiveCloseFinished && attachedScreenKey === activeReceiverScreenKey;
-
-		const activatingPairDestination =
-			!!pairDestination &&
-			!!isInterpolatorReady &&
-			nextReceiverScreenKey === pairDestination;
-
-		const canActivateReceiver =
-			returningFromActiveClose ||
-			activatingPairDestination ||
-			animationProgress > 0;
-
-		if (nextReceiverScreenKey && receiverReady && canActivateReceiver) {
-			attachedReceiverScreenKey.set(nextReceiverScreenKey);
-		}
-
-		const targetScreenKey = attachedReceiverScreenKey.get();
-
-		const targetHostName = targetScreenKey
-			? createBoundaryContentPortalHostName(targetScreenKey, boundaryId)
-			: PORTAL_HOST_NAME_RESET_VALUE;
-
-		return {
-			...slotProps,
-			hostName: targetHostName,
-		};
-	});
-
-	return { teleportProps };
-};

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

@@ -1,81 +0,0 @@
-import {
-	type ComponentProps,
-	type ComponentType,
-	memo,
-	type ReactNode,
-} from "react";
-import { StyleSheet } from "react-native";
-import Animated from "react-native-reanimated";
-import {
-	isTeleportAvailable,
-	NativePortal,
-	PORTAL_POINTER_EVENTS,
-} from "../../teleport";
-import { useBoundaryContentPortalAttachment } from "./hooks/use-boundary-content-portal-attachment";
-
-export { BoundaryContentPortalHost } from "./components/host";
-
-type BoundaryContentPortalProps = {
-	boundaryId?: string;
-	children: ReactNode;
-	enabled: boolean;
-};
-
-type NullableHostNamePortalProps = Omit<
-	ComponentProps<NonNullable<typeof NativePortal>>,
-	"hostName"
-> & {
-	hostName?: string | null;
-};
-
-const AnimatedNativePortal = NativePortal
-	? Animated.createAnimatedComponent(
-			NativePortal as ComponentType<NullableHostNamePortalProps>,
-		)
-	: null;
-const EnabledNativePortal = AnimatedNativePortal as NonNullable<
-	typeof AnimatedNativePortal
->;
-
-export const BoundaryContentPortal = memo(function BoundaryContentPortal({
-	boundaryId,
-	children,
-	enabled,
-}: BoundaryContentPortalProps) {
-	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,
-		});
-
-		return (
-			<EnabledNativePortal
-				animatedProps={teleportProps}
-				name={boundaryId}
-				pointerEvents={PORTAL_POINTER_EVENTS}
-				style={StyleSheet.absoluteFill}
-			>
-				{children}
-			</EnabledNativePortal>
-		);
-	},
-);