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

package/src/components/screen-lifecycle/hooks/use-open-transition-intent.ts

@@ -1,89 +0,0 @@
-import { useLayoutEffect } from "react";
-import {
-	type BaseDescriptor,
-	useDescriptorsStore,
-} from "../../../providers/screen/descriptors";
-import type { AnimationStoreMap } from "../../../stores/animation.store";
-import {
-	LifecycleTransitionRequestKind,
-	type SystemStoreMap,
-} from "../../../stores/system.store";
-import type { SnapPoint } from "../../../types/screen.types";
-
-/**
- * Calculates the initial progress value based on snap points configuration.
- * Returns `'auto'` if the initial snap point is the `'auto'` keyword
- * (meaning the animation must be deferred until content is measured).
- */
-function getInitialProgress({
-	snapPoints,
-	initialSnapIndex,
-}: {
-	snapPoints?: SnapPoint[];
-	initialSnapIndex: number;
-}): number | "auto" | undefined {
-	if (!snapPoints) {
-		return undefined;
-	}
-
-	const clampedIndex = Math.min(
-		Math.max(0, initialSnapIndex),
-		snapPoints.length - 1,
-	);
-	return snapPoints[clampedIndex];
-}
-
-/**
- * Handles opening transition intent on mount.
- */
-export function useOpenTransitionIntent(
-	current: BaseDescriptor,
-	animations: AnimationStoreMap,
-	system: SystemStoreMap,
-) {
-	const isFirstKey = useDescriptorsStore(
-		(store) => store.derivations.isFirstKey,
-	);
-	const { requestLifecycleTransition } = system.actions;
-
-	// biome-ignore lint/correctness/useExhaustiveDependencies: Must only run once on mount
-	useLayoutEffect(() => {
-		const {
-			snapPoints,
-			initialSnapIndex = 0,
-			experimental_animateOnInitialMount,
-		} = current.options;
-
-		const initialProgress = getInitialProgress({
-			snapPoints,
-			initialSnapIndex,
-		});
-
-		if (isFirstKey && !experimental_animateOnInitialMount) {
-			if (initialProgress === "auto") {
-				system.targetProgress.set(0);
-				animations.transitionProgress.set(0);
-			} else {
-				const target = initialProgress ?? 1;
-				system.targetProgress.set(target);
-				animations.transitionProgress.set(target);
-			}
-			animations.progressAnimating.set(0);
-			animations.closing.set(0);
-			animations.entering.set(0);
-			return;
-		}
-
-		// When the initial snap point is 'auto', defer the opening animation until
-		// ScreenContainer has measured the content and set resolvedAutoSnapPoint.
-		if (initialProgress === "auto") {
-			return;
-		}
-
-		animations.entering.set(1);
-		requestLifecycleTransition(
-			LifecycleTransitionRequestKind.Open,
-			initialProgress ?? 1,
-		);
-	}, []);
-}

package/src/components/screen-lifecycle/hooks/use-transition-start-controller.ts

@@ -1,67 +0,0 @@
-import { useAnimatedReaction } from "react-native-reanimated";
-import type { BaseDescriptor } from "../../../providers/screen/descriptors";
-import type { AnimationStoreMap } from "../../../stores/animation.store";
-import { GestureStore } from "../../../stores/gesture.store";
-import {
-	LifecycleTransitionRequestKind,
-	type SystemStoreMap,
-} from "../../../stores/system.store";
-import { animateToProgress } from "../../../utils/animation/animate-to-progress";
-
-export const useTransitionStartController = ({
-	current,
-	animations,
-	system,
-}: {
-	current: BaseDescriptor;
-	animations: AnimationStoreMap;
-	system: SystemStoreMap;
-}) => {
-	const {
-		targetProgress,
-		animationProgress,
-		pendingLifecycleRequestKind,
-		pendingLifecycleRequestTarget,
-		pendingLifecycleStartBlockCount,
-	} = system;
-	const { clearLifecycleTransitionRequest } = system.actions;
-	const transitionSpec = current.options.transitionSpec;
-	const isDragging = GestureStore.getValue(current.route.key, "dragging");
-
-	useAnimatedReaction(
-		() => {
-			"worklet";
-			return [
-				pendingLifecycleRequestKind.get(),
-				pendingLifecycleRequestTarget.get(),
-				pendingLifecycleStartBlockCount.get(),
-			] as const;
-		},
-		(next) => {
-			"worklet";
-			const [kind, target, blockCount] = next;
-
-			if (kind === LifecycleTransitionRequestKind.None) {
-				return;
-			}
-
-			if (blockCount > 0) {
-				return;
-			}
-
-			animateToProgress({
-				target,
-				spec: transitionSpec,
-				emitWillAnimate:
-					kind !== LifecycleTransitionRequestKind.Open ||
-					!animations.entering.get(),
-				animations,
-				targetProgress,
-				animationProgress,
-				isDragging,
-			});
-
-			clearLifecycleTransitionRequest();
-		},
-	);
-};

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

@@ -1,44 +0,0 @@
-import { useDescriptorsStore } from "../../providers/screen/descriptors";
-import { AnimationStore } from "../../stores/animation.store";
-import { SystemStore } from "../../stores/system.store";
-import { useScreenHistory } from "./hooks/history/use-screen-history";
-import { useCloseCompletion } from "./hooks/use-close-completion";
-import { useCloseTransitionIntent } from "./hooks/use-close-transition-intent";
-import { useOpenTransitionIntent } from "./hooks/use-open-transition-intent";
-import { useTransitionStartController } from "./hooks/use-transition-start-controller";
-
-interface Props {
-	children: React.ReactNode;
-}
-
-/**
- * Unified lifecycle controller for all stack types.
- * Reads current/previous descriptors from DescriptorsProvider context.
- */
-export const ScreenLifecycle = ({ children }: Props) => {
-	const current = useDescriptorsStore((store) => store.current);
-	const previous = useDescriptorsStore((store) => store.previous);
-
-	const animations = AnimationStore.getBag(current.route.key);
-	const system = SystemStore.getBag(current.route.key);
-
-	const { completeClose } = useCloseTransitionIntent(current);
-
-	useOpenTransitionIntent(current, animations, system);
-
-	useTransitionStartController({
-		current,
-		animations,
-		system,
-	});
-
-	useCloseCompletion({
-		closing: animations.closing,
-		animationProgress: system.animationProgress,
-		onComplete: completeClose,
-	});
-
-	useScreenHistory(current, previous, animations);
-
-	return children;
-};

package/src/components/stack-view.tsx

@@ -1,79 +0,0 @@
-import { memo } from "react";
-import { ScreenComposer } from "../providers/screen/screen-composer";
-import {
-	BlankStackProvider,
-	useBlankStackStore,
-} from "../providers/stack/blank-stack.provider";
-import {
-	type StackCoreConfig,
-	StackCoreProvider,
-} from "../providers/stack/core.provider";
-import type { BlankStackProviderProps } from "../types/providers/blank-stack-provider.types";
-import { ActivityContainer, ActivityScreen } from "./activity";
-import { PortalProvider } from "./boundary/portal";
-import { Overlay } from "./overlay";
-
-interface RouteKeyProps {
-	routeKey: string;
-}
-
-const BlankSceneContent = memo(function BlankSceneContent({
-	routeKey,
-}: RouteKeyProps) {
-	const render = useBlankStackStore(
-		(store) => store?.scenesByKey[routeKey]?.descriptor.render,
-	);
-
-	return render?.();
-});
-
-const BlankSceneRow = memo(function BlankSceneRow({ routeKey }: RouteKeyProps) {
-	return (
-		<ActivityScreen routeKey={routeKey}>
-			<ScreenComposer routeKey={routeKey}>
-				<BlankSceneContent routeKey={routeKey} />
-			</ScreenComposer>
-		</ActivityScreen>
-	);
-});
-
-const StackViewContent = memo(function StackViewContent() {
-	const routeKeys = useBlankStackStore((store) => store?.routeKeys);
-
-	return (
-		<PortalProvider>
-			<Overlay.Float />
-
-			<ActivityContainer>
-				{routeKeys.map((routeKey) => (
-					<BlankSceneRow key={routeKey} routeKey={routeKey} />
-				))}
-			</ActivityContainer>
-		</PortalProvider>
-	);
-});
-
-type StackViewProps = BlankStackProviderProps & StackCoreConfig;
-
-export const StackView = memo(function StackView({
-	TRANSITIONS_ALWAYS_ON,
-	state,
-	navigation,
-	descriptors,
-}: StackViewProps) {
-	return (
-		<StackCoreProvider
-			config={{
-				TRANSITIONS_ALWAYS_ON: TRANSITIONS_ALWAYS_ON ?? true,
-			}}
-		>
-			<BlankStackProvider
-				state={state}
-				navigation={navigation}
-				descriptors={descriptors}
-			>
-				<StackViewContent />
-			</BlankStackProvider>
-		</StackCoreProvider>
-	);
-});

package/src/factories/screen-topology/create-screen-topology.ts

@@ -1,199 +0,0 @@
-import type {
-	ActiveScreenRegistration,
-	ScreenRelationships,
-	ScreenTopology,
-	ScreenTopologyRegistration,
-} from "./types";
-
-type ScreenNode = {
-	parentScreenKey: string | null;
-	activeChildScreenKeys: string[];
-};
-
-const EMPTY_RELATIONSHIPS: ScreenRelationships = {
-	parentScreenKey: null,
-	activeChildScreenKey: null,
-};
-
-const areRelationshipsEqual = (
-	left: ScreenRelationships,
-	right: ScreenRelationships,
-): boolean =>
-	left.parentScreenKey === right.parentScreenKey &&
-	left.activeChildScreenKey === right.activeChildScreenKey;
-
-export const createScreenTopology = (): ScreenTopology => {
-	const nodes = new Map<string, ScreenNode>();
-	const listenersByScreenKey = new Map<string, Set<() => void>>();
-	const relationshipCache = new Map<string, ScreenRelationships>();
-
-	const getNode = (screenKey: string) => nodes.get(screenKey);
-	const ensureNode = (screenKey: string) => {
-		const existing = getNode(screenKey);
-		if (existing) return existing;
-
-		const node: ScreenNode = {
-			parentScreenKey: null,
-			activeChildScreenKeys: [],
-		};
-		nodes.set(screenKey, node);
-		return node;
-	};
-
-	const removeNodeIfEmpty = (screenKey: string) => {
-		const node = getNode(screenKey);
-		if (
-			node &&
-			!node.parentScreenKey &&
-			node.activeChildScreenKeys.length === 0
-		) {
-			nodes.delete(screenKey);
-		}
-	};
-
-	const getParent = (screenKey: string) =>
-		getNode(screenKey)?.parentScreenKey ?? null;
-
-	const getActiveChild = (screenKey: string) => {
-		const activeChildScreenKeys = getNode(screenKey)?.activeChildScreenKeys;
-		return activeChildScreenKeys?.[activeChildScreenKeys.length - 1] ?? null;
-	};
-
-	const materializeRelationships = (screenKey: string): ScreenRelationships => {
-		const parentScreenKey = getParent(screenKey);
-		const activeChildScreenKey = getActiveChild(screenKey);
-
-		if (!parentScreenKey && !activeChildScreenKey) {
-			return EMPTY_RELATIONSHIPS;
-		}
-
-		return { parentScreenKey, activeChildScreenKey };
-	};
-
-	const getRelationships = (screenKey: string) => {
-		const cached = relationshipCache.get(screenKey);
-		if (cached) return cached;
-
-		const relationships = materializeRelationships(screenKey);
-		relationshipCache.set(screenKey, relationships);
-		return relationships;
-	};
-
-	const mutate = (affectedScreenKeys: Set<string>, mutation: () => void) => {
-		const previousRelationships = new Map<string, ScreenRelationships>();
-		for (const screenKey of affectedScreenKeys) {
-			if (listenersByScreenKey.has(screenKey)) {
-				previousRelationships.set(screenKey, getRelationships(screenKey));
-			}
-		}
-
-		mutation();
-		for (const screenKey of affectedScreenKeys) {
-			relationshipCache.delete(screenKey);
-		}
-
-		for (const [screenKey, previous] of previousRelationships) {
-			const listeners = listenersByScreenKey.get(screenKey);
-			if (!listeners) continue;
-
-			const next = getRelationships(screenKey);
-			if (areRelationshipsEqual(previous, next)) {
-				relationshipCache.set(screenKey, previous);
-				continue;
-			}
-
-			for (const listener of listeners) listener();
-		}
-	};
-
-	const register = ({
-		screenKey,
-		parentScreenKey,
-	}: ScreenTopologyRegistration) => {
-		mutate(new Set([screenKey]), () => {
-			ensureNode(screenKey).parentScreenKey = parentScreenKey ?? null;
-		});
-	};
-
-	const unregister = (screenKey: string) => {
-		const node = getNode(screenKey);
-		if (!node) return;
-
-		const affectedScreenKeys = new Set([screenKey]);
-		if (node.parentScreenKey) {
-			affectedScreenKeys.add(node.parentScreenKey);
-		}
-
-		mutate(affectedScreenKeys, () => {
-			if (node.parentScreenKey) {
-				const parent = getNode(node.parentScreenKey);
-				if (parent) {
-					parent.activeChildScreenKeys = parent.activeChildScreenKeys.filter(
-						(activeScreenKey) => activeScreenKey !== screenKey,
-					);
-				}
-				removeNodeIfEmpty(node.parentScreenKey);
-			}
-
-			nodes.delete(screenKey);
-		});
-	};
-
-	const activate = (registration: ActiveScreenRegistration) => {
-		if (getParent(registration.screenKey) !== registration.parentScreenKey) {
-			throw new Error(
-				"Screen topology can only activate a direct containment child.",
-			);
-		}
-
-		const affectedScreenKeys = new Set([registration.parentScreenKey]);
-		mutate(affectedScreenKeys, () => {
-			const parent = ensureNode(registration.parentScreenKey);
-			parent.activeChildScreenKeys = [
-				...parent.activeChildScreenKeys.filter(
-					(screenKey) => screenKey !== registration.screenKey,
-				),
-				registration.screenKey,
-			];
-		});
-
-		return () => {
-			const parent = getNode(registration.parentScreenKey);
-			if (!parent?.activeChildScreenKeys.includes(registration.screenKey)) {
-				return;
-			}
-
-			mutate(affectedScreenKeys, () => {
-				parent.activeChildScreenKeys = parent.activeChildScreenKeys.filter(
-					(screenKey) => screenKey !== registration.screenKey,
-				);
-				removeNodeIfEmpty(registration.parentScreenKey);
-			});
-		};
-	};
-
-	return {
-		register,
-		unregister,
-		activate,
-		getRelationships,
-		subscribe: (screenKey, listener) => {
-			const listeners =
-				listenersByScreenKey.get(screenKey) ?? new Set<() => void>();
-			listeners.add(listener);
-			listenersByScreenKey.set(screenKey, listeners);
-
-			return () => {
-				listeners.delete(listener);
-				if (listeners.size === 0) {
-					listenersByScreenKey.delete(screenKey);
-					if (!getNode(screenKey)) {
-						relationshipCache.delete(screenKey);
-					}
-				}
-			};
-		},
-	};
-};
-
-export const screenTopology = createScreenTopology();

package/src/factories/screen-topology/index.ts

@@ -1,16 +0,0 @@
-export {
-	createScreenTopology,
-	screenTopology,
-} from "./create-screen-topology";
-export type {
-	ActiveScreenRegistration,
-	ScreenRelationships,
-	ScreenTopology,
-	ScreenTopologyRegistration,
-} from "./types";
-export { useScreenRelationships } from "./use-screen-relationships";
-export {
-	registerWorkletScreen,
-	screenBelongsToScope,
-	unregisterWorkletScreen,
-} from "./worklet";

package/src/factories/screen-topology/types.ts

@@ -1,22 +0,0 @@
-export type ScreenTopologyRegistration = {
-	screenKey: string;
-	parentScreenKey?: string;
-};
-
-export type ActiveScreenRegistration = {
-	parentScreenKey: string;
-	screenKey: string;
-};
-
-export type ScreenRelationships = Readonly<{
-	parentScreenKey: string | null;
-	activeChildScreenKey: string | null;
-}>;
-
-export type ScreenTopology = {
-	register(registration: ScreenTopologyRegistration): void;
-	unregister(screenKey: string): void;
-	activate(registration: ActiveScreenRegistration): () => void;
-	getRelationships(screenKey: string): ScreenRelationships;
-	subscribe(screenKey: string, listener: () => void): () => void;
-};

package/src/factories/screen-topology/use-screen-relationships.ts

@@ -1,15 +0,0 @@
-import { useCallback, useSyncExternalStore } from "react";
-import { screenTopology } from "./create-screen-topology";
-
-export const useScreenRelationships = (screenKey: string) => {
-	const subscribe = useCallback(
-		(listener: () => void) => screenTopology.subscribe(screenKey, listener),
-		[screenKey],
-	);
-	const getSnapshot = useCallback(
-		() => screenTopology.getRelationships(screenKey),
-		[screenKey],
-	);
-
-	return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-};

package/src/factories/screen-topology/worklet.ts

@@ -1,60 +0,0 @@
-import { makeMutable } from "react-native-reanimated";
-import type { ScreenTopologyRegistration } from "./types";
-
-type WorkletScreenNode = {
-	parentScreenKey?: string;
-};
-
-type WorkletScreenTopology = Record<string, WorkletScreenNode>;
-
-const toStorageKey = (screenKey: string) => {
-	"worklet";
-	return `screen:${screenKey}`;
-};
-
-const workletScreenTopology = makeMutable<WorkletScreenTopology>({});
-
-export const registerWorkletScreen = ({
-	screenKey,
-	parentScreenKey,
-}: ScreenTopologyRegistration) => {
-	"worklet";
-	workletScreenTopology.modify(
-		<T extends WorkletScreenTopology>(value: T): T => {
-			"worklet";
-			(value as WorkletScreenTopology)[toStorageKey(screenKey)] = {
-				parentScreenKey,
-			};
-			return value;
-		},
-	);
-};
-
-export const unregisterWorkletScreen = (screenKey: string) => {
-	"worklet";
-	workletScreenTopology.modify(
-		<T extends WorkletScreenTopology>(value: T): T => {
-			"worklet";
-			const storageKey = toStorageKey(screenKey);
-			delete value[storageKey];
-			return value;
-		},
-	);
-};
-
-export const screenBelongsToScope = (
-	screenKey: string,
-	scopeScreenKey: string,
-): boolean => {
-	"worklet";
-	if (screenKey === scopeScreenKey) return true;
-
-	const state = workletScreenTopology.get();
-	let parentScreenKey = state[toStorageKey(screenKey)]?.parentScreenKey;
-	while (parentScreenKey) {
-		if (parentScreenKey === scopeScreenKey) return true;
-		parentScreenKey = state[toStorageKey(parentScreenKey)]?.parentScreenKey;
-	}
-
-	return false;
-};

package/src/providers/helpers/measured-bounds-writes.ts

@@ -1,73 +0,0 @@
-import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
-import { setEntry } from "../../stores/bounds/internals/entries";
-import { setDestination, setSource } from "../../stores/bounds/internals/links";
-import type { ScreenPairKey } from "../../stores/bounds/types";
-
-type LinkWrite =
-	| {
-			type: "source";
-			pairKey: ScreenPairKey;
-	  }
-	| {
-			type: "destination";
-			pairKey: ScreenPairKey;
-	  };
-
-type ApplyMeasuredBoundsWritesParams = {
-	entryTag: string;
-	linkId: string;
-	group?: string;
-	currentScreenKey: string;
-	measured: MeasuredDimensions;
-	preparedStyles: StyleProps;
-	linkWrite?: LinkWrite;
-	handoff?: boolean;
-	escapeClipping?: boolean;
-};
-
-export const applyMeasuredBoundsWrites = (
-	params: ApplyMeasuredBoundsWritesParams,
-) => {
-	"worklet";
-	const {
-		entryTag,
-		linkId,
-		group,
-		currentScreenKey,
-		measured,
-		preparedStyles,
-		linkWrite,
-		handoff,
-		escapeClipping,
-	} = params;
-
-	// Set the bounds entry on every measure to avoid any stale measurements
-	// for the public read API.
-	setEntry(entryTag, currentScreenKey, {
-		bounds: measured,
-	});
-
-	if (linkWrite?.type === "source") {
-		setSource(
-			linkWrite.pairKey,
-			linkId,
-			currentScreenKey,
-			measured,
-			preparedStyles,
-			group,
-			{ handoff, escapeClipping },
-		);
-	}
-
-	if (linkWrite?.type === "destination") {
-		setDestination(
-			linkWrite.pairKey,
-			linkId,
-			currentScreenKey,
-			measured,
-			preparedStyles,
-			group,
-			{ handoff },
-		);
-	}
-};