react-native-screen-transitions 3.4.0 → 3.5.0-beta.0

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

@@ -0,0 +1,85 @@
+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 { logger } from "../../../../utils/logger";
+import { useScreenAnimationContext } from "../../animation";
+import { useDescriptorDerivations } from "../../descriptors";
+import { normalizeSlots } from "../helpers/normalize-slots";
+
+export const useInterpolatedStylesMap = () => {
+	const { currentScreenKey } = useDescriptorDerivations();
+	const {
+		screenInterpolatorProps,
+		nextInterpolator,
+		currentInterpolator,
+		boundsAccessor,
+	} = useScreenAnimationContext();
+
+	const pendingLifecycleStartBlockCount = SystemStore.getValue(
+		currentScreenKey,
+		"pendingLifecycleStartBlockCount",
+	);
+
+	const isGesturingDuringCloseAnimation = useSharedValue(false);
+
+	return useDerivedValue<NormalizedTransitionInterpolatedStyle>(() => {
+		"worklet";
+		if (pendingLifecycleStartBlockCount.get() > 0) {
+			return NO_STYLES;
+		}
+
+		const props = screenInterpolatorProps.get();
+		const { current, next, progress } = props;
+		const isDragging = current.gesture.dragging;
+		const isNextClosing = !!next?.closing;
+
+		if (isDragging && isNextClosing) {
+			isGesturingDuringCloseAnimation.set(true);
+		}
+
+		if (!isDragging && !isNextClosing) {
+			isGesturingDuringCloseAnimation.set(false);
+		}
+
+		const isInGestureMode = isDragging || isGesturingDuringCloseAnimation.get();
+
+		const interpolator = isInGestureMode
+			? currentInterpolator
+			: (nextInterpolator ?? currentInterpolator);
+
+		if (!interpolator) {
+			return NO_STYLES;
+		}
+
+		let effectiveProgress = progress;
+		let effectiveNext = next;
+
+		if (isInGestureMode) {
+			effectiveProgress = current.progress;
+			effectiveNext = undefined;
+		}
+
+		try {
+			const raw = interpolator({
+				...props,
+				progress: effectiveProgress,
+				next: effectiveNext,
+				bounds: boundsAccessor,
+			});
+
+			const stylesMap =
+				typeof raw !== "object" || raw == null
+					? NO_STYLES
+					: normalizeSlots(raw);
+
+			return stylesMap;
+		} catch (_) {
+			if (__DEV__) {
+				logger.warn("screenStyleInterpolator must be a worklet");
+			}
+
+			return NO_STYLES;
+		}
+	});
+};

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

@@ -0,0 +1,51 @@
+import {
+	useAnimatedProps,
+	useAnimatedStyle,
+	useDerivedValue,
+} from "react-native-reanimated";
+import { AnimationStore } from "../../../../stores/animation.store";
+import { SystemStore } from "../../../../stores/system.store";
+import { useDescriptorDerivations } from "../../descriptors";
+
+export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
+	const { currentScreenKey } = useDescriptorDerivations();
+	const progress = AnimationStore.getValue(currentScreenKey, "progress");
+
+	const { pendingLifecycleStartBlockCount } =
+		SystemStore.getBag(currentScreenKey);
+
+	const shouldBlockVisibility = useDerivedValue(() => {
+		"worklet";
+
+		if (isFloatingOverlay) {
+			return false;
+		}
+
+		const hasPendingLifecycleBlock = pendingLifecycleStartBlockCount.get() > 0;
+		const isWaitingForOpenToStart = progress.get() <= 0;
+
+		return hasPendingLifecycleBlock || isWaitingForOpenToStart;
+	});
+
+	const animatedStyle = useAnimatedStyle(() => {
+		"worklet";
+
+		return {
+			opacity: shouldBlockVisibility.get() ? 0 : 1,
+		};
+	});
+
+	const animatedProps = useAnimatedProps(() => {
+		"worklet";
+		return {
+			pointerEvents: shouldBlockVisibility.get()
+				? ("none" as const)
+				: ("box-none" as const),
+		};
+	});
+
+	return {
+		animatedStyle,
+		animatedProps,
+	};
+};

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

@@ -0,0 +1,40 @@
+import {
+	type SharedValue,
+	useDerivedValue,
+	useSharedValue,
+} from "react-native-reanimated";
+import { NO_STYLES } from "../../../../constants";
+import type { NormalizedTransitionInterpolatedStyle } from "../../../../types/animation.types";
+import {
+	type ResettableStyleStatesBySlot,
+	resolveSlotStyles,
+} from "../helpers/resolve-slot-styles";
+
+interface UseResolvedStylesMapParams {
+	currentStylesMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
+	ancestorStylesMap?: SharedValue<NormalizedTransitionInterpolatedStyle>;
+}
+
+export const useResolvedStylesMap = ({
+	currentStylesMap,
+	ancestorStylesMap,
+}: UseResolvedStylesMapParams) => {
+	const previousStyleStatesBySlot = useSharedValue<ResettableStyleStatesBySlot>(
+		{},
+	);
+
+	return useDerivedValue(() => {
+		"worklet";
+
+		const { resolvedStylesMap, nextPreviousStyleStatesBySlot } =
+			resolveSlotStyles({
+				currentStylesMap: currentStylesMap.get(),
+				ancestorStylesMap: ancestorStylesMap?.get() ?? NO_STYLES,
+				previousStyleStatesBySlot: previousStyleStatesBySlot.get(),
+			});
+
+		previousStyleStatesBySlot.set(nextPreviousStyleStatesBySlot);
+
+		return resolvedStylesMap;
+	});
+};

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

@@ -1,28 +1,20 @@
-import { type ReactNode, useContext, useMemo } from "react";
-import {
-	type SharedValue,
-	useDerivedValue,
-	useSharedValue,
-} from "react-native-reanimated";
-import { NO_STYLES } from "../../../constants";
+import { type ReactNode, useContext } from "react";
+import { StyleSheet } from "react-native";
+import Animated, { type SharedValue } from "react-native-reanimated";
 import type { NormalizedTransitionInterpolatedStyle } from "../../../types/animation.types";
 import createProvider from "../../../utils/create-provider";
-import { logger } from "../../../utils/logger";
-import { useScreenAnimationContext } from "../animation";
-import {
-	buildResolvedStyleMap,
-	type StyleKeySet,
-} from "./helpers/build-resolved-style-map";
-import { resolveInterpolatedStyleOutput } from "./helpers/resolve-interpolated-style-output";
-import { splitNormalizedStyleMaps } from "./helpers/split-normalized-style-maps";
+import { MaybeFloatingContainer } from "./components/maybe-floating-container";
+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";
 
 type Props = {
 	children: ReactNode;
+	isFloatingOverlay?: boolean;
 };
 
 type ScreenStylesContextValue = {
-	layerStylesMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
-	elementStylesMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
+	stylesMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
 };
 
 export const {
@@ -31,132 +23,36 @@ export const {
 	useScreenStylesContext: useScreenStyles,
 } = createProvider("ScreenStyles", {
 	guarded: true,
-})<Props, ScreenStylesContextValue>(
-	({ children }): { value: ScreenStylesContextValue; children: ReactNode } => {
-		const parentContext = useContext(ScreenStylesContext);
-
-		const {
-			screenInterpolatorProps,
-			nextInterpolator,
-			currentInterpolator,
-			boundsAccessor,
-		} = useScreenAnimationContext();
-
-		const isGesturingDuringCloseAnimation = useSharedValue(false);
-		const hasWarnedLegacy = useSharedValue(false);
-		const previousElementStyleKeysBySlot = useSharedValue<
-			Record<string, StyleKeySet>
-		>({});
-
-		const rawStyleResolution = useDerivedValue<{
-			layerStylesMap: NormalizedTransitionInterpolatedStyle;
-			elementStylesMap: NormalizedTransitionInterpolatedStyle;
-		}>(() => {
-			"worklet";
-			const props = screenInterpolatorProps.value;
-			const { current, next, progress } = props;
-			const isDragging = current.gesture.dragging;
-			const isNextClosing = !!next?.closing;
-
-			if (isDragging && isNextClosing) {
-				isGesturingDuringCloseAnimation.value = true;
-			}
-
-			if (!isDragging && !isNextClosing) {
-				isGesturingDuringCloseAnimation.value = false;
-			}
-
-			const isInGestureMode =
-				isDragging || isGesturingDuringCloseAnimation.value;
-
-			const interpolator = isInGestureMode
-				? currentInterpolator
-				: (nextInterpolator ?? currentInterpolator);
-
-			if (!interpolator) {
-				return {
-					layerStylesMap: NO_STYLES,
-					elementStylesMap: NO_STYLES,
-				};
-			}
-
-			let effectiveProgress = progress;
-			let effectiveNext = next;
-
-			if (isInGestureMode) {
-				effectiveProgress = current.progress;
-				effectiveNext = undefined;
-			}
-
-			try {
-				const raw = interpolator({
-					...props,
-					progress: effectiveProgress,
-					next: effectiveNext,
-					bounds: boundsAccessor,
-				});
-
-				const { stylesMap, wasLegacy } = resolveInterpolatedStyleOutput(raw);
-
-				const { layerStylesMap, elementStylesMap } =
-					splitNormalizedStyleMaps(stylesMap);
-
-				if (__DEV__ && wasLegacy && !hasWarnedLegacy.value) {
-					hasWarnedLegacy.value = true;
-					logger.warn(
-						"Flat interpolator return shape (contentStyle/backdropStyle) is deprecated. " +
-							"Use the nested format instead: { content: { style }, backdrop: { style } }.",
-					);
-				}
-
-				return {
-					layerStylesMap,
-					elementStylesMap,
-				};
-			} catch (err) {
-				if (__DEV__) {
-					console.warn(
-						"[react-native-screen-transitions] screenStyleInterpolator must be a worklet",
-						err,
-					);
-				}
-
-				return {
-					layerStylesMap: NO_STYLES,
-					elementStylesMap: NO_STYLES,
-				};
-			}
-		});
-
-		const layerStylesMap =
-			useDerivedValue<NormalizedTransitionInterpolatedStyle>(() => {
-				"worklet";
-				return rawStyleResolution.value.layerStylesMap;
-			});
-
-		const elementStylesMap =
-			useDerivedValue<NormalizedTransitionInterpolatedStyle>(() => {
-				"worklet";
-				const { resolvedStylesMap, nextPreviousStyleKeysBySlot } =
-					buildResolvedStyleMap({
-						currentStylesMap: rawStyleResolution.value.elementStylesMap,
-						fallbackStylesMap:
-							parentContext?.elementStylesMap.value ?? NO_STYLES,
-						previousStyleKeysBySlot: previousElementStyleKeysBySlot.value,
-					});
-
-				previousElementStyleKeysBySlot.value = nextPreviousStyleKeysBySlot;
-
-				return resolvedStylesMap;
-			});
-
-		const value = useMemo<ScreenStylesContextValue>(() => {
-			return {
-				layerStylesMap,
-				elementStylesMap,
-			};
-		}, [elementStylesMap, layerStylesMap]);
-
-		return { value, children };
-	},
-);
+})<Props, ScreenStylesContextValue>(({ children, isFloatingOverlay }) => {
+	const parentContext = useContext(ScreenStylesContext);
+
+	const rawStylesMap = useInterpolatedStylesMap();
+
+	const stylesMap = useResolvedStylesMap({
+		currentStylesMap: rawStylesMap,
+		ancestorStylesMap: parentContext?.stylesMap,
+	});
+
+	const { animatedStyle, animatedProps } =
+		useMaybeBlockVisibility(isFloatingOverlay);
+
+	return {
+		value: {
+			stylesMap,
+		},
+		children: (
+			<MaybeFloatingContainer isFloatingOverlay={isFloatingOverlay}>
+				<Animated.View
+					style={[styles.container, animatedStyle]}
+					animatedProps={animatedProps}
+				>
+					{children}
+				</Animated.View>
+			</MaybeFloatingContainer>
+		),
+	};
+});
+
+const styles = StyleSheet.create({
+	container: { flex: 1 },
+});

package/src/shared/stores/bounds/helpers/apply-measured-bounds-writes.ts

@@ -9,7 +9,7 @@ type ApplyMeasuredBoundsWritesParams = {
 	ancestorKeys: string[];
 	navigatorKey?: string;
 	ancestorNavigatorKeys?: string[];
-	shouldRegisterSnapshot?: boolean;
+	shouldWriteEntry?: boolean;
 	shouldSetSource?: boolean;
 	shouldUpdateSource?: boolean;
 	shouldSetDestination?: boolean;
@@ -29,7 +29,7 @@ export const applyMeasuredBoundsWrites = (
 		ancestorKeys,
 		navigatorKey,
 		ancestorNavigatorKeys,
-		shouldRegisterSnapshot,
+		shouldWriteEntry,
 		shouldSetSource,
 		shouldUpdateSource,
 		shouldSetDestination,
@@ -37,20 +37,19 @@ export const applyMeasuredBoundsWrites = (
 		expectedSourceScreenKey,
 	} = params;
 
-	if (shouldRegisterSnapshot) {
-		BoundStore.registerSnapshot(
-			sharedBoundTag,
-			currentScreenKey,
-			measured,
-			preparedStyles,
+	if (shouldWriteEntry) {
+		BoundStore.entry.set(sharedBoundTag, currentScreenKey, {
+			bounds: measured,
+			styles: preparedStyles,
 			ancestorKeys,
 			navigatorKey,
 			ancestorNavigatorKeys,
-		);
+		});
 	}
 
 	if (shouldSetSource) {
-		BoundStore.setLinkSource(
+		BoundStore.link.setSource(
+			"capture",
 			sharedBoundTag,
 			currentScreenKey,
 			measured,
@@ -62,7 +61,8 @@ export const applyMeasuredBoundsWrites = (
 	}
 
 	if (shouldUpdateSource) {
-		BoundStore.updateLinkSource(
+		BoundStore.link.setSource(
+			"refresh",
 			sharedBoundTag,
 			currentScreenKey,
 			measured,
@@ -74,7 +74,8 @@ export const applyMeasuredBoundsWrites = (
 	}
 
 	if (shouldUpdateDestination) {
-		BoundStore.updateLinkDestination(
+		BoundStore.link.setDestination(
+			"refresh",
 			sharedBoundTag,
 			currentScreenKey,
 			measured,
@@ -87,7 +88,8 @@ export const applyMeasuredBoundsWrites = (
 	}
 
 	if (shouldSetDestination) {
-		BoundStore.setLinkDestination(
+		BoundStore.link.setDestination(
+			"attach",
 			sharedBoundTag,
 			currentScreenKey,
 			measured,

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

@@ -19,3 +19,11 @@ export function collectIdentifierKeys(
 
 	return allKeys;
 }
+
+export const hasAnyKeys = (record: Record<string, unknown>) => {
+	"worklet";
+	for (const _key in record) {
+		return true;
+	}
+	return false;
+};

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

@@ -1,60 +1,53 @@
 import { clear, clearByAncestor, clearByBranch } from "./internals/clear";
-import {
-	getBoundaryConfig,
-	getBoundaryPresence,
-	getGroupActiveId,
-	getGroups,
-	hasBoundaryPresence,
-	registerBoundaryPresence,
-	setGroupActiveId,
-	unregisterBoundaryPresence,
-} from "./internals/presence";
+import { getGroupActiveId, setGroupActiveId } from "./internals/groups";
 import {
 	getActiveLink,
-	getLatestPendingSourceScreenKey,
-	getSnapshot,
+	getEntry,
+	getEntryConfig,
+	getMeasuredEntry,
+	getPendingLink,
 	hasDestinationLink,
-	hasPendingLink,
-	hasPendingLinkFromSource,
 	hasSourceLink,
-	registerSnapshot,
-	setLinkDestination,
-	setLinkSource,
-	updateLinkDestination,
-	updateLinkSource,
+	removeEntry,
+	setDestination,
+	setEntry,
+	setSource,
 } from "./internals/registry";
 import { resolveTransitionPair } from "./internals/resolver";
 
 export type {
 	BoundaryConfig,
+	Entry,
+	EntryPatch,
+	MeasuredEntry,
 	ResolvedTransitionPair,
 	ResolveTransitionContext,
-	Snapshot,
 } from "./types";
 
 export const BoundStore = {
-	registerSnapshot,
-	setLinkSource,
-	setLinkDestination,
-	updateLinkSource,
-	updateLinkDestination,
-	getActiveLink,
-	registerBoundaryPresence,
-	unregisterBoundaryPresence,
-	hasBoundaryPresence,
-	getBoundaryPresence,
-	getBoundaryConfig,
-	hasPendingLink,
-	hasPendingLinkFromSource,
-	getLatestPendingSourceScreenKey,
-	hasSourceLink,
-	hasDestinationLink,
-	getSnapshot,
-	resolveTransitionPair,
-	setGroupActiveId,
-	getGroupActiveId,
-	clear,
-	clearByAncestor,
-	clearByBranch,
-	getGroups,
+	entry: {
+		set: setEntry,
+		get: getEntry,
+		getMeasured: getMeasuredEntry,
+		getConfig: getEntryConfig,
+		remove: removeEntry,
+	},
+	link: {
+		setSource,
+		setDestination,
+		getActive: getActiveLink,
+		getPair: resolveTransitionPair,
+		getPending: getPendingLink,
+		hasSource: hasSourceLink,
+		hasDestination: hasDestinationLink,
+	},
+	group: {
+		setActiveId: setGroupActiveId,
+		getActiveId: getGroupActiveId,
+	},
+	cleanup: {
+		byScreen: clear,
+		byAncestor: clearByAncestor,
+		byBranch: clearByBranch,
+	},
 };