react-native-screen-transitions 3.4.0 → 3.5.0

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

@@ -46,10 +46,6 @@ const computeSettled = (params: {
 	return animating || dismissing || closing ? FALSE : TRUE;
 };
 
-/**
- * Computes the animated snap index based on progress and snap points.
- * Returns -1 if no snap points, otherwise interpolates between indices.
- */
 const computeSnapIndex = (progress: number, snapPoints: number[]): number => {
 	"worklet";
 	if (snapPoints.length === 0) return -1;
@@ -67,14 +63,6 @@ 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,
@@ -102,26 +90,25 @@ export const hydrateTransitionState = (
 ): ScreenTransitionState => {
 	"worklet";
 	const out = s.unwrapped;
-	out.progress = s.progress.value;
-	out.willAnimate = s.willAnimate.value;
-	out.closing = s.closing.value;
-	out.entering = s.entering.value;
-	out.gesture.x = s.gesture.x.value;
-	out.gesture.y = s.gesture.y.value;
-	out.gesture.normX = s.gesture.normX.value;
-	out.gesture.normY = s.gesture.normY.value;
-	out.gesture.dismissing = s.gesture.dismissing.value;
-	out.gesture.dragging = s.gesture.dragging.value;
-	out.gesture.direction = s.gesture.direction.value;
+	out.progress = s.progress.get();
+	out.willAnimate = s.willAnimate.get();
+	out.closing = s.closing.get();
+	out.entering = s.entering.get();
+	out.gesture.x = s.gesture.x.get();
+	out.gesture.y = s.gesture.y.get();
+	out.gesture.normX = s.gesture.normX.get();
+	out.gesture.normY = s.gesture.normY.get();
+	out.gesture.dismissing = s.gesture.dismissing.get();
+	out.gesture.dragging = s.gesture.dragging.get();
+	out.gesture.direction = s.gesture.direction.get();
 
 	const isGestureSettling =
 		Math.abs(out.gesture.normX) > EPSILON ||
 		Math.abs(out.gesture.normY) > EPSILON;
 
 	out.animating =
-		s.animating.value || out.gesture.dragging || isGestureSettling ? 1 : 0;
+		s.animating.get() || out.gesture.dragging || isGestureSettling ? 1 : 0;
 
-	// Deprecated aliases (kept for backwards compatibility)
 	out.gesture.normalizedX = out.gesture.normX;
 	out.gesture.normalizedY = out.gesture.normY;
 	out.gesture.isDismissing = out.gesture.dismissing;
@@ -134,24 +121,24 @@ export const hydrateTransitionState = (
 	});
 	out.logicallySettled = computeLogicallySettled({
 		progress: out.progress,
-		targetProgress: s.targetProgress.value,
+		targetProgress: s.targetProgress.get(),
 		settled: out.settled,
 		dragging: out.gesture.dragging,
 	});
 
-	if (s.settled.value !== out.settled) {
-		s.settled.value = out.settled;
+	if (s.settled.get() !== out.settled) {
+		s.settled.set(out.settled);
 	}
 
-	if (s.logicallySettled.value !== out.logicallySettled) {
-		s.logicallySettled.value = out.logicallySettled;
+	if (s.logicallySettled.get() !== out.logicallySettled) {
+		s.logicallySettled.set(out.logicallySettled);
 	}
 
 	out.meta = s.meta;
 	out.layouts.screen.width = dimensions.width;
 	out.layouts.screen.height = dimensions.height;
 
-	const content = s.measuredContentLayout.value;
+	const content = s.measuredContentLayout.get();
 	if (content) {
 		if (!out.layouts.content) {
 			out.layouts.content = {
@@ -167,8 +154,8 @@ export const hydrateTransitionState = (
 	}
 
 	const resolvedAutoSnap =
-		s.hasAutoSnapPoint && s.resolvedAutoSnapPoint.value > 0
-			? s.resolvedAutoSnapPoint.value
+		s.hasAutoSnapPoint && s.resolvedAutoSnapPoint.get() > 0
+			? s.resolvedAutoSnapPoint.get()
 			: null;
 
 	const resolvedSnapPoints =

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

@@ -1,8 +1,8 @@
 import { useMemo } from "react";
 import { useWindowDimensions } from "react-native";
 import {
-	type DerivedValue,
-	useDerivedValue,
+	type SharedValue,
+	useAnimatedReaction,
 	useSharedValue,
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -12,28 +12,42 @@ import type {
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,
 } from "../../../../types/animation.types";
-import type {
-	BoundsAccessor,
-	BoundsInterpolationProps,
-} from "../../../../types/bounds.types";
+import type { BoundsAccessor } from "../../../../types/bounds.types";
 
 import { createBoundsAccessor } from "../../../../utils/bounds";
-import { resolveNavigationMaskEnabled } from "../../../../utils/resolve-screen-transition-options";
 import { useDescriptors } from "../../descriptors";
 import { derivations } from "./derivations";
 import { hasTransitionsEnabled } from "./has-transitions-enabled";
 import { hydrateTransitionState } from "./hydrate-transition-state";
 import { useBuildTransitionState } from "./use-build-transition-state";
 
-type BaseInterpolatorProps = Omit<ScreenInterpolationProps, "bounds">;
+export type ScreenInterpolatorFrame = Omit<ScreenInterpolationProps, "bounds">;
 
 interface ScreenAnimationPipeline {
-	screenInterpolatorProps: DerivedValue<BaseInterpolatorProps>;
+	screenInterpolatorProps: SharedValue<ScreenInterpolatorFrame>;
 	nextInterpolator: ScreenStyleInterpolator | undefined;
 	currentInterpolator: ScreenStyleInterpolator | undefined;
 	boundsAccessor: BoundsAccessor;
 }
 
+const createInitialBaseInterpolatorProps = (
+	dimensions: ScreenInterpolatorFrame["layouts"]["screen"],
+	insets: ScreenInterpolatorFrame["insets"],
+): ScreenInterpolatorFrame => ({
+	layouts: { screen: dimensions, navigationMaskEnabled: false },
+	insets,
+	previous: undefined,
+	current: DEFAULT_SCREEN_TRANSITION_STATE,
+	next: undefined,
+	progress: 0,
+	stackProgress: 0,
+	snapIndex: -1,
+	logicallySettled: 1,
+	focused: true,
+	active: DEFAULT_SCREEN_TRANSITION_STATE,
+	inactive: undefined,
+});
+
 export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 	const { flags, stackProgress: rootStackProgress, routeKeys } = useStack();
 	const dimensions = useWindowDimensions();
@@ -58,81 +72,94 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 		!!nextRouteKey &&
 		hasTransitionsEnabled(nextDescriptor?.options, transitionsAlwaysOn);
 
-	const currentNavigationMaskEnabled = resolveNavigationMaskEnabled(
-		currDescriptor?.options ?? {},
+	const screenInterpolatorProps = useSharedValue<ScreenInterpolatorFrame>(
+		createInitialBaseInterpolatorProps(dimensions, insets),
 	);
 
-	const boundsFrameProps = useSharedValue<BoundsInterpolationProps>({
-		layouts: { screen: dimensions },
-		insets,
-		previous: undefined,
-		current: DEFAULT_SCREEN_TRANSITION_STATE,
-		next: undefined,
-		progress: 0,
-		stackProgress: 0,
-		snapIndex: -1,
-		logicallySettled: 1,
-		focused: true,
-		active: DEFAULT_SCREEN_TRANSITION_STATE,
-		navigationMaskEnabled: currentNavigationMaskEnabled,
-		inactive: undefined,
-	});
-
 	const boundsAccessor = useMemo(() => {
 		return createBoundsAccessor(() => {
 			"worklet";
-			return boundsFrameProps.value;
+			return screenInterpolatorProps.get();
 		});
-	}, [boundsFrameProps]);
-
-	const screenInterpolatorProps = useDerivedValue<BaseInterpolatorProps>(() => {
-		"worklet";
+	}, [screenInterpolatorProps]);
 
-		const previous = prevAnimation
-			? hydrateTransitionState(prevAnimation, dimensions)
-			: undefined;
+	useAnimatedReaction(
+		() => {
+			"worklet";
 
-		const next =
-			nextAnimation && nextHasTransitions
-				? hydrateTransitionState(nextAnimation, dimensions)
+			const previous = prevAnimation
+				? hydrateTransitionState(prevAnimation, dimensions)
 				: undefined;
 
-		const current = currentAnimation
-			? hydrateTransitionState(currentAnimation, dimensions)
-			: DEFAULT_SCREEN_TRANSITION_STATE;
-
-		const { progress, ...helpers } = derivations({
-			previous,
-			current,
-			next,
-		});
-
-		// Compute relative stack progress: total - currentIndex
-		// This gives us the sum of progress values from current screen onwards
-		// Falls back to current progress if index is invalid
-		const stackProgress =
-			currentIndex >= 0 ? rootStackProgress.value - currentIndex : progress;
-
-		const nextProps: BaseInterpolatorProps = {
-			layouts: current.layouts,
-			insets,
+			const next =
+				nextAnimation && nextHasTransitions
+					? hydrateTransitionState(nextAnimation, dimensions)
+					: undefined;
+
+			const current = currentAnimation
+				? hydrateTransitionState(currentAnimation, dimensions)
+				: DEFAULT_SCREEN_TRANSITION_STATE;
+
+			const { progress, ...helpers } = derivations({
+				previous,
+				current,
+				next,
+			});
+
+			const stackProgress =
+				currentIndex >= 0 ? rootStackProgress.get() - currentIndex : progress;
+
+			const focused = helpers.focused;
+			const active = helpers.active;
+			const inactive = helpers.inactive;
+			const snapIndex = current.snapIndex;
+			const logicallySettled = active.logicallySettled;
+
+			return {
+				previous,
+				current,
+				next,
+				progress,
+				stackProgress,
+				snapIndex,
+				logicallySettled,
+				focused,
+				active,
+				inactive,
+			};
+		},
+		({
 			previous,
 			current,
 			next,
 			progress,
 			stackProgress,
-			snapIndex: current.snapIndex,
-			logicallySettled: helpers.active.logicallySettled,
-			...helpers,
-		};
-
-		boundsFrameProps.value = {
-			...nextProps,
-			navigationMaskEnabled: currentNavigationMaskEnabled,
-		};
-
-		return nextProps;
-	});
+			snapIndex,
+			logicallySettled,
+			focused,
+			active,
+			inactive,
+		}) => {
+			"worklet";
+
+			screenInterpolatorProps.modify((frame) => {
+				"worklet";
+				frame.layouts = current.layouts;
+				frame.insets = insets;
+				frame.previous = previous;
+				frame.current = current;
+				frame.next = next;
+				frame.progress = progress;
+				frame.stackProgress = stackProgress;
+				frame.snapIndex = snapIndex;
+				frame.logicallySettled = logicallySettled;
+				frame.focused = focused;
+				frame.active = active;
+				frame.inactive = inactive;
+				return frame;
+			});
+		},
+	);
 
 	const nextInterpolator = nextDescriptor?.options.screenStyleInterpolator;
 	const currentInterpolator = currDescriptor?.options.screenStyleInterpolator;

package/src/shared/providers/screen/animation/helpers/resolve-screen-animation-target.ts

@@ -1,11 +1,9 @@
-import type { DerivedValue } from "react-native-reanimated";
-import type { ScreenInterpolationProps } from "../../../../types/animation.types";
 import type { ScreenAnimationTarget } from "../types";
 
-type Params = {
+type Params<T> = {
 	target: ScreenAnimationTarget | undefined;
-	self: DerivedValue<ScreenInterpolationProps>;
-	ancestors: DerivedValue<ScreenInterpolationProps>[];
+	self: T;
+	ancestors: T[];
 };
 
 const isAncestorTarget = (
@@ -14,11 +12,11 @@ const isAncestorTarget = (
 	return typeof target === "object" && target !== null && "ancestor" in target;
 };
 
-export function resolveScreenAnimationTarget({
+export function resolveScreenAnimationTarget<T>({
 	target,
 	self,
 	ancestors,
-}: Params): DerivedValue<ScreenInterpolationProps> {
+}: Params<T>): T {
 	if (!target || target === "self") {
 		return self;
 	}

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

@@ -42,6 +42,7 @@ export const useBuildTransitionState = (
 	const meta = descriptor?.options?.meta;
 	const route = descriptor?.route;
 	const gestureEnabled = descriptor?.options?.gestureEnabled;
+	const navigationMaskEnabled = !!descriptor?.options?.navigationMaskEnabled;
 	const snapPoints = descriptor?.options?.snapPoints;
 
 	const shouldUseNeutralNextGestures =
@@ -79,7 +80,18 @@ export const useBuildTransitionState = (
 				: GestureStore.getBag(key),
 			route: plainRoute,
 			meta: plainMeta,
-			unwrapped: createScreenTransitionState(plainRoute, plainMeta),
+			unwrapped: createScreenTransitionState(
+				plainRoute,
+				plainMeta,
+				navigationMaskEnabled,
+			),
 		};
-	}, [key, meta, route, shouldUseNeutralNextGestures, snapPoints]);
+	}, [
+		key,
+		meta,
+		route,
+		shouldUseNeutralNextGestures,
+		snapPoints,
+		navigationMaskEnabled,
+	]);
 };

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

@@ -1,5 +1,14 @@
+import type { SharedValue } from "react-native-reanimated";
+import type { BoundsAccessor } from "../../../types/bounds.types";
+import type { ScreenInterpolatorFrame } from "./helpers/pipeline";
+
 export type ScreenAnimationTarget =
 	| "self"
 	| "parent"
 	| "root"
 	| { ancestor: number };
+
+export type ScreenAnimationSource = {
+	screenInterpolatorProps: SharedValue<ScreenInterpolatorFrame>;
+	boundsAccessor: BoundsAccessor;
+};

package/src/shared/providers/screen/animation/use-screen-animation.tsx

@@ -1,19 +1,37 @@
-import type { DerivedValue } from "react-native-reanimated";
+import { type DerivedValue, useDerivedValue } from "react-native-reanimated";
 import type { ScreenInterpolationProps } from "../../../types/animation.types";
 import { useScreenAnimationContext } from "./animation.provider";
 import { resolveScreenAnimationTarget } from "./helpers/resolve-screen-animation-target";
-import type { ScreenAnimationTarget } from "./types";
+import type { ScreenAnimationSource, ScreenAnimationTarget } from "./types";
 
 export type { ScreenAnimationTarget } from "./types";
 
 export function useScreenAnimation(
 	target?: ScreenAnimationTarget,
 ): DerivedValue<ScreenInterpolationProps> {
-	const { screenAnimation, ancestorScreenAnimations } =
-		useScreenAnimationContext();
-	return resolveScreenAnimationTarget({
+	const {
+		screenInterpolatorProps,
+		boundsAccessor,
+		ancestorScreenAnimationSources,
+	} = useScreenAnimationContext();
+
+	const source = resolveScreenAnimationTarget<ScreenAnimationSource>({
 		target,
-		self: screenAnimation,
-		ancestors: ancestorScreenAnimations,
+		self: {
+			screenInterpolatorProps,
+			boundsAccessor,
+		},
+		ancestors: ancestorScreenAnimationSources,
+	});
+
+	return useDerivedValue<ScreenInterpolationProps>(() => {
+		"worklet";
+
+		const props = source.screenInterpolatorProps.get();
+
+		return {
+			...props,
+			bounds: source.boundsAccessor,
+		};
 	});
 }

package/src/shared/providers/screen/descriptors/helpers/derive-descriptor-derivations.ts

@@ -4,6 +4,7 @@ export interface DescriptorDerivations {
 	previousScreenKey?: string;
 	currentScreenKey: string;
 	nextScreenKey?: string;
+	parentScreenKey?: string;
 	isFirstKey: boolean;
 	isTopMostScreen: boolean;
 	ancestorKeys: string[];
@@ -55,6 +56,7 @@ export function deriveDescriptorDerivations({
 		previousScreenKey,
 		currentScreenKey,
 		nextScreenKey,
+		parentScreenKey: ancestorKeys[0],
 		isFirstKey,
 		isTopMostScreen,
 		ancestorKeys,

package/src/shared/providers/screen/styles/components/maybe-floating-container.tsx

@@ -0,0 +1,29 @@
+import { memo } from "react";
+import { StyleSheet, View } from "react-native";
+
+interface MaybeFloatingContainerProps {
+	children: React.ReactNode;
+	isFloatingOverlay?: boolean;
+}
+
+export const MaybeFloatingContainer = memo(function MaybeFloatingContainer({
+	children,
+	isFloatingOverlay,
+}: MaybeFloatingContainerProps) {
+	if (!isFloatingOverlay) {
+		return children;
+	}
+
+	return (
+		<View style={styles.float} pointerEvents="box-none">
+			{children}
+		</View>
+	);
+});
+
+const styles = StyleSheet.create({
+	float: {
+		...StyleSheet.absoluteFill,
+		zIndex: 999,
+	},
+});

package/src/shared/providers/screen/styles/constants.ts

@@ -0,0 +1,34 @@
+import {
+	NAVIGATION_MASK_CONTAINER_STYLE_ID,
+	NAVIGATION_MASK_ELEMENT_STYLE_ID,
+} from "../../../constants";
+
+export const IDENTITY_TRANSFORM = [
+	{ translateX: 0 },
+	{ translateY: 0 },
+	{ scaleX: 1 },
+	{ scaleY: 1 },
+] as const;
+
+export const ALWAYS_RESET_STYLE_VALUES = {
+	opacity: 1,
+	zIndex: 0,
+	elevation: 0,
+} as const;
+
+export const LOCAL_ONLY_STYLE_SLOT_IDS = {
+	content: true,
+	backdrop: true,
+	surface: true,
+	[NAVIGATION_MASK_ELEMENT_STYLE_ID]: true,
+	[NAVIGATION_MASK_CONTAINER_STYLE_ID]: true,
+} as const;
+
+export const shouldSlotInherit = (slotId: string) => {
+	"worklet";
+	// biome-ignore lint/suspicious/noPrototypeBuiltins: <proj issue>
+	return !Object.prototype.hasOwnProperty.call(
+		LOCAL_ONLY_STYLE_SLOT_IDS,
+		slotId,
+	);
+};

package/src/shared/providers/screen/styles/helpers/normalize-slots.ts

@@ -0,0 +1,61 @@
+import type {
+	NormalizedTransitionInterpolatedStyle,
+	NormalizedTransitionSlotStyle,
+} from "../../../../types/animation.types";
+
+const isExplicitTransitionSlot = (value: unknown) => {
+	"worklet";
+	return (
+		typeof value === "object" &&
+		value != null &&
+		("style" in value || "props" in value)
+	);
+};
+
+const isAlreadyNormalizedStyleMap = (raw: Record<string, any>) => {
+	"worklet";
+
+	for (const key in raw) {
+		const value = raw[key];
+
+		if (value === undefined) {
+			continue;
+		}
+
+		if (!isExplicitTransitionSlot(value)) {
+			return false;
+		}
+	}
+
+	return true;
+};
+
+export function normalizeSlots(
+	raw: Record<string, any>,
+): NormalizedTransitionInterpolatedStyle {
+	"worklet";
+
+	if (isAlreadyNormalizedStyleMap(raw)) {
+		return raw as NormalizedTransitionInterpolatedStyle;
+	}
+
+	const normalized: Record<string, NormalizedTransitionSlotStyle | undefined> =
+		{};
+
+	for (const key in raw) {
+		const value = raw[key];
+
+		if (value === undefined) {
+			normalized[key] = undefined;
+			continue;
+		}
+
+		if (isExplicitTransitionSlot(value)) {
+			normalized[key] = value as NormalizedTransitionSlotStyle;
+		} else {
+			normalized[key] = { style: value };
+		}
+	}
+
+	return normalized as NormalizedTransitionInterpolatedStyle;
+}