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

package/src/shared/providers/screen/styles/slot.provider.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, useLayoutEffect, useMemo } from "react";
+import { type ReactNode, useMemo } from "react";
 import { StyleSheet } from "react-native";
 import Animated, { type SharedValue } from "react-native-reanimated";
 import type {
@@ -8,22 +8,16 @@ import type {
 import type { NormalizedTransitionInterpolatedStyle } from "../../../types/animation.types";
 import createProvider from "../../../utils/create-provider";
 import { useDescriptorsStore } from "../descriptors";
-import { FloatingOverlayLayer } from "./components/floating-overlay-layer";
-import type { LocalStyleLayers } from "./helpers/resolve-slot-styles";
 import { useInterpolatedStylesMap } from "./hooks/use-interpolated-style-maps";
 import { useMaybeBlockVisibility } from "./hooks/use-maybe-block-visibility";
 import { useResolvedStylesMap } from "./hooks/use-resolved-slot-style-map";
-import {
-	registerScreenSlots,
-	unregisterScreenSlots,
-} from "./stores/slot-references.store";
 
 type Props = {
 	children: ReactNode;
-	isFloatingOverlay?: boolean;
 };
 
 export type ScreenSlotName =
+	| "overlay"
 	| "content"
 	| "backdrop"
 	| "surface"
@@ -31,78 +25,74 @@ export type ScreenSlotName =
 	| typeof NAVIGATION_MASK_ELEMENT_STYLE_ID;
 
 export type ScreenSlotContextValue = {
-	localStylesMaps: SharedValue<LocalStyleLayers>;
-	nextInterpolatorReady: SharedValue<number>;
+	interpolatorReady: SharedValue<number>;
 	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
 	visibilityBlocked: SharedValue<boolean>;
 };
 
-export const { ScreenSlotProvider, useScreenSlotStore: useScreenSlots } =
-	createProvider("ScreenSlot", {
-		guarded: true,
-	})<Props, ScreenSlotContextValue>(
-		({ children, isFloatingOverlay }, { useParentStore }) => {
-			const parentContext = useParentStore();
-			const currentScreenKey = useDescriptorsStore(
-				(s) => s.derivations.currentScreenKey,
-			);
+const NO_PARENT_SCREEN_KEY = "__no-parent-screen__";
 
-			const { animatedStyle, animatedProps, shouldBlockVisibility } =
-				useMaybeBlockVisibility(isFloatingOverlay);
-
-			const { localStylesMaps, nextInterpolatorReady } =
-				useInterpolatedStylesMap({
-					enabled: !isFloatingOverlay,
-					visibilityBlocked: shouldBlockVisibility,
-				});
+export const useAreAnyBlockingVisibility = () => {
+	const parentScreenKey = useDescriptorsStore(
+		(store) => store.derivations.parentScreenKey,
+	);
 
-			const slotsMap = useResolvedStylesMap({
-				localStylesMaps,
-				ancestorStylesMap: parentContext?.slotsMap,
-			});
-			const value = useMemo(
-				() => ({
-					localStylesMaps,
-					nextInterpolatorReady,
-					slotsMap,
-					visibilityBlocked: shouldBlockVisibility,
-				}),
-				[
-					localStylesMaps,
-					nextInterpolatorReady,
-					shouldBlockVisibility,
-					slotsMap,
-				],
-			);
+	return useScreenSlots(
+		parentScreenKey ?? NO_PARENT_SCREEN_KEY,
+		(store) => store.visibilityBlocked,
+	);
+};
 
-			useLayoutEffect(() => {
-				registerScreenSlots(currentScreenKey, value);
+export const { ScreenSlotProvider, useScreenSlotStore: useScreenSlots } =
+	createProvider("ScreenSlot", {
+		guarded: true,
+		global: true,
+	})<Props, ScreenSlotContextValue>(({ children }, { useParentStore }) => {
+		const ancestorStylesMap = useParentStore(
+			(parentContext) => parentContext?.slotsMap,
+		);
+		const currentScreenKey = useDescriptorsStore(
+			(store) => store.derivations.currentScreenKey,
+		);
+		const ancestorVisibilityBlocked = useAreAnyBlockingVisibility();
+		const { animatedStyle, animatedProps, visibilityBlocked } =
+			useMaybeBlockVisibility({ ancestorVisibilityBlocked });
 
-				return () => {
-					unregisterScreenSlots(currentScreenKey, value);
-				};
-			}, [currentScreenKey, value]);
+		const { interpolatorReady, localStylesMaps } = useInterpolatedStylesMap({
+			enabled: true,
+			visibilityBlocked,
+		});
 
-			const content = useMemo(
-				() => (
-					<FloatingOverlayLayer enabled={isFloatingOverlay}>
-						<Animated.View
-							style={[styles.container, animatedStyle]}
-							animatedProps={animatedProps}
-						>
-							{children}
-						</Animated.View>
-					</FloatingOverlayLayer>
-				),
-				[children, animatedStyle, isFloatingOverlay, animatedProps],
-			);
+		const slotsMap = useResolvedStylesMap({
+			localStylesMaps,
+			ancestorStylesMap,
+		});
+		const value = useMemo(
+			() => ({
+				interpolatorReady,
+				slotsMap,
+				visibilityBlocked,
+			}),
+			[interpolatorReady, slotsMap, visibilityBlocked],
+		);
+		const content = useMemo(
+			() => (
+				<Animated.View
+					style={[styles.container, animatedStyle]}
+					animatedProps={animatedProps}
+				>
+					{children}
+				</Animated.View>
+			),
+			[children, animatedStyle, animatedProps],
+		);
 
-			return {
-				value,
-				children: content,
-			};
-		},
-	);
+		return {
+			key: currentScreenKey,
+			value,
+			children: content,
+		};
+	});
 
 const styles = StyleSheet.create({
 	container: { flex: 1 },

package/src/shared/providers/stack/blank-stack-state/helpers/resolve-presented-index.ts

@@ -0,0 +1,22 @@
+import type { BaseStackRoute } from "../../../../types/stack.types";
+
+export function resolvePresentedIndex(
+	routes: BaseStackRoute[],
+	focusedRouteKey: string | undefined,
+	closingRouteKeys: ReadonlySet<string>,
+): number {
+	const focusedIndex = focusedRouteKey
+		? routes.findIndex((route) => route.key === focusedRouteKey)
+		: routes.length - 1;
+	const resolvedFocusedIndex =
+		focusedIndex >= 0 ? focusedIndex : routes.length - 1;
+
+	for (let index = resolvedFocusedIndex; index >= 0; index -= 1) {
+		const route = routes[index];
+		if (route && !closingRouteKeys.has(route.key)) {
+			return index;
+		}
+	}
+
+	return resolvedFocusedIndex;
+}

package/src/shared/providers/stack/blank-stack.provider.tsx

@@ -15,6 +15,7 @@ import type {
 } from "../../types/stack.types";
 import createProvider from "../../utils/create-provider";
 import { useBlankStackState } from "./blank-stack-state";
+import { resolvePresentedIndex } from "./blank-stack-state/helpers/resolve-presented-index";
 import { useStackCoreStore } from "./core.provider";
 
 type InternalBlankStackProviderProps = BlankStackProviderProps<
@@ -58,7 +59,11 @@ function BlankStackProvider({
 		state: stackState,
 	});
 	const navigatorKey = stackState.key;
-	const focusedIndex = stackState.index;
+	const focusedIndex = resolvePresentedIndex(
+		state.routes,
+		state.focusedRouteKey,
+		state.closingRouteKeys,
+	);
 	const scenesByKey = useMemo(
 		() => createScenesByKey(state.scenes),
 		[state.scenes],

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

@@ -137,6 +137,18 @@ export const ensurePairSourceRequests = (
 	return pair.sourceRequests;
 };
 
+export const ensurePairDestinationRequests = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+): Record<LinkKey, true> => {
+	"worklet";
+	const pair = ensurePairState(state, pairKey);
+	if (!pair.destinationRequests) {
+		pair.destinationRequests = {};
+	}
+	return pair.destinationRequests;
+};
+
 export const removePairLink = (
 	state: LinkPairsState,
 	pairKey: ScreenPairKey,

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

@@ -1,7 +1,12 @@
 import { hasAnyKeys } from "../helpers/keys";
 import { isScreenPairKeyForScreen } from "../helpers/link-pairs.helpers";
 import type { LinkPairsState, ScreenKey } from "../types";
-import { type BoundaryEntriesState, boundaryRegistry, pairs } from "./state";
+import {
+	type BoundaryEntriesState,
+	boundaryRegistry,
+	boundsScreens,
+	pairs,
+} from "./state";
 
 function clear(screenKey: ScreenKey) {
 	"worklet";
@@ -30,6 +35,12 @@ function clear(screenKey: ScreenKey) {
 
 		return state;
 	});
+
+	boundsScreens.modify((state) => {
+		"worklet";
+		delete state[screenKey];
+		return state;
+	});
 }
 
 export { clear };

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

@@ -0,0 +1,403 @@
+import type { SharedValue } from "react-native-reanimated";
+import {
+	ensurePairDestinationRequests,
+	ensurePairGroups,
+	ensurePairLinks,
+	ensurePairSourceRequests,
+	getDestinationScreenKeyFromPairKey,
+	getGroupKeyFromTag,
+	getLinkKeyFromTag,
+	getSourceScreenKeyFromPairKey,
+} from "../helpers/link-pairs.helpers";
+import type {
+	BoundsScreenNode,
+	BoundTag,
+	EntryPatch,
+	LinkKey,
+	LinkPairsState,
+	ScreenKey,
+	ScreenPairKey,
+	TagID,
+} from "../types";
+import { removeEntry, setEntry } from "./entries";
+import {
+	registerBoundsScreen,
+	screenBelongsToScope,
+	unregisterBoundsScreen,
+} from "./screen-graph";
+import { boundaryRegistry, boundsScreens, pairs } from "./state";
+
+type MeasurementRequest = {
+	type: "source" | "destination";
+	pairKey: ScreenPairKey;
+};
+
+type RegisterScreenParams = {
+	screenKey: ScreenKey;
+	parentScreenKey?: ScreenKey;
+	animationProgress: SharedValue<number>;
+	pendingLifecycleStartBlockCount: SharedValue<number>;
+};
+
+type RegisterBoundaryParams = {
+	boundTag: BoundTag;
+	screenKey: ScreenKey;
+	entry: EntryPatch;
+};
+
+type RequestBoundaryMeasurementsParams = {
+	pairKey: ScreenPairKey;
+	tag: TagID;
+	destination: boolean;
+	refresh: boolean;
+};
+
+const getRequestedLinkKey = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	tag: TagID,
+): LinkKey => {
+	"worklet";
+	const requestedLinkKey = getLinkKeyFromTag(tag);
+	const group = getGroupKeyFromTag(tag);
+	return group
+		? (state[pairKey]?.groups[group]?.activeId ?? requestedLinkKey)
+		: requestedLinkKey;
+};
+
+const getConcreteTag = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	tag: TagID,
+): TagID => {
+	"worklet";
+	const group = getGroupKeyFromTag(tag);
+	const linkKey = getRequestedLinkKey(state, pairKey, tag);
+	return group ? `${group}:${linkKey}` : linkKey;
+};
+
+const hasRegisteredDestination = (
+	pairKey: ScreenPairKey,
+	tag: TagID,
+): boolean => {
+	"worklet";
+	const destinationRoot = getDestinationScreenKeyFromPairKey(pairKey);
+	if (!destinationRoot) return false;
+
+	const screens = boundaryRegistry.get()[tag]?.screens;
+	for (const screenKey in screens) {
+		if (screenBelongsToScope(screenKey, destinationRoot)) return true;
+	}
+
+	return false;
+};
+
+const hasRegisteredSource = (pairKey: ScreenPairKey, tag: TagID): boolean => {
+	"worklet";
+	const sourceRoot = getSourceScreenKeyFromPairKey(pairKey);
+	const screens = boundaryRegistry.get()[tag]?.screens;
+	for (const screenKey in screens) {
+		if (screenBelongsToScope(screenKey, sourceRoot)) return true;
+	}
+
+	return false;
+};
+
+const claimDestinationBlock = (pairKey: ScreenPairKey, tag: TagID) => {
+	"worklet";
+	const state = pairs.get();
+	const linkKey = getRequestedLinkKey(state, pairKey, tag);
+	const pair = state[pairKey];
+	if (
+		!pair?.destinationRequests?.[linkKey] ||
+		pair.blockedDestinations?.[linkKey]
+	) {
+		return;
+	}
+
+	const concreteTag = getConcreteTag(state, pairKey, tag);
+	if (
+		!hasRegisteredSource(pairKey, concreteTag) ||
+		!hasRegisteredDestination(pairKey, concreteTag)
+	) {
+		return;
+	}
+
+	const destinationRoot = getDestinationScreenKeyFromPairKey(pairKey);
+	const destinationScreen = boundsScreens.get()[destinationRoot];
+	if (!destinationScreen || destinationScreen.animationProgress.get() > 0) {
+		return;
+	}
+
+	destinationScreen.pendingLifecycleStartBlockCount.modify(
+		<T extends number>(count: T): T => {
+			"worklet";
+			return (count + 1) as T;
+		},
+	);
+
+	pairs.modify(<T extends LinkPairsState>(current: T): T => {
+		"worklet";
+		const currentPair = current[pairKey];
+		if (!currentPair) return current;
+		if (!currentPair.blockedDestinations) {
+			currentPair.blockedDestinations = {};
+		}
+		currentPair.blockedDestinations[linkKey] = true;
+		return current;
+	});
+};
+
+const releaseDestinationBlock = (pairKey: ScreenPairKey, linkKey: LinkKey) => {
+	"worklet";
+	const pair = pairs.get()[pairKey];
+	if (!pair?.blockedDestinations?.[linkKey]) return;
+
+	const destinationRoot = getDestinationScreenKeyFromPairKey(pairKey);
+	const destinationScreen = boundsScreens.get()[destinationRoot];
+	destinationScreen?.pendingLifecycleStartBlockCount.modify(
+		<T extends number>(count: T): T => {
+			"worklet";
+			return Math.max(0, count - 1) as T;
+		},
+	);
+
+	pairs.modify(<T extends LinkPairsState>(state: T): T => {
+		"worklet";
+		delete state[pairKey]?.blockedDestinations?.[linkKey];
+		return state;
+	});
+};
+
+const releaseDestinationBlockWhenReady = (
+	pairKey: ScreenPairKey,
+	linkKey: LinkKey,
+) => {
+	"worklet";
+	const pair = pairs.get()[pairKey];
+	const link = pair?.links[linkKey];
+	if (!link?.source || !link.destination) return;
+	if (link.source.escapeClipping && !pair.portalReadySources?.[linkKey]) return;
+	releaseDestinationBlock(pairKey, linkKey);
+};
+
+export function registerScreen(params: RegisterScreenParams) {
+	"worklet";
+	const node: BoundsScreenNode = {
+		parentScreenKey: params.parentScreenKey,
+		animationProgress: params.animationProgress,
+		pendingLifecycleStartBlockCount: params.pendingLifecycleStartBlockCount,
+	};
+	registerBoundsScreen(params.screenKey, node);
+
+	const state = pairs.get();
+	for (const pairKey in state) {
+		const requests = state[pairKey]?.destinationRequests;
+		for (const linkKey in requests) {
+			claimDestinationBlock(pairKey, linkKey);
+		}
+	}
+}
+
+export function unregisterScreen(screenKey: ScreenKey) {
+	"worklet";
+	unregisterBoundsScreen(screenKey);
+}
+
+export function registerBoundary({
+	boundTag,
+	screenKey,
+	entry,
+}: RegisterBoundaryParams) {
+	"worklet";
+	setEntry(boundTag.tag, screenKey, entry);
+
+	const state = pairs.get();
+	for (const pairKey in state) {
+		const linkKey = getRequestedLinkKey(state, pairKey, boundTag.tag);
+		if (state[pairKey]?.destinationRequests?.[linkKey]) {
+			claimDestinationBlock(pairKey, boundTag.tag);
+		}
+	}
+}
+
+export function unregisterBoundary(boundTag: BoundTag, screenKey: ScreenKey) {
+	"worklet";
+	removeEntry(boundTag.tag, screenKey);
+	if (!boundsScreens.get()[screenKey]) return;
+
+	const state = pairs.get();
+	for (const pairKey in state) {
+		const concreteTag = getConcreteTag(state, pairKey, boundTag.tag);
+		const type =
+			screenBelongsToScope(screenKey, getSourceScreenKeyFromPairKey(pairKey)) &&
+			!hasRegisteredSource(pairKey, concreteTag)
+				? "source"
+				: screenBelongsToScope(
+							screenKey,
+							getDestinationScreenKeyFromPairKey(pairKey),
+						) && !hasRegisteredDestination(pairKey, concreteTag)
+					? "destination"
+					: null;
+		if (!type) continue;
+
+		abandonBoundaryMeasurement({
+			type,
+			pairKey,
+			tag: getRequestedLinkKey(state, pairKey, boundTag.tag),
+		});
+	}
+}
+
+export function requestBoundaryMeasurements({
+	pairKey,
+	tag,
+	destination,
+	refresh,
+}: RequestBoundaryMeasurementsParams) {
+	"worklet";
+	const requestedLinkKey = getLinkKeyFromTag(tag);
+	const group = getGroupKeyFromTag(tag);
+	const previousActiveId = group
+		? pairs.get()[pairKey]?.groups[group]?.activeId
+		: undefined;
+
+	if (previousActiveId && previousActiveId !== requestedLinkKey) {
+		releaseDestinationBlock(pairKey, previousActiveId);
+	}
+
+	pairs.modify(<T extends LinkPairsState>(state: T): T => {
+		"worklet";
+		const groups = ensurePairGroups(state, pairKey);
+		if (group && groups[group]?.activeId !== requestedLinkKey) {
+			groups[group] = {
+				activeId: requestedLinkKey,
+				initialId: groups[group]?.initialId ?? requestedLinkKey,
+			};
+			if (previousActiveId) {
+				delete state[pairKey]?.sourceRequests?.[previousActiveId];
+				delete state[pairKey]?.destinationRequests?.[previousActiveId];
+			}
+		}
+
+		const linkKey = getRequestedLinkKey(state, pairKey, tag);
+		const pair = state[pairKey];
+		const link = ensurePairLinks(state, pairKey)[linkKey];
+		const refreshing = !!pair?.refreshingLinks?.[linkKey];
+		const startsRefresh = refresh && !refreshing;
+
+		if (!pair.refreshingLinks) pair.refreshingLinks = {};
+		if (refresh) {
+			pair.refreshingLinks[linkKey] = true;
+		} else {
+			delete pair.refreshingLinks[linkKey];
+		}
+
+		if (!link?.source || startsRefresh) {
+			ensurePairSourceRequests(state, pairKey)[linkKey] = true;
+			delete pair.portalReadySources?.[linkKey];
+		}
+
+		if (destination) {
+			if (group) {
+				if (!pair.destinationGroupDemands) pair.destinationGroupDemands = {};
+				pair.destinationGroupDemands[group] = true;
+			} else {
+				if (!pair.destinationLinkDemands) pair.destinationLinkDemands = {};
+				pair.destinationLinkDemands[linkKey] = true;
+			}
+
+			if (!link?.destination || startsRefresh) {
+				ensurePairDestinationRequests(state, pairKey)[linkKey] = true;
+			}
+		}
+
+		return state;
+	});
+
+	if (destination) claimDestinationBlock(pairKey, tag);
+}
+
+export function getBoundaryMeasurementRequest(
+	tag: TagID,
+	screenKey: ScreenKey,
+	state: LinkPairsState = pairs.get(),
+): MeasurementRequest | null {
+	"worklet";
+	const linkKey = getLinkKeyFromTag(tag);
+	const group = getGroupKeyFromTag(tag);
+	let match: MeasurementRequest | null = null;
+
+	for (const pairKey in state) {
+		const pair = state[pairKey];
+		if (group && pair?.groups[group]?.activeId !== linkKey) continue;
+
+		const sourceRoot = getSourceScreenKeyFromPairKey(pairKey);
+		if (
+			pair?.sourceRequests?.[linkKey] &&
+			screenBelongsToScope(screenKey, sourceRoot)
+		) {
+			match = { type: "source", pairKey };
+		}
+
+		const destinationRoot = getDestinationScreenKeyFromPairKey(pairKey);
+		if (
+			pair?.destinationRequests?.[linkKey] &&
+			destinationRoot &&
+			screenBelongsToScope(screenKey, destinationRoot)
+		) {
+			match = { type: "destination", pairKey };
+		}
+	}
+
+	return match;
+}
+
+export function completeBoundaryMeasurement(
+	target: MeasurementRequest,
+	tag: TagID,
+) {
+	"worklet";
+	const linkKey = getLinkKeyFromTag(tag);
+	releaseDestinationBlockWhenReady(target.pairKey, linkKey);
+}
+
+export function markBoundaryPortalReady(pairKey: ScreenPairKey, tag: TagID) {
+	"worklet";
+	const linkKey = getLinkKeyFromTag(tag);
+	pairs.modify(<T extends LinkPairsState>(state: T): T => {
+		"worklet";
+		const pair = state[pairKey];
+		if (!pair) return state;
+		if (!pair.portalReadySources) pair.portalReadySources = {};
+		pair.portalReadySources[linkKey] = true;
+		return state;
+	});
+	releaseDestinationBlockWhenReady(pairKey, linkKey);
+}
+
+export function abandonBoundaryMeasurement(
+	params: MeasurementRequest & { tag: TagID },
+) {
+	"worklet";
+	const linkKey = getLinkKeyFromTag(params.tag);
+	const pair = pairs.get()[params.pairKey];
+	const hasPendingRequest =
+		params.type === "source"
+			? !!pair?.sourceRequests?.[linkKey]
+			: !!pair?.destinationRequests?.[linkKey];
+	const hasDestinationBlock = !!pair?.blockedDestinations?.[linkKey];
+	if (!hasPendingRequest && !hasDestinationBlock) return;
+
+	pairs.modify(<T extends LinkPairsState>(state: T): T => {
+		"worklet";
+		if (params.type === "source") {
+			delete state[params.pairKey]?.sourceRequests?.[linkKey];
+		} else {
+			delete state[params.pairKey]?.destinationRequests?.[linkKey];
+		}
+		return state;
+	});
+
+	releaseDestinationBlock(params.pairKey, linkKey);
+}

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

@@ -62,43 +62,6 @@ function getEntry(tag: TagID, key: ScreenKey): Entry | null {
 	return boundaryRegistry.get()[tag]?.screens[key] ?? null;
 }
 
-function getMatchingSourceScreenKey(
-	tag: TagID,
-	destinationScreenKey: ScreenKey,
-	preferredScreenKey?: ScreenKey,
-	excludedScreenKeys?: readonly ScreenKey[],
-): ScreenKey | null {
-	"worklet";
-	const screens = boundaryRegistry.get()[tag]?.screens;
-	if (!screens) return null;
-	const isExcluded = (screenKey: ScreenKey) => {
-		"worklet";
-		for (let index = 0; index < (excludedScreenKeys?.length ?? 0); index++) {
-			if (excludedScreenKeys?.[index] === screenKey) {
-				return true;
-			}
-		}
-		return false;
-	};
-	if (
-		preferredScreenKey &&
-		preferredScreenKey !== destinationScreenKey &&
-		!isExcluded(preferredScreenKey) &&
-		screens[preferredScreenKey]
-	) {
-		return preferredScreenKey;
-	}
-
-	let latestScreenKey: ScreenKey | null = null;
-	for (const screenKey in screens) {
-		if (screenKey !== destinationScreenKey && !isExcluded(screenKey)) {
-			latestScreenKey = screenKey;
-		}
-	}
-
-	return latestScreenKey;
-}
-
 function setEntry(tag: TagID, screenKey: ScreenKey, patch: EntryPatch) {
 	"worklet";
 	boundaryRegistry.modify(<T extends BoundaryEntriesState>(state: T): T => {
@@ -127,4 +90,4 @@ function removeEntry(tag: TagID, screenKey: ScreenKey) {
 	});
 }
 
-export { getEntry, getMatchingSourceScreenKey, removeEntry, setEntry };
+export { getEntry, removeEntry, setEntry };