react-native-screen-transitions 4.0.0-alpha.6 → 4.0.0-alpha.8

package/src/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/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/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/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/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/hooks/navigation/use-navigation-helpers.ts

@@ -1,20 +1,19 @@
 import { useCallback } from "react";
 import { useDescriptorsStore } from "../../providers/screen/descriptors";
-import { useStack } from "./use-stack";
-
-const createPopAction = () => ({
-	type: "POP",
-	payload: { count: 1 },
-});
+import { useBlankStackStore } from "../../providers/stack/blank-stack.provider";
+import { AnimationStore } from "../../stores/animation.store";
+import {
+	LifecycleTransitionRequestKind,
+	SystemStore,
+} from "../../stores/system.store";
+import { dispatchCloseAction } from "../../utils/navigation/close-action-replay";
 
 export function useNavigationHelpers() {
 	const route = useDescriptorsStore((store) => store.current.route);
 	const navigation = useDescriptorsStore((store) => store.current.navigation);
-	const requestStackDismiss = useStack((stack) => stack.requestDismiss);
-
-	const requestDismiss = useCallback((): boolean => {
-		return requestStackDismiss?.({ route }) ?? false;
-	}, [route, requestStackDismiss]);
+	const requestStackDismiss = useBlankStackStore(
+		(stack) => stack.requestDismiss,
+	);
 
 	const dismissScreen = useCallback((): boolean => {
 		const state = navigation.getState();
@@ -24,13 +23,37 @@ export function useNavigationHelpers() {
 		const routeStillPresent = routeIndex !== -1;
 		if (!routeStillPresent || routeIndex === 0) return false;
 
-		navigation.dispatch({
-			...createPopAction(),
+		const action = {
+			type: "POP",
+			payload: { count: 1 },
 			source: route.key,
 			target: state.key,
+		};
+		dispatchCloseAction(action, (closeAction) => {
+			navigation.dispatch(closeAction);
 		});
 		return true;
 	}, [navigation, route.key]);
 
+	const requestDismiss = useCallback((): boolean => {
+		if (requestStackDismiss) {
+			if (!requestStackDismiss({ route })) return false;
+		} else {
+			const state = navigation.getState();
+			const routeIndex = state.routes.findIndex(
+				(stateRoute) => stateRoute.key === route.key,
+			);
+			if (routeIndex <= 0) return false;
+		}
+
+		if (!AnimationStore.getValue(route.key, "closing").get()) {
+			SystemStore.getBag(route.key).actions.requestLifecycleTransition(
+				LifecycleTransitionRequestKind.Close,
+				0,
+			);
+		}
+		return true;
+	}, [navigation, route, requestStackDismiss]);
+
 	return { dismissScreen, requestDismiss };
 }

package/src/hooks/navigation/use-screen-state.ts

@@ -1,13 +1,10 @@
 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 { useBlankStackStore } from "../../providers/stack/blank-stack.provider";
 import type { ScreenTransitionConfig } from "../../types/screen.types";
 import type { BaseStackNavigation } from "../../types/stack.types";
-import { type StackContextValue, useStack } from "./use-stack";
 
 export interface ScreenState<
 	TNavigation extends BaseStackNavigation = BaseStackNavigation,
@@ -63,11 +60,8 @@ export interface ScreenState<
 export function useScreenState<
 	TNavigation extends BaseStackNavigation = BaseStackNavigation,
 >(): ScreenState<TNavigation> {
-	const { routes, scenes, routeKeys, focusedIndex } =
-		useStack<StackContextValue>();
-	const current = useDescriptorsStore(
-		(store) => store.current,
-	) as BaseDescriptor;
+	const { routes, scenes, routeKeys, focusedIndex } = useBlankStackStore();
+	const current = useDescriptorsStore((store) => store.current);
 
 	const index = useMemo(
 		() => routeKeys.indexOf(current.route.key),

package/src/hooks/reanimated/use-shared-value-ref.ts

@@ -1,17 +1,16 @@
 import { useCallback, useRef } from "react";
 import { type SharedValue, useAnimatedReaction } from "react-native-reanimated";
-import { executeOnUIRuntimeSync, scheduleOnRN } from "react-native-worklets";
+import { runOnUISync, scheduleOnRN } from "react-native-worklets";
 import { IS_WEB } from "../../constants";
 
 export function readInitialValue<T>(sharedValue: SharedValue<T>): T {
 	if (IS_WEB) {
 		return sharedValue.get();
 	}
-	const readOnUI = executeOnUIRuntimeSync((sv: SharedValue<T>) => {
+	return runOnUISync((sv: SharedValue<T>) => {
 		"worklet";
 		return sv.get();
-	});
-	return readOnUI(sharedValue);
+	}, sharedValue);
 }
 
 /**

package/src/index.ts

@@ -2,7 +2,6 @@ import { FlatList, Pressable, ScrollView, View } from "react-native";
 import { withScreenTransitions } from "./adapters/with-screen-transitions";
 import { Boundary, createBoundaryComponent } from "./components/boundary";
 import { createTransitionAwareComponent } from "./components/create-transition-aware-component";
-import MaskedView from "./components/masked-view";
 import { Presets, Specs } from "./configs";
 
 export default {
@@ -18,11 +17,6 @@ export default {
 	FlatList: createTransitionAwareComponent(FlatList, {
 		isScrollable: true,
 	}),
-	/**
-	 * @deprecated Use `navigationMaskEnabled` with the navigation mask style IDs
-	 * instead.
-	 */
-	MaskedView: MaskedView,
 	Presets,
 	Specs,
 };
@@ -65,12 +59,11 @@ export type {
 	BoundsNavigationRevealStyle,
 	BoundsNavigationZoomAxisResponse,
 	BoundsNavigationZoomDragOptions,
-	BoundsNavigationZoomOpacityRange,
-	BoundsNavigationZoomOpacityRanges,
 	BoundsNavigationZoomOptions,
 	BoundsNavigationZoomStyle,
 	GestureHandoffValues,
 	InactiveBehavior,
+	OverlayComponent,
 	OverlayProps,
 	RawGestureValues,
 	ScreenBackdropComponent,

package/src/navigators/create-blank-stack-navigator.tsx

@@ -18,7 +18,6 @@ import type {
 	BaseStackNavigation,
 	BaseStackRoute,
 	BaseStackState,
-	StackDescriptorSource,
 } from "../types/stack.types";
 
 export type BlankStackStandardEventMap = {};
@@ -35,10 +34,7 @@ type StandardDescriptor = NavigatorDescriptor<BlankStackNavigationOptions> & {
 };
 
 type StandardDescriptorMap = Record<string, StandardDescriptor>;
-type BlankStackDescriptorSourceMap = Record<
-	string,
-	StackDescriptorSource<BlankStackDescriptor>
->;
+type BlankStackDescriptorMap = Record<string, BlankStackDescriptor>;
 
 function createDescriptorMap({
 	routes,
@@ -48,8 +44,8 @@ function createDescriptorMap({
 	routes: BaseStackRoute[];
 	descriptors: StandardDescriptorMap;
 	navigation: BaseStackNavigation;
-}): BlankStackDescriptorSourceMap {
-	const result: BlankStackDescriptorSourceMap = {};
+}): BlankStackDescriptorMap {
+	const result: BlankStackDescriptorMap = {};
 
 	for (const route of routes) {
 		const descriptor = descriptors[route.key];
@@ -82,8 +78,6 @@ export const BlankStackNavigator = createStandardNavigator<
 		navigation,
 		navigationHost,
 		navigationState,
-		nativeScreens,
-		enableNativeScreens,
 	}) => {
 		const stackState = navigationState ?? {
 			key: "blank-stack",
@@ -111,7 +105,6 @@ export const BlankStackNavigator = createStandardNavigator<
 			[actions],
 		);
 		const stackNavigation = navigation ?? fallbackNavigation;
-		const nativeScreensEnabled = nativeScreens ?? enableNativeScreens ?? true;
 		const stackDescriptors = React.useMemo(
 			() =>
 				createDescriptorMap({
@@ -139,7 +132,6 @@ export const BlankStackNavigator = createStandardNavigator<
 		return (
 			<NavigationHostProvider value={navigationHost}>
 				<StackView
-					DISABLE_NATIVE_SCREENS={!nativeScreensEnabled}
 					state={stackState}
 					navigation={stackNavigation as BlankStackNavigationHelpers}
 					descriptors={stackDescriptors}

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

@@ -67,7 +67,7 @@ export const applyMeasuredBoundsWrites = (
 			measured,
 			preparedStyles,
 			group,
-			{ handoff, escapeClipping },
+			{ handoff },
 		);
 	}
 };

package/src/providers/navigation/navigation-host.provider.tsx

@@ -27,6 +27,9 @@ const NavigationHostContext = createContext<NavigationHostContextValue>(
 );
 NavigationHostContext.displayName = "NavigationHost";
 
+const NavigationRouteContext = createContext<BaseStackRoute | null>(null);
+NavigationRouteContext.displayName = "StandardNavigationRoute";
+
 export function NavigationHostProvider({
 	children,
 	value,
@@ -53,8 +56,20 @@ export function NavigationScreenProvider({
 	const { ScreenProvider } = useContext(NavigationHostContext);
 
 	return (
-		<ScreenProvider navigation={navigation} route={route}>
-			{children}
-		</ScreenProvider>
+		<NavigationRouteContext.Provider value={route}>
+			<ScreenProvider navigation={navigation} route={route}>
+				{children}
+			</ScreenProvider>
+		</NavigationRouteContext.Provider>
 	);
 }
+
+export function useNavigationRoute() {
+	const route = useContext(NavigationRouteContext);
+
+	if (!route) {
+		throw new Error("Navigation route is unavailable");
+	}
+
+	return route;
+}