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

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

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

@@ -0,0 +1,190 @@
+import type {
+	NormalizedTransitionInterpolatedStyle,
+	NormalizedTransitionSlotStyle,
+} from "../../../../types/animation.types";
+import {
+	ALWAYS_RESET_STYLE_VALUES,
+	IDENTITY_TRANSFORM,
+	shouldSlotInherit,
+} from "../constants";
+
+export type ResettableStyleState = {
+	hasTransform: boolean;
+	hasOpacity: boolean;
+	hasZIndex: boolean;
+	hasElevation: boolean;
+};
+
+export type ResettableStyleStatesBySlot = Record<string, ResettableStyleState>;
+
+const EMPTY_RESETTABLE_STYLE_STATE = Object.freeze({
+	hasTransform: false,
+	hasOpacity: false,
+	hasZIndex: false,
+	hasElevation: false,
+}) as ResettableStyleState;
+
+export const resolveSlotStyles = ({
+	currentStylesMap,
+	ancestorStylesMap,
+	previousStyleStatesBySlot,
+}: {
+	currentStylesMap: NormalizedTransitionInterpolatedStyle;
+	ancestorStylesMap: NormalizedTransitionInterpolatedStyle;
+	previousStyleStatesBySlot: ResettableStyleStatesBySlot;
+}) => {
+	"worklet";
+	const resolvedStylesMap: NormalizedTransitionInterpolatedStyle = {};
+	const nextPreviousStyleStatesBySlot: ResettableStyleStatesBySlot = {};
+
+	const appendResolvedSlot = (slotId: string) => {
+		"worklet";
+
+		const slot =
+			currentStylesMap[slotId] ??
+			(shouldSlotInherit(slotId) ? ancestorStylesMap[slotId] : undefined);
+
+		const baseStyle = slot?.style as Record<string, unknown> | undefined;
+
+		let hasAnyStyleKeys = false;
+		let hasTransform = false;
+		let hasOpacity = false;
+		let hasZIndex = false;
+		let hasElevation = false;
+
+		if (baseStyle) {
+			for (const key in baseStyle) {
+				hasAnyStyleKeys = true;
+
+				if (key === "transform") {
+					hasTransform = true;
+					continue;
+				}
+
+				if (key === "opacity") {
+					hasOpacity = true;
+					continue;
+				}
+
+				if (key === "zIndex") {
+					hasZIndex = true;
+					continue;
+				}
+
+				if (key === "elevation") {
+					hasElevation = true;
+				}
+			}
+		}
+
+		const previousState =
+			previousStyleStatesBySlot[slotId] ?? EMPTY_RESETTABLE_STYLE_STATE;
+		const shouldResetTransform = previousState.hasTransform && !hasTransform;
+		const shouldResetOpacity = previousState.hasOpacity && !hasOpacity;
+		const shouldResetZIndex = previousState.hasZIndex && !hasZIndex;
+		const shouldResetElevation = previousState.hasElevation && !hasElevation;
+		const hasResetPatch =
+			shouldResetTransform ||
+			shouldResetOpacity ||
+			shouldResetZIndex ||
+			shouldResetElevation;
+		const hasProps = slot?.props !== undefined;
+
+		if (hasTransform || hasOpacity || hasZIndex || hasElevation) {
+			nextPreviousStyleStatesBySlot[slotId] = {
+				hasTransform,
+				hasOpacity,
+				hasZIndex,
+				hasElevation,
+			};
+		}
+
+		if (!slot && !hasResetPatch) {
+			return;
+		}
+
+		if (!hasResetPatch && slot) {
+			if (hasAnyStyleKeys || hasProps) {
+				resolvedStylesMap[slotId] = slot;
+			}
+			return;
+		}
+
+		if (!hasAnyStyleKeys && !hasResetPatch && !hasProps) {
+			return;
+		}
+
+		const resolvedSlot = {} as NormalizedTransitionSlotStyle;
+
+		if (hasAnyStyleKeys || hasResetPatch) {
+			const resolvedStyle: Record<string, any> = {};
+
+			if (shouldResetTransform) {
+				resolvedStyle.transform = IDENTITY_TRANSFORM;
+			}
+
+			if (shouldResetOpacity) {
+				resolvedStyle.opacity = ALWAYS_RESET_STYLE_VALUES.opacity;
+			}
+
+			if (shouldResetZIndex) {
+				resolvedStyle.zIndex = ALWAYS_RESET_STYLE_VALUES.zIndex;
+			}
+
+			if (shouldResetElevation) {
+				resolvedStyle.elevation = ALWAYS_RESET_STYLE_VALUES.elevation;
+			}
+
+			if (baseStyle) {
+				for (const key in baseStyle) {
+					resolvedStyle[key] = baseStyle[key];
+				}
+			}
+
+			resolvedSlot.style = resolvedStyle;
+		}
+
+		if (hasProps) {
+			resolvedSlot.props = slot?.props;
+		}
+
+		if (!resolvedSlot.style && !resolvedSlot.props) {
+			return;
+		}
+
+		resolvedStylesMap[slotId] = resolvedSlot;
+	};
+
+	for (const slotId in currentStylesMap) {
+		appendResolvedSlot(slotId);
+	}
+
+	for (const slotId in ancestorStylesMap) {
+		if (!shouldSlotInherit(slotId)) {
+			continue;
+		}
+
+		if (currentStylesMap[slotId] !== undefined) {
+			continue;
+		}
+
+		appendResolvedSlot(slotId);
+	}
+
+	for (const slotId in previousStyleStatesBySlot) {
+		if (currentStylesMap[slotId] !== undefined) {
+			continue;
+		}
+
+		if (shouldSlotInherit(slotId) && ancestorStylesMap[slotId] !== undefined) {
+			continue;
+		}
+
+		appendResolvedSlot(slotId);
+	}
+
+	return {
+		resolvedStylesMap,
+		nextPreviousStyleStatesBySlot,
+	};
+};