react-native-screen-transitions 4.1.0-alpha.0 → 4.1.0-beta.0

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

@@ -0,0 +1,122 @@
+import type { NormalizedTransitionSlotStyle } from "../../../../../../types/animation.types";
+import { getPropResetValue, getStyleResetValue } from "./reset-values";
+import type { ResettableStyleState } from "./types";
+
+const isDefinedStyleValue = (value: unknown) => {
+	"worklet";
+	return value !== undefined && value !== null;
+};
+
+// fallow-ignore-next-line complexity
+const collectDefinedKeys = ({
+	source,
+	getResetValue,
+}: {
+	source: Record<string, unknown> | undefined;
+	getResetValue: (key: string, value: unknown) => unknown;
+}) => {
+	"worklet";
+	const sourceValues = source ?? {};
+	const keys: Record<string, true> = {};
+	const resetValues: Record<string, unknown> = {};
+	let hasKeys = false;
+	let hasResetValues = false;
+
+	for (const key in sourceValues) {
+		const value = sourceValues[key];
+
+		if (!isDefinedStyleValue(value)) {
+			continue;
+		}
+
+		keys[key] = true;
+		hasKeys = true;
+
+		const resetValue = getResetValue(key, value);
+
+		if (resetValue !== undefined) {
+			resetValues[key] = resetValue;
+			hasResetValues = true;
+		}
+	}
+
+	return {
+		keys: hasKeys ? keys : undefined,
+		resetValues: hasResetValues ? resetValues : undefined,
+		hasKeys,
+	};
+};
+
+const hasEitherKeySet = (
+	styleKeys: Record<string, true> | undefined,
+	propKeys: Record<string, true> | undefined,
+) => {
+	"worklet";
+	return styleKeys !== undefined || propKeys !== undefined;
+};
+
+const getNextStyleState = ({
+	styleKeys,
+	styleResetValues,
+	propKeys,
+	propResetValues,
+}: {
+	styleKeys: Record<string, true> | undefined;
+	styleResetValues: Record<string, unknown> | undefined;
+	propKeys: Record<string, true> | undefined;
+	propResetValues: Record<string, unknown> | undefined;
+}): ResettableStyleState | undefined => {
+	"worklet";
+
+	if (!hasEitherKeySet(styleKeys, propKeys)) {
+		return undefined;
+	}
+
+	return {
+		styleKeys,
+		styleResetValues,
+		propKeys,
+		propResetValues,
+	};
+};
+
+export const getResolvedSlotState = (
+	slot: NormalizedTransitionSlotStyle | undefined,
+) => {
+	"worklet";
+	const baseStyle = slot?.style as Record<string, unknown> | undefined;
+	const baseProps = slot?.props as Record<string, unknown> | undefined;
+
+	const {
+		keys: styleKeys,
+		resetValues: styleResetValues,
+		hasKeys: hasAnyStyleKeys,
+	} = collectDefinedKeys({
+		source: baseStyle,
+		getResetValue: getStyleResetValue,
+	});
+	const {
+		keys: propKeys,
+		resetValues: propResetValues,
+		hasKeys: hasAnyPropKeys,
+	} = collectDefinedKeys({
+		source: baseProps,
+		getResetValue: getPropResetValue,
+	});
+
+	return {
+		baseStyle,
+		baseProps,
+		styleKeys,
+		propKeys,
+		hasAnyStyleKeys,
+		hasAnyPropKeys,
+		hasAnyKeys: hasAnyStyleKeys || hasAnyPropKeys,
+		nextState: getNextStyleState({
+			styleKeys,
+			styleResetValues,
+			propKeys,
+			propResetValues,
+		}),
+	};
+};

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

@@ -0,0 +1,12 @@
+import type { NormalizedTransitionInterpolatedStyle } from "../../../../../../types/animation.types";
+
+export type LocalStyleLayers = NormalizedTransitionInterpolatedStyle[];
+
+export type ResettableStyleState = {
+	styleKeys?: Record<string, true>;
+	styleResetValues?: Record<string, unknown>;
+	propKeys?: Record<string, true>;
+	propResetValues?: Record<string, unknown>;
+};
+
+export type ResettableStyleStatesBySlot = Record<string, ResettableStyleState>;

package/src/providers/screen/orchestrator/styles/helpers/select-interpolator-frame.ts

@@ -0,0 +1,33 @@
+import type { ScreenInterpolatorFrame } from "../../helpers/pipeline";
+
+export type SelectedInterpolatorFrame = Pick<
+	ScreenInterpolatorFrame,
+	"progress" | "transitionProgress" | "next" | "focused" | "active" | "inactive"
+>;
+
+export const selectInterpolatorFrame = (
+	frame: ScreenInterpolatorFrame,
+	useCurrentOnly: boolean,
+): SelectedInterpolatorFrame => {
+	"worklet";
+
+	if (!useCurrentOnly) {
+		return {
+			progress: frame.progress,
+			transitionProgress: frame.transitionProgress,
+			next: frame.next,
+			focused: frame.focused,
+			active: frame.active,
+			inactive: frame.inactive,
+		};
+	}
+
+	return {
+		progress: frame.current.progress,
+		transitionProgress: frame.current.transitionProgress,
+		next: undefined,
+		focused: true,
+		active: frame.current,
+		inactive: frame.previous,
+	};
+};

package/src/providers/screen/orchestrator/styles/hooks/slot-resolvers.tsx

@@ -0,0 +1,115 @@
+import { useMemo } from "react";
+import { useAnimatedProps, useAnimatedStyle } from "react-native-reanimated";
+import { NO_PROPS, NO_STYLES } from "../../../../../constants";
+import { useOrchestratorStore } from "../../orchestrator.provider";
+import {
+	composeSlotStyleWithLocalTransform,
+	getLocalTransformForSlotComposition,
+} from "../helpers/compose-slot-style";
+
+const useCurrentScreenSlotsMap = () => {
+	return useOrchestratorStore((store) => store.slotsMap);
+};
+
+export const useSlotStyles = (slotId: string | undefined) => {
+	const slotsMap = useCurrentScreenSlotsMap();
+
+	return useAnimatedStyle(() => {
+		const slot = slotId ? slotsMap.get()[slotId] : undefined;
+		const slotStyle = slot?.style ?? NO_STYLES;
+
+		return composeSlotStyleWithLocalTransform(
+			slotStyle,
+			undefined,
+			slot?.boundsLocalTransform,
+		);
+	});
+};
+
+export const useComposedSlotStyles = (
+	slotId: string | undefined,
+	style: unknown,
+) => {
+	const slotsMap = useCurrentScreenSlotsMap();
+	const localTransform = useMemo(
+		() => getLocalTransformForSlotComposition(style),
+		[style],
+	);
+
+	return useAnimatedStyle(() => {
+		const slot = slotId ? slotsMap.get()[slotId] : undefined;
+		const slotStyle = slot?.style ?? NO_STYLES;
+
+		return composeSlotStyleWithLocalTransform(
+			slotStyle,
+			localTransform,
+			slot?.boundsLocalTransform,
+		);
+	});
+};
+
+/**
+ * Stacking-only slice (`zIndex`/`elevation`) of a slot's style. Returned
+ * separately so an owner can keep just its stacking context while a nested
+ * target takes the full associated style. Yields `NO_STYLES` when neither is set.
+ */
+export const useSlotStackingStyles = (slotId: string | undefined) => {
+	const slotsMap = useCurrentScreenSlotsMap();
+
+	return useAnimatedStyle(() => {
+		const baseStyle = slotId ? slotsMap.get()[slotId]?.style : undefined;
+		const zIndex = baseStyle?.zIndex ?? 0;
+		const elevation = baseStyle?.elevation ?? 0;
+
+		if (zIndex === 0 && elevation === 0) {
+			return NO_STYLES;
+		}
+
+		return { zIndex, elevation };
+	});
+};
+
+export const useSlotLayoutStyles = (slotId: string | undefined) => {
+	const slotsMap = useCurrentScreenSlotsMap();
+
+	return useAnimatedStyle(() => {
+		const baseStyle = slotId ? slotsMap.get()[slotId]?.style : undefined;
+		const width = baseStyle?.width;
+		const height = baseStyle?.height;
+		const minWidth = baseStyle?.minWidth;
+		const minHeight = baseStyle?.minHeight;
+		const maxWidth = baseStyle?.maxWidth;
+		const maxHeight = baseStyle?.maxHeight;
+		const aspectRatio = baseStyle?.aspectRatio;
+
+		if (
+			width === undefined &&
+			height === undefined &&
+			minWidth === undefined &&
+			minHeight === undefined &&
+			maxWidth === undefined &&
+			maxHeight === undefined &&
+			aspectRatio === undefined
+		) {
+			return NO_STYLES;
+		}
+
+		return {
+			width,
+			height,
+			minWidth,
+			minHeight,
+			maxWidth,
+			maxHeight,
+			aspectRatio,
+		};
+	});
+};
+
+export const useSlotProps = (slotId: string | undefined) => {
+	const slotsMap = useCurrentScreenSlotsMap();
+
+	return useAnimatedProps(() => {
+		return (slotId ? slotsMap.get()[slotId]?.props : undefined) ?? NO_PROPS;
+	});
+};

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

@@ -0,0 +1,295 @@
+import {
+	useAnimatedReaction,
+	useDerivedValue,
+	useSharedValue,
+} from "react-native-reanimated";
+import { NO_STYLES } from "../../../../../constants";
+import type {
+	NormalizedTransitionInterpolatedStyle,
+	ScreenStyleInterpolator,
+	TransitionInterpolatedStyle,
+} from "../../../../../types/animation.types";
+import { logger } from "../../../../../utils/logger";
+import { useBuilderStore } from "../../../builder";
+import { useMotionStore, useOptionalMotionStore } from "../../../motion";
+import {
+	hasCloseTransitionFinished,
+	isOpenTransitionBlocked,
+} from "../../../motion/helpers/transition-visual-state";
+import { resolveInitialDestinationStyleGate } from "../../../motion/helpers/visibility-gate";
+import { LifecycleTransitionRequestKind } from "../../../motion/hooks/use-transition-values";
+import { syncScreenOptionsOverrides } from "../../../motion/options";
+import type {
+	ScreenAnimationPipeline,
+	ScreenInterpolatorFrame,
+} from "../../helpers/pipeline";
+import { syncSelectedInterpolatorOptions } from "../../helpers/selected-interpolator-options";
+import { createInterpolatorScope } from "../helpers/create-interpolator-scope";
+import { normalizeSlots } from "../helpers/normalize-slots";
+import { resolveInterpolatorStyleHandoff } from "../helpers/resolve-interpolator-style-handoff";
+import type { LocalStyleLayers } from "../helpers/resolve-slot-styles";
+import {
+	type SelectedInterpolatorFrame,
+	selectInterpolatorFrame,
+} from "../helpers/select-interpolator-frame";
+import { stripInterpolatorOptions } from "../helpers/strip-interpolator-options";
+
+const NO_STYLE_LAYERS: LocalStyleLayers = [];
+
+type InterpolatorResult = {
+	stylesMap: NormalizedTransitionInterpolatedStyle;
+	rawStyleMap: TransitionInterpolatedStyle | undefined;
+};
+
+type RunInterpolatorParams = {
+	interpolator: ScreenStyleInterpolator | undefined;
+	props: ScreenInterpolatorFrame;
+	selectedFrame: SelectedInterpolatorFrame;
+};
+
+const normalizeRawStyleMap = (
+	rawStyleMap: TransitionInterpolatedStyle | undefined,
+) => {
+	"worklet";
+
+	if (!rawStyleMap) {
+		return NO_STYLES;
+	}
+
+	const stylesMap = normalizeSlots(stripInterpolatorOptions(rawStyleMap));
+
+	return stylesMap;
+};
+
+const runInterpolator = ({
+	interpolator,
+	props,
+	selectedFrame,
+}: RunInterpolatorParams): InterpolatorResult | undefined => {
+	"worklet";
+
+	if (!interpolator) {
+		return undefined;
+	}
+
+	try {
+		const raw = interpolator(
+			createInterpolatorScope({
+				frame: props,
+				selectedFrame,
+			}),
+		);
+
+		const rawStyleMap: TransitionInterpolatedStyle | undefined =
+			typeof raw === "object" && raw != null ? raw : undefined;
+
+		return {
+			rawStyleMap,
+			stylesMap: normalizeRawStyleMap(rawStyleMap),
+		};
+	} catch (_) {
+		if (__DEV__) {
+			logger.warn("screenStyleInterpolator must be a worklet");
+		}
+
+		return undefined;
+	}
+};
+
+/**
+ * Builds the raw interpolated style layers for the current screen pass.
+ *
+ * This hook exists to stabilize style ownership during rapid navigation,
+ * especially when an interactive close gesture overlaps with a new navigation
+ * event. In flows like `A -> B`, begin closing `B`, then quickly open `C`,
+ * the active route state can change before the gesture-driven close has
+ * visually finished.
+ *
+ * If we immediately switch to the next interpolator in that window, styles can
+ * be computed against the wrong route pair and leave layer or element slots
+ * stranded in an intermediate state. We therefore latch onto the current
+ * gesture interpolator for the lifetime of that close interaction, then resume
+ * normal interpolator selection once the gesture-driven close is no longer in
+ * play.
+ *
+ * At an ownership handoff, the current interpolator remains live but is
+ * evaluated without the next-screen relationship. The next owner replaces
+ * matching scalar keys and composes its live transforms after the current
+ * screen's self-owned transforms.
+ */
+export const useInterpolatedStylesMap = ({
+	pipeline,
+}: {
+	pipeline: ScreenAnimationPipeline;
+}) => {
+	const isScreenReady = useMotionStore((store) => store.isScreenReady);
+	const nextScreenKey = useBuilderStore((s) => s.derivations.nextScreenKey);
+	const destinationPairKey = useBuilderStore(
+		(s) => s.derivations.destinationPairKey,
+	);
+	const screenOptions = useMotionStore((store) => store.options);
+	const {
+		screenInterpolatorProps,
+		selectedInterpolatorOptions,
+		nextInterpolator,
+		currentInterpolator,
+	} = pipeline;
+
+	const currentSystem = useMotionStore((store) => store.state);
+	const nextSystem = useOptionalMotionStore(
+		nextScreenKey ?? null,
+		(store) => store.state,
+	);
+	const { closing: activeClosing, entering: activeEntering } =
+		nextSystem ?? currentSystem;
+
+	const {
+		animationProgress: activeAnimationProgress,
+		pendingLifecycleRequestKind: activePendingLifecycleRequestKind,
+		pendingLifecycleStartBlockCount: activePendingLifecycleStartBlockCount,
+	} = nextSystem ?? currentSystem;
+
+	const isGesturingDuringCloseAnimation = useSharedValue(false);
+	const initialDestinationStylesReady = useSharedValue(0);
+	const shouldPrepareInitialDestinationStyles =
+		!!destinationPairKey && !nextScreenKey && !!currentInterpolator;
+
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			return isScreenReady.get();
+		},
+		(isScreenReady) => {
+			"worklet";
+			const styleGate = resolveInitialDestinationStyleGate({
+				shouldPrepareStyles: shouldPrepareInitialDestinationStyles,
+				isScreenReady,
+				stylesReady: !!initialDestinationStylesReady.get(),
+			});
+
+			if (styleGate.shouldMarkStylesReady) {
+				initialDestinationStylesReady.set(1);
+			}
+		},
+	);
+
+	const localStylesMaps = useDerivedValue<LocalStyleLayers>(() => {
+		const props = screenInterpolatorProps.get();
+
+		const { current, next } = props;
+		const isDragging = current.gesture.dragging;
+		const isNextClosing = !!next?.closing;
+
+		// Keep using the gesture-driven interpolator until the closing gesture has
+		// fully released. This avoids switching style ownership mid-flight when a
+		// new navigation event lands before the close interaction visually settles.
+		if (isDragging && isNextClosing) {
+			isGesturingDuringCloseAnimation.set(true);
+		}
+
+		if (!isDragging && !isNextClosing) {
+			isGesturingDuringCloseAnimation.set(false);
+		}
+
+		const isInGestureMode =
+			!!isDragging || isGesturingDuringCloseAnimation.get();
+
+		// Interpolator ownership changes only at visual boundaries on the UI thread:
+		// the next screen attaches after its blockers clear and progress starts, then
+		// detaches once its closing progress has committed at zero. The downstream
+		// resolver sees the owner disappear in this same graph and resets its styles
+		// without waiting for React to remove the screen.
+		const isPendingOpen =
+			activePendingLifecycleRequestKind.get() ===
+			LifecycleTransitionRequestKind.Open;
+		const activeOpening = isPendingOpen || !!activeEntering.get();
+		const isOpeningBlocked = isOpenTransitionBlocked({
+			opening: activeOpening,
+			pendingLifecycleStartBlockCount:
+				activePendingLifecycleStartBlockCount.get(),
+			animationProgress: activeAnimationProgress.get(),
+		});
+		const hasCloseFinished = hasCloseTransitionFinished({
+			closing: activeClosing.get(),
+			animationProgress: activeAnimationProgress.get(),
+		});
+		const currentOwnsInterpolator =
+			isInGestureMode ||
+			!nextInterpolator ||
+			!nextSystem ||
+			isOpeningBlocked ||
+			hasCloseFinished;
+		const interpolatorOptionsOwner = currentOwnsInterpolator
+			? "current"
+			: "next";
+
+		// Once the next interpolator owns the relationship, the current
+		// interpolator remains responsible only for its own live presentation.
+		// This preserves snap-point transforms without letting current-screen
+		// unfocus rules compete with the next screen's outgoing transition.
+		const currentSelectedFrame = selectInterpolatorFrame(
+			props,
+			isInGestureMode || !!nextInterpolator,
+		);
+		const currentResult = runInterpolator({
+			interpolator: currentInterpolator,
+			props,
+			selectedFrame: currentSelectedFrame,
+		});
+
+		const initialDestinationStyleGate = resolveInitialDestinationStyleGate({
+			shouldPrepareStyles: shouldPrepareInitialDestinationStyles,
+			isScreenReady: isScreenReady.get(),
+			stylesReady: !!initialDestinationStylesReady.get(),
+		});
+
+		if (initialDestinationStyleGate.shouldWithholdStyles) {
+			return NO_STYLE_LAYERS;
+		}
+
+		if (interpolatorOptionsOwner === "current") {
+			syncSelectedInterpolatorOptions(
+				selectedInterpolatorOptions,
+				"current",
+				currentResult?.rawStyleMap?.options,
+			);
+			syncScreenOptionsOverrides(currentResult?.rawStyleMap, screenOptions);
+
+			const handoff = resolveInterpolatorStyleHandoff({
+				currentOwnsInterpolator: true,
+				currentStylesMap: currentResult?.stylesMap,
+				nextStylesMap: undefined,
+			});
+
+			return handoff.localStylesMaps.length
+				? handoff.localStylesMaps
+				: NO_STYLE_LAYERS;
+		}
+
+		const nextSelectedFrame = selectInterpolatorFrame(props, false);
+		const nextResult = runInterpolator({
+			interpolator: nextInterpolator,
+			props,
+			selectedFrame: nextSelectedFrame,
+		});
+
+		syncSelectedInterpolatorOptions(
+			selectedInterpolatorOptions,
+			"next",
+			nextResult?.rawStyleMap?.options,
+		);
+		syncScreenOptionsOverrides(undefined, screenOptions);
+
+		const handoff = resolveInterpolatorStyleHandoff({
+			currentOwnsInterpolator: false,
+			currentStylesMap: currentResult?.stylesMap,
+			nextStylesMap: nextResult?.stylesMap,
+		});
+
+		return handoff.localStylesMaps.length
+			? handoff.localStylesMaps
+			: NO_STYLE_LAYERS;
+	});
+
+	return localStylesMaps;
+};

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

@@ -0,0 +1,65 @@
+import {
+	type SharedValue,
+	useDerivedValue,
+	useSharedValue,
+} from "react-native-reanimated";
+import { NO_PROPS, NO_STYLES } from "../../../../../constants";
+import type { NormalizedTransitionInterpolatedStyle } from "../../../../../types/animation.types";
+import { useScreenRelationships } from "../../../builder/topology";
+import { useOptionalOrchestratorStore } from "../../orchestrator.provider";
+import {
+	areResettableStatesBySlotEqual,
+	type LocalStyleLayers,
+	type ResettableStyleStatesBySlot,
+	resolveSlotStyles,
+	reuseEqualResolvedSlots,
+} from "../helpers/resolve-slot-styles";
+
+interface UseResolvedStylesMapParams {
+	localStylesMaps: SharedValue<LocalStyleLayers>;
+}
+
+export const useResolvedStylesMap = ({
+	localStylesMaps,
+}: UseResolvedStylesMapParams) => {
+	const { parentScreenKey } = useScreenRelationships();
+	const ancestorStylesMap = useOptionalOrchestratorStore(
+		parentScreenKey,
+		(store) => store.slotsMap,
+	);
+	const previousStyleStatesBySlot =
+		useSharedValue<ResettableStyleStatesBySlot>(NO_PROPS);
+	const previousResolvedStylesMap =
+		useSharedValue<NormalizedTransitionInterpolatedStyle>(NO_STYLES);
+
+	return useDerivedValue<NormalizedTransitionInterpolatedStyle>(() => {
+		"worklet";
+		const { resolvedStylesMap, nextPreviousStyleStatesBySlot } =
+			resolveSlotStyles({
+				localStylesMaps: localStylesMaps.get(),
+				ancestorStylesMap: ancestorStylesMap?.get() ?? NO_STYLES,
+				previousStyleStatesBySlot: previousStyleStatesBySlot.get(),
+			});
+
+		if (
+			!areResettableStatesBySlotEqual(
+				previousStyleStatesBySlot.get(),
+				nextPreviousStyleStatesBySlot,
+			)
+		) {
+			previousStyleStatesBySlot.set(nextPreviousStyleStatesBySlot);
+		}
+
+		const previousResolvedStyles = previousResolvedStylesMap.get();
+		const stableResolvedStylesMap = reuseEqualResolvedSlots({
+			resolvedStylesMap,
+			previousResolvedStylesMap: previousResolvedStyles,
+		});
+
+		if (stableResolvedStylesMap !== previousResolvedStyles) {
+			previousResolvedStylesMap.set(stableResolvedStylesMap);
+		}
+
+		return stableResolvedStylesMap;
+	});
+};

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

@@ -0,0 +1,9 @@
+export {
+	useComposedSlotStyles,
+	useSlotLayoutStyles,
+	useSlotProps,
+	useSlotStackingStyles,
+	useSlotStyles,
+} from "./hooks/slot-resolvers";
+
+export type { ScreenSlotName } from "./types";

package/src/providers/screen/orchestrator/styles/types.ts

@@ -0,0 +1,12 @@
+import type {
+	NAVIGATION_MASK_CONTAINER_STYLE_ID,
+	NAVIGATION_MASK_ELEMENT_STYLE_ID,
+} from "../../../../constants";
+
+export type ScreenSlotName =
+	| "overlay"
+	| "content"
+	| "surface"
+	| "backdrop"
+	| typeof NAVIGATION_MASK_CONTAINER_STYLE_ID
+	| typeof NAVIGATION_MASK_ELEMENT_STYLE_ID;