react-native-screen-transitions 3.4.0-rc.1 → 3.5.0-beta.0

package/src/shared/providers/register-bounds.provider.tsx

@@ -18,7 +18,6 @@ import { BoundStore } from "../stores/bounds";
 import { applyMeasuredBoundsWrites } from "../stores/bounds/helpers/apply-measured-bounds-writes";
 import { prepareStyleForBounds } from "../utils/bounds/helpers/styles/styles";
 import createProvider from "../utils/create-provider";
-import { useLayoutAnchorContext } from "./layout-anchor.provider";
 import { useDescriptorDerivations, useDescriptors } from "./screen/descriptors";
 
 interface MaybeMeasureAndStoreParams {
@@ -246,7 +245,6 @@ const registerBoundsBundle = createProvider("RegisterBounds", {
 			useDescriptorDerivations();
 		const currentScreenKey = current.route.key;
 		const selectedNextRouteId = getRouteParamId(next?.route);
-		const layoutAnchor = useLayoutAnchorContext();
 
 		// Context & signals
 		const parentContext = useRegisterBoundsContext();
@@ -278,7 +276,7 @@ const registerBoundsBundle = createProvider("RegisterBounds", {
 				}
 
 				if (shouldSetSource && isAnimating.get()) {
-					const existing = BoundStore.getSnapshot(
+					const existing = BoundStore.entry.getMeasured(
 						sharedBoundTag,
 						currentScreenKey,
 					);
@@ -299,12 +297,13 @@ const registerBoundsBundle = createProvider("RegisterBounds", {
 					return;
 				}
 
-				const hasPendingLink = BoundStore.hasPendingLink(sharedBoundTag);
-				const hasSourceLink = BoundStore.hasSourceLink(
+				const hasPendingLink =
+					BoundStore.link.getPending(sharedBoundTag) !== null;
+				const hasSourceLink = BoundStore.link.hasSource(
 					sharedBoundTag,
 					currentScreenKey,
 				);
-				const hasDestinationLink = BoundStore.hasDestinationLink(
+				const hasDestinationLink = BoundStore.link.hasDestination(
 					sharedBoundTag,
 					currentScreenKey,
 				);
@@ -338,21 +337,17 @@ const registerBoundsBundle = createProvider("RegisterBounds", {
 					return;
 				}
 
-				const correctedMeasured = layoutAnchor
-					? layoutAnchor.correctMeasurement(measured)
-					: measured;
-
 				emitUpdate();
 
 				applyMeasuredBoundsWrites({
 					sharedBoundTag,
 					currentScreenKey,
-					measured: correctedMeasured,
+					measured,
 					preparedStyles,
 					ancestorKeys,
 					navigatorKey,
 					ancestorNavigatorKeys,
-					shouldRegisterSnapshot: true,
+					shouldWriteEntry: true,
 					shouldSetSource: canSetSource,
 					shouldUpdateSource: canUpdateSource,
 					shouldSetDestination: canSetDestination,

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

@@ -1,7 +1,7 @@
-import { createContext, type ReactNode, useContext, useMemo } from "react";
-import { type DerivedValue, useDerivedValue } from "react-native-reanimated";
-import type { ScreenInterpolationProps } from "../../../types/animation.types";
+import { type ReactNode, useContext } from "react";
+import createProvider from "../../../utils/create-provider";
 import { useScreenAnimationPipeline } from "./helpers/pipeline";
+import type { ScreenAnimationSource } from "./types";
 
 type Props = {
 	children: ReactNode;
@@ -10,15 +10,20 @@ type Props = {
 export type ScreenAnimationContextValue = ReturnType<
 	typeof useScreenAnimationPipeline
 > & {
-	screenAnimation: DerivedValue<ScreenInterpolationProps>;
-	ancestorScreenAnimations: DerivedValue<ScreenInterpolationProps>[];
+	ancestorScreenAnimationSources: ScreenAnimationSource[];
 };
 
-const ScreenAnimationContext =
-	createContext<ScreenAnimationContextValue | null>(null);
-ScreenAnimationContext.displayName = "ScreenAnimation";
+export type ScreenAnimationContextResult = {
+	value: ScreenAnimationContextValue;
+};
 
-function ScreenAnimationProvider({ children }: Props) {
+export const {
+	ScreenAnimationProvider,
+	ScreenAnimationContext,
+	useScreenAnimationContext,
+} = createProvider("ScreenAnimation", {
+	guarded: true,
+})<Props, ScreenAnimationContextValue>((): ScreenAnimationContextResult => {
 	const parentContext = useContext(ScreenAnimationContext);
 
 	const {
@@ -28,66 +33,23 @@ function ScreenAnimationProvider({ children }: Props) {
 		boundsAccessor,
 	} = useScreenAnimationPipeline();
 
-	const screenAnimation = useDerivedValue<ScreenInterpolationProps>(() => {
-		"worklet";
-		const props = screenInterpolatorProps.value;
-		return {
-			...props,
-			bounds: boundsAccessor,
-		};
-	});
-
-	const ancestorScreenAnimations = useMemo(() => {
-		if (!parentContext) {
-			return [];
-		}
-
-		return [
-			parentContext.screenAnimation,
-			...parentContext.ancestorScreenAnimations,
-		];
-	}, [parentContext]);
-
-	const value = useMemo(
-		() => ({
-			screenInterpolatorProps,
-			nextInterpolator,
-			currentInterpolator,
-			boundsAccessor,
-			screenAnimation,
-			ancestorScreenAnimations,
-		}),
-		[
+	const ancestorScreenAnimationSources = parentContext
+		? [
+				{
+					screenInterpolatorProps: parentContext.screenInterpolatorProps,
+					boundsAccessor: parentContext.boundsAccessor,
+				},
+				...parentContext.ancestorScreenAnimationSources,
+			]
+		: [];
+
+	return {
+		value: {
 			screenInterpolatorProps,
 			nextInterpolator,
 			currentInterpolator,
 			boundsAccessor,
-			screenAnimation,
-			ancestorScreenAnimations,
-		],
-	);
-
-	return (
-		<ScreenAnimationContext.Provider value={value}>
-			{children}
-		</ScreenAnimationContext.Provider>
-	);
-}
-
-function useScreenAnimationContext(): ScreenAnimationContextValue {
-	const context = useContext(ScreenAnimationContext);
-
-	if (!context) {
-		throw new Error(
-			"ScreenAnimation context must be used within a ScreenAnimationProvider",
-		);
-	}
-
-	return context;
-}
-
-export {
-	ScreenAnimationContext,
-	ScreenAnimationProvider,
-	useScreenAnimationContext,
-};
+			ancestorScreenAnimationSources,
+		},
+	};
+});

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