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

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/screen-container/helpers/find-collapse-target.ts

@@ -1,62 +0,0 @@
-import { EPSILON } from "../../../constants";
-import { sanitizeSnapPoints } from "../../../providers/screen/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 };
-}

package/src/components/screen-container/hooks/use-backdrop-pointer-events.ts

@@ -1,51 +0,0 @@
-import { useState } from "react";
-import { useAnimatedReaction } from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
-import { useDescriptorsStore } from "../../../providers/screen/descriptors";
-import { useScreenOptionsStore } from "../../../providers/screen/options";
-import type { BackdropBehavior } from "../../../types/screen.types";
-
-interface BackdropPointerEventsResult {
-	pointerEvents: "box-none" | undefined;
-	backdropBehavior: BackdropBehavior;
-	isBackdropActive: boolean;
-}
-
-/**
- * Returns pointer events and backdrop behavior based on screen options.
- *
- * - Runtime interpolator `backdropBehavior` takes precedence
- * - Explicit descriptor `backdropBehavior` option is next
- * - Otherwise defaults to 'block' (undefined = normal touch handling)
- */
-export function useBackdropPointerEvents(): BackdropPointerEventsResult {
-	const screenOptions = useScreenOptionsStore();
-	const descriptorBackdropBehavior = useDescriptorsStore(
-		(store) => store.options.backdropBehavior,
-	);
-	const [runtimeBackdropBehavior, setRuntimeBackdropBehavior] = useState<
-		BackdropBehavior | undefined
-	>(undefined);
-
-	useAnimatedReaction(
-		() => screenOptions.get().backdropBehavior,
-		(next, previous) => {
-			"worklet";
-			if (next !== previous) {
-				scheduleOnRN(setRuntimeBackdropBehavior, next);
-			}
-		},
-		[screenOptions],
-	);
-
-	const backdropBehavior: BackdropBehavior =
-		runtimeBackdropBehavior ?? descriptorBackdropBehavior ?? "block";
-
-	const pointerEvents =
-		backdropBehavior === "passthrough" ? "box-none" : undefined;
-
-	const isBackdropActive =
-		backdropBehavior === "dismiss" || backdropBehavior === "collapse";
-
-	return { pointerEvents, backdropBehavior, isBackdropActive };
-}

package/src/components/screen-container/hooks/use-content-layout.ts

@@ -1,82 +0,0 @@
-import { useCallback } from "react";
-import { type LayoutChangeEvent, useWindowDimensions } from "react-native";
-import { scheduleOnUI } from "react-native-worklets";
-import { useDescriptorsStore } from "../../../providers/screen/descriptors";
-import { AnimationStore } from "../../../stores/animation.store";
-import {
-	LifecycleTransitionRequestKind,
-	SystemStore,
-} from "../../../stores/system.store";
-
-export function useContentLayout() {
-	const routeKey = useDescriptorsStore(
-		(store) => store.derivations.currentScreenKey,
-	);
-	const isFirstKey = useDescriptorsStore(
-		(store) => store.derivations.isFirstKey,
-	);
-	const experimental_animateOnInitialMount = useDescriptorsStore(
-		(store) => store.options.experimental_animateOnInitialMount,
-	);
-	const { height: screenHeight } = useWindowDimensions();
-	const animations = AnimationStore.getBag(routeKey);
-	const system = SystemStore.getBag(routeKey);
-
-	const { targetProgress, resolvedAutoSnapPoint, measuredContentLayout } =
-		system;
-	const { requestLifecycleTransition } = system.actions;
-
-	return useCallback(
-		(event: LayoutChangeEvent) => {
-			const { width, height } = event.nativeEvent.layout;
-			if (width <= 0 || height <= 0) return;
-
-			const fraction = Math.min(height / screenHeight, 1);
-
-			scheduleOnUI(
-				(nextWidth: number, nextHeight: number, nextFraction: number) => {
-					"worklet";
-					measuredContentLayout.set({
-						width: nextWidth,
-						height: nextHeight,
-					});
-
-					const isFirstMeasurement = resolvedAutoSnapPoint.get() <= 0;
-					resolvedAutoSnapPoint.set(nextFraction);
-
-					if (
-						!isFirstMeasurement ||
-						animations.transitionProgress.get() !== 0 ||
-						animations.progressAnimating.get() !== 0
-					) {
-						return;
-					}
-
-					if (isFirstKey && !experimental_animateOnInitialMount) {
-						targetProgress.set(nextFraction);
-						animations.transitionProgress.set(nextFraction);
-						return;
-					}
-
-					requestLifecycleTransition(
-						LifecycleTransitionRequestKind.Open,
-						nextFraction,
-					);
-				},
-				width,
-				height,
-				fraction,
-			);
-		},
-		[
-			animations,
-			targetProgress,
-			resolvedAutoSnapPoint,
-			measuredContentLayout,
-			isFirstKey,
-			screenHeight,
-			experimental_animateOnInitialMount,
-			requestLifecycleTransition,
-		],
-	);
-}

package/src/components/screen-container/index.tsx

@@ -1,35 +0,0 @@
-import { memo } from "react";
-import { StyleSheet, View } from "react-native";
-import { useBackdropPointerEvents } from "./hooks/use-backdrop-pointer-events";
-import { BackdropLayer } from "./layers/backdrop";
-import { ContentLayer } from "./layers/content";
-
-type Props = {
-	children: React.ReactNode;
-};
-
-export const ScreenContainer = memo(({ children }: Props) => {
-	const { pointerEvents, isBackdropActive, backdropBehavior } =
-		useBackdropPointerEvents();
-
-	return (
-		<View style={styles.container} pointerEvents={pointerEvents}>
-			<BackdropLayer
-				isBackdropActive={isBackdropActive}
-				backdropBehavior={backdropBehavior}
-			/>
-			<ContentLayer
-				pointerEvents={pointerEvents}
-				isBackdropActive={isBackdropActive}
-			>
-				{children}
-			</ContentLayer>
-		</View>
-	);
-});
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-	},
-});

package/src/components/screen-container/layers/backdrop.tsx

@@ -1,169 +0,0 @@
-import { type ComponentType, memo, useCallback, useMemo } from "react";
-import { Pressable, StyleSheet } from "react-native";
-import Animated from "react-native-reanimated";
-import { scheduleOnRN, scheduleOnUI } from "react-native-worklets";
-import { DefaultSnapSpec } from "../../../configs/specs";
-import { useNavigationHelpers } from "../../../hooks/navigation/use-navigation-helpers";
-import { useDescriptorsStore } from "../../../providers/screen/descriptors";
-import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
-import { AnimationStore } from "../../../stores/animation.store";
-import { GestureStore } from "../../../stores/gesture.store";
-import { SystemStore } from "../../../stores/system.store";
-import type {
-	BackdropBehavior,
-	ScreenBackdropComponentProps,
-} from "../../../types/screen.types";
-import { animateToProgress } from "../../../utils/animation/animate-to-progress";
-import { findCollapseTarget } from "../helpers/find-collapse-target";
-import { usesLayerRenderProps } from "./render-component";
-
-export const BackdropLayer = memo(function BackdropLayer({
-	backdropBehavior,
-	isBackdropActive,
-}: {
-	backdropBehavior: BackdropBehavior;
-	isBackdropActive: boolean;
-}) {
-	const { requestDismiss } = useNavigationHelpers();
-
-	const routeKey = useDescriptorsStore(
-		(store) => store.derivations.currentScreenKey,
-	);
-	const BackdropComponent = useDescriptorsStore(
-		(store) => store.options.backdropComponent,
-	);
-	const rawSnapPoints = useDescriptorsStore(
-		(store) => store.options.snapPoints,
-	);
-	const isGestureDismissEnabled = useDescriptorsStore(
-		(store) => store.options.gestureEnabled !== false,
-	);
-	const canDismiss = isGestureDismissEnabled;
-	const transitionSpec = useDescriptorsStore(
-		(store) => store.options.transitionSpec,
-	);
-	const animations = AnimationStore.getBag(routeKey);
-	const { targetProgress, animationProgress, resolvedAutoSnapPoint } =
-		SystemStore.getBag(routeKey);
-
-	const AnimatedBackdropComponent = useMemo(
-		() =>
-			BackdropComponent && !usesLayerRenderProps(BackdropComponent)
-				? Animated.createAnimatedComponent(
-						BackdropComponent as ComponentType<any>,
-					)
-				: null,
-		[BackdropComponent],
-	);
-
-	const handleBackdropPress = useCallback(() => {
-		if (backdropBehavior === "dismiss") {
-			requestDismiss();
-			return;
-		}
-
-		if (backdropBehavior === "collapse") {
-			// No snap points → fallback to dismiss
-			if (!rawSnapPoints || rawSnapPoints.length === 0) {
-				requestDismiss();
-				return;
-			}
-
-			const gestures = GestureStore.getBag(routeKey);
-
-			scheduleOnUI(() => {
-				"worklet";
-				const resolvedSnaps: number[] = [];
-
-				for (let i = 0; i < rawSnapPoints.length; i++) {
-					const point = rawSnapPoints[i];
-					const resolvedPoint =
-						point === "auto" ? resolvedAutoSnapPoint.get() : point;
-
-					if (typeof resolvedPoint === "number") {
-						resolvedSnaps.push(resolvedPoint);
-					}
-				}
-
-				const { target, shouldDismiss } = findCollapseTarget(
-					animations.transitionProgress.get(),
-					resolvedSnaps,
-					canDismiss,
-				);
-
-				// If already dismissing, skip
-				if (gestures.dismissing.get()) return;
-
-				gestures.dismissing.set(shouldDismiss ? 1 : 0);
-
-				const spec = shouldDismiss
-					? transitionSpec
-					: {
-							open: transitionSpec?.expand ?? DefaultSnapSpec,
-							close: transitionSpec?.collapse ?? DefaultSnapSpec,
-						};
-
-				animateToProgress({
-					target,
-					markEntering: false,
-					spec,
-					animations,
-					targetProgress,
-					animationProgress,
-				});
-
-				if (shouldDismiss) {
-					scheduleOnRN(requestDismiss);
-				}
-			});
-		}
-	}, [
-		animations,
-		targetProgress,
-		animationProgress,
-		resolvedAutoSnapPoint,
-		backdropBehavior,
-		rawSnapPoints,
-		canDismiss,
-		transitionSpec,
-		requestDismiss,
-		routeKey,
-	]);
-
-	const animatedBackdropStyle = useSlotStyles("backdrop");
-	const animatedBackdropProps = useSlotProps("backdrop");
-	const backdropPointerEvents = isBackdropActive ? "auto" : "none";
-	const backdropStyles = [
-		StyleSheet.absoluteFill,
-		animatedBackdropStyle,
-	] as ScreenBackdropComponentProps["styles"];
-	const backdropProps =
-		animatedBackdropProps as ScreenBackdropComponentProps["props"];
-
-	return (
-		<Pressable
-			style={StyleSheet.absoluteFill}
-			pointerEvents={isBackdropActive ? "auto" : "none"}
-			onPress={isBackdropActive ? handleBackdropPress : undefined}
-		>
-			{AnimatedBackdropComponent ? (
-				<AnimatedBackdropComponent
-					style={backdropStyles}
-					animatedProps={animatedBackdropProps}
-					pointerEvents={backdropPointerEvents}
-				/>
-			) : BackdropComponent ? (
-				<BackdropComponent
-					styles={backdropStyles}
-					props={backdropProps}
-					pointerEvents={backdropPointerEvents}
-				/>
-			) : (
-				<Animated.View
-					style={backdropStyles}
-					pointerEvents={backdropPointerEvents}
-				/>
-			)}
-		</Pressable>
-	);
-});