react-native-screen-transitions 3.13.0-beta.0 → 3.13.0

package/src/shared/components/overlay/variations/overlay-host.tsx

@@ -7,11 +7,11 @@ import { StyleSheet, View } from "react-native";
 import Animated, { useDerivedValue } from "react-native-reanimated";
 import { snapDescriptorToIndex } from "../../../animation/snap-to";
 import { useStack } from "../../../hooks/navigation/use-stack";
-import { useScreenAnimationStore } from "../../../providers/screen/animation";
+import { useOptionalScreenAnimationStore } from "../../../providers/screen/animation";
 import type { ScreenAnimationContextValue } from "../../../providers/screen/animation/animation.provider";
 import {
 	type ScreenSlotContextValue,
-	useScreenSlots,
+	useOptionalScreenSlotStore,
 } from "../../../providers/screen/styles/slot.provider";
 import type { OverlayProps } from "../../../types/overlay.types";
 import type {
@@ -39,12 +39,16 @@ export const OverlayHost = memo(function OverlayHost({
 	activity,
 	layerIndex,
 }: OverlayHostProps) {
-	const overlayAnimationStore = useScreenAnimationStore(scene.route.key);
-	const driverAnimationStore = useScreenAnimationStore(driverScene.route.key);
-	const previousOverlayAnimationStore = useScreenAnimationStore(
+	const overlayAnimationStore = useOptionalScreenAnimationStore(
+		scene.route.key,
+	);
+	const driverAnimationStore = useOptionalScreenAnimationStore(
+		driverScene.route.key,
+	);
+	const previousOverlayAnimationStore = useOptionalScreenAnimationStore(
 		previousOverlayScene?.route.key ?? scene.route.key,
 	);
-	const driverSlots = useScreenSlots(driverScene.route.key);
+	const driverSlots = useOptionalScreenSlotStore(driverScene.route.key);
 	const overlayComponentRef = useRef(scene.descriptor.options.overlay);
 	const OverlayComponent = overlayComponentRef.current;
 	const readyResourcesRef = useRef<ReadyOverlayResources | null>(null);
@@ -105,6 +109,7 @@ function ReadyOverlayHost({
 	const focusedDescriptor = focusedScene?.descriptor;
 	const { animatedProps, animatedStyle } = useOverlaySlot({
 		overlayAnimationStore,
+		overlayInterpolator: scene.descriptor.options.screenStyleInterpolator,
 		driverAnimationStore,
 		previousOverlayAnimationStore: previousOverlayAnimationStore ?? undefined,
 		driverInterpolator: driverScene.descriptor.options.screenStyleInterpolator,

package/src/shared/components/screen-container/layers/content.tsx

@@ -1,10 +1,9 @@
-/** biome-ignore-all lint/style/noNonNullAssertion: <Screen gesture is under the gesture context, so this will always exist.> */
 import { type ComponentType, memo, useMemo } from "react";
 import { StyleSheet, View } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
 import Animated from "react-native-reanimated";
 import { useDescriptorsStore } from "../../../providers/screen/descriptors";
-import { useGestureStore } from "../../../providers/screen/gestures";
+import { useScreenGestureStore } from "../../../providers/screen/gestures";
 import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
 import type { ScreenContentComponentProps } from "../../../types";
 import { ScreenFallbackHost } from "../../boundary/portal/components/boundary-portal/components/host";
@@ -21,7 +20,7 @@ type Props = {
 
 export const ContentLayer = memo(
 	({ children, pointerEvents, isBackdropActive }: Props) => {
-		const gestureContext = useGestureStore();
+		const gestureContext = useScreenGestureStore();
 		const ContentComponent = useDescriptorsStore(
 			(store) => store.options.contentComponent,
 		);
@@ -71,7 +70,7 @@ export const ContentLayer = memo(
 		);
 
 		return (
-			<GestureDetector gesture={gestureContext!.detectorGesture}>
+			<GestureDetector gesture={gestureContext.detectorGesture}>
 				{AnimatedContentComponent ? (
 					<AnimatedContentComponent
 						style={contentStyles}

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

@@ -2,11 +2,9 @@ import { useLayoutEffect, useMemo, useRef } from "react";
 import { useNavigationHelpers } from "../../../hooks/navigation/use-navigation-helpers";
 import useStableCallback from "../../../hooks/use-stable-callback";
 import { hasTransitionsEnabled } from "../../../providers/screen/animation/helpers/has-transitions-enabled";
-import {
-	type BaseDescriptor,
-	useDescriptorsStore,
-} from "../../../providers/screen/descriptors";
-import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
+import type { BaseDescriptor } from "../../../providers/screen/descriptors";
+import { useCurrentScreenRelationships } from "../../../providers/screen/use-current-screen-relationships";
+import { useOptionalBlankStackStore } from "../../../providers/stack/blank-stack.provider";
 import { useStackCoreStore } from "../../../providers/stack/core.provider";
 import { GestureStore } from "../../../stores/gesture.store";
 import { StackType } from "../../../types/stack.types";
@@ -24,18 +22,16 @@ export function useCloseTransitionIntent(current: BaseDescriptor): {
 	completeClose: () => void;
 } {
 	const routeKey = current.route.key;
+	const flags = useStackCoreStore((store) => store.flags);
 	const { STACK_TYPE: stackType, TRANSITIONS_ALWAYS_ON: transitionsAlwaysOn } =
-		useStackCoreStore((store) => store.flags);
-	const handleCloseRoute = useBlankStackStore(
+		flags;
+	const handleCloseRoute = useOptionalBlankStackStore(
 		(store) => store?.handleCloseRoute,
 	);
-	const isBlankStackClosing = useBlankStackStore(
+	const isBlankStackClosing = useOptionalBlankStackStore(
 		(store) => store?.scenesByKey[routeKey]?.activity === "closing",
 	);
-	const ancestorKeys = useDescriptorsStore(
-		(store) => store.derivations.ancestorKeys,
-	);
-	const parentScreenKey = ancestorKeys[0];
+	const { parentScreenKey } = useCurrentScreenRelationships();
 	const { dismissScreen, requestDismiss } = useNavigationHelpers();
 	const pendingActionRef = useRef<any>(null);
 

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

@@ -0,0 +1,199 @@
+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/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,
 	);
 }