react-native-screen-transitions 4.0.0-alpha.0 → 4.0.0-alpha.10

package/src/configs/presets.ts

@@ -237,10 +237,10 @@ export const ElasticCard = (
 };
 
 export const SharedIGImage = ({
-	sharedBoundTag,
+	id,
 	...config
 }: Partial<ScreenTransitionConfig> & {
-	sharedBoundTag: string;
+	id: string;
 }): ScreenTransitionConfig => {
 	return {
 		gestureEnabled: true,
@@ -278,11 +278,11 @@ export const SharedIGImage = ({
 
 			const navigationStyles =
 				bounds({
-					id: sharedBoundTag,
+					id,
 				}).navigation.zoom() ?? {};
 
-			// Extract raw style values from bounds result (legacy format)
-			const sourceStyle = navigationStyles[sharedBoundTag] as
+			// Read the bound-specific slots before normalizing the full result.
+			const sourceStyle = navigationStyles[id] as
 				| Record<string, unknown>
 				| undefined;
 			const containerStyle = navigationStyles[
@@ -292,10 +292,9 @@ export const SharedIGImage = ({
 				| Record<string, unknown>
 				| undefined;
 
-			// Normalize bounds result to new slot format for spreading
 			const normalizedNav = normalizeInterpolatedStyle(
 				navigationStyles as Record<string, any>,
-			).result;
+			);
 
 			if (focused) {
 				return {
@@ -347,7 +346,7 @@ export const SharedIGImage = ({
 						pointerEvents: current.gesture.dismissing ? "none" : "auto",
 					},
 				},
-				[sharedBoundTag]: {
+				[id]: {
 					style: {
 						...(sourceStyle ?? {}),
 						transform: [
@@ -384,10 +383,10 @@ export const SharedIGImage = ({
 };
 
 export const SharedAppleMusic = ({
-	sharedBoundTag,
+	id,
 	...config
 }: Partial<ScreenTransitionConfig> & {
-	sharedBoundTag: string;
+	id: string;
 }): ScreenTransitionConfig => {
 	return {
 		enableTransitions: true,
@@ -405,8 +404,7 @@ export const SharedAppleMusic = ({
 
 			const normX = active.gesture.handoff.normX;
 			const normY = active.gesture.handoff.normY;
-			const initialGesture =
-				active.gesture.handoff.active ?? active.gesture.handoff.direction;
+			const initialGesture = active.gesture.handoff.active;
 
 			/**
 			 * ===============================
@@ -434,7 +432,7 @@ export const SharedAppleMusic = ({
 			const dragXScale = interpolate(normX, [0, 1], xScaleOuput);
 			const dragYScale = interpolate(normY, [0, 1], yScaleOuput);
 
-			const boundValues = bounds({ id: sharedBoundTag }).values({
+			const boundValues = bounds({ id }).values({
 				method: focused ? "content" : "transform",
 				anchor: "top",
 				scaleMode: "uniform",
@@ -453,7 +451,7 @@ export const SharedAppleMusic = ({
 			 * ===============================
 			 */
 			if (focused) {
-				const maskedValues = bounds({ id: sharedBoundTag }).values({
+				const maskedValues = bounds({ id }).values({
 					space: "absolute",
 					method: "size",
 					target: "fullscreen",
@@ -545,7 +543,7 @@ export const SharedAppleMusic = ({
 			const contentScale = interpolate(progress, [1, 2], [1, 0.9], "clamp");
 
 			return {
-				[sharedBoundTag]: {
+				[id]: {
 					style: {
 						transform: [
 							{ translateX: dragX || 0 },
@@ -593,10 +591,10 @@ export const SharedAppleMusic = ({
 };
 
 export const SharedXImage = ({
-	sharedBoundTag,
+	id,
 	...config
 }: Partial<ScreenTransitionConfig> & {
-	sharedBoundTag: string;
+	id: string;
 }): ScreenTransitionConfig => {
 	return {
 		//@ts-expect-error - Should not lead to any issues
@@ -616,16 +614,15 @@ export const SharedXImage = ({
 
 			const navigationStyles =
 				bounds({
-					id: sharedBoundTag,
+					id,
 				}).navigation.zoom() ?? {};
 			const maskStyle = navigationStyles[NAVIGATION_MASK_ELEMENT_STYLE_ID] as
 				| Record<string, unknown>
 				| undefined;
 
-			// Normalize bounds result to new slot format for spreading
 			const normalizedNav = normalizeInterpolatedStyle(
 				navigationStyles as Record<string, any>,
-			).result;
+			);
 
 			const dragY = interpolate(
 				current.gesture.normY,

package/src/constants.ts

@@ -10,16 +10,10 @@ import type {
 	GestureTracking,
 	Layout,
 	SheetScrollGestureBehavior,
+	SheetSnapBehavior,
 } 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,19 +59,11 @@ const DEFAULT_GESTURE_VALUES = {
 		pinchOriginY: 0,
 		raw: DEFAULT_RAW_GESTURE_VALUES,
 		active: null,
-		direction: null,
 	},
 	dismissing: 0,
 	dragging: 0,
 	settling: 0,
-	active: null,
-	direction: null,
-
-	// Deprecated aliases
-	normalizedX: 0,
-	normalizedY: 0,
-	isDismissing: 0,
-	isDragging: 0,
+	initiator: "none",
 } as const;
 
 const createDefaultGestureValues = () => ({
@@ -106,7 +92,6 @@ export const createScreenTransitionState = (
 	animating: 0,
 	willAnimate: 0,
 	settled: 1,
-	logicallySettled: 1,
 	entering: 0,
 	gesture: createDefaultGestureValues(),
 	route,
@@ -133,7 +118,6 @@ export const DEFAULT_SCREEN_TRANSITION_STATE: ScreenTransitionState =
 		animating: 0,
 		willAnimate: 0,
 		settled: 1,
-		logicallySettled: 1,
 		entering: 0,
 		gesture: createDefaultGestureValues(),
 		route: {} as RouteProp<ParamListBase>,
@@ -184,6 +168,7 @@ export const DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE = 1;
 export const DEFAULT_GESTURE_DIRECTION = "horizontal";
 export const DEFAULT_GESTURE_TRACKING: GestureTracking = "auto";
 export const DEFAULT_GESTURE_SNAP_LOCKED = false;
+export const DEFAULT_SHEET_SNAP_BEHAVIOR: SheetSnapBehavior = "continuous";
 export const DEFAULT_GESTURE_ACTIVATION_AREA: ActivationArea = "screen";
 export const DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR: SheetScrollGestureBehavior =
 	"expand-and-collapse";

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,35 +1,59 @@
 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 current = useDescriptorsStore((store) => store.descriptors.current);
-	const requestStackDismiss = useStack((stack) => stack.requestDismiss);
-
-	const requestDismiss = useCallback((): boolean => {
-		return requestStackDismiss?.({ route: current.route }) ?? false;
-	}, [current.route, requestStackDismiss]);
+	const route = useDescriptorsStore((store) => store.current.route);
+	const navigation = useDescriptorsStore((store) => store.current.navigation);
+	const requestStackDismiss = useBlankStackStore(
+		(stack) => stack.requestDismiss,
+	);
 
 	const dismissScreen = useCallback((): boolean => {
-		const state = current.navigation.getState();
+		const state = navigation.getState();
 		const routeIndex = state.routes.findIndex(
-			(route) => route.key === current.route.key,
+			(stateRoute) => stateRoute.key === route.key,
 		);
 		const routeStillPresent = routeIndex !== -1;
 		if (!routeStillPresent || routeIndex === 0) return false;
 
-		current.navigation.dispatch({
-			...createPopAction(),
-			source: current.route.key,
+		const action = {
+			type: "POP",
+			payload: { count: 1 },
+			source: route.key,
 			target: state.key,
+		};
+		dispatchCloseAction(action, (closeAction) => {
+			navigation.dispatch(closeAction);
 		});
 		return true;
-	}, [current]);
+	}, [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,
-	useDescriptors,
-} 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,9 +60,8 @@ export interface ScreenState<
 export function useScreenState<
 	TNavigation extends BaseStackNavigation = BaseStackNavigation,
 >(): ScreenState<TNavigation> {
-	const { routes, scenes, routeKeys, focusedIndex } =
-		useStack<StackContextValue>();
-	const { current } = useDescriptors<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,
@@ -80,6 +73,8 @@ export type {
 	ScreenInterpolationProps,
 	ScreenLayerComponentProps,
 	ScreenStyleInterpolator,
+	ScreenSurfaceComponent,
+	ScreenSurfaceComponentProps,
 	ScreenTransitionAccessor,
 	ScreenTransitionConfig,
 	ScreenTransitionDepthTarget,
@@ -88,6 +83,7 @@ export type {
 	ScrollGestureAxisState,
 	ScrollGestureState,
 	ScrollMetadataState,
+	SheetSnapBehavior,
 	TransitionInterpolatedStyle,
 	TransitionSlotProps,
 	TransitionSlotStyle,