react-native-screen-transitions 3.4.0 → 3.5.0

package/src/shared/providers/screen/styles/helpers/resolve-slot-styles.ts

@@ -0,0 +1,190 @@
+import type {
+	NormalizedTransitionInterpolatedStyle,
+	NormalizedTransitionSlotStyle,
+} from "../../../../types/animation.types";
+import {
+	ALWAYS_RESET_STYLE_VALUES,
+	IDENTITY_TRANSFORM,
+	shouldSlotInherit,
+} from "../constants";
+
+export type ResettableStyleState = {
+	hasTransform: boolean;
+	hasOpacity: boolean;
+	hasZIndex: boolean;
+	hasElevation: boolean;
+};
+
+export type ResettableStyleStatesBySlot = Record<string, ResettableStyleState>;
+
+const EMPTY_RESETTABLE_STYLE_STATE = Object.freeze({
+	hasTransform: false,
+	hasOpacity: false,
+	hasZIndex: false,
+	hasElevation: false,
+}) as ResettableStyleState;
+
+export const resolveSlotStyles = ({
+	currentStylesMap,
+	ancestorStylesMap,
+	previousStyleStatesBySlot,
+}: {
+	currentStylesMap: NormalizedTransitionInterpolatedStyle;
+	ancestorStylesMap: NormalizedTransitionInterpolatedStyle;
+	previousStyleStatesBySlot: ResettableStyleStatesBySlot;
+}) => {
+	"worklet";
+	const resolvedStylesMap: NormalizedTransitionInterpolatedStyle = {};
+	const nextPreviousStyleStatesBySlot: ResettableStyleStatesBySlot = {};
+
+	const appendResolvedSlot = (slotId: string) => {
+		"worklet";
+
+		const slot =
+			currentStylesMap[slotId] ??
+			(shouldSlotInherit(slotId) ? ancestorStylesMap[slotId] : undefined);
+
+		const baseStyle = slot?.style as Record<string, unknown> | undefined;
+
+		let hasAnyStyleKeys = false;
+		let hasTransform = false;
+		let hasOpacity = false;
+		let hasZIndex = false;
+		let hasElevation = false;
+
+		if (baseStyle) {
+			for (const key in baseStyle) {
+				hasAnyStyleKeys = true;
+
+				if (key === "transform") {
+					hasTransform = true;
+					continue;
+				}
+
+				if (key === "opacity") {
+					hasOpacity = true;
+					continue;
+				}
+
+				if (key === "zIndex") {
+					hasZIndex = true;
+					continue;
+				}
+
+				if (key === "elevation") {
+					hasElevation = true;
+				}
+			}
+		}
+
+		const previousState =
+			previousStyleStatesBySlot[slotId] ?? EMPTY_RESETTABLE_STYLE_STATE;
+		const shouldResetTransform = previousState.hasTransform && !hasTransform;
+		const shouldResetOpacity = previousState.hasOpacity && !hasOpacity;
+		const shouldResetZIndex = previousState.hasZIndex && !hasZIndex;
+		const shouldResetElevation = previousState.hasElevation && !hasElevation;
+		const hasResetPatch =
+			shouldResetTransform ||
+			shouldResetOpacity ||
+			shouldResetZIndex ||
+			shouldResetElevation;
+		const hasProps = slot?.props !== undefined;
+
+		if (hasTransform || hasOpacity || hasZIndex || hasElevation) {
+			nextPreviousStyleStatesBySlot[slotId] = {
+				hasTransform,
+				hasOpacity,
+				hasZIndex,
+				hasElevation,
+			};
+		}
+
+		if (!slot && !hasResetPatch) {
+			return;
+		}
+
+		if (!hasResetPatch && slot) {
+			if (hasAnyStyleKeys || hasProps) {
+				resolvedStylesMap[slotId] = slot;
+			}
+			return;
+		}
+
+		if (!hasAnyStyleKeys && !hasResetPatch && !hasProps) {
+			return;
+		}
+
+		const resolvedSlot = {} as NormalizedTransitionSlotStyle;
+
+		if (hasAnyStyleKeys || hasResetPatch) {
+			const resolvedStyle: Record<string, any> = {};
+
+			if (shouldResetTransform) {
+				resolvedStyle.transform = IDENTITY_TRANSFORM;
+			}
+
+			if (shouldResetOpacity) {
+				resolvedStyle.opacity = ALWAYS_RESET_STYLE_VALUES.opacity;
+			}
+
+			if (shouldResetZIndex) {
+				resolvedStyle.zIndex = ALWAYS_RESET_STYLE_VALUES.zIndex;
+			}
+
+			if (shouldResetElevation) {
+				resolvedStyle.elevation = ALWAYS_RESET_STYLE_VALUES.elevation;
+			}
+
+			if (baseStyle) {
+				for (const key in baseStyle) {
+					resolvedStyle[key] = baseStyle[key];
+				}
+			}
+
+			resolvedSlot.style = resolvedStyle;
+		}
+
+		if (hasProps) {
+			resolvedSlot.props = slot?.props;
+		}
+
+		if (!resolvedSlot.style && !resolvedSlot.props) {
+			return;
+		}
+
+		resolvedStylesMap[slotId] = resolvedSlot;
+	};
+
+	for (const slotId in currentStylesMap) {
+		appendResolvedSlot(slotId);
+	}
+
+	for (const slotId in ancestorStylesMap) {
+		if (!shouldSlotInherit(slotId)) {
+			continue;
+		}
+
+		if (currentStylesMap[slotId] !== undefined) {
+			continue;
+		}
+
+		appendResolvedSlot(slotId);
+	}
+
+	for (const slotId in previousStyleStatesBySlot) {
+		if (currentStylesMap[slotId] !== undefined) {
+			continue;
+		}
+
+		if (shouldSlotInherit(slotId) && ancestorStylesMap[slotId] !== undefined) {
+			continue;
+		}
+
+		appendResolvedSlot(slotId);
+	}
+
+	return {
+		resolvedStylesMap,
+		nextPreviousStyleStatesBySlot,
+	};
+};

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