react-native-screen-transitions 2.2.1 → 2.3.1

package/src/hooks/animation/use-associated-style.tsx

@@ -16,16 +16,20 @@ const EMPTY_STYLE = Object.freeze({});
 /**
  * This hook is used to get the associated styles for a given styleId / boundTag.
  */
-export const useAssociatedStyles = ({ id, style }: Props = {}) => {
+export const useAssociatedStyles = ({ id }: Props = {}) => {
 	const { stylesMap } = useTransitionStyles();
 	const showAfterFirstFrame = useSharedValue(false);
 
 	useDerivedValue(() => {
 		"worklet";
+
+		// If the associated styles have already been shown, return.
+
 		if (!id) {
 			showAfterFirstFrame.value = true;
 			return;
 		}
+
 		if (!showAfterFirstFrame.value) {
 			requestAnimationFrame(() => {
 				showAfterFirstFrame.value = true;
@@ -39,22 +43,23 @@ export const useAssociatedStyles = ({ id, style }: Props = {}) => {
 		if (!id || !stylesMap) {
 			return EMPTY_STYLE;
 		}
-		const base =
-			(stylesMap.value[id] as Record<string, unknown>) || EMPTY_STYLE;
+		const base = stylesMap.value[id] || EMPTY_STYLE;
 
 		let opacity = 1;
 
 		if ("opacity" in base) {
 			opacity = base.opacity as number;
 		}
-		if (style && "opacity" in style) {
-			opacity = style.opacity as number;
-		}
 
 		// Only force opacity to 0 during the initial frame; once ready,
 		// return base unchanged so we never override user-provided opacity.
 		if (!showAfterFirstFrame.value) {
-			return { ...base, opacity: 0 } as Record<string, unknown>;
+			return { ...base, opacity: 0 };
+		}
+
+		// Since opacity exists on the base style, we don't need to override it.
+		if ("opacity" in base) {
+			return base;
 		}
 
 		return { ...base, opacity };

package/src/hooks/animation/use-screen-animation.tsx

@@ -106,7 +106,15 @@ export function _useScreenAnimation() {
 			const current =
 				unwrap(currentAnimation, currentDescriptor?.route.key) ?? FALLBACK;
 
-			const { progress, focused, activeBoundId, bounds } = derivations({
+			const {
+				progress,
+				focused,
+				activeBoundId,
+				bounds,
+				active,
+				isActiveTransitioning,
+				isDismissing,
+			} = derivations({
 				current,
 				next,
 				previous,
@@ -123,13 +131,26 @@ export function _useScreenAnimation() {
 				activeBoundId,
 				progress,
 				bounds,
+				active,
+				isActiveTransitioning,
+				isDismissing,
 			};
 		},
 	);
 
-	const screenStyleInterpolator =
-		nextDescriptor?.options.screenStyleInterpolator ||
-		currentDescriptor?.options.screenStyleInterpolator;
+	// Prefer the next descriptor's interpolator only when transitions are enabled on it.
+	// If the next screen doesn't opt-in to transitions, avoid falling back to the current
+	// screen's interpolator to prevent unintended global styles (e.g., scaling previous screens
+	// when presenting non-transitioning modals/sheets).
+	const nextEnabled = nextDescriptor?.options.enableTransitions;
+	const currentEnabled = currentDescriptor?.options.enableTransitions;
+
+	const nextInterpolator =
+		nextEnabled && nextDescriptor?.options.screenStyleInterpolator;
+	const currentInterpolator =
+		currentEnabled && currentDescriptor?.options.screenStyleInterpolator;
+
+	const screenStyleInterpolator = nextInterpolator ?? currentInterpolator;
 
 	return { screenInterpolatorProps, screenStyleInterpolator };
 }

package/src/integrations/native-stack/views/NativeStackView.native.tsx

@@ -32,11 +32,7 @@ import {
 	ScreenStack,
 	ScreenStackItem,
 } from "react-native-screens";
-import { ScreenLifecycleController } from "../../../components/controllers/screen-lifecycle";
-import { RootTransitionAware } from "../../../components/root-transition-aware";
-import { ScreenGestureProvider } from "../../../providers/gestures";
-import { KeysProvider } from "../../../providers/keys";
-import { TransitionStylesProvider } from "../../../providers/transition-styles";
+import { ScreenTransitionTree } from "../../../components/screen-transition-tree";
 import type {
 	NativeStackDescriptor,
 	NativeStackDescriptorMap,
@@ -469,19 +465,13 @@ const SceneView = ({
 								value={isParentHeaderShown || headerShown !== false}
 							>
 								<HeaderBackContext.Provider value={headerBack}>
-									<KeysProvider
+									<ScreenTransitionTree
 										previous={previousDescriptor}
 										current={descriptor}
 										next={nextDescriptor}
 									>
-										<ScreenGestureProvider>
-											<ScreenLifecycleController>
-												<TransitionStylesProvider>
-													<RootTransitionAware>{render()}</RootTransitionAware>
-												</TransitionStylesProvider>
-											</ScreenLifecycleController>
-										</ScreenGestureProvider>
-									</KeysProvider>
+										{render()}
+									</ScreenTransitionTree>
 								</HeaderBackContext.Provider>
 							</HeaderShownContext.Provider>
 						</HeaderHeightContext.Provider>

package/src/types/animation.ts

@@ -41,6 +41,12 @@ export interface ScreenInterpolationProps {
 	progress: number;
 	/** A function that returns a bounds builder for the screen. */
 	bounds: BoundsAccessor;
+	/** The active screen between current and next. */
+	active: ScreenTransitionState;
+	/** Whether the active screen is transitioning. */
+	isActiveTransitioning: boolean;
+	/** Whether the active screen is dismissing. */
+	isDismissing: boolean;
 }
 
 export type ScreenStyleInterpolator = (

package/src/utils/animation/derivations.ts

@@ -20,11 +20,22 @@ export const derivations = ({
 	dimensions,
 }: DerivationsParams) => {
 	"worklet";
+	// The combined progress
 	const progress = current.progress + (next?.progress ?? 0);
+
+	// Whether the current screen is focused
 	const focused = !next;
 
+	const active = focused ? current : (next ?? current);
+	const isActiveTransitioning = !!(
+		active.gesture.isDragging || active.animating
+	);
+	const isDismissing = !!(active.gesture.isDismissing || active.closing);
+
+	// The active bound id
 	const activeBoundId = Bounds.getActiveBound(current, next, previous);
 
+	// bounds api
 	const bounds = createBounds({
 		activeBoundId,
 		current,
@@ -34,5 +45,13 @@ export const derivations = ({
 		dimensions,
 	});
 
-	return { progress, focused, activeBoundId, bounds };
+	return {
+		progress,
+		focused,
+		activeBoundId,
+		bounds,
+		active,
+		isActiveTransitioning,
+		isDismissing,
+	};
 };