react-native-screen-transitions 3.3.0 → 3.4.0-alpha.1

package/src/shared/stores/bounds/internals/resolver.ts

@@ -0,0 +1,225 @@
+import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
+import { matchesScreenKey } from "../helpers/matching";
+import type {
+	ResolvedTransitionPair,
+	ResolveTransitionContext,
+	ScreenKey,
+	TagID,
+	TagLink,
+	TagState,
+} from "../types";
+import { getSnapshot } from "./registry";
+import { debugResolverLog, registry } from "./state";
+
+const findLatestLink = (
+	tagState: TagState,
+	predicate: (link: TagLink) => boolean,
+): TagLink | null => {
+	"worklet";
+	const stack = tagState.linkStack;
+	for (let i = stack.length - 1; i >= 0; i--) {
+		const link = stack[i];
+		if (predicate(link)) {
+			return link;
+		}
+	}
+	return null;
+};
+
+function findCompletedLinkByDestination(
+	tagState: TagState,
+	screenKey?: ScreenKey,
+): TagLink | null {
+	"worklet";
+	if (!screenKey) return null;
+
+	return findLatestLink(
+		tagState,
+		(link) =>
+			!!link.destination && matchesScreenKey(link.destination, screenKey),
+	);
+}
+
+function findCompletedLinkBySource(
+	tagState: TagState,
+	screenKey?: ScreenKey,
+): TagLink | null {
+	"worklet";
+	if (!screenKey) return null;
+
+	return findLatestLink(
+		tagState,
+		(link) => !!link.destination && matchesScreenKey(link.source, screenKey),
+	);
+}
+
+function findPendingLinkBySource(
+	tagState: TagState,
+	screenKey?: ScreenKey,
+): TagLink | null {
+	"worklet";
+	if (!screenKey) return null;
+
+	return findLatestLink(
+		tagState,
+		(link) =>
+			link.destination === null && matchesScreenKey(link.source, screenKey),
+	);
+}
+
+function getSnapshotBoundsByPriority(
+	tag: TagID,
+	keys: (ScreenKey | undefined)[],
+): {
+	bounds: MeasuredDimensions;
+	styles: StyleProps;
+	screenKey: ScreenKey;
+} | null {
+	"worklet";
+	for (let i = 0; i < keys.length; i++) {
+		const key = keys[i];
+		if (!key) continue;
+		const snapshot = getSnapshot(tag, key);
+		if (!snapshot) continue;
+		return {
+			bounds: snapshot.bounds,
+			styles: snapshot.styles,
+			screenKey: key,
+		};
+	}
+
+	return null;
+}
+
+function resolveTransitionPair(
+	tag: TagID,
+	context: ResolveTransitionContext,
+): ResolvedTransitionPair {
+	"worklet";
+	const tagState = registry.value[tag];
+	const stack = tagState?.linkStack;
+
+	let matchedLink: TagLink | null = null;
+	let usedPending = false;
+
+	if (tagState && stack && stack.length > 0) {
+		if (context.entering) {
+			matchedLink = findCompletedLinkByDestination(
+				tagState,
+				context.currentScreenKey,
+			);
+
+			if (!matchedLink) {
+				matchedLink = findPendingLinkBySource(
+					tagState,
+					context.previousScreenKey,
+				);
+				usedPending = !!matchedLink;
+			}
+
+			if (!matchedLink) {
+				matchedLink = findCompletedLinkBySource(
+					tagState,
+					context.previousScreenKey,
+				);
+			}
+
+			if (!matchedLink) {
+				matchedLink = findCompletedLinkByDestination(
+					tagState,
+					context.nextScreenKey,
+				);
+			}
+		} else {
+			matchedLink = findCompletedLinkBySource(
+				tagState,
+				context.currentScreenKey,
+			);
+
+			if (!matchedLink) {
+				matchedLink = findCompletedLinkByDestination(
+					tagState,
+					context.nextScreenKey,
+				);
+			}
+
+			if (!matchedLink) {
+				matchedLink = findPendingLinkBySource(
+					tagState,
+					context.currentScreenKey,
+				);
+				usedPending = !!matchedLink;
+			}
+		}
+	}
+
+	let sourceBounds = matchedLink?.source?.bounds ?? null;
+	let destinationBounds = matchedLink?.destination?.bounds ?? null;
+	let sourceStyles = matchedLink?.source?.styles ?? null;
+	let destinationStyles = matchedLink?.destination?.styles ?? null;
+	let sourceScreenKey = matchedLink?.source?.screenKey ?? null;
+	let destinationScreenKey = matchedLink?.destination?.screenKey ?? null;
+	let usedSnapshotSource = false;
+	let usedSnapshotDestination = false;
+
+	const sourceFallbackKeys = context.entering
+		? [
+				context.previousScreenKey,
+				context.currentScreenKey,
+				context.nextScreenKey,
+			]
+		: [
+				context.currentScreenKey,
+				context.previousScreenKey,
+				context.nextScreenKey,
+			];
+
+	const destinationFallbackKeys = context.entering
+		? [context.currentScreenKey, context.nextScreenKey]
+		: [context.nextScreenKey, context.currentScreenKey];
+
+	if (!sourceBounds) {
+		const sourceSnapshot = getSnapshotBoundsByPriority(tag, sourceFallbackKeys);
+		if (sourceSnapshot) {
+			sourceBounds = sourceSnapshot.bounds;
+			sourceStyles = sourceSnapshot.styles;
+			sourceScreenKey = sourceSnapshot.screenKey;
+			usedSnapshotSource = true;
+		}
+	}
+
+	if (!destinationBounds) {
+		const destinationSnapshot = getSnapshotBoundsByPriority(
+			tag,
+			destinationFallbackKeys,
+		);
+		if (destinationSnapshot) {
+			destinationBounds = destinationSnapshot.bounds;
+			destinationStyles = destinationSnapshot.styles;
+			destinationScreenKey = destinationSnapshot.screenKey;
+			usedSnapshotDestination = true;
+		}
+	}
+
+	if (!sourceBounds || !destinationBounds) {
+		debugResolverLog(
+			`unresolved tag=${tag} entering=${context.entering ? 1 : 0} source=${
+				sourceBounds ? 1 : 0
+			} destination=${destinationBounds ? 1 : 0} pending=${usedPending ? 1 : 0}`,
+		);
+	}
+
+	return {
+		sourceBounds,
+		destinationBounds,
+		sourceStyles,
+		destinationStyles,
+		sourceScreenKey,
+		destinationScreenKey,
+		usedPending,
+		usedSnapshotSource,
+		usedSnapshotDestination,
+	};
+}
+
+export { resolveTransitionPair };

package/src/shared/stores/bounds/internals/state.ts

@@ -0,0 +1,115 @@
+import { makeMutable } from "react-native-reanimated";
+import type { GroupState, PresenceState, TagID, TagState } from "../types";
+
+export const createEmptyTagState = (): TagState => {
+	"worklet";
+	return {
+		snapshots: {},
+		linkStack: [],
+	};
+};
+
+export type RegistryState = Record<TagID, TagState>;
+export type GroupsState = Record<string, GroupState>;
+
+export const registry = makeMutable<RegistryState>({});
+export const presence = makeMutable<PresenceState>({});
+export const groups = makeMutable<GroupsState>({});
+
+const RESOLVER_LOG_PREFIX = "[bounds:resolver]";
+const ENABLE_RESOLVER_DEBUG_LOGS = false;
+const CLEAR_LOG_PREFIX = "[bounds:clear]";
+const ENABLE_CLEAR_DEBUG_LOGS = false;
+const SIZE_LOG_PREFIX = "[bounds:size]";
+const ENABLE_SIZE_DEBUG_LOGS = false;
+
+type BoundStoreSize = {
+	tags: number;
+	snapshots: number;
+	links: number;
+	pendingLinks: number;
+	completedLinks: number;
+	presenceTags: number;
+	presenceEntries: number;
+	presenceCount: number;
+	groups: number;
+};
+
+export function debugResolverLog(message: string) {
+	"worklet";
+	if (!ENABLE_RESOLVER_DEBUG_LOGS) return;
+	console.warn(`${RESOLVER_LOG_PREFIX} ${message}`);
+}
+
+export function debugClearLog(message: string) {
+	"worklet";
+	if (!ENABLE_CLEAR_DEBUG_LOGS) return;
+	console.warn(`${CLEAR_LOG_PREFIX} ${message}`);
+}
+
+const collectBoundStoreSize = (): BoundStoreSize => {
+	"worklet";
+	const currentRegistry = registry.value;
+	const currentPresence = presence.value;
+	const currentGroups = groups.value;
+
+	let tags = 0;
+	let snapshots = 0;
+	let links = 0;
+	let pendingLinks = 0;
+	let completedLinks = 0;
+
+	for (const tag in currentRegistry) {
+		tags++;
+		const tagState = currentRegistry[tag];
+		for (const _snapshotKey in tagState.snapshots) {
+			snapshots++;
+		}
+		for (let i = 0; i < tagState.linkStack.length; i++) {
+			links++;
+			if (tagState.linkStack[i].destination === null) {
+				pendingLinks++;
+			} else {
+				completedLinks++;
+			}
+		}
+	}
+
+	let presenceTags = 0;
+	let presenceEntries = 0;
+	let presenceCount = 0;
+	for (const tag in currentPresence) {
+		presenceTags++;
+		const entries = currentPresence[tag];
+		for (const screenKey in entries) {
+			presenceEntries++;
+			presenceCount += entries[screenKey].count ?? 0;
+		}
+	}
+
+	let groupsCount = 0;
+	for (const _group in currentGroups) {
+		groupsCount++;
+	}
+
+	return {
+		tags,
+		snapshots,
+		links,
+		pendingLinks,
+		completedLinks,
+		presenceTags,
+		presenceEntries,
+		presenceCount,
+		groups: groupsCount,
+	};
+};
+
+export function debugStoreSizeLog(action: string) {
+	"worklet";
+	if (!ENABLE_SIZE_DEBUG_LOGS) return;
+	const size = collectBoundStoreSize();
+	console.warn(
+		`${SIZE_LOG_PREFIX} ${action} tags=${size.tags} snapshots=${size.snapshots} links=${size.links} pending=${size.pendingLinks} completed=${size.completedLinks} presenceTags=${size.presenceTags} presenceEntries=${size.presenceEntries} presenceCount=${size.presenceCount} groups=${size.groups}`,
+	);
+}

package/src/shared/stores/bounds/types.ts

@@ -0,0 +1,78 @@
+import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
+import type { BoundsMethod } from "../../types/bounds.types";
+import type {
+	BoundsAnchor,
+	BoundsScaleMode,
+} from "../../utils/bounds/types/options";
+
+export type TagID = string;
+export type ScreenKey = string;
+export type NavigatorKey = string;
+
+export type BoundaryConfig = {
+	anchor?: BoundsAnchor;
+	scaleMode?: BoundsScaleMode;
+	target?: "bound" | "fullscreen" | MeasuredDimensions;
+	method?: BoundsMethod;
+};
+
+export type Snapshot = {
+	bounds: MeasuredDimensions;
+	styles: StyleProps;
+};
+
+export type ScreenIdentifier = {
+	screenKey: ScreenKey;
+	ancestorKeys?: ScreenKey[];
+	navigatorKey?: NavigatorKey;
+	ancestorNavigatorKeys?: NavigatorKey[];
+};
+
+export type TagLink = {
+	source: ScreenIdentifier & Snapshot;
+	destination: (ScreenIdentifier & Snapshot) | null;
+};
+
+export type ResolveTransitionContext = {
+	currentScreenKey?: ScreenKey;
+	previousScreenKey?: ScreenKey;
+	nextScreenKey?: ScreenKey;
+	entering: boolean;
+};
+
+export type ResolvedTransitionPair = {
+	sourceBounds: MeasuredDimensions | null;
+	destinationBounds: MeasuredDimensions | null;
+	sourceStyles: StyleProps | null;
+	destinationStyles: StyleProps | null;
+	sourceScreenKey: ScreenKey | null;
+	destinationScreenKey: ScreenKey | null;
+	usedPending: boolean;
+	usedSnapshotSource: boolean;
+	usedSnapshotDestination: boolean;
+};
+
+export type SnapshotEntry = Snapshot & {
+	ancestorKeys?: ScreenKey[];
+	navigatorKey?: NavigatorKey;
+	ancestorNavigatorKeys?: NavigatorKey[];
+};
+
+export type TagState = {
+	snapshots: Record<ScreenKey, SnapshotEntry>;
+	linkStack: TagLink[];
+};
+
+export type PresenceEntry = {
+	count: number;
+	ancestorKeys?: ScreenKey[];
+	navigatorKey?: NavigatorKey;
+	ancestorNavigatorKeys?: NavigatorKey[];
+	boundaryConfig?: BoundaryConfig;
+};
+
+export type PresenceState = Record<TagID, Record<ScreenKey, PresenceEntry>>;
+
+export type GroupState = {
+	activeId: string;
+};

package/src/shared/stores/gesture.store.ts

@@ -6,69 +6,94 @@ import {
 import type { GestureDirection } from "../types/gesture.types";
 import type { ScreenKey } from "../types/screen.types";
 
-type GestureKey =
-	| "x"
-	| "y"
-	| "normalizedX"
-	| "normalizedY"
-	| "isDismissing"
-	| "isDragging";
-
 export type GestureStoreMap = {
 	x: SharedValue<number>;
 	y: SharedValue<number>;
+	normX: SharedValue<number>;
+	normY: SharedValue<number>;
+	dismissing: SharedValue<number>;
+	dragging: SharedValue<number>;
+	direction: SharedValue<Omit<GestureDirection, "bidirectional"> | null>;
+
+	/** @deprecated Use `normX` instead. */
 	normalizedX: SharedValue<number>;
+	/** @deprecated Use `normY` instead. */
 	normalizedY: SharedValue<number>;
+	/** @deprecated Use `dismissing` instead. */
 	isDismissing: SharedValue<number>;
+	/** @deprecated Use `dragging` instead. */
 	isDragging: SharedValue<number>;
-	direction: SharedValue<Omit<GestureDirection, "bidirectional"> | null>;
 };
 
 const store: Record<ScreenKey, GestureStoreMap> = {};
+let neutralGestures: GestureStoreMap | undefined;
+
+function createGestureBag(): GestureStoreMap {
+	const normX = makeMutable(0);
+	const normY = makeMutable(0);
+	const dismissing = makeMutable(0);
+	const dragging = makeMutable(0);
+
+	return {
+		x: makeMutable(0),
+		y: makeMutable(0),
+		normX,
+		normY,
+		dismissing,
+		dragging,
+		direction: makeMutable<Omit<GestureDirection, "bidirectional"> | null>(
+			null,
+		),
+
+		// Deprecated aliases (same underlying SharedValue)
+		normalizedX: normX,
+		normalizedY: normY,
+		isDismissing: dismissing,
+		isDragging: dragging,
+	};
+}
 
 function ensure(routeKey: ScreenKey): GestureStoreMap {
 	let bag = store[routeKey];
 	if (!bag) {
-		bag = {
-			x: makeMutable(0),
-			y: makeMutable(0),
-			normalizedX: makeMutable(0),
-			normalizedY: makeMutable(0),
-			isDismissing: makeMutable(0),
-			isDragging: makeMutable(0),
-			direction: makeMutable<Omit<GestureDirection, "bidirectional"> | null>(
-				null,
-			),
-		};
+		bag = createGestureBag();
 		store[routeKey] = bag;
 	}
 	return bag;
 }
 
-function getGesture(routeKey: ScreenKey, gestureKey: GestureKey) {
-	return ensure(routeKey)[gestureKey];
+function peekRouteGestures(routeKey: ScreenKey): GestureStoreMap | undefined {
+	return store[routeKey];
 }
 
 function getRouteGestures(routeKey: ScreenKey) {
 	return ensure(routeKey);
 }
 
+function getNeutralGestures(): GestureStoreMap {
+	if (!neutralGestures) {
+		neutralGestures = createGestureBag();
+	}
+	return neutralGestures;
+}
+
 function clear(routeKey: ScreenKey) {
 	const bag = store[routeKey];
 	if (bag) {
 		cancelAnimation(bag.x);
 		cancelAnimation(bag.y);
-		cancelAnimation(bag.normalizedX);
-		cancelAnimation(bag.normalizedY);
-		cancelAnimation(bag.isDismissing);
-		cancelAnimation(bag.isDragging);
+		cancelAnimation(bag.normX);
+		cancelAnimation(bag.normY);
+		cancelAnimation(bag.dismissing);
+		cancelAnimation(bag.dragging);
 		cancelAnimation(bag.direction);
 	}
 	delete store[routeKey];
 }
 
 export const GestureStore = {
-	getGesture,
+	peekRouteGestures,
 	getRouteGestures,
+	getNeutralGestures,
 	clear,
 };