react-native-screen-transitions 3.11.3 → 3.13.0-beta.0

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

@@ -11,7 +11,6 @@ import {
 	getDestination as getPairDestination,
 	getLink as getPairLink,
 	getSource as getPairSource,
-	getSourceScreenKeyFromPairKey,
 } from "../helpers/link-pairs.helpers";
 import type {
 	BoundaryRuntimeFlags,
@@ -24,6 +23,7 @@ import type {
 	TagID,
 	TagLink,
 } from "../types";
+import { screenBelongsToScope } from "./screen-graph";
 import { pairs } from "./state";
 
 const syncLinkStatus = (link: TagLink) => {
@@ -315,33 +315,21 @@ function setDestination(
 			group,
 			runtimeFlags,
 		);
+		delete state[pairKey]?.destinationRequests?.[linkKey];
 
 		return state;
 	});
 }
 
 function setActiveGroupId(pairKey: ScreenPairKey, group: GroupKey, tag: TagID) {
-	"worklet";
-	pairs.modify(<T extends LinkPairsState>(state: T): T => {
-		"worklet";
-		writeGroup(state, pairKey, group, getLinkKeyFromTag(tag));
-		return state;
-	});
-}
-
-function requestSourceMeasure(pairKey: ScreenPairKey, tag: TagID) {
 	"worklet";
 	pairs.modify(<T extends LinkPairsState>(state: T): T => {
 		"worklet";
 		const linkKey = getLinkKeyFromTag(tag);
-		const link = getPairLink(state, pairKey, linkKey);
-
-		if (link?.source || state[pairKey]?.sourceRequests?.[linkKey]) {
-			return state;
+		writeGroup(state, pairKey, group, linkKey);
+		if (!getPairLink(state, pairKey, linkKey)?.source) {
+			ensurePairSourceRequests(state, pairKey)[linkKey] = true;
 		}
-
-		ensurePairSourceRequests(state, pairKey)[linkKey] = true;
-
 		return state;
 	});
 }
@@ -374,14 +362,18 @@ function getResolvedLink(
 	const state = pairs.get();
 	const linkKey = getLinkKeyFromTag(tag);
 	const group = getGroupKeyFromTag(tag);
-	const link = getPairLink(state, pairKey, linkKey);
+	const activeId = group
+		? state[pairKey]?.groups?.[group]?.activeId
+		: undefined;
+	const resolvedLinkKey = activeId ?? linkKey;
+	const link = getPairLink(state, pairKey, resolvedLinkKey);
 
 	// Group active ids can update before the new member has a full source/destination
 	// link. As soon as the requested member has source bounds, prefer it; only
 	// fall back while the requested member has no source yet.
 	if (!group || hasSourceLink(link)) {
 		return {
-			tag,
+			tag: group ? createGroupTag(group, resolvedLinkKey) : tag,
 			link,
 		};
 	}
@@ -404,34 +396,34 @@ function getResolvedLink(
 	};
 }
 
-function getPairKeyForSource(
+function getPairKeyForDestination(
 	tag: TagID,
 	screenKey: ScreenKey,
 ): ScreenPairKey | null {
 	"worklet";
 	const state = pairs.get();
-	const linkKey = getLinkKeyFromTag(tag);
+	const group = getGroupKeyFromTag(tag);
 	for (const pairKey in state) {
-		if (getSourceScreenKeyFromPairKey(pairKey) !== screenKey) continue;
+		const resolvedLink = getResolvedLink(pairKey, tag).link;
+		if (!resolvedLink) continue;
 		if (
-			getResolvedLink(pairKey, tag).link?.destination ||
-			state[pairKey]?.sourceRequests?.[linkKey]
+			screenBelongsToScope(
+				screenKey,
+				getDestinationScreenKeyFromPairKey(pairKey),
+			) ||
+			resolvedLink.destination?.screenKey === screenKey
 		) {
 			return pairKey;
 		}
-	}
-	return null;
-}
 
-function getPairKeyForDestination(
-	tag: TagID,
-	screenKey: ScreenKey,
-): ScreenPairKey | null {
-	"worklet";
-	const state = pairs.get();
-	for (const pairKey in state) {
-		if (getDestinationScreenKeyFromPairKey(pairKey) !== screenKey) continue;
-		if (getResolvedLink(pairKey, tag).link) return pairKey;
+		if (!group) continue;
+		const links = state[pairKey]?.links;
+		for (const linkKey in links) {
+			const link = links[linkKey];
+			if (link?.group === group && link.destination?.screenKey === screenKey) {
+				return pairKey;
+			}
+		}
 	}
 	return null;
 }
@@ -457,10 +449,8 @@ export {
 	getDestination,
 	getLink,
 	getPairKeyForDestination,
-	getPairKeyForSource,
 	getResolvedLink,
 	getSource,
-	requestSourceMeasure,
 	setActiveGroupId,
 	setDestination,
 	setSource,

package/src/shared/stores/bounds/internals/screen-graph.ts

@@ -0,0 +1,45 @@
+import type { BoundsScreenNode, BoundsScreenState, ScreenKey } from "../types";
+import { boundsScreens } from "./state";
+
+const MAX_PARENT_DEPTH = 100;
+
+export function registerBoundsScreen(
+	screenKey: ScreenKey,
+	node: BoundsScreenNode,
+) {
+	"worklet";
+	boundsScreens.modify(<T extends BoundsScreenState>(state: T): T => {
+		"worklet";
+		(state as BoundsScreenState)[screenKey] = node;
+		return state;
+	});
+}
+
+export function unregisterBoundsScreen(screenKey: ScreenKey) {
+	"worklet";
+	boundsScreens.modify(<T extends BoundsScreenState>(state: T): T => {
+		"worklet";
+		delete (state as BoundsScreenState)[screenKey];
+		return state;
+	});
+}
+
+export function screenBelongsToScope(
+	screenKey: ScreenKey,
+	scopeScreenKey: ScreenKey,
+): boolean {
+	"worklet";
+	if (screenKey === scopeScreenKey) return true;
+
+	const screens = boundsScreens.get();
+	let parentScreenKey = screens[screenKey]?.parentScreenKey;
+	let depth = 0;
+
+	while (parentScreenKey && depth < MAX_PARENT_DEPTH) {
+		if (parentScreenKey === scopeScreenKey) return true;
+		parentScreenKey = screens[parentScreenKey]?.parentScreenKey;
+		depth += 1;
+	}
+
+	return false;
+}

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

@@ -1,5 +1,11 @@
 import { makeMutable } from "react-native-reanimated";
-import type { Entry, LinkPairsState, ScreenKey, TagID } from "../types";
+import type {
+	BoundsScreenState,
+	Entry,
+	LinkPairsState,
+	ScreenKey,
+	TagID,
+} from "../types";
 
 export type BoundaryEntriesState = Record<
 	TagID,
@@ -31,3 +37,6 @@ export const boundaryRegistry = makeMutable<BoundaryEntriesState>({});
  * }
  */
 export const pairs = makeMutable<LinkPairsState>({});
+
+/** Stable ownership graph used to match leaf boundaries to transition roots. */
+export const boundsScreens = makeMutable<BoundsScreenState>({});

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

@@ -1,4 +1,8 @@
-import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
+import type {
+	MeasuredDimensions,
+	SharedValue,
+	StyleProps,
+} from "react-native-reanimated";
 import type { BoundsMethod } from "../../types/bounds.types";
 import type { ScreenKey } from "../../types/screen.types";
 import type {
@@ -128,6 +132,20 @@ export type LinkPairState = {
 	links: Record<LinkKey, TagLink>;
 	groups: Record<GroupKey, LinkGroupState>;
 	sourceRequests?: Record<LinkKey, true>;
+	destinationRequests?: Record<LinkKey, true>;
+	destinationLinkDemands?: Record<LinkKey, true>;
+	destinationGroupDemands?: Record<GroupKey, true>;
+	refreshingLinks?: Record<LinkKey, true>;
+	blockedDestinations?: Record<LinkKey, true>;
+	portalReadySources?: Record<LinkKey, true>;
 };
 
 export type LinkPairsState = Record<ScreenPairKey, LinkPairState>;
+
+export type BoundsScreenNode = {
+	parentScreenKey?: ScreenKey;
+	animationProgress: SharedValue<number>;
+	pendingLifecycleStartBlockCount: SharedValue<number>;
+};
+
+export type BoundsScreenState = Record<ScreenKey, BoundsScreenNode>;

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

@@ -384,6 +384,14 @@ export type TransitionInterpolatedStyle = {
 	 * This reserved key is stripped before style slot normalization.
 	 */
 	options?: TransitionInterpolatorOptions;
+	/**
+	 * Animated style and props for the route-owned floating overlay.
+	 *
+	 * Visible overlays form their own adjacency chain. A route that returns this
+	 * slot controls the previous visible overlay and, when it owns an overlay,
+	 * its entering overlay.
+	 */
+	overlay?: TransitionSlotStyle;
 	/** Animated style and props for the main screen content view. */
 	content?: TransitionSlotStyle;
 	/** Animated style and props for the backdrop layer between screens. */

package/src/shared/types/index.ts

@@ -51,7 +51,7 @@ export type {
 	ScrollMetadataState,
 	SideActivation,
 } from "./gesture.types";
-export type { OverlayProps } from "./overlay.types";
+export type { OverlayComponent, OverlayProps } from "./overlay.types";
 export type {
 	GestureTracking,
 	InactiveBehavior,

package/src/shared/types/overlay.types.ts

@@ -1,28 +1,44 @@
-import type { Route } from "@react-navigation/native";
+import type {
+	ParamListBase,
+	ParamListRoute,
+	RouteProp,
+} from "@react-navigation/native";
+import type { ReactNode } from "react";
 import type { DerivedValue } from "react-native-reanimated";
 import type { ScreenTransitionConfig } from "./screen.types";
 
 /**
- * Props passed to overlay components.
- * Generic over the navigation type since different stacks have different navigation props.
+ * Overlay state without the animated progress value.
  */
+export type OverlayScreenState<
+	TNavigation = unknown,
+	TParamList extends ParamListBase = ParamListBase,
+	TOwnerRouteName extends keyof TParamList = keyof TParamList,
+> = Omit<OverlayProps<TNavigation, TParamList, TOwnerRouteName>, "progress"> & {
+	snapTo: (index: number) => void;
+};
+
 /**
- * Overlay screen state passed to overlay host for rendering.
- * Generic over navigation type — defaults to `unknown` for flexibility.
+ * Props passed to a floating overlay component.
+ *
+ * `route` and `index` identify the screen that owns the overlay. Focused
+ * values may describe a later screen while that overlay remains visible.
  */
-export type OverlayScreenState<TNavigation = unknown> = Omit<
-	OverlayProps<TNavigation>,
-	"progress"
-> & {
+export type OverlayProps<
+	TNavigation = unknown,
+	TParamList extends ParamListBase = ParamListBase,
+	TOwnerRouteName extends keyof TParamList = keyof TParamList,
+> = {
+	/** Route that declared this overlay. */
+	route: RouteProp<TParamList, TOwnerRouteName>;
+
+	/** Index of the route that declared this overlay. */
 	index: number;
-	snapTo: (index: number) => void;
-};
 
-export type OverlayProps<TNavigation = unknown> = {
 	/**
 	 * Route of the currently focused screen in the stack.
 	 */
-	focusedRoute: Route<string>;
+	focusedRoute: ParamListRoute<TParamList>;
 
 	/**
 	 * Index of the focused route in the stack.
@@ -32,7 +48,7 @@ export type OverlayProps<TNavigation = unknown> = {
 	/**
 	 * All routes currently in the stack.
 	 */
-	routes: Route<string>[];
+	routes: ParamListRoute<TParamList>[];
 
 	/**
 	 * Custom metadata from the focused screen's options.
@@ -55,3 +71,14 @@ export type OverlayProps<TNavigation = unknown> = {
 	 */
 	progress: DerivedValue<number>;
 };
+
+/**
+ * Component rendered for a floating screen overlay.
+ *
+ * The callback is bivariant because React Navigation stores overlay components
+ * in navigator-wide screen options while applications annotate them for one
+ * specific route.
+ */
+export type OverlayComponent = {
+	bivarianceHack(props: OverlayProps): ReactNode;
+}["bivarianceHack"];

package/src/shared/types/screen.types.ts

@@ -11,7 +11,7 @@ import type {
 	GestureProgressMode,
 	ScrollMetadataState,
 } from "./gesture.types";
-import type { OverlayProps } from "./overlay.types";
+import type { OverlayComponent } from "./overlay.types";
 
 export type Layout = {
 	width: number;
@@ -180,6 +180,16 @@ export type ScreenTransitionConfig = {
 	 */
 	screenStyleInterpolator?: ScreenStyleInterpolator;
 
+	/**
+	 * Allows this screen's interpolator to keep updating while the screen is
+	 * inactive. This is useful for flows that intentionally animate screens more
+	 * than one level behind the active route with values such as `stackProgress`.
+	 *
+	 * @experimental This API may change in future versions.
+	 * @default false
+	 */
+	experimental_updateInactiveInterpolators?: boolean;
+
 	/**
 	 * The Reanimated animation config for opening and closing transitions.
 	 */
@@ -336,7 +346,7 @@ export type ScreenTransitionConfig = {
 	/**
 	 * Function that returns a React Element to display as an overlay.
 	 */
-	overlay?: (props: OverlayProps) => React.ReactNode;
+	overlay?: OverlayComponent;
 
 	/**
 	 * Whether to show the overlay. The overlay is shown by default when `overlay` is provided.

package/src/shared/utils/bounds/helpers/create-bounds-accessor-core.ts

@@ -66,12 +66,15 @@ const createBoundsAccessorParts = ({
 			styles: (options?: BoundsComputeOptions): BoundsStyleResult => {
 				"worklet";
 				// Keep the component at its base layout for pre-animation refresh
-				// measurement, then remove generated styles again after settlement.
-				if (!props.active.animating) {
+				// measurement, then remove generated styles again after settlement. The
+				// pre-animation pass still has to reach the bounds coordinator so both
+				// endpoints are captured before generated transforms attach.
+				const shouldRenderStyles = !!props.active.animating;
+				if (!shouldRenderStyles && !props.active.willAnimate) {
 					return NO_STYLES;
 				}
 
-				return prepareBoundStyles({
+				const preparedStyles = prepareBoundStyles({
 					props,
 					options: {
 						...options,
@@ -79,6 +82,8 @@ const createBoundsAccessorParts = ({
 						group: normalizedIdentity.group,
 					},
 				}) as BoundsStyleResult;
+
+				return shouldRenderStyles ? preparedStyles : NO_STYLES;
 			},
 			values: getValues,
 			math: <T extends BoundsComputeOptions = BoundsComputeOptions>(

package/src/shared/utils/bounds/helpers/create-link-accessor.ts

@@ -1,3 +1,4 @@
+import { requestBoundaryMeasurements } from "../../../stores/bounds/internals/coordinator";
 import {
 	getPairKeyForDestination,
 	getResolvedLink,
@@ -7,6 +8,7 @@ import type {
 	BoundsLink,
 } from "../../../types/bounds.types";
 import type { BoundId } from "../types/options";
+import { resolveBoundsPairKey } from "./resolve-bounds-pair-key";
 
 type GetProps = () => BoundsInterpolationProps;
 
@@ -21,6 +23,15 @@ export const createLinkAccessor = (getProps: GetProps): LinkAccessor => {
 		"worklet";
 		const props = getProps();
 		const stringTag = String(tag);
+		const requestedPairKey = resolveBoundsPairKey(props);
+		if (requestedPairKey) {
+			requestBoundaryMeasurements({
+				pairKey: requestedPairKey,
+				tag: stringTag,
+				destination: true,
+				refresh: !!props.active.willAnimate,
+			});
+		}
 		const destinationScreenKey =
 			props.next?.route.key ?? props.current?.route.key;
 		const pairKey = destinationScreenKey

package/src/shared/utils/bounds/helpers/prepare-bound-styles.ts

@@ -66,11 +66,12 @@ export const syncActiveGroupId = (params: {
 	const { props, id, group } = params;
 	if (id == null || id === "" || !group) return;
 
-	const pairKey = resolveBoundsPairKey(props);
+	const tag = createBoundTag({ id, group });
+	const pairKey = tag ? resolveBoundsPairKey(props) : null;
 	if (!pairKey) return;
 
 	const activeId = String(id);
-	if (getActiveGroupId(pairKey, group) === activeId) return;
+	if (getActiveGroupId(pairKey, group) !== null) return;
 
 	setActiveGroupId(pairKey, group, activeId);
 };

package/src/shared/utils/bounds/helpers/resolve-bounds-pair-key.ts

@@ -9,7 +9,6 @@ export const resolveBoundsPairKey = (
 	const currentScreenKey = props.current?.route.key;
 	const previousScreenKey = props.previous?.route.key;
 	const nextScreenKey = props.next?.route.key;
-
 	if (nextScreenKey && currentScreenKey) {
 		return createScreenPairKey(currentScreenKey, nextScreenKey);
 	}

package/src/shared/utils/bounds/helpers/styles/compute.ts

@@ -6,7 +6,7 @@ import {
 	NO_STYLES,
 } from "../../../../constants";
 import { createScreenPairKey } from "../../../../stores/bounds/helpers/link-pairs.helpers";
-import { requestSourceMeasure } from "../../../../stores/bounds/internals/links";
+import { requestBoundaryMeasurements } from "../../../../stores/bounds/internals/coordinator";
 import { resolveTransitionPair } from "../../../../stores/bounds/internals/resolver";
 import type { ResolvedTransitionPair } from "../../../../stores/bounds/types";
 import type { ScreenTransitionState } from "../../../../types/animation.types";
@@ -39,6 +39,7 @@ const resolveStartEnd = (params: {
 	dimensions: Layout;
 	computeOptions: BoundsOptions;
 	resolvedPair?: ResolvedTransitionPair;
+	refresh: boolean;
 }) => {
 	"worklet";
 
@@ -59,6 +60,15 @@ const resolveStartEnd = (params: {
 				? createScreenPairKey(currentScreenKey, nextScreenKey)
 				: null;
 
+	if (sourceMeasurePairKey) {
+		requestBoundaryMeasurements({
+			pairKey: sourceMeasurePairKey,
+			tag: String(params.id),
+			destination: !hasTargetOverride,
+			refresh: params.refresh,
+		});
+	}
+
 	const resolvedPair =
 		params.resolvedPair ??
 		resolveTransitionPair(String(params.id), {
@@ -72,10 +82,6 @@ const resolveStartEnd = (params: {
 	const destinationBounds = resolvedPair.destinationBounds;
 
 	if (!sourceBounds) {
-		if (hasTargetOverride && sourceMeasurePairKey) {
-			requestSourceMeasure(sourceMeasurePairKey, String(params.id));
-		}
-
 		return {
 			start: null,
 			end: null,
@@ -157,6 +163,7 @@ export const computeBoundStyles = (
 		computeOptions,
 		dimensions,
 		resolvedPair,
+		refresh: !!interpolationProps?.active?.willAnimate,
 	});
 
 	if (!start || !end) {