react-native-screen-transitions 3.6.0-alpha.1 → 3.6.0-alpha.3

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

@@ -1,72 +1,169 @@
 import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
 import {
-	findLatestPendingSourceLinkIndex,
-	findLinkIndexForDestinationWrite,
-	hasLinkSide,
-	isCompletedLinkForScreenKey,
-	isSameScreenFamily,
-	selectSourceUpdateTargetIndex,
-} from "../helpers/link.helpers";
-import { ensureTagState } from "../helpers/tag-state.helpers";
-import type { ScreenKey, TagID, TagLink } from "../types";
-import { type RegistryState, registry } from "./state";
-
-type LinkSourceWriteMode = "capture" | "refresh";
-type LinkDestinationWriteMode = "attach" | "refresh";
+	createGroupTag,
+	createPendingPairKey,
+	ensurePairGroups,
+	ensurePairLinks,
+	getGroupKeyFromTag,
+	getLinkKeyFromTag,
+	getActiveGroupId as getPairActiveGroupId,
+	getDestination as getPairDestination,
+	getLink as getPairLink,
+	getSource as getPairSource,
+	getSourceScreenKeyFromPairKey,
+	removePairLink,
+} from "../helpers/link-pairs.helpers";
+import type {
+	GroupKey,
+	LinkKey,
+	LinkPairsState,
+	ScreenKey,
+	ScreenPairKey,
+	TagID,
+	TagLink,
+} from "../types";
+import { pairs } from "./state";
+
+const toLinkKey = (tag: TagID): LinkKey => {
+	"worklet";
+	return getLinkKeyFromTag(tag);
+};
+
+const createLinkSide = (
+	screenKey: ScreenKey,
+	bounds: MeasuredDimensions,
+	styles: StyleProps,
+) => {
+	"worklet";
+	return {
+		screenKey,
+		bounds,
+		styles,
+	};
+};
+
+const writePairLink = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	linkKey: LinkKey,
+	link: TagLink,
+) => {
+	"worklet";
+	ensurePairLinks(state, pairKey)[linkKey] = link;
+};
+
+const writeGroup = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	group: GroupKey,
+	activeId: LinkKey,
+	initialId?: LinkKey,
+) => {
+	"worklet";
+	const previousInitialId = state[pairKey]?.groups?.[group]?.initialId;
+
+	ensurePairGroups(state, pairKey)[group] = {
+		activeId,
+		initialId: previousInitialId ?? initialId ?? activeId,
+	};
+};
+
+const writeDestination = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	linkKey: LinkKey,
+	screenKey: ScreenKey,
+	bounds: MeasuredDimensions,
+	styles: StyleProps,
+	group?: GroupKey,
+) => {
+	"worklet";
+	const link = getPairLink(state, pairKey, linkKey);
+	if (!link) return;
+
+	const destination = createLinkSide(screenKey, bounds, styles);
+
+	link.group = group ?? link.group;
+	link.destination = destination;
+	link.initialDestination ??= destination;
+
+	writePairLink(state, pairKey, linkKey, link);
+
+	if (link.group) {
+		writeGroup(state, pairKey, link.group, linkKey);
+	}
+};
+
+const promotePendingSource = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	linkKey: LinkKey,
+) => {
+	"worklet";
+	if (getPairLink(state, pairKey, linkKey)) return;
+
+	const sourceScreenKey = getSourceScreenKeyFromPairKey(pairKey);
+	const pendingPairKey = createPendingPairKey(sourceScreenKey);
+	if (pendingPairKey === pairKey) return;
+
+	const pendingLink = getPairLink(state, pendingPairKey, linkKey);
+	if (!pendingLink) return;
+
+	writePairLink(state, pairKey, linkKey, pendingLink);
+
+	if (pendingLink.group) {
+		const pendingGroupState =
+			state[pendingPairKey]?.groups?.[pendingLink.group];
+
+		if (pendingGroupState) {
+			writeGroup(
+				state,
+				pairKey,
+				pendingLink.group,
+				pendingGroupState.activeId,
+				pendingGroupState.initialId,
+			);
+		}
+	}
+
+	removePairLink(state, pendingPairKey, linkKey);
+};
 
 function setSource(
-	mode: LinkSourceWriteMode,
+	pairKey: ScreenPairKey,
 	tag: TagID,
 	screenKey: ScreenKey,
 	bounds: MeasuredDimensions,
 	styles: StyleProps = {},
+	group?: GroupKey,
 ) {
 	"worklet";
-	registry.modify(<T extends RegistryState>(state: T): T => {
+	pairs.modify(<T extends LinkPairsState>(state: T): T => {
 		"worklet";
-		const source = {
-			screenKey,
-			bounds,
-			styles,
-		};
+		const linkKey = toLinkKey(tag);
+		const source = createLinkSide(screenKey, bounds, styles);
 
-		if (mode === "capture") {
-			const tagState = ensureTagState(state, tag);
-			const stack = tagState.linkStack;
-			const topIndex = stack.length - 1;
-			const topLink = topIndex >= 0 ? stack[topIndex] : null;
-
-			if (
-				topLink &&
-				topLink.destination === null &&
-				isSameScreenFamily(topLink.source, source)
-			) {
-				topLink.source = source;
-				if (!topLink.initialSource) {
-					topLink.initialSource = source;
-				}
-				return state;
-			}
-
-			stack.push({
+		const pairLinks = ensurePairLinks(state, pairKey);
+
+		const existingLink = pairLinks[linkKey];
+		const link =
+			existingLink ??
+			({
+				group,
 				source,
 				destination: null,
 				initialSource: source,
-			});
-
-			return state;
-		}
+			} satisfies TagLink);
 
-		const stack = state[tag]?.linkStack;
-		if (!stack || stack.length === 0) return state;
-		const targetIndex = selectSourceUpdateTargetIndex(stack, screenKey);
-		if (targetIndex === -1) return state;
+		link.group = group ?? link.group;
+		link.source = source;
+		link.initialSource ??= source;
 
-		const link = stack[targetIndex];
+		pairLinks[linkKey] = link;
 
-		link.source = source;
-		if (!link.initialSource) {
-			link.initialSource = source;
+		const pendingPairKey = createPendingPairKey(screenKey);
+		if (pendingPairKey !== pairKey) {
+			removePairLink(state, pendingPairKey, linkKey);
 		}
 
 		return state;
@@ -74,98 +171,110 @@ function setSource(
 }
 
 function setDestination(
-	mode: LinkDestinationWriteMode,
+	pairKey: ScreenPairKey,
 	tag: TagID,
 	screenKey: ScreenKey,
 	bounds: MeasuredDimensions,
 	styles: StyleProps = {},
-	expectedSourceScreenKey?: ScreenKey,
+	group?: GroupKey,
 ) {
 	"worklet";
-	registry.modify(<T extends RegistryState>(state: T): T => {
+	pairs.modify(<T extends LinkPairsState>(state: T): T => {
 		"worklet";
-		const stack = state[tag]?.linkStack;
-		if (!stack || stack.length === 0) return state;
-
-		const targetIndex = findLinkIndexForDestinationWrite(
-			stack,
-			mode === "refresh" ? screenKey : undefined,
-			expectedSourceScreenKey,
-		);
-
-		if (targetIndex === -1) return state;
-
-		const link = stack[targetIndex];
-		const destination = {
-			screenKey,
-			bounds,
-			styles,
-		};
+		const linkKey = toLinkKey(tag);
+		promotePendingSource(state, pairKey, linkKey);
+		writeDestination(state, pairKey, linkKey, screenKey, bounds, styles, group);
 
-		link.destination = destination;
-		if (!link.initialDestination) {
-			link.initialDestination = destination;
-		}
+		return state;
+	});
+}
 
+function setActiveGroupId(pairKey: ScreenPairKey, group: GroupKey, tag: TagID) {
+	"worklet";
+	pairs.modify(<T extends LinkPairsState>(state: T): T => {
+		"worklet";
+		writeGroup(state, pairKey, group, toLinkKey(tag));
 		return state;
 	});
 }
 
-function getMatchedLink(tag: TagID, screenKey?: ScreenKey): TagLink | null {
+function getActiveGroupId(
+	pairKey: ScreenPairKey,
+	group: GroupKey,
+): LinkKey | null {
 	"worklet";
-	const tagState = registry.get()[tag];
-	const stack = tagState?.linkStack;
-	if (!stack || stack.length === 0) {
-		return null;
-	}
+	return getPairActiveGroupId(pairs.get(), pairKey, group);
+}
+
+function getLink(pairKey: ScreenPairKey, tag: TagID): TagLink | null {
+	"worklet";
+	return getPairLink(pairs.get(), pairKey, toLinkKey(tag));
+}
+
+const isCompletedLink = (link: TagLink | null): link is TagLink => {
+	"worklet";
+	return !!link?.destination;
+};
 
-	if (!screenKey) {
-		const lastLink = stack[stack.length - 1];
-		return lastLink ?? null;
+function getResolvedLink(
+	pairKey: ScreenPairKey,
+	tag: TagID,
+): { tag: TagID; link: TagLink | null } {
+	"worklet";
+	const state = pairs.get();
+	const linkKey = toLinkKey(tag);
+	const group = getGroupKeyFromTag(tag);
+	const requestedLink = getPairLink(state, pairKey, linkKey);
+
+	// Group active ids can update before the new member has a full source/destination
+	// link, so unresolved grouped links fall back to the initial id's measurements.
+	if (!group || isCompletedLink(requestedLink)) {
+		return {
+			tag,
+			link: requestedLink,
+		};
 	}
 
-	for (let i = stack.length - 1; i >= 0; i--) {
-		const link = stack[i];
-		if (isCompletedLinkForScreenKey(link, screenKey)) {
-			return link;
+	const initialId = state[pairKey]?.groups?.[group]?.initialId;
+	if (initialId) {
+		const initialLink = getPairLink(state, pairKey, initialId);
+		if (isCompletedLink(initialLink)) {
+			return {
+				tag: createGroupTag(group, initialId),
+				link: initialLink,
+			};
 		}
 	}
 
-	return null;
+	return {
+		tag,
+		link: requestedLink,
+	};
 }
 
-function getPendingLink(
+function getSource(
+	pairKey: ScreenPairKey,
 	tag: TagID,
-	sourceScreenKey?: ScreenKey,
-): TagLink | null {
+): TagLink["source"] | null {
 	"worklet";
-	const tagState = registry.get()[tag];
-	const stack = tagState?.linkStack;
-	if (!stack || stack.length === 0) return null;
-
-	const pendingSourceLinkIndex = findLatestPendingSourceLinkIndex(
-		stack,
-		sourceScreenKey,
-	);
-	if (pendingSourceLinkIndex === -1) return null;
-	return stack[pendingSourceLinkIndex] ?? null;
+	return getPairSource(pairs.get(), pairKey, toLinkKey(tag));
 }
 
-function hasSourceLink(tag: TagID, screenKey: ScreenKey): boolean {
-	"worklet";
-	return hasLinkSide(registry.get()[tag]?.linkStack, screenKey, "source");
-}
-
-function hasDestinationLink(tag: TagID, screenKey: ScreenKey): boolean {
+function getDestination(
+	pairKey: ScreenPairKey,
+	tag: TagID,
+): TagLink["destination"] | null {
 	"worklet";
-	return hasLinkSide(registry.get()[tag]?.linkStack, screenKey, "destination");
+	return getPairDestination(pairs.get(), pairKey, toLinkKey(tag));
 }
 
 export {
-	getMatchedLink,
-	getPendingLink,
-	hasDestinationLink,
-	hasSourceLink,
+	getActiveGroupId,
+	getDestination,
+	getLink,
+	getResolvedLink,
+	getSource,
+	setActiveGroupId,
 	setDestination,
 	setSource,
 };

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

@@ -1,77 +1,27 @@
-import { findLatest } from "../helpers/find-latest";
-import { matchesScreenKey } from "../helpers/matching";
+import { createScreenPairKey } from "../helpers/link-pairs.helpers";
 import type {
 	ResolvedTransitionPair,
 	ResolveTransitionContext,
-	ScreenKey,
+	ScreenPairKey,
 	TagID,
-	TagLink,
 } from "../types";
-import { registry } from "./state";
+import { getResolvedLink } from "./links";
 
-function findCompletedLinkByDestination(
-	stack: TagLink[],
-	screenKey?: ScreenKey,
-): TagLink | null {
-	"worklet";
-	if (!screenKey) return null;
-
-	return findLatest(
-		stack,
-		(link) =>
-			!!link.destination && matchesScreenKey(link.destination, screenKey),
-	);
-}
-
-function findCompletedLinkBySource(
-	stack: TagLink[],
-	screenKey?: ScreenKey,
-): TagLink | null {
-	"worklet";
-	if (!screenKey) return null;
-
-	return findLatest(
-		stack,
-		(link) => !!link.destination && matchesScreenKey(link.source, screenKey),
-	);
-}
-
-function findPendingLinkBySource(
-	stack: TagLink[],
-	screenKey?: ScreenKey,
-): TagLink | null {
-	"worklet";
-	if (!screenKey) return null;
-
-	return findLatest(
-		stack,
-		(link) =>
-			link.destination === null && matchesScreenKey(link.source, screenKey),
-	);
-}
-
-function findEnteringTransitionLink(
-	stack: TagLink[],
+function resolvePairKey(
 	context: ResolveTransitionContext,
-): TagLink | null {
+): ScreenPairKey | null {
 	"worklet";
-	return (
-		findCompletedLinkByDestination(stack, context.currentScreenKey) ??
-		findPendingLinkBySource(stack, context.previousScreenKey) ??
-		findCompletedLinkBySource(stack, context.previousScreenKey)
-	);
-}
 
-function findExitingTransitionLink(
-	stack: TagLink[],
-	context: ResolveTransitionContext,
-): TagLink | null {
-	"worklet";
-	return (
-		findCompletedLinkBySource(stack, context.currentScreenKey) ??
-		findCompletedLinkByDestination(stack, context.nextScreenKey) ??
-		findPendingLinkBySource(stack, context.currentScreenKey)
-	);
+	if (context.entering) {
+		if (!context.previousScreenKey || !context.currentScreenKey) return null;
+		return createScreenPairKey(
+			context.previousScreenKey,
+			context.currentScreenKey,
+		);
+	}
+
+	if (!context.currentScreenKey || !context.nextScreenKey) return null;
+	return createScreenPairKey(context.currentScreenKey, context.nextScreenKey);
 }
 
 function resolveTransitionPair(
@@ -79,30 +29,16 @@ function resolveTransitionPair(
 	context: ResolveTransitionContext,
 ): ResolvedTransitionPair {
 	"worklet";
-	const tagState = registry.get()[tag];
-	const stack = tagState?.linkStack;
-
-	const matchedLink =
-		stack && stack.length > 0
-			? context.entering
-				? findEnteringTransitionLink(stack, context)
-				: findExitingTransitionLink(stack, context)
-			: null;
-
-	const sourceBounds = matchedLink?.source?.bounds ?? null;
-	const destinationBounds = matchedLink?.destination?.bounds ?? null;
-	const sourceStyles = matchedLink?.source?.styles ?? null;
-	const destinationStyles = matchedLink?.destination?.styles ?? null;
-	const sourceScreenKey = matchedLink?.source?.screenKey ?? null;
-	const destinationScreenKey = matchedLink?.destination?.screenKey ?? null;
+	const pairKey = resolvePairKey(context);
+	const matchedLink = pairKey ? getResolvedLink(pairKey, tag).link : null;
 
 	return {
-		sourceBounds,
-		destinationBounds,
-		sourceStyles,
-		destinationStyles,
-		sourceScreenKey,
-		destinationScreenKey,
+		sourceBounds: matchedLink?.source.bounds ?? null,
+		destinationBounds: matchedLink?.destination?.bounds ?? null,
+		sourceStyles: matchedLink?.source.styles ?? null,
+		destinationStyles: matchedLink?.destination?.styles ?? null,
+		sourceScreenKey: matchedLink?.source.screenKey ?? null,
+		destinationScreenKey: matchedLink?.destination?.screenKey ?? null,
 	};
 }
 

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

@@ -1,8 +1,30 @@
 import { makeMutable } from "react-native-reanimated";
-import type { GroupState, TagID, TagState } from "../types";
+import type { LinkPairsState, TagID, TagState } from "../types";
 
-export type RegistryState = Record<TagID, TagState>;
-export type GroupsState = Record<string, GroupState>;
+export type BoundaryEntriesState = Record<TagID, TagState>;
 
-export const registry = makeMutable<RegistryState>({});
-export const groups = makeMutable<GroupsState>({});
+export const boundaryRegistry = makeMutable<BoundaryEntriesState>({});
+
+/**
+ * Transition links scoped per screen pair.
+ *
+ * Links used to live in a flat array that acted like a global history. To find
+ * the right link, we had to scan for the latest pending or completed entry that
+ * matched a screen, which made refreshes and rapid triggers tricky to handle.
+ *
+ * Keying by screen pair fixes that: each transition lives under its pair, and
+ * every shared boundary id maps to a single link in that pair. Refreshing the
+ * source or destination just overwrites the same slot instead of pushing a new
+ * history entry.
+ *
+ * Example:
+ *
+ * {
+ *   "a<>b": {
+ *     links: {
+ *       "unique-tag-1": { source: ..., destination: ... },
+ *     },
+ *   },
+ * }
+ */
+export const pairs = makeMutable<LinkPairsState>({});

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

@@ -7,6 +7,9 @@ import type {
 } from "../../utils/bounds/types/options";
 
 export type TagID = string;
+export type LinkKey = string;
+export type GroupKey = string;
+export type ScreenPairKey = string;
 export type { ScreenKey } from "../../types/screen.types";
 
 export type BoundaryConfig = {
@@ -37,6 +40,7 @@ export type ScreenIdentifier = {
 };
 
 export type TagLink = {
+	group?: GroupKey;
 	source: ScreenIdentifier & MeasuredEntry;
 	/** Destination side once attached; null while the source is still pending. */
 	destination: (ScreenIdentifier & MeasuredEntry) | null;
@@ -64,14 +68,20 @@ export type ResolvedTransitionPair = {
 
 export type ScreenEntry = Entry;
 
-export type TagState = {
+export type BoundaryState = {
 	screens: Record<ScreenKey, ScreenEntry>;
-	linkStack: TagLink[];
 };
 
-export type GroupState = {
-	/** Latest requested group member id from mounted grouped bounds. */
-	activeId: string;
-	/** Group member id that started the current linked transition. */
-	initialId?: string;
+export type LinkGroupState = {
+	activeId: LinkKey;
+	initialId?: LinkKey;
 };
+
+export type LinkPairState = {
+	links: Record<LinkKey, TagLink>;
+	groups: Record<GroupKey, LinkGroupState>;
+};
+
+export type LinkPairsState = Record<ScreenPairKey, LinkPairState>;
+
+export type TagState = BoundaryState;

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

@@ -23,6 +23,7 @@ export type GestureStoreMap = {
 	y: SharedValue<number>;
 	normX: SharedValue<number>;
 	normY: SharedValue<number>;
+	velocity: SharedValue<number>;
 	scale: SharedValue<number>;
 	normScale: SharedValue<number>;
 	focalX: SharedValue<number>;
@@ -68,6 +69,7 @@ function createGestureBag(): GestureStoreMap {
 		y: makeMutable(0),
 		normX,
 		normY,
+		velocity: makeMutable(0),
 		scale,
 		normScale,
 		focalX: makeMutable(0),
@@ -108,6 +110,7 @@ export const GestureStore = createStore<GestureStoreMap>({
 		cancelAnimation(bag.y);
 		cancelAnimation(bag.normX);
 		cancelAnimation(bag.normY);
+		cancelAnimation(bag.velocity);
 		cancelAnimation(bag.scale);
 		cancelAnimation(bag.normScale);
 		cancelAnimation(bag.focalX);

package/src/shared/types/animation.types.ts

@@ -23,6 +23,7 @@ import type { BaseStackRoute } from "./stack.types";
  */
 export type ScreenTransitionOptions = Pick<
 	ScreenTransitionConfig,
+	| "navigationMaskEnabled"
 	| "gestureEnabled"
 	| "experimental_allowDisabledGestureTracking"
 	| "gestureDirection"
@@ -175,10 +176,6 @@ export type ScreenTransitionDepthTarget = {
 
 export type ScreenTransitionTarget = ScreenTransitionDepthTarget;
 
-export type ScreenTransitionAccessor = (
-	target?: ScreenTransitionTarget,
-) => ScreenInterpolationProps | null;
-
 export interface ScreenInterpolationProps {
 	/**
 	 * Values for the screen that came before the current one in the navigation stack.
@@ -231,6 +228,9 @@ export interface ScreenInterpolationProps {
 	/**
 	 * Whether the active transition is visually close enough to its target to be
 	 * treated as complete, even if the animation is still physically settling.
+	 *
+	 * @deprecated Use `active.logicallySettled` instead. Screen settlement state
+	 * belongs on the screen state object.
 	 */
 	logicallySettled: number;
 
@@ -239,20 +239,6 @@ export interface ScreenInterpolationProps {
 	 */
 	bounds: BoundsAccessor;
 
-	/**
-	 * Resolves interpolation props for this screen's transition timeline or an
-	 * ancestor transition timeline.
-	 *
-	 * Calling without a target returns the current transition.
-	 * `transition({ depth: -1 })` returns the immediate parent transition.
-	 * `transition({ depth: 1 })` returns the immediate child transition.
-	 * `transition({ depth: 0 })` returns the current transition.
-	 *
-	 * When called from a returned transition scope, targets are resolved relative
-	 * to that scope.
-	 */
-	transition: ScreenTransitionAccessor;
-
 	/**
 	 * The screen state that is currently driving the transition (either current or next, whichever is focused).
 	 */
@@ -309,11 +295,6 @@ export type TransitionSlotStyle = AnimatedViewStyle | TransitionSlotDefinition;
  */
 export type TransitionInterpolatorOptions = ScreenTransitionOptions;
 
-/**
- * @deprecated Use `TransitionInterpolatorOptions`.
- */
-export type TransitionInterpolatorConfig = TransitionInterpolatorOptions;
-
 /**
  * Internal normalized slot format.
  * Always uses the explicit `{ style, props }` shape (with Reanimated's full StyleProps).