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

package/src/constants.ts

@@ -13,13 +13,6 @@ import type {
 } from "./types/screen.types";
 import type { BaseStackRoute } from "./types/stack.types";
 
-/**
- * Masked view integration
- * @deprecated No longer in use. Use {@link NAVIGATION_MASK_ELEMENT_STYLE_ID} and {@link NAVIGATION_MASK_CONTAINER_STYLE_ID} instead.
- */
-export const MASK_STYLE_ID = "_ROOT_MASKED";
-export const CONTAINER_STYLE_ID = "_ROOT_CONTAINER";
-
 /**
  * Navigation mask integration
  */
@@ -65,20 +58,11 @@ const DEFAULT_GESTURE_VALUES = {
 		pinchOriginY: 0,
 		raw: DEFAULT_RAW_GESTURE_VALUES,
 		active: null,
-		direction: null,
 	},
 	dismissing: 0,
 	dragging: 0,
 	settling: 0,
-	active: null,
 	initiator: "none",
-	direction: null,
-
-	// Deprecated aliases
-	normalizedX: 0,
-	normalizedY: 0,
-	isDismissing: 0,
-	isDragging: 0,
 } as const;
 
 const createDefaultGestureValues = () => ({
@@ -107,7 +91,6 @@ export const createScreenTransitionState = (
 	animating: 0,
 	willAnimate: 0,
 	settled: 1,
-	logicallySettled: 1,
 	entering: 0,
 	gesture: createDefaultGestureValues(),
 	route,
@@ -134,7 +117,6 @@ export const DEFAULT_SCREEN_TRANSITION_STATE: ScreenTransitionState =
 		animating: 0,
 		willAnimate: 0,
 		settled: 1,
-		logicallySettled: 1,
 		entering: 0,
 		gesture: createDefaultGestureValues(),
 		route: {} as RouteProp<ParamListBase>,

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,23 +1,19 @@
-import {
-	StackActions,
-	usePreventRemoveContext,
-} from "@react-navigation/native";
 import { useCallback } from "react";
 import { useDescriptorsStore } from "../../providers/screen/descriptors";
+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";
-import { useStack } from "./use-stack";
 
 export function useNavigationHelpers() {
 	const route = useDescriptorsStore((store) => store.current.route);
 	const navigation = useDescriptorsStore((store) => store.current.navigation);
-	const requestStackDismiss = useStack((stack) => stack.requestDismiss);
-	const { preventedRoutes } = usePreventRemoveContext();
-	const isRemovePrevented = preventedRoutes[route.key]?.preventRemove === true;
+	const requestStackDismiss = useBlankStackStore(
+		(stack) => stack.requestDismiss,
+	);
 
 	const dismissScreen = useCallback((): boolean => {
 		const state = navigation.getState();
@@ -28,7 +24,8 @@ export function useNavigationHelpers() {
 		if (!routeStillPresent || routeIndex === 0) return false;
 
 		const action = {
-			...StackActions.pop(),
+			type: "POP",
+			payload: { count: 1 },
 			source: route.key,
 			target: state.key,
 		};
@@ -39,8 +36,6 @@ export function useNavigationHelpers() {
 	}, [navigation, route.key]);
 
 	const requestDismiss = useCallback((): boolean => {
-		if (isRemovePrevented) return false;
-
 		if (requestStackDismiss) {
 			if (!requestStackDismiss({ route })) return false;
 		} else {
@@ -58,7 +53,7 @@ export function useNavigationHelpers() {
 			);
 		}
 		return true;
-	}, [isRemovePrevented, navigation, route, requestStackDismiss]);
+	}, [navigation, route, requestStackDismiss]);
 
-	return { dismissScreen, isRemovePrevented, requestDismiss };
+	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/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;
+}