react-native-screen-transitions 3.5.1 → 3.6.0-alpha.0

package/src/shared/providers/screen/styles/helpers/strip-interpolator-options.ts

@@ -0,0 +1,17 @@
+export const stripInterpolatorOptions = (raw: Record<string, any>) => {
+	"worklet";
+
+	if (!("options" in raw)) {
+		return raw;
+	}
+
+	const slots: Record<string, any> = {};
+
+	for (const key in raw) {
+		if (key !== "options") {
+			slots[key] = raw[key];
+		}
+	}
+
+	return slots;
+};

package/src/shared/providers/screen/styles/hooks/use-interpolated-style-maps.tsx

@@ -1,16 +1,51 @@
 import { useDerivedValue, useSharedValue } from "react-native-reanimated";
 import { NO_STYLES } from "../../../../constants";
 import { SystemStore } from "../../../../stores/system.store";
-import type { NormalizedTransitionInterpolatedStyle } from "../../../../types/animation.types";
+import type {
+	NormalizedTransitionInterpolatedStyle,
+	TransitionInterpolatedStyle,
+} from "../../../../types/animation.types";
 import { logger } from "../../../../utils/logger";
 import { useScreenAnimationContext } from "../../animation";
 import { useDescriptorDerivations } from "../../descriptors";
+import {
+	syncScreenOptionsOverrides,
+	useScreenOptionsContext,
+} from "../../options";
 import { normalizeSlots } from "../helpers/normalize-slots";
-
+import { stripInterpolatorOptions } from "../helpers/strip-interpolator-options";
+
+/**
+ * Builds the raw interpolated styles map for the current screen pass.
+ *
+ * This hook exists to stabilize style ownership during rapid navigation,
+ * especially when an interactive close gesture overlaps with a new navigation
+ * event. In flows like `A -> B`, begin closing `B`, then quickly open `C`,
+ * the active route state can change before the gesture-driven close has
+ * visually finished.
+ *
+ * If we immediately switch to the next interpolator in that window, styles can
+ * be computed against the wrong route pair and leave layer or element slots
+ * stranded in an intermediate state. We therefore latch onto the current
+ * gesture interpolator for the lifetime of that close interaction, then resume
+ * normal interpolator selection once the gesture-driven close is no longer in
+ * play.
+ *
+ * The hook also suppresses interpolated styles while lifecycle start is blocked
+ * for pending destination measurement. That keeps the opening screen visually
+ * neutral until the system has a usable viewport measurement, then allows the
+ * interpolator to take over once the blocker clears.
+ *
+ * The result stays as a single slot map. Resolution happens downstream, where
+ * slot ids determine whether a slot may inherit from ancestors or must remain
+ * local to the owning screen container.
+ */
 export const useInterpolatedStylesMap = () => {
 	const { currentScreenKey } = useDescriptorDerivations();
+	const screenOptions = useScreenOptionsContext();
 	const {
 		screenInterpolatorProps,
+		screenInterpolatorFrameUpdater,
 		nextInterpolator,
 		currentInterpolator,
 		boundsAccessor,
@@ -26,14 +61,19 @@ export const useInterpolatedStylesMap = () => {
 	return useDerivedValue<NormalizedTransitionInterpolatedStyle>(() => {
 		"worklet";
 		if (pendingLifecycleStartBlockCount.get() > 0) {
+			syncScreenOptionsOverrides(undefined, screenOptions);
 			return NO_STYLES;
 		}
 
+		screenInterpolatorFrameUpdater.get();
 		const props = screenInterpolatorProps.get();
 		const { current, next, progress } = props;
 		const isDragging = current.gesture.dragging;
 		const isNextClosing = !!next?.closing;
 
+		// Keep using the gesture-driven interpolator until the closing gesture has
+		// fully released. This avoids switching style ownership mid-flight when a
+		// new navigation event lands before the close interaction visually settles.
 		if (isDragging && isNextClosing) {
 			isGesturingDuringCloseAnimation.set(true);
 		}
@@ -42,13 +82,15 @@ export const useInterpolatedStylesMap = () => {
 			isGesturingDuringCloseAnimation.set(false);
 		}
 
-		const isInGestureMode = isDragging || isGesturingDuringCloseAnimation.get();
+		const isInGestureMode =
+			!!isDragging || isGesturingDuringCloseAnimation.get();
 
 		const interpolator = isInGestureMode
 			? currentInterpolator
 			: (nextInterpolator ?? currentInterpolator);
 
 		if (!interpolator) {
+			syncScreenOptionsOverrides(undefined, screenOptions);
 			return NO_STYLES;
 		}
 
@@ -68,10 +110,14 @@ export const useInterpolatedStylesMap = () => {
 				bounds: boundsAccessor,
 			});
 
-			const stylesMap =
-				typeof raw !== "object" || raw == null
-					? NO_STYLES
-					: normalizeSlots(raw);
+			const rawStyleMap: TransitionInterpolatedStyle | undefined =
+				typeof raw === "object" && raw != null ? raw : undefined;
+
+			syncScreenOptionsOverrides(rawStyleMap, screenOptions);
+
+			const stylesMap = !rawStyleMap
+				? NO_STYLES
+				: normalizeSlots(stripInterpolatorOptions(rawStyleMap));
 
 			return stylesMap;
 		} catch (_) {
@@ -79,6 +125,7 @@ export const useInterpolatedStylesMap = () => {
 				logger.warn("screenStyleInterpolator must be a worklet");
 			}
 
+			syncScreenOptionsOverrides(undefined, screenOptions);
 			return NO_STYLES;
 		}
 	});

package/src/shared/providers/screen/styles/hooks/use-maybe-block-visibility.tsx

@@ -22,6 +22,11 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 		}
 
 		const hasPendingLifecycleBlock = pendingLifecycleStartBlockCount.get() > 0;
+
+		// Hide the screen during the tiny pre-animation open window as well.
+		// The destination measurement blocker can be registered one frame after
+		// mount, which would otherwise flash the reset state before the block
+		// count turns visible to this provider.
 		const isWaitingForOpenToStart = progress.get() <= 0;
 
 		return hasPendingLifecycleBlock || isWaitingForOpenToStart;

package/src/shared/providers/screen/styles/hooks/use-resolved-slot-style-map.tsx

@@ -5,6 +5,7 @@ import {
 } from "react-native-reanimated";
 import { NO_STYLES } from "../../../../constants";
 import type { NormalizedTransitionInterpolatedStyle } from "../../../../types/animation.types";
+import { useScreenAnimationContext } from "../../animation";
 import {
 	type ResettableStyleStatesBySlot,
 	resolveSlotStyles,
@@ -19,18 +20,27 @@ export const useResolvedStylesMap = ({
 	currentStylesMap,
 	ancestorStylesMap,
 }: UseResolvedStylesMapParams) => {
+	const { screenInterpolatorProps, screenInterpolatorFrameUpdater } =
+		useScreenAnimationContext();
 	const previousStyleStatesBySlot = useSharedValue<ResettableStyleStatesBySlot>(
 		{},
 	);
 
 	return useDerivedValue(() => {
 		"worklet";
+		screenInterpolatorFrameUpdater.get();
+
+		const props = screenInterpolatorProps.get();
+		// Keep missing local slots alive while another route drives this screen.
+		// Custom ids and keys from slots that still exist are still reset.
+		const deferLocalSlotResets = !props.focused && !props.current.closing;
 
 		const { resolvedStylesMap, nextPreviousStyleStatesBySlot } =
 			resolveSlotStyles({
 				currentStylesMap: currentStylesMap.get(),
 				ancestorStylesMap: ancestorStylesMap?.get() ?? NO_STYLES,
 				previousStyleStatesBySlot: previousStyleStatesBySlot.get(),
+				deferLocalSlotResets,
 			});
 
 		previousStyleStatesBySlot.set(nextPreviousStyleStatesBySlot);

package/src/shared/providers/stack/helpers/use-closing-route-map.ts

@@ -15,7 +15,7 @@ export const useClosingRouteMap = (
 			"worklet";
 			const map: Record<string, true> = {};
 			for (let i = 0; i < animationMaps.length; i++) {
-				if (animationMaps[i].closing.value > 0) {
+				if (animationMaps[i].closing.get() > 0) {
 					const routeKey = routeKeys[i];
 					if (routeKey) {
 						map[routeKey] = true;

package/src/shared/providers/stack/helpers/use-stack-derived.ts

@@ -23,7 +23,7 @@ export function useStackDerived(
 		"worklet";
 		let total = 0;
 		for (let i = 0; i < animationMaps.length; i++) {
-			total += animationMaps[i].progress.value;
+			total += animationMaps[i].progress.get();
 		}
 		return total;
 	});
@@ -33,7 +33,7 @@ export function useStackDerived(
 		const lastIndex = animationMaps.length - 1;
 		let closingFromTop = 0;
 		for (let i = lastIndex; i >= 0; i--) {
-			if (animationMaps[i].closing.value > 0) closingFromTop++;
+			if (animationMaps[i].closing.get() > 0) closingFromTop++;
 			else break;
 		}
 		return lastIndex - closingFromTop;

package/src/shared/stores/bounds/helpers/entries.helpers.ts

@@ -0,0 +1,74 @@
+import type { EntryPatch, ScreenEntry, ScreenKey, TagState } from "../types";
+
+type EntryPatchOptionalField =
+	| "boundaryConfig"
+	| "ancestorKeys"
+	| "navigatorKey"
+	| "ancestorNavigatorKeys";
+
+const ENTRY_PATCH_OPTIONAL_FIELDS = [
+	"boundaryConfig",
+	"ancestorKeys",
+	"navigatorKey",
+	"ancestorNavigatorKeys",
+] as const satisfies readonly EntryPatchOptionalField[];
+
+export const ensureScreenEntry = (
+	tagState: TagState,
+	screenKey: ScreenKey,
+): ScreenEntry => {
+	"worklet";
+	if (!tagState.screens[screenKey]) {
+		tagState.screens[screenKey] = {
+			bounds: null,
+			styles: {},
+		};
+	}
+	return tagState.screens[screenKey];
+};
+
+export const applyEntryPatch = (entry: ScreenEntry, patch: EntryPatch) => {
+	"worklet";
+	if (patch.bounds !== undefined) {
+		entry.bounds = patch.bounds;
+	}
+
+	if (patch.styles !== undefined) {
+		entry.styles = patch.styles ?? {};
+	}
+
+	const target = entry as Record<EntryPatchOptionalField, unknown>;
+	for (let i = 0; i < ENTRY_PATCH_OPTIONAL_FIELDS.length; i++) {
+		const field = ENTRY_PATCH_OPTIONAL_FIELDS[i];
+		const value = patch[field];
+		if (value === undefined) continue;
+
+		if (value === null) {
+			delete target[field];
+		} else {
+			target[field] = value;
+		}
+	}
+};
+
+export const findMatchingScreenEntry = (
+	tagState: TagState | undefined,
+	screenKey: ScreenKey,
+): ScreenEntry | null => {
+	"worklet";
+	if (!tagState) return null;
+
+	const direct = tagState.screens[screenKey];
+	if (direct) {
+		return direct;
+	}
+
+	for (const entryScreenKey in tagState.screens) {
+		const entry = tagState.screens[entryScreenKey];
+		if (entry.ancestorKeys?.includes(screenKey)) {
+			return entry;
+		}
+	}
+
+	return null;
+};

package/src/shared/stores/bounds/helpers/find-latest.ts

@@ -0,0 +1,22 @@
+export const findLatestIndex = <T>(
+	items: readonly T[],
+	matches: (item: T) => boolean,
+): number => {
+	"worklet";
+	for (let i = items.length - 1; i >= 0; i--) {
+		if (matches(items[i])) {
+			return i;
+		}
+	}
+
+	return -1;
+};
+
+export const findLatest = <T>(
+	items: readonly T[],
+	matches: (item: T) => boolean,
+): T | null => {
+	"worklet";
+	const index = findLatestIndex(items, matches);
+	return index === -1 ? null : (items[index] ?? null);
+};

package/src/shared/stores/bounds/helpers/groups.helpers.ts

@@ -0,0 +1,27 @@
+import type { TagID } from "../types";
+
+type GroupTag = {
+	group: string;
+	id: string;
+};
+
+export const parseGroupTag = (tag: string): GroupTag | null => {
+	"worklet";
+	const separatorIndex = tag.indexOf(":");
+	if (separatorIndex === -1) return null;
+
+	return {
+		group: tag.slice(0, separatorIndex),
+		id: tag.slice(separatorIndex + 1),
+	};
+};
+
+export const createGroupTag = (group: string, id: string): TagID => {
+	"worklet";
+	return `${group}:${id}`;
+};
+
+export const getGroupName = (tagOrGroup: string): string => {
+	"worklet";
+	return parseGroupTag(tagOrGroup)?.group ?? tagOrGroup;
+};

package/src/shared/stores/bounds/helpers/keys.ts

@@ -1,25 +1,3 @@
-import type { ScreenIdentifier, ScreenKey } from "../types";
-
-export function collectIdentifierKeys(
-	identifier: ScreenIdentifier | null | undefined,
-): ScreenKey[] {
-	"worklet";
-	if (!identifier) return [];
-
-	const allKeys: ScreenKey[] = [identifier.screenKey];
-	const ancestors = identifier.ancestorKeys;
-	if (ancestors && ancestors.length > 0) {
-		for (let i = 0; i < ancestors.length; i++) {
-			const key = ancestors[i];
-			if (!allKeys.includes(key)) {
-				allKeys.push(key);
-			}
-		}
-	}
-
-	return allKeys;
-}
-
 export const hasAnyKeys = (record: Record<string, unknown>) => {
 	"worklet";
 	for (const _key in record) {

package/src/shared/stores/bounds/helpers/link.helpers.ts

@@ -0,0 +1,135 @@
+import type { ScreenKey, TagLink } from "../types";
+import { findLatestIndex } from "./find-latest";
+import { matchesScreenKey } from "./matching";
+
+type LinkSide = "source" | "destination";
+
+export const isSameScreenFamily = (
+	a: { screenKey: ScreenKey; ancestorKeys?: ScreenKey[] },
+	b: { screenKey: ScreenKey; ancestorKeys?: ScreenKey[] },
+): boolean => {
+	"worklet";
+	return (
+		a.screenKey === b.screenKey ||
+		(a.ancestorKeys?.includes(b.screenKey) ?? false) ||
+		(b.ancestorKeys?.includes(a.screenKey) ?? false)
+	);
+};
+
+export function findLatestPendingSourceLinkIndex(
+	stack: TagLink[],
+	expectedSourceScreenKey?: ScreenKey,
+): number {
+	"worklet";
+	return findLatestIndex(stack, (link) => {
+		if (link.destination !== null) return false;
+		return (
+			!expectedSourceScreenKey ||
+			matchesScreenKey(link.source, expectedSourceScreenKey)
+		);
+	});
+}
+
+function findLatestSourceIndex(
+	stack: TagLink[],
+	expectedSourceScreenKey?: ScreenKey,
+): number {
+	"worklet";
+	if (!expectedSourceScreenKey) return -1;
+
+	return findLatestIndex(stack, (link) =>
+		matchesScreenKey(link.source, expectedSourceScreenKey),
+	);
+}
+
+function findLatestCompletedSourceIndex(
+	stack: TagLink[],
+	screenKey?: ScreenKey,
+): number {
+	"worklet";
+	if (!screenKey) return -1;
+
+	return findLatestIndex(
+		stack,
+		(link) => !!link.destination && matchesScreenKey(link.source, screenKey),
+	);
+}
+
+function findLatestCompletedDestinationIndex(
+	stack: TagLink[],
+	screenKey?: ScreenKey,
+): number {
+	"worklet";
+	if (!screenKey) return -1;
+
+	return findLatestIndex(
+		stack,
+		(link) =>
+			!!link.destination && matchesScreenKey(link.destination, screenKey),
+	);
+}
+
+export function selectSourceUpdateTargetIndex(
+	stack: TagLink[],
+	screenKey: ScreenKey,
+): number {
+	"worklet";
+	const completedIndex = findLatestCompletedSourceIndex(stack, screenKey);
+	if (completedIndex !== -1) {
+		return completedIndex;
+	}
+
+	return findLatestSourceIndex(stack, screenKey);
+}
+
+export function findLinkIndexForDestinationWrite(
+	stack: TagLink[],
+	destinationScreenKey?: ScreenKey,
+	expectedSourceScreenKey?: ScreenKey,
+): number {
+	"worklet";
+	const existingDestinationIndex = findLatestCompletedDestinationIndex(
+		stack,
+		destinationScreenKey,
+	);
+	if (existingDestinationIndex !== -1) {
+		return existingDestinationIndex;
+	}
+
+	const pendingSourceIndex = findLatestPendingSourceLinkIndex(
+		stack,
+		expectedSourceScreenKey,
+	);
+	if (pendingSourceIndex !== -1) {
+		return pendingSourceIndex;
+	}
+
+	return findLatestSourceIndex(stack, expectedSourceScreenKey);
+}
+
+export function hasLinkSide(
+	stack: TagLink[] | undefined,
+	screenKey: ScreenKey,
+	side: LinkSide,
+): boolean {
+	"worklet";
+	if (!stack || stack.length === 0) return false;
+
+	return (
+		findLatestIndex(stack, (link) =>
+			matchesScreenKey(link[side], screenKey),
+		) !== -1
+	);
+}
+
+export function isCompletedLinkForScreenKey(
+	link: TagLink,
+	screenKey: ScreenKey,
+): boolean {
+	"worklet";
+	return (
+		!!link.destination &&
+		(matchesScreenKey(link.source, screenKey) ||
+			matchesScreenKey(link.destination, screenKey))
+	);
+}

package/src/shared/stores/bounds/helpers/tag-state.helpers.ts

@@ -0,0 +1,24 @@
+import type { RegistryState } from "../internals/state";
+import type { TagID, TagState } from "../types";
+import { hasAnyKeys } from "./keys";
+
+export const ensureTagState = (state: RegistryState, tag: TagID): TagState => {
+	"worklet";
+	if (!state[tag]) {
+		state[tag] = {
+			screens: {},
+			linkStack: [],
+		};
+	}
+	return state[tag];
+};
+
+export const pruneTagState = (state: RegistryState, tag: TagID) => {
+	"worklet";
+	const tagState = state[tag];
+	if (!tagState) return;
+
+	if (!hasAnyKeys(tagState.screens) && tagState.linkStack.length === 0) {
+		delete state[tag];
+	}
+};