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

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

@@ -7,12 +7,15 @@ import type {
 } from "../../../../types/animation.types";
 import { logger } from "../../../../utils/logger";
 import { useScreenAnimationContext } from "../../animation";
+import { useBuildBoundsAccessor } from "../../animation/helpers/accessors/use-build-bounds-accessor";
+import { syncSelectedInterpolatorOptions } from "../../animation/helpers/selected-interpolator-options";
 import { useDescriptorDerivations } from "../../descriptors";
 import {
 	syncScreenOptionsOverrides,
 	useScreenOptionsContext,
 } from "../../options";
 import { normalizeSlots } from "../helpers/normalize-slots";
+import { preserveAnimatedPropsOnly } from "../helpers/preserve-animated-props-only";
 import { stripInterpolatorOptions } from "../helpers/strip-interpolator-options";
 
 /**
@@ -31,10 +34,10 @@ import { stripInterpolatorOptions } from "../helpers/strip-interpolator-options"
  * 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.
+ * Visibility gating happens downstream while lifecycle start is blocked for
+ * pending destination measurement. We still run the interpolator during that
+ * hidden window so animated props and runtime options stay warm, but defer style
+ * buckets so measurement sees the final untransformed layout.
  *
  * 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
@@ -45,12 +48,12 @@ export const useInterpolatedStylesMap = () => {
 	const screenOptions = useScreenOptionsContext();
 	const {
 		screenInterpolatorProps,
-		screenInterpolatorFrameUpdater,
+		screenInterpolatorPropsRevision,
+		selectedInterpolatorOptions,
 		nextInterpolator,
 		currentInterpolator,
-		boundsAccessor,
 	} = useScreenAnimationContext();
-
+	const boundsAccessor = useBuildBoundsAccessor();
 	const pendingLifecycleStartBlockCount = SystemStore.getValue(
 		currentScreenKey,
 		"pendingLifecycleStartBlockCount",
@@ -60,13 +63,22 @@ export const useInterpolatedStylesMap = () => {
 
 	return useDerivedValue<NormalizedTransitionInterpolatedStyle>(() => {
 		"worklet";
-		if (pendingLifecycleStartBlockCount.get() > 0) {
-			syncScreenOptionsOverrides(undefined, screenOptions);
-			return NO_STYLES;
-		}
-
-		screenInterpolatorFrameUpdater.get();
+		screenInterpolatorPropsRevision.get();
 		const props = screenInterpolatorProps.get();
+
+		/**
+		 * There is a niche case where bounds can be attached to a view that's styles are out of viewport.
+		 * Due to our blocking mechanism and ensuring accurate measurement, this boundary measurement
+		 * will be blocked and the screen will never be visible. To mitigate this, we:
+		 *
+		 * - Defer the style buckets (props are fine), to ensure we get the correct position of the boundary
+		 *
+		 * Again this is very niche, and since we're not marketing ourselves as a proper shared element transition
+		 * package, we won't spend time finding a better solution for this.
+		 *
+		 */
+		const shouldDeferStyleBuckets = pendingLifecycleStartBlockCount.get() > 0;
+
 		const { current, next, progress } = props;
 		const isDragging = current.gesture.dragging;
 		const isNextClosing = !!next?.closing;
@@ -85,11 +97,15 @@ export const useInterpolatedStylesMap = () => {
 		const isInGestureMode =
 			!!isDragging || isGesturingDuringCloseAnimation.get();
 
-		const interpolator = isInGestureMode
-			? currentInterpolator
-			: (nextInterpolator ?? currentInterpolator);
+		const interpolatorOptionsOwner =
+			isInGestureMode || !nextInterpolator ? "current" : "next";
+		const interpolator =
+			interpolatorOptionsOwner === "current"
+				? currentInterpolator
+				: nextInterpolator;
 
 		if (!interpolator) {
+			syncSelectedInterpolatorOptions(selectedInterpolatorOptions, "current");
 			syncScreenOptionsOverrides(undefined, screenOptions);
 			return NO_STYLES;
 		}
@@ -113,18 +129,29 @@ export const useInterpolatedStylesMap = () => {
 			const rawStyleMap: TransitionInterpolatedStyle | undefined =
 				typeof raw === "object" && raw != null ? raw : undefined;
 
-			syncScreenOptionsOverrides(rawStyleMap, screenOptions);
+			syncSelectedInterpolatorOptions(
+				selectedInterpolatorOptions,
+				interpolatorOptionsOwner,
+				rawStyleMap?.options,
+			);
+			syncScreenOptionsOverrides(
+				interpolatorOptionsOwner === "current" ? rawStyleMap : undefined,
+				screenOptions,
+			);
 
 			const stylesMap = !rawStyleMap
 				? NO_STYLES
 				: normalizeSlots(stripInterpolatorOptions(rawStyleMap));
 
-			return stylesMap;
+			return shouldDeferStyleBuckets
+				? preserveAnimatedPropsOnly(stylesMap)
+				: stylesMap;
 		} catch (_) {
 			if (__DEV__) {
 				logger.warn("screenStyleInterpolator must be a worklet");
 			}
 
+			syncSelectedInterpolatorOptions(selectedInterpolatorOptions, "current");
 			syncScreenOptionsOverrides(undefined, screenOptions);
 			return NO_STYLES;
 		}

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

@@ -1,40 +1,59 @@
 import {
 	useAnimatedProps,
+	useAnimatedReaction,
 	useAnimatedStyle,
-	useDerivedValue,
+	useSharedValue,
 } from "react-native-reanimated";
 import { AnimationStore } from "../../../../stores/animation.store";
 import { SystemStore } from "../../../../stores/system.store";
 import { useDescriptorDerivations } from "../../descriptors";
+import { resolveScreenVisibilityGate } from "../helpers/visibility-gate";
 
 export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 	const { currentScreenKey } = useDescriptorDerivations();
-	const progress = AnimationStore.getValue(currentScreenKey, "progress");
+	const { entering, progress } = AnimationStore.getBag(currentScreenKey);
 
-	const { pendingLifecycleStartBlockCount } =
+	const { pendingLifecycleStartBlockCount, pendingLifecycleRequestKind } =
 		SystemStore.getBag(currentScreenKey);
 
-	const shouldBlockVisibility = useDerivedValue(() => {
-		"worklet";
+	const hasVisibilityGateOpened = useSharedValue(false);
+	const shouldBlockVisibility = useSharedValue(!isFloatingOverlay);
 
-		if (isFloatingOverlay) {
-			return false;
-		}
+	/**
+	 * Visibility has to start blocked before the first animated style pass.
+	 *
+	 * `useDerivedValue` can publish its computed value after `useAnimatedStyle`
+	 * has already read the initial one, which briefly exposes an unhydrated
+	 * screen. Keep the visible state in an eagerly initialized shared value, then
+	 * let the reaction open it once the visibility gate allows the first
+	 * transformed frame to render.
+	 */
+	useAnimatedReaction(
+		() => {
+			"worklet";
 
-		const hasPendingLifecycleBlock = pendingLifecycleStartBlockCount.get() > 0;
+			return resolveScreenVisibilityGate({
+				isFloatingOverlay,
+				hasVisibilityGateOpened: hasVisibilityGateOpened.get(),
+				pendingLifecycleStartBlockCount: pendingLifecycleStartBlockCount.get(),
+				pendingLifecycleRequestKind: pendingLifecycleRequestKind.get(),
+				progress: progress.get(),
+				entering: entering.get(),
+			});
+		},
+		(gate) => {
+			"worklet";
 
-		// 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;
+			if (gate.shouldOpenGate) {
+				hasVisibilityGateOpened.set(true);
+			}
 
-		return hasPendingLifecycleBlock || isWaitingForOpenToStart;
-	});
+			shouldBlockVisibility.set(gate.shouldBlock);
+		},
+	);
 
 	const animatedStyle = useAnimatedStyle(() => {
 		"worklet";
-
 		return {
 			opacity: shouldBlockVisibility.get() ? 0 : 1,
 		};

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

@@ -9,6 +9,7 @@ import { useScreenAnimationContext } from "../../animation";
 import {
 	type ResettableStyleStatesBySlot,
 	resolveSlotStyles,
+	reuseEqualResolvedSlots,
 } from "../helpers/resolve-slot-styles";
 
 interface UseResolvedStylesMapParams {
@@ -20,15 +21,17 @@ export const useResolvedStylesMap = ({
 	currentStylesMap,
 	ancestorStylesMap,
 }: UseResolvedStylesMapParams) => {
-	const { screenInterpolatorProps, screenInterpolatorFrameUpdater } =
+	const { screenInterpolatorProps, screenInterpolatorPropsRevision } =
 		useScreenAnimationContext();
 	const previousStyleStatesBySlot = useSharedValue<ResettableStyleStatesBySlot>(
 		{},
 	);
+	const previousResolvedStylesMap =
+		useSharedValue<NormalizedTransitionInterpolatedStyle>(NO_STYLES);
 
 	return useDerivedValue(() => {
 		"worklet";
-		screenInterpolatorFrameUpdater.get();
+		screenInterpolatorPropsRevision.get();
 
 		const props = screenInterpolatorProps.get();
 		// Keep missing local slots alive while another route drives this screen.
@@ -44,7 +47,12 @@ export const useResolvedStylesMap = ({
 			});
 
 		previousStyleStatesBySlot.set(nextPreviousStyleStatesBySlot);
+		const stableResolvedStylesMap = reuseEqualResolvedSlots({
+			resolvedStylesMap,
+			previousResolvedStylesMap: previousResolvedStylesMap.get(),
+		});
+		previousResolvedStylesMap.set(stableResolvedStylesMap);
 
-		return resolvedStylesMap;
+		return stableResolvedStylesMap;
 	});
 };

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

@@ -8,11 +8,9 @@ import { createStore } from "../utils/create-store";
 export type AnimationStoreMap = {
 	progress: SharedValue<number>;
 	willAnimate: SharedValue<number>;
-	animating: SharedValue<number>;
+	progressAnimating: SharedValue<number>;
 	closing: SharedValue<number>;
 	entering: SharedValue<number>;
-	settled: SharedValue<number>;
-	logicallySettled: SharedValue<number>;
 };
 
 function createAnimationBag(): AnimationStoreMap {
@@ -20,10 +18,8 @@ function createAnimationBag(): AnimationStoreMap {
 		progress: makeMutable(0),
 		willAnimate: makeMutable(0),
 		closing: makeMutable(0),
-		animating: makeMutable(0),
+		progressAnimating: makeMutable(0),
 		entering: makeMutable(0),
-		settled: makeMutable(1),
-		logicallySettled: makeMutable(1),
 	};
 }
 
@@ -37,10 +33,8 @@ export const AnimationStore = createStore<AnimationStoreMap>({
 	disposeBag: (bag) => {
 		cancelAnimation(bag.progress);
 		cancelAnimation(bag.willAnimate);
-		cancelAnimation(bag.animating);
+		cancelAnimation(bag.progressAnimating);
 		cancelAnimation(bag.closing);
 		cancelAnimation(bag.entering);
-		cancelAnimation(bag.settled);
-		cancelAnimation(bag.logicallySettled);
 	},
 });

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

@@ -0,0 +1,161 @@
+import type {
+	GroupKey,
+	LinkGroupState,
+	LinkKey,
+	LinkPairState,
+	LinkPairsState,
+	ScreenIdentifier,
+	ScreenPairKey,
+	TagLink,
+} from "../types";
+
+const PAIR_SEPARATOR = "<>";
+
+export const createScreenPairKey = (
+	sourceScreenKey: ScreenIdentifier["screenKey"],
+	destinationScreenKey: ScreenIdentifier["screenKey"] | "",
+): ScreenPairKey => {
+	"worklet";
+	return `${sourceScreenKey}${PAIR_SEPARATOR}${destinationScreenKey}`;
+};
+
+export const createPendingPairKey = (
+	sourceScreenKey: ScreenIdentifier["screenKey"],
+): ScreenPairKey => {
+	"worklet";
+	return createScreenPairKey(sourceScreenKey, "");
+};
+
+export const getSourceScreenKeyFromPairKey = (
+	pairKey: ScreenPairKey,
+): ScreenIdentifier["screenKey"] => {
+	"worklet";
+	const separatorIndex = pairKey.indexOf(PAIR_SEPARATOR);
+	if (separatorIndex === -1) return pairKey;
+	return pairKey.slice(0, separatorIndex);
+};
+
+export const getDestinationScreenKeyFromPairKey = (
+	pairKey: ScreenPairKey,
+): ScreenIdentifier["screenKey"] | "" => {
+	"worklet";
+	const separatorIndex = pairKey.indexOf(PAIR_SEPARATOR);
+	if (separatorIndex === -1) return "";
+	return pairKey.slice(separatorIndex + PAIR_SEPARATOR.length);
+};
+
+export const isScreenPairKeyForScreen = (
+	pairKey: ScreenPairKey,
+	screenKey: ScreenIdentifier["screenKey"],
+): boolean => {
+	"worklet";
+	return (
+		pairKey === createPendingPairKey(screenKey) ||
+		pairKey.startsWith(`${screenKey}${PAIR_SEPARATOR}`) ||
+		pairKey.endsWith(`${PAIR_SEPARATOR}${screenKey}`)
+	);
+};
+
+export const getLinkKeyFromTag = (tag: string): LinkKey => {
+	"worklet";
+	const separatorIndex = tag.indexOf(":");
+	if (separatorIndex === -1) return tag;
+	return tag.slice(separatorIndex + 1);
+};
+
+export const getGroupKeyFromTag = (tag: string): GroupKey | null => {
+	"worklet";
+	const separatorIndex = tag.indexOf(":");
+	if (separatorIndex === -1) return null;
+	return tag.slice(0, separatorIndex);
+};
+
+export const createGroupTag = (group: GroupKey, linkKey: LinkKey): string => {
+	"worklet";
+	return `${group}:${linkKey}`;
+};
+
+export const ensurePairState = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+): LinkPairState => {
+	"worklet";
+	if (!state[pairKey]) {
+		state[pairKey] = {
+			links: {},
+			groups: {},
+		};
+	}
+	state[pairKey].groups ??= {};
+	return state[pairKey];
+};
+
+export const ensurePairLinks = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+): Record<LinkKey, TagLink> => {
+	"worklet";
+	return ensurePairState(state, pairKey).links;
+};
+
+export const ensurePairGroups = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+): Record<GroupKey, LinkGroupState> => {
+	"worklet";
+	return ensurePairState(state, pairKey).groups;
+};
+
+export const removePairLink = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	linkKey: LinkKey,
+) => {
+	"worklet";
+	const pair = state[pairKey];
+	if (!pair) return;
+
+	delete pair.links[linkKey];
+
+	for (const key in pair.links) {
+		if (pair.links[key]) return;
+	}
+
+	delete state[pairKey];
+};
+
+export const getLink = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	linkKey: LinkKey,
+): TagLink | null => {
+	"worklet";
+	return state[pairKey]?.links[linkKey] ?? null;
+};
+
+export const getSource = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	linkKey: LinkKey,
+): TagLink["source"] | null => {
+	"worklet";
+	return getLink(state, pairKey, linkKey)?.source ?? null;
+};
+
+export const getDestination = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	linkKey: LinkKey,
+): TagLink["destination"] | null => {
+	"worklet";
+	return getLink(state, pairKey, linkKey)?.destination ?? null;
+};
+
+export const getActiveGroupId = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	group: GroupKey,
+): LinkKey | null => {
+	"worklet";
+	return state[pairKey]?.groups?.[group]?.activeId ?? null;
+};

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

@@ -1,16 +1,11 @@
-import { clear, clearByAncestor, clearByBranch } from "./internals/clear";
+import { clear } from "./internals/clear";
 import { getEntry, removeEntry, setEntry } from "./internals/entries";
 import {
-	getGroupActiveId,
-	getGroupInitialId,
-	setGroupActiveId,
-	setGroupInitialId,
-} from "./internals/groups";
-import {
-	getMatchedLink,
-	getPendingLink,
-	hasDestinationLink,
-	hasSourceLink,
+	getActiveGroupId,
+	getDestination,
+	getLink,
+	getSource,
+	setActiveGroupId,
 	setDestination,
 	setSource,
 } from "./internals/links";
@@ -37,21 +32,14 @@ export const BoundStore = {
 	link: {
 		setSource,
 		setDestination,
-		getMatched: getMatchedLink,
+		setActiveGroupId,
+		getLink,
+		getSource,
+		getDestination,
+		getActiveGroupId,
 		getPair: resolveTransitionPair,
-		getPending: getPendingLink,
-		hasSource: hasSourceLink,
-		hasDestination: hasDestinationLink,
-	},
-	group: {
-		setActiveId: setGroupActiveId,
-		setInitialId: setGroupInitialId,
-		getActiveId: getGroupActiveId,
-		getInitialId: getGroupInitialId,
 	},
 	cleanup: {
 		byScreen: clear,
-		byAncestor: clearByAncestor,
-		byBranch: clearByBranch,
 	},
 };

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

@@ -1,98 +1,35 @@
 import { hasAnyKeys } from "../helpers/keys";
-import { matchesNavigatorKey, matchesScreenKey } from "../helpers/matching";
-import type { NavigatorKey, ScreenEntry, ScreenKey, TagLink } from "../types";
-import { type RegistryState, registry } from "./state";
+import { isScreenPairKeyForScreen } from "../helpers/link-pairs.helpers";
+import type { LinkPairsState, ScreenKey } from "../types";
+import { type BoundaryEntriesState, boundaryRegistry, pairs } from "./state";
 
-type LinkPredicate = (link: TagLink) => boolean;
-
-type ScreenPredicate = (
-	screenKey: ScreenKey,
-	screenEntry: ScreenEntry,
-) => boolean;
-
-const clearRegistry = (
-	shouldClearScreen: ScreenPredicate,
-	shouldClearLink: LinkPredicate,
-) => {
+function clear(screenKey: ScreenKey) {
 	"worklet";
-	registry.modify(<T extends RegistryState>(state: T): T => {
+
+	boundaryRegistry.modify(<T extends BoundaryEntriesState>(state: T): T => {
 		"worklet";
 		for (const tag in state) {
 			const tagState = state[tag];
+			delete tagState.screens[screenKey];
 
-			for (const entryScreenKey in tagState.screens) {
-				const screenEntry = tagState.screens[entryScreenKey];
-				if (shouldClearScreen(entryScreenKey, screenEntry)) {
-					delete tagState.screens[entryScreenKey];
-				}
-			}
-
-			for (let i = tagState.linkStack.length - 1; i >= 0; i--) {
-				const link = tagState.linkStack[i];
-				if (shouldClearLink(link)) {
-					tagState.linkStack.splice(i, 1);
-				}
-			}
-
-			if (!hasAnyKeys(tagState.screens) && tagState.linkStack.length === 0) {
+			if (!hasAnyKeys(tagState.screens)) {
 				delete state[tag];
 			}
 		}
 
 		return state;
 	});
-};
 
-function clear(screenKey: ScreenKey) {
-	"worklet";
-	clearRegistry(
-		(entryScreenKey) => entryScreenKey === screenKey,
-		(link) => {
-			return (
-				matchesScreenKey(link.source, screenKey) ||
-				matchesScreenKey(link.destination, screenKey)
-			);
-		},
-	);
-}
-
-function clearByAncestor(ancestorKey: ScreenKey) {
-	"worklet";
-	clearRegistry(
-		(entryScreenKey, screenEntry) => {
-			return (
-				entryScreenKey === ancestorKey ||
-				(screenEntry.ancestorKeys?.includes(ancestorKey) ?? false)
-			);
-		},
-		(link) => {
-			return (
-				matchesScreenKey(link.source, ancestorKey) ||
-				matchesScreenKey(link.destination, ancestorKey)
-			);
-		},
-	);
-}
-
-function clearByBranch(branchNavigatorKey: NavigatorKey) {
-	"worklet";
-	if (!branchNavigatorKey) return;
+	pairs.modify(<T extends LinkPairsState>(state: T): T => {
+		"worklet";
+		for (const pairKey in state) {
+			if (isScreenPairKeyForScreen(pairKey, screenKey)) {
+				delete state[pairKey];
+			}
+		}
 
-	clearRegistry(
-		(_entryScreenKey, screenEntry) => {
-			return (
-				screenEntry.navigatorKey === branchNavigatorKey ||
-				(screenEntry.ancestorNavigatorKeys?.includes(branchNavigatorKey) ??
-					false)
-			);
-		},
-		(link) => {
-			return (
-				matchesNavigatorKey(link.source, branchNavigatorKey) ||
-				matchesNavigatorKey(link.destination, branchNavigatorKey)
-			);
-		},
-	);
+		return state;
+	});
 }
 
-export { clear, clearByAncestor, clearByBranch };
+export { clear };