react-native-screen-transitions 3.12.0 → 3.13.0-beta.1

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

@@ -0,0 +1,16 @@
+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/shared/factories/screen-topology/types.ts

@@ -0,0 +1,22 @@
+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/shared/factories/screen-topology/use-screen-relationships.ts

@@ -0,0 +1,15 @@
+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/shared/factories/screen-topology/worklet.ts

@@ -0,0 +1,60 @@
+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/shared/hooks/navigation/use-screen-state.ts

@@ -1,10 +1,7 @@
 import type { Route } from "@react-navigation/native";
 import { useCallback, useMemo } from "react";
 import { snapDescriptorToIndex } from "../../animation/snap-to";
-import {
-	type BaseDescriptor,
-	useDescriptorsStore,
-} from "../../providers/screen/descriptors";
+import { useDescriptorsStore } from "../../providers/screen/descriptors";
 import type { ScreenTransitionConfig } from "../../types/screen.types";
 import type { BaseStackNavigation } from "../../types/stack.types";
 import { type StackContextValue, useStack } from "./use-stack";
@@ -65,9 +62,7 @@ export function useScreenState<
 >(): ScreenState<TNavigation> {
 	const { routes, scenes, routeKeys, focusedIndex } =
 		useStack<StackContextValue>();
-	const current = useDescriptorsStore(
-		(store) => store.current,
-	) as BaseDescriptor;
+	const current = useDescriptorsStore((store) => store.current);
 
 	const index = useMemo(
 		() => routeKeys.indexOf(current.route.key),

package/src/shared/hooks/navigation/use-stack.tsx

@@ -5,12 +5,10 @@ import {
 	useCallback,
 	useContext,
 	useLayoutEffect,
-	useMemo,
 	useRef,
 	useSyncExternalStore,
 } from "react";
-import { useDerivedValue } from "react-native-reanimated";
-import { syncStackProgressValues } from "../../providers/screen/animation/helpers/stack-progress";
+import type { StackProgressEntry } from "../../providers/screen/animation/helpers/stack-progress";
 import type { StackCoreContextValue } from "../../providers/stack/core.provider";
 import { AnimationStore } from "../../stores/animation.store";
 import type { OverlayProps } from "../../types/overlay.types";
@@ -50,6 +48,7 @@ export interface StackContextValue extends StackCoreContextValue {
 
 interface StackStoreApi {
 	getSnapshot: () => StackContextValue;
+	getStackProgressEntries: () => readonly StackProgressEntry[];
 	subscribe: (listener: () => void) => () => void;
 }
 
@@ -58,14 +57,24 @@ interface MutableStackStoreApi extends StackStoreApi {
 	setSnapshot: (snapshot: StackContextValue) => boolean;
 }
 
+const createStackProgressEntries = (
+	routeKeys: readonly string[],
+): readonly StackProgressEntry[] =>
+	routeKeys.map((routeKey) => ({
+		routeKey,
+		visualProgress: AnimationStore.getValue(routeKey, "visualProgress"),
+	}));
+
 const createStackStore = (
 	initialSnapshot: StackContextValue,
 ): MutableStackStoreApi => {
 	let snapshot = initialSnapshot;
+	let stackProgressEntries = createStackProgressEntries(snapshot.routeKeys);
 	const listeners = new Set<() => void>();
 
 	return {
 		getSnapshot: () => snapshot,
+		getStackProgressEntries: () => stackProgressEntries,
 		notify: () => {
 			for (const listener of listeners) {
 				listener();
@@ -76,6 +85,11 @@ const createStackStore = (
 				return false;
 			}
 
+			if (!Object.is(snapshot.routeKeys, nextSnapshot.routeKeys)) {
+				stackProgressEntries = createStackProgressEntries(
+					nextSnapshot.routeKeys,
+				);
+			}
 			snapshot = nextSnapshot;
 			return true;
 		},
@@ -91,30 +105,6 @@ const createStackStore = (
 const StackContext = createContext<StackStoreApi | null>(null);
 StackContext.displayName = "Stack";
 
-function StackProgressOwner({ routeKeys }: { routeKeys: string[] }) {
-	const visualProgressValues = useMemo(
-		() =>
-			routeKeys.map((routeKey) =>
-				AnimationStore.getValue(routeKey, "visualProgress"),
-			),
-		[routeKeys],
-	);
-
-	const stackProgressValues = useMemo(
-		() =>
-			routeKeys.map((routeKey) =>
-				AnimationStore.getValue(routeKey, "stackProgress"),
-			),
-		[routeKeys],
-	);
-
-	useDerivedValue(() => {
-		syncStackProgressValues(visualProgressValues, stackProgressValues);
-	});
-
-	return null;
-}
-
 export function StackProvider({
 	children,
 	value,
@@ -144,10 +134,17 @@ export function StackProvider({
 	});
 
 	return (
-		<StackContext.Provider value={store}>
-			<StackProgressOwner routeKeys={value.routeKeys} />
-			{children}
-		</StackContext.Provider>
+		<StackContext.Provider value={store}>{children}</StackContext.Provider>
+	);
+}
+
+export function useStackProgressEntries(): readonly StackProgressEntry[] {
+	const store = useStackStore();
+
+	return useSyncExternalStore(
+		store.subscribe,
+		store.getStackProgressEntries,
+		store.getStackProgressEntries,
 	);
 }
 

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

@@ -1,4 +1,5 @@
 import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
+import { completeBoundaryMeasurement } from "../../stores/bounds/internals/coordinator";
 import { setEntry } from "../../stores/bounds/internals/entries";
 import { setDestination, setSource } from "../../stores/bounds/internals/links";
 import type { ScreenPairKey } from "../../stores/bounds/types";
@@ -70,4 +71,8 @@ export const applyMeasuredBoundsWrites = (
 			{ handoff },
 		);
 	}
+
+	if (linkWrite) {
+		completeBoundaryMeasurement(linkWrite, entryTag);
+	}
 };

package/src/shared/providers/screen/animation/animation.provider.tsx

@@ -1,16 +1,10 @@
-import { type ReactNode, useCallback, useLayoutEffect, useMemo } from "react";
-import { useSharedValue } from "react-native-reanimated";
+import { type ReactNode, useMemo } from "react";
 import { createBoundsAccessor } from "../../../utils/bounds";
 import createProvider from "../../../utils/create-provider";
 import { useDescriptorsStore } from "../descriptors";
+import { useCurrentScreenRelationships } from "../use-current-screen-relationships";
 import { useScreenAnimationPipeline } from "./helpers/pipeline";
-import type {
-	RegisterScreenAnimationDescendant,
-	ScreenAnimationAncestorDescendantRegistrar,
-	ScreenAnimationDescendantSources,
-	ScreenAnimationSource,
-	ScreenAnimationTransitionSource,
-} from "./types";
+import type { ScreenAnimationTransitionSource } from "./types";
 
 type Props = {
 	children: ReactNode;
@@ -19,203 +13,76 @@ type Props = {
 export type ScreenAnimationContextValue = ReturnType<
 	typeof useScreenAnimationPipeline
 > & {
-	ancestorScreenAnimationSources: ScreenAnimationSource[];
-	descendantScreenAnimationSources: ScreenAnimationDescendantSources;
-	registerDescendantScreenAnimationSource: RegisterScreenAnimationDescendant;
-	ancestorDescendantScreenAnimationRegistrars: ScreenAnimationAncestorDescendantRegistrar[];
+	transitionSources: readonly ScreenAnimationTransitionSource[];
+	transitionOriginIndex: number;
+	transitionSourcesThroughSelf: readonly ScreenAnimationTransitionSource[];
+	transitionSourcesFromSelf: readonly ScreenAnimationTransitionSource[];
 };
 
-export type ScreenAnimationContextResult = {
-	key: string;
-	value: ScreenAnimationContextValue;
-};
-
-export const { ScreenAnimationProvider, useScreenAnimationStore } =
-	createProvider("ScreenAnimation", {
-		guarded: true,
-		global: true,
-	})<Props, ScreenAnimationContextValue>(
-		(_props, { useParentStore }): ScreenAnimationContextResult => {
-			const currentScreenKey = useDescriptorsStore(
-				(store) => store.derivations.currentScreenKey,
-			);
-			const parentScreenInterpolatorProps = useParentStore(
-				(parentContext) => parentContext?.screenInterpolatorProps,
-			);
-			const parentScreenInterpolatorPropsRevision = useParentStore(
-				(parentContext) => parentContext?.screenInterpolatorPropsRevision,
-			);
-			const parentAncestorScreenAnimationSources = useParentStore(
-				(parentContext) => parentContext?.ancestorScreenAnimationSources,
-			);
-			const parentRegisterDescendantScreenAnimationSource = useParentStore(
-				(parentContext) =>
-					parentContext?.registerDescendantScreenAnimationSource,
-			);
-			const parentAncestorDescendantScreenAnimationRegistrars = useParentStore(
-				(parentContext) =>
-					parentContext?.ancestorDescendantScreenAnimationRegistrars,
-			);
-
-			const {
-				screenInterpolatorProps,
-				screenInterpolatorPropsRevision,
-				selectedInterpolatorOptions,
-				nextInterpolator,
-				currentInterpolator,
-			} = useScreenAnimationPipeline();
-
-			const selfScreenAnimationSource = useMemo<ScreenAnimationSource>(
-				() => ({
-					screenInterpolatorProps,
-					screenInterpolatorPropsRevision,
+const EMPTY_TRANSITION_SOURCES: readonly ScreenAnimationTransitionSource[] = [];
+
+const createScreenAnimationProvider = createProvider("ScreenAnimation", {
+	global: true,
+})<Props, ScreenAnimationContextValue>;
+
+export const {
+	ScreenAnimationProvider,
+	useOptionalScreenAnimationStore,
+	useScreenAnimationStore,
+}: ReturnType<typeof createScreenAnimationProvider> =
+	createScreenAnimationProvider((_props) => {
+		const currentScreenKey = useDescriptorsStore(
+			(store) => store.derivations.currentScreenKey,
+		);
+		const relationships = useCurrentScreenRelationships();
+		const pipeline = useScreenAnimationPipeline();
+
+		const screenAnimationSource = useMemo<ScreenAnimationTransitionSource>(
+			() => ({
+				screenInterpolatorProps: pipeline.screenInterpolatorProps,
+				screenInterpolatorPropsRevision:
+					pipeline.screenInterpolatorPropsRevision,
+				boundsAccessor: createBoundsAccessor(() => {
+					"worklet";
+					return pipeline.screenInterpolatorProps.get();
 				}),
-				[screenInterpolatorProps, screenInterpolatorPropsRevision],
-			);
-
-			const selfScreenAnimationTransitionSource =
-				useMemo<ScreenAnimationTransitionSource>(
-					() => ({
-						...selfScreenAnimationSource,
-						boundsAccessor: createBoundsAccessor(() => {
-							"worklet";
-							return selfScreenAnimationSource.screenInterpolatorProps.get();
-						}),
-					}),
-					[selfScreenAnimationSource],
-				);
-
-			const descendantScreenAnimationSources = useSharedValue<
-				ScreenAnimationDescendantSources["value"]
-			>([]);
-
-			const registerDescendantScreenAnimationSource =
-				useCallback<RegisterScreenAnimationDescendant>(
-					(source, depth) => {
-						descendantScreenAnimationSources.modify(
-							<T extends ScreenAnimationDescendantSources["value"]>(
-								currentSources: T,
-							): T => {
-								"worklet";
-								const existingIndex = currentSources.findIndex(
-									(currentSource) => currentSource.source === source,
-								);
-
-								if (
-									existingIndex !== -1 &&
-									currentSources[existingIndex]?.depth === depth
-								) {
-									return currentSources;
-								}
-
-								const nextSources =
-									existingIndex === -1
-										? [...currentSources, { source, depth }]
-										: currentSources.map((currentSource, index) =>
-												index === existingIndex
-													? { source, depth }
-													: currentSource,
-											);
-
-								return nextSources.sort((a, b) => a.depth - b.depth) as T;
-							},
-						);
-
-						return () => {
-							descendantScreenAnimationSources.modify(
-								<T extends ScreenAnimationDescendantSources["value"]>(
-									currentSources: T,
-								): T => {
-									"worklet";
-									return currentSources.filter(
-										(currentSource) => currentSource.source !== source,
-									) as T;
-								},
-							);
-						};
-					},
-					[descendantScreenAnimationSources],
-				);
-
-			const ancestorScreenAnimationSources = useMemo(() => {
-				if (
-					!parentScreenInterpolatorProps ||
-					!parentScreenInterpolatorPropsRevision ||
-					!parentAncestorScreenAnimationSources
-				) {
-					return [];
-				}
-
-				return [
-					{
-						screenInterpolatorProps: parentScreenInterpolatorProps,
-						screenInterpolatorPropsRevision:
-							parentScreenInterpolatorPropsRevision,
-					},
-					...parentAncestorScreenAnimationSources,
-				];
-			}, [
-				parentScreenInterpolatorProps,
-				parentScreenInterpolatorPropsRevision,
-				parentAncestorScreenAnimationSources,
-			]);
-
-			const ancestorDescendantScreenAnimationRegistrars = useMemo(() => {
-				if (!parentRegisterDescendantScreenAnimationSource) {
-					return [];
-				}
-
-				// Each provider exposes its own descendant registrar and forwards ancestor
-				// registrars, letting a mounted child register with every ancestor scope.
-				return [
-					{
-						register: parentRegisterDescendantScreenAnimationSource,
-						depth: 1,
-					},
-					...(parentAncestorDescendantScreenAnimationRegistrars ?? []).map(
-						(registrar) => ({
-							register: registrar.register,
-							depth: registrar.depth + 1,
-						}),
-					),
-				];
-			}, [
-				parentRegisterDescendantScreenAnimationSource,
-				parentAncestorDescendantScreenAnimationRegistrars,
-			]);
-
-			useLayoutEffect(() => {
-				const cleanups = ancestorDescendantScreenAnimationRegistrars.map(
-					(registrar) =>
-						registrar.register(
-							selfScreenAnimationTransitionSource,
-							registrar.depth,
-						),
-				);
-
-				return () => {
-					for (const cleanup of cleanups) {
-						cleanup();
-					}
-				};
-			}, [
-				ancestorDescendantScreenAnimationRegistrars,
-				selfScreenAnimationTransitionSource,
-			]);
-
-			return {
-				key: currentScreenKey,
-				value: {
-					screenInterpolatorProps,
-					screenInterpolatorPropsRevision,
-					selectedInterpolatorOptions,
-					nextInterpolator,
-					currentInterpolator,
-					ancestorScreenAnimationSources,
-					descendantScreenAnimationSources,
-					registerDescendantScreenAnimationSource,
-					ancestorDescendantScreenAnimationRegistrars,
-				},
-			};
-		},
-	);
+			}),
+			[
+				pipeline.screenInterpolatorProps,
+				pipeline.screenInterpolatorPropsRevision,
+			],
+		);
+		const ancestorSources =
+			useOptionalScreenAnimationStore(
+				relationships.parentScreenKey,
+				(store) => store.transitionSourcesThroughSelf,
+			) ?? EMPTY_TRANSITION_SOURCES;
+		const descendantSources =
+			useOptionalScreenAnimationStore(
+				relationships.activeChildScreenKey,
+				(store) => store.transitionSourcesFromSelf,
+			) ?? EMPTY_TRANSITION_SOURCES;
+		const transitionSourcesThroughSelf = useMemo(
+			() => [...ancestorSources, screenAnimationSource],
+			[ancestorSources, screenAnimationSource],
+		);
+		const transitionSourcesFromSelf = useMemo(
+			() => [screenAnimationSource, ...descendantSources],
+			[screenAnimationSource, descendantSources],
+		);
+		const transitionSources = useMemo(
+			() => [...transitionSourcesThroughSelf, ...descendantSources],
+			[transitionSourcesThroughSelf, descendantSources],
+		);
+
+		return {
+			key: currentScreenKey,
+			value: {
+				...pipeline,
+				transitionSources,
+				transitionOriginIndex: ancestorSources.length,
+				transitionSourcesThroughSelf,
+				transitionSourcesFromSelf,
+			},
+		};
+	});

package/src/shared/providers/screen/animation/helpers/accessors/use-build-transition-accessor.ts

@@ -3,13 +3,8 @@ import type {
 	ScreenInterpolationProps,
 	ScreenTransitionTarget,
 } from "../../../../../types/animation.types";
-import { createBoundsAccessor } from "../../../../../utils/bounds";
 import type { ScreenAnimationContextValue } from "../../animation.provider";
-import type {
-	ScreenAnimationDescendantSources,
-	ScreenAnimationSource,
-	ScreenAnimationTransitionSource,
-} from "../../types";
+import type { ScreenAnimationTransitionSource } from "../../types";
 
 type TransitionSourceIndex = number;
 
@@ -17,10 +12,7 @@ export type TransitionAccessorSource = ScreenAnimationTransitionSource;
 
 type TransitionAccessorStore = Pick<
 	ScreenAnimationContextValue,
-	| "screenInterpolatorProps"
-	| "screenInterpolatorPropsRevision"
-	| "ancestorScreenAnimationSources"
-	| "descendantScreenAnimationSources"
+	"transitionSources" | "transitionOriginIndex"
 >;
 
 const resolveTargetIndex = (
@@ -48,29 +40,9 @@ const resolveTargetIndex = (
 export const createTransitionAccessor = (
 	sources: readonly TransitionAccessorSource[],
 	originIndex = 0,
-	descendantSources?: ScreenAnimationDescendantSources,
 ) => {
 	"worklet";
 
-	const getSources = (): readonly TransitionAccessorSource[] => {
-		"worklet";
-		if (!descendantSources) {
-			return sources;
-		}
-
-		const descendants = descendantSources.get();
-		if (descendants.length === 0) {
-			return sources;
-		}
-
-		const currentSources = sources.slice();
-		for (let index = 0; index < descendants.length; index++) {
-			currentSources.push(descendants[index].source);
-		}
-
-		return currentSources;
-	};
-
 	const buildScope = (
 		sourceIndex: TransitionSourceIndex,
 		currentSources: readonly TransitionAccessorSource[],
@@ -104,64 +76,21 @@ export const createTransitionAccessor = (
 
 	return (target?: ScreenTransitionTarget): ScreenInterpolationProps | null => {
 		"worklet";
-		const currentSources = getSources();
-		const targetIndex = resolveTargetIndex(
-			target,
-			originIndex,
-			currentSources.length,
-		);
+		const targetIndex = resolveTargetIndex(target, originIndex, sources.length);
 		if (targetIndex === -1) {
 			return null;
 		}
 
-		return buildScope(targetIndex, currentSources);
+		return buildScope(targetIndex, sources);
 	};
 };
 
-const buildSourceBoundsAccessor = (source: ScreenAnimationSource) => {
-	"worklet";
-	return createBoundsAccessor(() => {
-		"worklet";
-		return source.screenInterpolatorProps.get();
-	});
-};
-
 export const useBuildTransitionAccessor = ({
-	screenInterpolatorProps,
-	screenInterpolatorPropsRevision,
-	ancestorScreenAnimationSources,
-	descendantScreenAnimationSources,
+	transitionSources,
+	transitionOriginIndex,
 }: TransitionAccessorStore) => {
-	return useMemo(() => {
-		const selfSource = {
-			screenInterpolatorProps,
-			screenInterpolatorPropsRevision,
-		};
-
-		const transitionSources: TransitionAccessorSource[] =
-			ancestorScreenAnimationSources.map((source) => ({
-				...source,
-				boundsAccessor: buildSourceBoundsAccessor(source),
-			}));
-
-		const selfTransitionSource = {
-			...selfSource,
-			boundsAccessor: buildSourceBoundsAccessor(selfSource),
-		};
-
-		transitionSources.reverse();
-		const originIndex = transitionSources.length;
-		transitionSources.push(selfTransitionSource);
-
-		return createTransitionAccessor(
-			transitionSources,
-			originIndex,
-			descendantScreenAnimationSources,
-		);
-	}, [
-		screenInterpolatorProps,
-		screenInterpolatorPropsRevision,
-		ancestorScreenAnimationSources,
-		descendantScreenAnimationSources,
-	]);
+	return useMemo(
+		() => createTransitionAccessor(transitionSources, transitionOriginIndex),
+		[transitionSources, transitionOriginIndex],
+	);
 };