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

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

@@ -1,5 +1,6 @@
 import { useWindowDimensions } from "react-native";
 import {
+	type SharedValue,
 	useAnimatedProps,
 	useAnimatedReaction,
 	useAnimatedStyle,
@@ -10,9 +11,18 @@ import { SystemStore } from "../../../../stores/system.store";
 import { getVisibilityBlockOffset } from "../../../../utils/visibility-block-offset";
 import { useDescriptorsStore } from "../../descriptors";
 import { hasCloseTransitionFinished } from "../helpers/transition-visual-state";
+import { resolveVisibilityBlockOwnership } from "../helpers/visibility-block-ownership";
 import { resolveScreenVisibilityGate } from "../helpers/visibility-gate";
 
-export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
+type Params = {
+	ancestorVisibilityBlocked: SharedValue<boolean> | null;
+	isFloatingOverlay?: boolean;
+};
+
+export const useMaybeBlockVisibility = ({
+	ancestorVisibilityBlocked,
+	isFloatingOverlay,
+}: Params) => {
 	const { height } = useWindowDimensions();
 	const currentScreenKey = useDescriptorsStore(
 		(store) => store.derivations.currentScreenKey,
@@ -25,29 +35,39 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 	} = SystemStore.getBag(currentScreenKey);
 
 	const hasVisibilityGateOpened = useSharedValue(false);
-	const shouldBlockVisibility = useSharedValue(!isFloatingOverlay);
+	const localVisibilityBlocked = useSharedValue(!isFloatingOverlay);
+	const effectiveVisibilityBlocked = useSharedValue(!isFloatingOverlay);
 
 	useAnimatedReaction(
 		() => {
 			"worklet";
 
-			return resolveScreenVisibilityGate({
-				isFloatingOverlay,
-				hasVisibilityGateOpened: hasVisibilityGateOpened.get(),
-				pendingLifecycleStartBlockCount: pendingLifecycleStartBlockCount.get(),
-				pendingLifecycleRequestKind: pendingLifecycleRequestKind.get(),
-				animationProgress: animationProgress.get(),
-				entering: entering.get(),
-			});
+			return {
+				gate: resolveScreenVisibilityGate({
+					isFloatingOverlay,
+					hasVisibilityGateOpened: hasVisibilityGateOpened.get(),
+					pendingLifecycleStartBlockCount:
+						pendingLifecycleStartBlockCount.get(),
+					pendingLifecycleRequestKind: pendingLifecycleRequestKind.get(),
+					animationProgress: animationProgress.get(),
+					entering: entering.get(),
+				}),
+				ancestorBlocked: ancestorVisibilityBlocked?.get() ?? false,
+			};
 		},
-		(gate) => {
+		({ gate, ancestorBlocked }) => {
 			"worklet";
 
 			if (gate.shouldOpenGate) {
 				hasVisibilityGateOpened.set(true);
 			}
 
-			shouldBlockVisibility.set(gate.shouldBlock);
+			const ownership = resolveVisibilityBlockOwnership({
+				localBlocked: gate.shouldBlock,
+				ancestorBlocked,
+			});
+			localVisibilityBlocked.set(gate.shouldBlock);
+			effectiveVisibilityBlocked.set(ownership.effectiveBlocked);
 		},
 	);
 
@@ -66,10 +86,15 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 			};
 		}
 
+		const ownership = resolveVisibilityBlockOwnership({
+			localBlocked: localVisibilityBlocked.get(),
+			ancestorBlocked: ancestorVisibilityBlocked?.get() ?? false,
+		});
+
 		return {
 			transform: [
 				{
-					translateY: shouldBlockVisibility.get() ? offset : 0,
+					translateY: ownership.appliesOffset ? offset : 0,
 				},
 			],
 		};
@@ -78,7 +103,7 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 	const animatedProps = useAnimatedProps(() => {
 		"worklet";
 		return {
-			pointerEvents: shouldBlockVisibility.get()
+			pointerEvents: effectiveVisibilityBlocked.get()
 				? ("none" as const)
 				: ("box-none" as const),
 		};
@@ -87,6 +112,6 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 	return {
 		animatedStyle,
 		animatedProps,
-		shouldBlockVisibility,
+		visibilityBlocked: effectiveVisibilityBlocked,
 	};
 };

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

@@ -30,6 +30,19 @@ export type ScreenSlotContextValue = {
 	visibilityBlocked: SharedValue<boolean>;
 };
 
+const NO_PARENT_SCREEN_KEY = "__no-parent-screen__";
+
+export const useAreAnyBlockingVisibility = () => {
+	const parentScreenKey = useDescriptorsStore(
+		(store) => store.derivations.parentScreenKey,
+	);
+
+	return useScreenSlots(
+		parentScreenKey ?? NO_PARENT_SCREEN_KEY,
+		(store) => store.visibilityBlocked,
+	);
+};
+
 export const { ScreenSlotProvider, useScreenSlotStore: useScreenSlots } =
 	createProvider("ScreenSlot", {
 		guarded: true,
@@ -41,12 +54,13 @@ export const { ScreenSlotProvider, useScreenSlotStore: useScreenSlots } =
 		const currentScreenKey = useDescriptorsStore(
 			(store) => store.derivations.currentScreenKey,
 		);
-		const { animatedStyle, animatedProps, shouldBlockVisibility } =
-			useMaybeBlockVisibility();
+		const ancestorVisibilityBlocked = useAreAnyBlockingVisibility();
+		const { animatedStyle, animatedProps, visibilityBlocked } =
+			useMaybeBlockVisibility({ ancestorVisibilityBlocked });
 
 		const { interpolatorReady, localStylesMaps } = useInterpolatedStylesMap({
 			enabled: true,
-			visibilityBlocked: shouldBlockVisibility,
+			visibilityBlocked,
 		});
 
 		const slotsMap = useResolvedStylesMap({
@@ -57,9 +71,9 @@ export const { ScreenSlotProvider, useScreenSlotStore: useScreenSlots } =
 			() => ({
 				interpolatorReady,
 				slotsMap,
-				visibilityBlocked: shouldBlockVisibility,
+				visibilityBlocked,
 			}),
-			[interpolatorReady, shouldBlockVisibility, slotsMap],
+			[interpolatorReady, slotsMap, visibilityBlocked],
 		);
 		const content = useMemo(
 			() => (

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 };