react-native-screen-transitions 3.4.0-alpha.6 → 3.4.0-alpha.7

package/src/shared/providers/screen/styles/helpers/build-resolved-style-map.ts

@@ -0,0 +1,185 @@
+import { NO_STYLES } from "../../../../constants";
+import type {
+	NormalizedTransitionInterpolatedStyle,
+	NormalizedTransitionSlotStyle,
+} from "../../../../types/animation.types";
+
+export type StyleKeySet = Record<string, true>;
+
+type StyleKeyMeta = {
+	keys: StyleKeySet;
+	hasAny: boolean;
+};
+
+const IDENTITY_TRANSFORM = [
+	{ translateX: 0 },
+	{ translateY: 0 },
+	{ scaleX: 1 },
+	{ scaleY: 1 },
+] as const;
+
+const ALWAYS_RESET_STYLE_VALUES = {
+	zIndex: 0,
+	elevation: 0,
+} as const;
+
+const hasAnyKeys = (record: Record<string, unknown>) => {
+	"worklet";
+	for (const _key in record) {
+		return true;
+	}
+	return false;
+};
+
+const collectStyleKeyMeta = (
+	record?: Record<string, unknown>,
+): StyleKeyMeta => {
+	"worklet";
+	const keys: StyleKeySet = {};
+	let hasAny = false;
+
+	if (!record) {
+		return { keys, hasAny };
+	}
+
+	for (const key in record) {
+		keys[key] = true;
+		hasAny = true;
+	}
+
+	return { keys, hasAny };
+};
+
+const collectRelevantSlotIds = ({
+	currentStylesMap,
+	fallbackStylesMap,
+	previousStyleKeysBySlot,
+}: {
+	currentStylesMap: NormalizedTransitionInterpolatedStyle;
+	fallbackStylesMap: NormalizedTransitionInterpolatedStyle;
+	previousStyleKeysBySlot: Record<string, StyleKeySet>;
+}) => {
+	"worklet";
+	const slotIds: Record<string, true> = {};
+
+	for (const slotId in currentStylesMap) {
+		slotIds[slotId] = true;
+	}
+
+	for (const slotId in fallbackStylesMap) {
+		slotIds[slotId] = true;
+	}
+
+	for (const slotId in previousStyleKeysBySlot) {
+		slotIds[slotId] = true;
+	}
+
+	return slotIds;
+};
+
+const buildUnsetPatch = ({
+	previousKeys,
+	currentKeys,
+}: {
+	previousKeys: StyleKeySet;
+	currentKeys: StyleKeySet;
+}) => {
+	"worklet";
+	const unsetPatch: Record<string, any> = {};
+
+	for (const key in previousKeys) {
+		if (currentKeys[key]) continue;
+
+		if (key === "transform") {
+			unsetPatch.transform = IDENTITY_TRANSFORM;
+			continue;
+		}
+
+		if (key in ALWAYS_RESET_STYLE_VALUES) {
+			unsetPatch[key] =
+				ALWAYS_RESET_STYLE_VALUES[
+					key as keyof typeof ALWAYS_RESET_STYLE_VALUES
+				];
+			continue;
+		}
+
+		unsetPatch[key] = undefined;
+	}
+
+	return unsetPatch;
+};
+
+export const buildResolvedStyleMap = ({
+	currentStylesMap,
+	fallbackStylesMap,
+	previousStyleKeysBySlot,
+}: {
+	currentStylesMap: NormalizedTransitionInterpolatedStyle;
+	fallbackStylesMap: NormalizedTransitionInterpolatedStyle;
+	previousStyleKeysBySlot: Record<string, StyleKeySet>;
+}): {
+	resolvedStylesMap: NormalizedTransitionInterpolatedStyle;
+	nextPreviousStyleKeysBySlot: Record<string, StyleKeySet>;
+} => {
+	"worklet";
+	const resolvedStylesMap: NormalizedTransitionInterpolatedStyle = {};
+	const nextPreviousStyleKeysBySlot: Record<string, StyleKeySet> = {};
+
+	const slotIds = collectRelevantSlotIds({
+		currentStylesMap,
+		fallbackStylesMap,
+		previousStyleKeysBySlot,
+	});
+
+	for (const slotId in slotIds) {
+		const slot = currentStylesMap[slotId] ?? fallbackStylesMap[slotId];
+		const baseStyle = slot?.style as Record<string, unknown> | undefined;
+		const { keys: currentKeys, hasAny: hasCurrentStyleKeys } =
+			collectStyleKeyMeta(baseStyle);
+
+		const unsetPatch = buildUnsetPatch({
+			previousKeys: previousStyleKeysBySlot[slotId] ?? {},
+			currentKeys,
+		});
+
+		const hasUnsetPatch = hasAnyKeys(unsetPatch);
+		const hasProps = slot?.props !== undefined;
+
+		if (!slot && !hasUnsetPatch) {
+			continue;
+		}
+
+		const resolvedStyle =
+			hasCurrentStyleKeys || hasUnsetPatch
+				? {
+						...unsetPatch,
+						...(slot?.style ?? NO_STYLES),
+					}
+				: undefined;
+
+		if (resolvedStyle === undefined && !hasProps) {
+			continue;
+		}
+
+		const resolvedSlot = {} as NormalizedTransitionSlotStyle;
+
+		if (resolvedStyle !== undefined) {
+			resolvedSlot.style = resolvedStyle;
+		}
+
+		if (hasProps) {
+			resolvedSlot.props = slot?.props;
+		}
+
+		resolvedStylesMap[slotId] = resolvedSlot;
+
+		if (hasCurrentStyleKeys) {
+			nextPreviousStyleKeysBySlot[slotId] = currentKeys;
+		}
+	}
+
+	return {
+		resolvedStylesMap,
+		nextPreviousStyleKeysBySlot,
+	};
+};

package/src/shared/providers/screen/styles/helpers/resolve-interpolated-style-output.ts

@@ -0,0 +1,31 @@
+import { NO_STYLES } from "../../../../constants";
+import type {
+	NormalizedTransitionInterpolatedStyle,
+	TransitionInterpolatedStyle,
+} from "../../../../types/animation.types";
+import { normalizeInterpolatedStyle } from "../../../../utils/normalize-interpolated-style";
+
+export type ResolvedInterpolatedStyleOutput = {
+	stylesMap: NormalizedTransitionInterpolatedStyle;
+	wasLegacy: boolean;
+};
+
+export const resolveInterpolatedStyleOutput = (
+	raw: TransitionInterpolatedStyle | null | undefined,
+): ResolvedInterpolatedStyleOutput => {
+	"worklet";
+
+	if (raw == null || typeof raw !== "object") {
+		return {
+			stylesMap: NO_STYLES,
+			wasLegacy: false,
+		};
+	}
+
+	const { result, wasLegacy } = normalizeInterpolatedStyle(raw);
+
+	return {
+		stylesMap: result,
+		wasLegacy,
+	};
+};

package/src/shared/providers/screen/styles/helpers/split-normalized-style-maps.ts

@@ -0,0 +1,44 @@
+import {
+	NAVIGATION_MASK_CONTAINER_STYLE_ID,
+	NAVIGATION_MASK_ELEMENT_STYLE_ID,
+} from "../../../../constants";
+import type { NormalizedTransitionInterpolatedStyle } from "../../../../types/animation.types";
+
+const LAYER_STYLE_SLOT_IDS = {
+	content: true,
+	backdrop: true,
+	surface: true,
+	[NAVIGATION_MASK_ELEMENT_STYLE_ID]: true,
+	[NAVIGATION_MASK_CONTAINER_STYLE_ID]: true,
+} as const;
+
+const isLayerStyleSlotId = (slotId: string) => {
+	"worklet";
+	// biome-ignore lint/suspicious/noPrototypeBuiltins: <Typescript lib target is ES2020>
+	return Object.prototype.hasOwnProperty.call(LAYER_STYLE_SLOT_IDS, slotId);
+};
+
+export const splitNormalizedStyleMaps = (
+	stylesMap: NormalizedTransitionInterpolatedStyle,
+): {
+	layerStylesMap: NormalizedTransitionInterpolatedStyle;
+	elementStylesMap: NormalizedTransitionInterpolatedStyle;
+} => {
+	"worklet";
+	const layerStylesMap: NormalizedTransitionInterpolatedStyle = {};
+	const elementStylesMap: NormalizedTransitionInterpolatedStyle = {};
+
+	for (const slotId in stylesMap) {
+		if (isLayerStyleSlotId(slotId)) {
+			layerStylesMap[slotId] = stylesMap[slotId];
+			continue;
+		}
+
+		elementStylesMap[slotId] = stylesMap[slotId];
+	}
+
+	return {
+		layerStylesMap,
+		elementStylesMap,
+	};
+};

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

@@ -0,0 +1,5 @@
+export {
+	ScreenStylesContext,
+	ScreenStylesProvider,
+	useScreenStyles,
+} from "./styles.provider";

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

@@ -0,0 +1,173 @@
+import { type ReactNode, useContext, useMemo } from "react";
+import {
+	type SharedValue,
+	useDerivedValue,
+	useSharedValue,
+} from "react-native-reanimated";
+import { NO_STYLES } from "../../../constants";
+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";
+
+type Props = {
+	children: ReactNode;
+};
+
+type ScreenStylesContextValue = {
+	layerStylesMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
+	elementStylesMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
+};
+
+export const {
+	ScreenStylesProvider,
+	ScreenStylesContext,
+	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 previousLayerStyleKeysBySlot = useSharedValue<
+			Record<string, StyleKeySet>
+		>({});
+		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";
+				const { resolvedStylesMap, nextPreviousStyleKeysBySlot } =
+					buildResolvedStyleMap({
+						currentStylesMap: rawStyleResolution.value.layerStylesMap,
+						fallbackStylesMap: NO_STYLES,
+						previousStyleKeysBySlot: previousLayerStyleKeysBySlot.value,
+					});
+
+				previousLayerStyleKeysBySlot.value = nextPreviousStyleKeysBySlot;
+				return resolvedStylesMap;
+			});
+
+		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 };
+	},
+);

package/src/shared/types/animation.types.ts

@@ -209,19 +209,12 @@ export interface ScreenInterpolationProps {
 }
 
 /**
- * Explicit signal for hiding a screen's visual subtree until the interpolator
- * becomes ready for the current transition frame.
- */
-export type DeferredScreenStyleSignal = "defer";
-
-/**
- * Returning `'defer'` explicitly hides the screen's visual subtree until the
- * transition is ready. Returning `null`, `undefined`, or `{}` applies no
- * transition styles for the current frame.
+ * Returning `null`, `undefined`, or `{}` applies no transition styles for the
+ * current frame.
  */
 export type ScreenStyleInterpolator = (
 	props: ScreenInterpolationProps,
-) => TransitionInterpolatedStyle | DeferredScreenStyleSignal | null | undefined;
+) => TransitionInterpolatedStyle | null | undefined;
 
 /**
  * Animated style properties with full autocomplete.

package/src/shared/types/index.ts

@@ -2,7 +2,6 @@ export { FALSE, TRUE } from "../constants";
 export type {
 	AnimatedViewStyle,
 	AnimationConfig,
-	DeferredScreenStyleSignal,
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,
 	ScreenTransitionState,

package/src/shared/types/screen.types.ts

@@ -83,10 +83,8 @@ export type ScreenTransitionConfig = {
 	/**
 	 * The user-provided function to calculate styles based on animation progress.
 	 *
-	 * Return `null` to explicitly defer rendering of the screen's visual subtree
-	 * until a later frame. This is useful for transitions such as
-	 * `bounds().navigation.zoom()` where the screen should stay hidden until the
-	 * interpolator has enough state to produce a safe first frame.
+	 * Return `null`, `undefined`, or `{}` to apply no transition styles for the
+	 * current frame.
 	 */
 	screenStyleInterpolator?: ScreenStyleInterpolator;
 

package/src/shared/utils/bounds/helpers/compute-bounds-styles.ts

@@ -5,6 +5,7 @@ import {
 	EXIT_RANGE,
 	FULLSCREEN_DIMENSIONS,
 	HIDDEN_STYLE,
+	NO_STYLES,
 } from "../../../constants";
 import {
 	BoundStore,
@@ -127,7 +128,7 @@ export const computeBoundStyles = (
 		if (computeOptions.raw) {
 			return EMPTY_BOUND_HELPER_RESULT_RAW;
 		}
-		return HIDDEN_STYLE;
+		return NO_STYLES;
 	}
 
 	const {

package/src/shared/utils/bounds/helpers/style-composers.ts

@@ -1,4 +1,5 @@
 import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
+import { VISIBLE_STYLE } from "../../../constants";
 import type {
 	ContentTransformGeometry,
 	RelativeGeometry,
@@ -132,6 +133,7 @@ export function composeSizeAbsolute(params: ElementComposeParams): StyleProps {
 			height,
 			translateX,
 			translateY,
+			...VISIBLE_STYLE,
 		};
 	}
 
@@ -139,6 +141,7 @@ export function composeSizeAbsolute(params: ElementComposeParams): StyleProps {
 		width,
 		height,
 		transform: [{ translateX }, { translateY }],
+		...VISIBLE_STYLE,
 	};
 }
 
@@ -175,6 +178,7 @@ export function composeSizeRelative(params: ElementComposeParams): StyleProps {
 			translateY,
 			width,
 			height,
+			...VISIBLE_STYLE,
 		};
 	}
 
@@ -182,6 +186,7 @@ export function composeSizeRelative(params: ElementComposeParams): StyleProps {
 		transform: [{ translateX }, { translateY }],
 		width,
 		height,
+		...VISIBLE_STYLE,
 	};
 }
 
@@ -210,11 +215,13 @@ export function composeTransformAbsolute(
 			translateY,
 			scaleX,
 			scaleY,
+			...VISIBLE_STYLE,
 		};
 	}
 
 	return {
 		transform: [{ translateX }, { translateY }, { scaleX }, { scaleY }],
+		...VISIBLE_STYLE,
 	};
 }
 
@@ -243,6 +250,7 @@ export function composeTransformRelative(
 			translateY,
 			scaleX,
 			scaleY,
+			...VISIBLE_STYLE,
 		};
 	}
 
@@ -255,6 +263,7 @@ export function composeTransformRelative(
 			{ scaleX },
 			{ scaleY },
 		],
+		...VISIBLE_STYLE,
 	};
 }
 
@@ -283,10 +292,12 @@ export function composeContentStyle(params: ContentComposeParams): StyleProps {
 			translateX,
 			translateY,
 			scale,
+			...VISIBLE_STYLE,
 		};
 	}
 
 	return {
 		transform: [{ translateX }, { translateY }, { scale }],
+		...VISIBLE_STYLE,
 	};
 }