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

package/src/shared/components/screen-container/layers/maybe-masked-navigation-container.tsx

@@ -6,7 +6,7 @@ import {
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,
 	NO_STYLES,
 } from "../../../constants";
-import { useScreenStyles } from "../../../providers/screen/styles.provider";
+import { useScreenStyles } from "../../../providers/screen/styles";
 import { logger } from "../../../utils/logger";
 
 type Props = {
@@ -27,19 +27,21 @@ let hasWarnedMissingMaskedView = false;
 
 export const MaybeMaskedNavigationContainer = memo(
 	({ enabled, children, pointerEvents }: Props) => {
-		const { stylesMap } = useScreenStyles();
+		const { layerStylesMap } = useScreenStyles();
 
 		const animatedNavigationMaskStyle = useAnimatedStyle(() => {
 			"worklet";
 			return (
-				stylesMap.value[NAVIGATION_MASK_ELEMENT_STYLE_ID]?.style || NO_STYLES
+				layerStylesMap.value[NAVIGATION_MASK_ELEMENT_STYLE_ID]?.style ||
+				NO_STYLES
 			);
 		});
 
 		const animatedNavigationMaskContainerStyle = useAnimatedStyle(() => {
 			"worklet";
 			return (
-				stylesMap.value[NAVIGATION_MASK_CONTAINER_STYLE_ID]?.style || NO_STYLES
+				layerStylesMap.value[NAVIGATION_MASK_CONTAINER_STYLE_ID]?.style ||
+				NO_STYLES
 			);
 		});
 

package/src/shared/components/screen-container/layers/surface-container.tsx

@@ -6,7 +6,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { NO_PROPS, NO_STYLES } from "../../../constants";
 import { useDescriptors } from "../../../providers/screen/descriptors";
-import { useScreenStyles } from "../../../providers/screen/styles.provider";
+import { useScreenStyles } from "../../../providers/screen/styles";
 
 type Props = {
 	children: React.ReactNode;
@@ -14,7 +14,7 @@ type Props = {
 };
 
 export const SurfaceContainer = memo(({ children, pointerEvents }: Props) => {
-	const { stylesMap } = useScreenStyles();
+	const { layerStylesMap } = useScreenStyles();
 	const { current } = useDescriptors();
 
 	const SurfaceComponent = current.options.surfaceComponent;
@@ -27,12 +27,12 @@ export const SurfaceContainer = memo(({ children, pointerEvents }: Props) => {
 
 	const animatedSurfaceStyle = useAnimatedStyle(() => {
 		"worklet";
-		return stylesMap.value.surface?.style ?? NO_STYLES;
+		return layerStylesMap.value.surface?.style ?? NO_STYLES;
 	});
 
 	const animatedSurfaceProps = useAnimatedProps(() => {
 		"worklet";
-		return stylesMap.value.surface?.props ?? NO_PROPS;
+		return layerStylesMap.value.surface?.props ?? NO_PROPS;
 	});
 
 	if (!AnimatedSurfaceComponent) return children;

package/src/shared/constants.ts

@@ -57,6 +57,7 @@ export const createScreenTransitionState = (
 	closing: 0,
 	animating: 0,
 	settled: 1,
+	logicallySettled: 1,
 	entering: 0,
 	gesture: { ...DEFAULT_GESTURE_VALUES },
 	route,
@@ -79,6 +80,7 @@ export const DEFAULT_SCREEN_TRANSITION_STATE: ScreenTransitionState =
 		closing: 0,
 		animating: 0,
 		settled: 1,
+		logicallySettled: 1,
 		entering: 0,
 		gesture: DEFAULT_GESTURE_VALUES,
 		route: {} as RouteProp<ParamListBase>,
@@ -103,6 +105,7 @@ export const EMPTY_BOUND_HELPER_RESULT_RAW = Object.freeze({
 	translateY: 0,
 	width: 0,
 	height: 0,
+	...HIDDEN_STYLE,
 });
 export const ENTER_RANGE = [0, 1] as const;
 export const EXIT_RANGE = [1, 2] as const;

package/src/shared/index.ts

@@ -49,7 +49,6 @@ export type {
 	BoundsNavigationAccessor,
 	BoundsNavigationZoomOptions,
 	BoundsNavigationZoomStyle,
-	DeferredScreenStyleSignal,
 	OverlayProps,
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,

package/src/shared/providers/screen/animation/helpers/hydrate-transition-state.ts

@@ -1,5 +1,10 @@
 import type { SharedValue } from "react-native-reanimated";
-import { EPSILON } from "../../../../constants";
+import {
+	ANIMATION_SNAP_THRESHOLD,
+	EPSILON,
+	FALSE,
+	TRUE,
+} from "../../../../constants";
 import type { GestureStoreMap } from "../../../../stores/gesture.store";
 import type { ScreenTransitionState } from "../../../../types/animation.types";
 import type { Layout } from "../../../../types/screen.types";
@@ -13,6 +18,7 @@ type BuiltState = {
 	gesture: GestureStoreMap;
 	route: BaseStackRoute;
 	meta?: Record<string, unknown>;
+	targetProgress: SharedValue<number>;
 	resolvedAutoSnapPoint: SharedValue<number>;
 	measuredContentLayout: SharedValue<Layout | null>;
 	hasAutoSnapPoint: boolean;
@@ -20,6 +26,13 @@ type BuiltState = {
 	unwrapped: ScreenTransitionState;
 };
 
+interface ComputeLogicallySettledParams {
+	progress: number;
+	targetProgress: number;
+	settled: number;
+	dragging: number;
+}
+
 /**
  * Computes the animated snap index based on progress and snap points.
  * Returns -1 if no snap points, otherwise interpolates between indices.
@@ -41,6 +54,35 @@ const computeSnapIndex = (progress: number, snapPoints: number[]): number => {
 	return snapPoints.length - 1;
 };
 
+/**
+ * Determines whether the screen transition is logically settled.
+ *
+ * A transition is considered logically settled when:
+ * - The `settled` flag is explicitly set, OR
+ * - The screen is not being dragged AND the progress is within
+ *   {@link ANIMATION_SNAP_THRESHOLD} of the target progress.
+ */
+export const computeLogicallySettled = ({
+	progress,
+	targetProgress,
+	settled,
+	dragging,
+}: ComputeLogicallySettledParams) => {
+	"worklet";
+
+	if (settled) {
+		return TRUE;
+	}
+
+	if (dragging) {
+		return FALSE;
+	}
+
+	return Math.abs(progress - targetProgress) <= ANIMATION_SNAP_THRESHOLD
+		? TRUE
+		: FALSE;
+};
+
 export const hydrateTransitionState = (
 	s: BuiltState,
 	dimensions: Layout,
@@ -72,6 +114,12 @@ export const hydrateTransitionState = (
 	out.gesture.isDragging = out.gesture.dragging;
 
 	out.settled = out.animating || out.gesture.dismissing || out.closing ? 0 : 1;
+	out.logicallySettled = computeLogicallySettled({
+		progress: out.progress,
+		targetProgress: s.targetProgress.value,
+		settled: out.settled,
+		dragging: out.gesture.dragging,
+	});
 
 	out.meta = s.meta;
 	out.layouts.screen.width = dimensions.width;

package/src/shared/providers/screen/animation/helpers/pipeline.ts

@@ -71,6 +71,7 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 		progress: 0,
 		stackProgress: 0,
 		snapIndex: -1,
+		logicallySettled: 1,
 		focused: true,
 		active: DEFAULT_SCREEN_TRANSITION_STATE,
 		navigationMaskEnabled: currentNavigationMaskEnabled,
@@ -121,6 +122,7 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 			progress,
 			stackProgress,
 			snapIndex: current.snapIndex,
+			logicallySettled: helpers.active.logicallySettled,
 			...helpers,
 		};
 

package/src/shared/providers/screen/animation/helpers/use-build-transition-state.ts

@@ -23,6 +23,7 @@ type BuiltState = {
 	gesture: GestureStoreMap;
 	route: BaseStackRoute;
 	meta?: Record<string, unknown>;
+	targetProgress: SharedValue<number>;
 	resolvedAutoSnapPoint: SharedValue<number>;
 	measuredContentLayout: SharedValue<Layout | null>;
 	hasAutoSnapPoint: boolean;
@@ -62,6 +63,7 @@ export const useBuildTransitionState = (
 			closing: AnimationStore.getValue(key, "closing"),
 			entering: AnimationStore.getValue(key, "entering"),
 			animating: AnimationStore.getValue(key, "animating"),
+			targetProgress: SystemStore.getValue(key, "targetProgress"),
 			resolvedAutoSnapPoint: SystemStore.getValue(key, "resolvedAutoSnapPoint"),
 			measuredContentLayout: SystemStore.getValue(key, "measuredContentLayout"),
 			hasAutoSnapPoint: snapPoints?.includes("auto") ?? false,

package/src/shared/providers/screen/screen-composer.tsx

@@ -4,7 +4,7 @@ import { ScreenLifecycle } from "../../components/screen-lifecycle";
 import { ScreenGestureProvider } from "../gestures";
 import { ScreenAnimationProvider } from "./animation";
 import { type BaseDescriptor, DescriptorsProvider } from "./descriptors";
-import { ScreenStylesProvider } from "./styles.provider";
+import { ScreenStylesProvider } from "./styles";
 
 type Props<TDescriptor extends BaseDescriptor> = {
 	previous?: TDescriptor;

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