react-native-screen-transitions 4.1.0-beta.0 → 4.1.0-rc.0

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

@@ -1,118 +0,0 @@
-import { useCallback, useLayoutEffect, useState } from "react";
-import { type SharedValue, useAnimatedReaction } from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
-import { getPairKeyForSource } from "../../../../../../stores/bounds/internals/links";
-import type { ScreenPairKey } from "../../../../../../stores/bounds/types";
-import type { NormalizedTransitionInterpolatedStyle } from "../../../../../../types/animation.types";
-import type { BoundaryLocalMeasurementValue } from "../../../../types";
-import { createBoundaryPortalHostName } from "../../../utils/naming";
-import {
-	mountPortalBoundaryHost,
-	unmountPortalBoundaryHostByName,
-} from "../stores/portal-boundary-host.store";
-
-type UseActivePortalBoundaryHostParams = {
-	boundaryId: string;
-	currentScreenKey: string;
-	escapeHostKey?: string;
-	localMeasurement: BoundaryLocalMeasurementValue;
-	portalHostName: SharedValue<string | null>;
-	portalHostReady: SharedValue<boolean>;
-	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
-};
-
-export const resolveActivePortalPairKey = ({
-	pairKey,
-	measurementPairKey,
-	hasAnimatedSlot,
-}: {
-	pairKey: ScreenPairKey | null;
-	measurementPairKey: ScreenPairKey | null | undefined;
-	hasAnimatedSlot: boolean;
-}): ScreenPairKey | null => {
-	"worklet";
-	if (!pairKey || measurementPairKey !== pairKey || !hasAnimatedSlot) {
-		return null;
-	}
-
-	return pairKey;
-};
-
-export const useActivePortalBoundaryHost = ({
-	boundaryId,
-	currentScreenKey,
-	escapeHostKey,
-	localMeasurement,
-	portalHostName,
-	portalHostReady,
-	slotsMap,
-}: UseActivePortalBoundaryHostParams) => {
-	const [activePairKey, setActivePairKey] = useState<ScreenPairKey | null>(
-		null,
-	);
-
-	const updateActivePairKey = useCallback((pairKey: ScreenPairKey | null) => {
-		setActivePairKey(pairKey);
-	}, []);
-
-	useAnimatedReaction(
-		() => {
-			"worklet";
-			const pairKey = getPairKeyForSource(boundaryId, currentScreenKey);
-			const measurement = localMeasurement.get();
-
-			return resolveActivePortalPairKey({
-				pairKey,
-				measurementPairKey: measurement?.pairKey,
-				hasAnimatedSlot: slotsMap.get()[boundaryId] !== undefined,
-			});
-		},
-		(pairKey, previousPairKey) => {
-			"worklet";
-			if (pairKey === previousPairKey) {
-				return;
-			}
-
-			scheduleOnRN(updateActivePairKey, pairKey);
-		},
-	);
-
-	useLayoutEffect(() => {
-		if (!activePairKey || !escapeHostKey) {
-			portalHostName.set(null);
-			portalHostReady.set(false);
-			return;
-		}
-
-		const nextPortalHostName = createBoundaryPortalHostName(
-			escapeHostKey,
-			boundaryId,
-			activePairKey,
-		);
-
-		mountPortalBoundaryHost({
-			boundaryId,
-			hostKey: escapeHostKey,
-			localMeasurement,
-			pairKey: activePairKey,
-			portalHostName: nextPortalHostName,
-			portalHostReady,
-			slotsMap,
-		});
-		portalHostName.set(nextPortalHostName);
-
-		return () => {
-			portalHostName.set(null);
-			portalHostReady.set(false);
-			unmountPortalBoundaryHostByName(nextPortalHostName);
-		};
-	}, [
-		activePairKey,
-		boundaryId,
-		escapeHostKey,
-		localMeasurement,
-		portalHostName,
-		portalHostReady,
-		slotsMap,
-	]);
-};

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

@@ -1,64 +0,0 @@
-import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
-import { useBuilderStore } from "../../../../../../providers/screen/builder";
-import { useOrchestratorStore } from "../../../../../../providers/screen/orchestrator";
-import { useBoundaryRootStore } from "../../../../providers/boundary-root.provider";
-import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
-import { useActiveHostKey } from "../stores/host-registry.store";
-import { useActivePortalBoundaryHost } from "./use-active-portal-boundary-host";
-
-interface UseBoundaryPortalAttachmentParams {
-	boundaryId: string;
-}
-
-export const useBoundaryPortalAttachment = ({
-	boundaryId,
-}: UseBoundaryPortalAttachmentParams) => {
-	const localMeasurement = useBoundaryRootStore((root) => {
-		if (!root) {
-			throw new Error("Boundary portal attachment requires a boundary root.");
-		}
-
-		return root.localMeasurement;
-	});
-	const currentScreenKey = useBuilderStore(
-		(s) => s.derivations.currentScreenKey,
-	);
-	const slotsMap = useOrchestratorStore((store) => store.slotsMap);
-	const portalHostName = useSharedValue<string | null>(null);
-	const portalHostReady = useSharedValue(false);
-	const escapeHostKey = useActiveHostKey(currentScreenKey);
-
-	useActivePortalBoundaryHost({
-		boundaryId,
-		currentScreenKey,
-		escapeHostKey,
-		localMeasurement,
-		portalHostName,
-		portalHostReady,
-		slotsMap,
-	});
-
-	const teleportProps = useAnimatedProps(() => {
-		"worklet";
-
-		const slot = slotsMap.get()[boundaryId];
-		const {
-			pointerEvents: _pointerEvents,
-			handoffTarget: _handoffTarget,
-			...slotProps
-		} = slot?.props ?? {};
-
-		const shouldAttach = slot !== undefined && portalHostReady.get();
-
-		const hostName = shouldAttach
-			? portalHostName.get()
-			: PORTAL_HOST_NAME_RESET_VALUE;
-
-		return {
-			...slotProps,
-			hostName,
-		};
-	});
-
-	return { teleportProps };
-};

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

@@ -1,90 +0,0 @@
-import type { View } from "react-native";
-import {
-	cancelAnimation,
-	type MeasuredDimensions,
-	measure,
-	useAnimatedReaction,
-	useAnimatedRef,
-	useSharedValue,
-	withDelay,
-	withTiming,
-} from "react-native-reanimated";
-
-const HOST_MEASUREMENT_RETRY_DELAY_MS = 16;
-
-type UseHostMeasurementParams = {
-	measurementKey: string | null;
-};
-
-export const useHostMeasurement = ({
-	measurementKey,
-}: UseHostMeasurementParams) => {
-	const hostRef = useAnimatedRef<View>();
-	const hostBounds = useSharedValue<MeasuredDimensions | null>(null);
-	const measuredKey = useSharedValue<string | null>(null);
-	const retryToken = useSharedValue(0);
-
-	useAnimatedReaction(
-		() => {
-			"worklet";
-			if (!measurementKey) {
-				return null;
-			}
-
-			return [measurementKey, measuredKey.get(), retryToken.get()] as const;
-		},
-		(state) => {
-			"worklet";
-			if (!state) {
-				cancelAnimation(retryToken);
-				return;
-			}
-
-			const [requestedKey, completedKey] = state;
-			if (requestedKey === completedKey) {
-				return;
-			}
-
-			const measured = measure(hostRef);
-
-			if (!measured) {
-				cancelAnimation(retryToken);
-				retryToken.set(
-					withDelay(
-						HOST_MEASUREMENT_RETRY_DELAY_MS,
-						withTiming(retryToken.get() + 1, { duration: 0 }),
-					),
-				);
-				return;
-			}
-
-			cancelAnimation(retryToken);
-
-			if (measured.width <= 0 || measured.height <= 0) {
-				cancelAnimation(retryToken);
-				retryToken.set(
-					withDelay(
-						HOST_MEASUREMENT_RETRY_DELAY_MS,
-						withTiming(retryToken.get() + 1, { duration: 0 }),
-					),
-				);
-				return;
-			}
-
-			hostBounds.set({
-				x: measured.x,
-				y: measured.y,
-				width: measured.width,
-				height: measured.height,
-				pageX: measured.pageX,
-				pageY: measured.pageY,
-			});
-			measuredKey.set(requestedKey);
-		},
-	);
-	return {
-		hostBounds,
-		hostRef,
-		measuredKey,
-	};
-};

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

@@ -1,97 +0,0 @@
-import {
-	type ComponentProps,
-	type ComponentType,
-	memo,
-	type ReactNode,
-} from "react";
-import type { View } from "react-native";
-import Animated, { type AnimatedRef } from "react-native-reanimated";
-import { scheduleOnUI } from "react-native-worklets";
-import { logger } from "../../../../../utils/logger";
-import {
-	isTeleportAvailable,
-	PORTAL_POINTER_EVENTS,
-	NativePortal as TeleportPortal,
-} from "../../teleport";
-import { useBoundaryPortalAttachment } from "./hooks/use-boundary-portal-attachment";
-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;
-const EnabledNativePortal = AnimatedNativePortal as NonNullable<
-	typeof AnimatedNativePortal
->;
-
-type BoundaryPortalProps = {
-	boundaryId: string;
-	children: ReactNode;
-	enabled: boolean;
-	placeholderRef?: AnimatedRef<View>;
-};
-
-export const BoundaryPortal = memo(function BoundaryPortal({
-	boundaryId,
-	children,
-	enabled,
-	placeholderRef,
-}: BoundaryPortalProps) {
-	if (!enabled || !isTeleportAvailable || !AnimatedNativePortal) {
-		return children;
-	}
-
-	return (
-		<EnabledBoundaryPortal
-			boundaryId={boundaryId}
-			placeholderRef={placeholderRef}
-		>
-			{children}
-		</EnabledBoundaryPortal>
-	);
-});
-
-const EnabledBoundaryPortal = memo(function EnabledBoundaryPortal({
-	boundaryId,
-	children,
-	placeholderRef,
-}: Omit<BoundaryPortalProps, "enabled">) {
-	if (__DEV__ && !boundaryId) {
-		logger.warnOnce(
-			"portal:missing-id",
-			"A boundary portal was rendered without an id; rendering inline.",
-		);
-	}
-
-	const { teleportProps } = useBoundaryPortalAttachment({ boundaryId });
-
-	const { handleOnLayout, placeholderStyle } = usePlaceholderStyles();
-
-	return (
-		<Animated.View
-			ref={placeholderRef}
-			onLayout={({ nativeEvent: { layout } }) =>
-				scheduleOnUI(handleOnLayout, layout)
-			}
-			style={placeholderStyle}
-			pointerEvents={PORTAL_POINTER_EVENTS}
-			collapsable={false}
-		>
-			<EnabledNativePortal
-				animatedProps={teleportProps}
-				name={boundaryId}
-				pointerEvents={PORTAL_POINTER_EVENTS}
-			>
-				{children}
-			</EnabledNativePortal>
-		</Animated.View>
-	);
-});

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

@@ -1,134 +0,0 @@
-import { useSyncExternalStore } from "react";
-
-export type HostRegistration = {
-	hostKey: string;
-	screenKey: string;
-	fallback: boolean;
-};
-
-type HostRegistrySnapshot = Record<string, string>;
-
-const EMPTY_SNAPSHOT: HostRegistrySnapshot = {};
-
-const listeners = new Set<() => void>();
-const hostStacks = new Map<string, HostRegistration[]>();
-
-let snapshot: HostRegistrySnapshot = EMPTY_SNAPSHOT;
-
-/**
- * The active host for a screen. Stack ordering is the load-bearing invariant:
- * `registerHost` unshifts fallback hosts to the front and pushes real hosts to
- * the back, so the active host is the last real (non-fallback) host, falling
- * back to the first entry and finally to the screen's own key.
- */
-const getActiveHostFromStack = (
-	screenKey: string,
-	stack: HostRegistration[] | undefined,
-) => {
-	if (!stack || stack.length === 0) {
-		return screenKey;
-	}
-
-	for (let index = stack.length - 1; index >= 0; index--) {
-		const host = stack[index];
-		if (!host.fallback) {
-			return host.hostKey;
-		}
-	}
-
-	return stack[0]?.hostKey ?? screenKey;
-};
-
-const buildSnapshot = (): HostRegistrySnapshot => {
-	const nextSnapshot: HostRegistrySnapshot = {};
-
-	for (const [screenKey, stack] of hostStacks) {
-		nextSnapshot[screenKey] = getActiveHostFromStack(screenKey, stack);
-	}
-
-	return nextSnapshot;
-};
-
-const emit = () => {
-	snapshot = buildSnapshot();
-
-	for (const listener of listeners) {
-		listener();
-	}
-};
-
-const subscribe = (listener: () => void) => {
-	listeners.add(listener);
-
-	return () => {
-		listeners.delete(listener);
-	};
-};
-
-export const registerHost = (registration: HostRegistration) => {
-	const stack = hostStacks.get(registration.screenKey) ?? [];
-	const previousActiveHostKey = getActiveHostFromStack(
-		registration.screenKey,
-		stack,
-	);
-	const nextStack = stack.filter(
-		(host) => host.hostKey !== registration.hostKey,
-	);
-
-	if (registration.fallback) {
-		nextStack.unshift(registration);
-	} else {
-		nextStack.push(registration);
-	}
-
-	hostStacks.set(registration.screenKey, nextStack);
-
-	if (
-		previousActiveHostKey ===
-		getActiveHostFromStack(registration.screenKey, nextStack)
-	) {
-		return;
-	}
-
-	emit();
-};
-
-export const unregisterHost = (screenKey: string, hostKey: string) => {
-	const stack = hostStacks.get(screenKey);
-	if (!stack) {
-		return;
-	}
-
-	const previousActiveHostKey = getActiveHostFromStack(screenKey, stack);
-	const nextStack = stack.filter((host) => host.hostKey !== hostKey);
-
-	if (nextStack.length === 0) {
-		hostStacks.delete(screenKey);
-	} else {
-		hostStacks.set(screenKey, nextStack);
-	}
-
-	if (previousActiveHostKey === getActiveHostFromStack(screenKey, nextStack)) {
-		return;
-	}
-
-	emit();
-};
-
-export const getActiveHostKey = (screenKey: string) => {
-	return snapshot[screenKey] ?? screenKey;
-};
-
-export const useActiveHostKey = (screenKey?: string | null) => {
-	return useSyncExternalStore(
-		subscribe,
-		() => (screenKey ? getActiveHostKey(screenKey) : undefined),
-		() => undefined,
-	);
-};
-
-export const resetHostRegistry = () => {
-	hostStacks.clear();
-	snapshot = EMPTY_SNAPSHOT;
-	emit();
-};

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

@@ -1,100 +0,0 @@
-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>;
-	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
-};
-
-type PortalSnapshot = {
-	hostsByScope: Record<string, ActivePortalBoundaryHost[]>;
-};
-
-const EMPTY_HOSTS: ActivePortalBoundaryHost[] = [];
-
-const listeners = new Set<() => void>();
-const activeBoundaryHosts = new Map<string, ActivePortalBoundaryHost>();
-
-let snapshot: PortalSnapshot = {
-	hostsByScope: {},
-};
-
-const buildSnapshot = (): PortalSnapshot => {
-	const hostsByScope: Record<string, ActivePortalBoundaryHost[]> = {};
-
-	for (const host of activeBoundaryHosts.values()) {
-		const hosts = hostsByScope[host.hostKey] ?? [];
-		hosts.push(host);
-		hostsByScope[host.hostKey] = hosts;
-	}
-
-	return {
-		hostsByScope,
-	};
-};
-
-const emit = () => {
-	snapshot = buildSnapshot();
-
-	for (const listener of listeners) {
-		listener();
-	}
-};
-
-const isSameHost = (
-	a: ActivePortalBoundaryHost,
-	b: ActivePortalBoundaryHost,
-) => {
-	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.slotsMap === b.slotsMap
-	);
-};
-
-export const mountPortalBoundaryHost = (host: ActivePortalBoundaryHost) => {
-	const previous = activeBoundaryHosts.get(host.portalHostName);
-	if (previous && isSameHost(previous, host)) {
-		return;
-	}
-
-	activeBoundaryHosts.set(host.portalHostName, host);
-	emit();
-};
-
-export const unmountPortalBoundaryHostByName = (
-	portalHostName: string | null | undefined,
-) => {
-	if (!portalHostName || !activeBoundaryHosts.delete(portalHostName)) {
-		return;
-	}
-
-	emit();
-};
-
-const subscribe = (listener: () => void) => {
-	listeners.add(listener);
-
-	return () => {
-		listeners.delete(listener);
-	};
-};
-
-export const useActivePortalBoundaryHosts = (hostKey: string) => {
-	return useSyncExternalStore(
-		subscribe,
-		() => snapshot.hostsByScope[hostKey] ?? EMPTY_HOSTS,
-		() => EMPTY_HOSTS,
-	);
-};

package/src/components/overlay/index.ts

@@ -1,5 +0,0 @@
-import { FloatOverlay } from "./variations/float-overlay";
-
-export const Overlay = {
-	Float: FloatOverlay,
-};

package/src/components/overlay/variations/float-overlay.tsx

@@ -1,33 +0,0 @@
-import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
-
-import {
-	getFloatOverlayStack,
-	getFloatOverlayTransitions,
-} from "../helpers/get-active-overlay";
-import { OverlayHost } from "./overlay-host";
-
-/**
- * Float overlay component that renders above all screens.
- * Gets routes and descriptors from stack context.
- */
-export function FloatOverlay() {
-	const scenes = useBlankStackStore((store) => store.scenes);
-
-	const overlayStack = getFloatOverlayStack(scenes);
-
-	if (overlayStack.length === 0) {
-		return null;
-	}
-
-	const overlayTransitions = getFloatOverlayTransitions(overlayStack, scenes);
-
-	return overlayTransitions.map(({ scene, driverScene }, layerIndex) => (
-		<OverlayHost
-			key={scene.route.key}
-			scene={scene}
-			driverScene={driverScene}
-			previousOverlayScene={overlayTransitions[layerIndex - 1]?.scene}
-			layerIndex={layerIndex}
-		/>
-	));
-}

package/src/components/screen/container/helpers/find-collapse-target.ts

@@ -1,62 +0,0 @@
-import { EPSILON } from "../../../../constants";
-import { sanitizeSnapPoints } from "../../../../providers/screen/motion/gestures/shared/snap-points";
-
-interface FindCollapseTargetResult {
-	target: number;
-	shouldDismiss: boolean;
-}
-
-/**
- * Finds the next lower snap point for backdrop collapse behavior.
- *
- * - If above min snap: returns next lower snap point
- * - If at or below min snap: returns 0 (dismiss) if canDismiss, else stays at min
- *
- * @param currentProgress - Current animation progress
- * @param snapPoints - Array of snap points
- * @param canDismiss - Whether dismissing is allowed
- */
-export function findCollapseTarget(
-	currentProgress: number,
-	snapPoints: number[],
-	canDismiss: boolean,
-): FindCollapseTargetResult {
-	"worklet";
-
-	const normalized = sanitizeSnapPoints(snapPoints, canDismiss);
-
-	if (normalized.length === 0) {
-		return canDismiss
-			? { target: 0, shouldDismiss: true }
-			: { target: currentProgress, shouldDismiss: false };
-	}
-
-	let minSnap = normalized[0];
-	let nextLowerSnap: number | null = null;
-
-	for (let i = 0; i < normalized.length; i++) {
-		const snap = normalized[i];
-		if (snap < minSnap) {
-			minSnap = snap;
-		}
-
-		if (
-			snap < currentProgress - EPSILON &&
-			(nextLowerSnap === null || snap > nextLowerSnap)
-		) {
-			nextLowerSnap = snap;
-		}
-	}
-
-	if (nextLowerSnap !== null) {
-		return { target: nextLowerSnap, shouldDismiss: false };
-	}
-
-	// At or below min snap → dismiss if allowed
-	if (canDismiss) {
-		return { target: 0, shouldDismiss: true };
-	}
-
-	// Can't dismiss, stay at min
-	return { target: minSnap, shouldDismiss: false };
-}