react-native-screen-transitions 2.3.1 → 2.3.3

package/src/hooks/bounds/use-bound-registry.tsx

@@ -1,72 +1,159 @@
-import { useCallback } from "react";
+import {
+	createContext,
+	Fragment,
+	useCallback,
+	useContext,
+	useMemo,
+} from "react";
 import type { View } from "react-native";
 import {
 	type AnimatedRef,
 	measure,
+	runOnJS,
+	runOnUI,
 	type StyleProps,
+	useAnimatedReaction,
 	useSharedValue,
 } from "react-native-reanimated";
+import type { SharedValue } from "react-native-reanimated/lib/typescript/commonTypes";
 import { useKeys } from "../../providers/keys";
 import { Bounds } from "../../stores/bounds";
 import { flattenStyle } from "../../utils/bounds/_utils/flatten-styles";
 import { isBoundsEqual } from "../../utils/bounds/_utils/is-bounds-equal";
+import useStableCallback from "../use-stable-callback";
 
 interface BoundMeasurerHookProps {
-	sharedBoundTag: string;
+	sharedBoundTag?: string;
 	animatedRef: AnimatedRef<View>;
-	current: { route: { key: string } };
+
 	style: StyleProps;
+	onPress?: ((...args: unknown[]) => void) | undefined;
+}
+
+interface MeasurementUpdateContextType {
+	updateSignal: SharedValue<number>;
 }
 
+const MeasurementUpdateContext =
+	createContext<MeasurementUpdateContextType | null>(null);
+
 export const useBoundsRegistry = ({
 	sharedBoundTag,
 	animatedRef,
-	current,
 	style,
+	onPress,
 }: BoundMeasurerHookProps) => {
-	const { previous } = useKeys();
+	const { previous, current } = useKeys();
 
-	const isMeasured = useSharedValue(false);
+	const ROOT_MEASUREMENT_SIGNAL = useContext(MeasurementUpdateContext);
+	const ROOT_SIGNAL = useSharedValue(0);
+	const IS_ROOT = !ROOT_MEASUREMENT_SIGNAL;
+	const hasMeasured = useSharedValue(false);
 
-	const measureBounds = useCallback(() => {
+	const emitUpdate = useCallback(() => {
 		"worklet";
-		if (!sharedBoundTag) return;
-		const measured = measure(animatedRef);
-		if (measured) {
+		if (IS_ROOT) ROOT_SIGNAL.value = ROOT_SIGNAL.value + 1;
+	}, [IS_ROOT, ROOT_SIGNAL]);
+
+	const maybeMeasureAndStore = useCallback(
+		({
+			onPress,
+			skipMarkingActive,
+		}: {
+			onPress?: () => void;
+			skipMarkingActive?: boolean;
+		}) => {
+			"worklet";
+			if (!sharedBoundTag) return;
+
+			const measured = measure(animatedRef);
+
+			if (!measured) {
+				console.warn(
+					`[react-native-screen-transitions] measure() returned null for sharedBoundTag="${sharedBoundTag}"`,
+				);
+				return;
+			}
+
 			const key = current.route.key;
+
 			if (isBoundsEqual({ measured, key, sharedBoundTag })) {
-				if (Bounds.getRouteActive(key) === sharedBoundTag) {
+				emitUpdate();
+				if (!skipMarkingActive) {
 					Bounds.setRouteActive(key, sharedBoundTag);
 				}
+				if (onPress) runOnJS(onPress)();
 				return;
 			}
 
+			emitUpdate();
+
 			Bounds.setBounds(key, sharedBoundTag, measured, flattenStyle(style));
-			if (Bounds.getRouteActive(key) === sharedBoundTag) {
+			if (!skipMarkingActive) {
 				Bounds.setRouteActive(key, sharedBoundTag);
 			}
-		}
-	}, [sharedBoundTag, animatedRef, current.route.key, style]);
 
-	const handleLayout = useCallback(() => {
+			if (onPress) runOnJS(onPress)();
+		},
+		[sharedBoundTag, animatedRef, current.route.key, style, emitUpdate],
+	);
+
+	const handleTransitionLayout = useCallback(() => {
 		"worklet";
-		const previousRouteKey = previous?.route.key;
 
-		if (!sharedBoundTag || isMeasured.value || !previousRouteKey) {
+		const prevKey = previous?.route.key;
+		if (!sharedBoundTag || hasMeasured.value || !prevKey) {
+			return;
+		}
+
+		const prevBounds = Bounds.getBounds(prevKey)?.[sharedBoundTag];
+
+		if (prevBounds) {
+			// Should skip mark active if we are in a transition
+			maybeMeasureAndStore({ skipMarkingActive: true });
+			// Should not measure again while in transition
+			hasMeasured.value = true;
+		}
+	}, [maybeMeasureAndStore, sharedBoundTag, previous?.route.key, hasMeasured]);
+
+	const captureActiveOnPress = useStableCallback(() => {
+		if (!sharedBoundTag) {
+			if (onPress) onPress();
 			return;
 		}
 
-		const previousBounds = Bounds.getBounds(previousRouteKey);
-		const hasPreviousBoundForTag = previousBounds[sharedBoundTag];
+		// In this case, we DO want to mark active
+		runOnUI(maybeMeasureAndStore)({ onPress });
+	});
 
-		if (hasPreviousBoundForTag) {
-			measureBounds();
-			isMeasured.value = true;
+	const MeasurementSyncProvider = useMemo(() => {
+		if (!IS_ROOT || !sharedBoundTag) {
+			return Fragment;
 		}
-	}, [measureBounds, sharedBoundTag, previous?.route.key, isMeasured]);
+
+		return ({ children }: { children: React.ReactNode }) => (
+			<MeasurementUpdateContext.Provider value={{ updateSignal: ROOT_SIGNAL }}>
+				{children}
+			</MeasurementUpdateContext.Provider>
+		);
+	}, [IS_ROOT, sharedBoundTag, ROOT_SIGNAL]);
+
+	useAnimatedReaction(
+		() => ROOT_MEASUREMENT_SIGNAL?.updateSignal.value,
+		(current) => {
+			"worklet";
+
+			// We don't want to run on the initial amount)
+			if (current === 0 || current === undefined) return;
+
+			// Children should not have the ability to mark active
+			maybeMeasureAndStore({ skipMarkingActive: true });
+		},
+	);
 
 	return {
-		measureBounds,
-		handleLayout,
+		handleTransitionLayout,
+		captureActiveOnPress,
+		MeasurementSyncProvider,
 	};
 };

package/src/hooks/gestures/use-build-gestures.tsx

@@ -14,25 +14,27 @@ import {
 	type SharedValue,
 	useSharedValue,
 } from "react-native-reanimated";
+import {
+	DEFAULT_GESTURE_ACTIVATION_AREA,
+	DEFAULT_GESTURE_DIRECTION,
+	DEFAULT_GESTURE_DRIVES_PROGRESS,
+	DEFAULT_GESTURE_ENABLED,
+	GESTURE_VELOCITY_IMPACT,
+} from "../../constants";
 import type { ScrollConfig } from "../../providers/gestures";
 import { useKeys } from "../../providers/keys";
 import { Animations } from "../../stores/animations";
 import { Gestures } from "../../stores/gestures";
 import { NavigatorDismissState } from "../../stores/navigator-dismiss-state";
-import { type ActivationArea, GestureOffsetState } from "../../types/gesture";
-import { animate } from "../../utils/animation/animate";
-import { runTransition } from "../../utils/animation/run-transition";
+import { GestureOffsetState } from "../../types/gesture";
+import { startScreenTransition } from "../../utils/animation/start-screen-transition";
 import { applyOffsetRules } from "../../utils/gesture/check-gesture-activation";
 import { determineDismissal } from "../../utils/gesture/determine-dismissal";
 import { mapGestureToProgress } from "../../utils/gesture/map-gesture-to-progress";
+import { resetGestureValues } from "../../utils/gesture/reset-gesture-values";
+import { velocity } from "../../utils/gesture/velocity";
 import useStableCallback from "../use-stable-callback";
 
-const GESTURE_VELOCITY_IMPACT = 0.3;
-const DEFAULT_GESTURE_DIRECTION = "horizontal";
-const DEFAULT_GESTURE_ENABLED = false;
-const DEFAULT_GESTURE_DRIVES_PROGRESS = true;
-const DEFAULT_GESTURE_ACTIVATION_AREA: ActivationArea = "screen";
-
 interface BuildGesturesHookProps {
 	scrollConfig: SharedValue<ScrollConfig | null>;
 }
@@ -50,6 +52,7 @@ export const useBuildGestures = ({
 		x: 0,
 		y: 0,
 	});
+
 	const gestureOffsetState = useSharedValue<GestureOffsetState>(
 		GestureOffsetState.PENDING,
 	);
@@ -267,7 +270,7 @@ export const useBuildGestures = ({
 		(event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
 			"worklet";
 
-			const { shouldDismiss, velocity } = determineDismissal({
+			const { shouldDismiss } = determineDismissal({
 				event,
 				directions,
 				dimensions,
@@ -276,29 +279,32 @@ export const useBuildGestures = ({
 
 			const spec = shouldDismiss ? transitionSpec?.close : transitionSpec?.open;
 
-			gestures.isDismissing.value = Number(shouldDismiss);
-
-			// Provide per-axis velocities so drag return can bounce naturally
-			const vxPx = event.velocityX;
-			const vyPx = event.velocityY;
-			const vxNorm = vxPx / Math.max(1, dimensions.width);
-			const vyNorm = vyPx / Math.max(1, dimensions.height);
-			gestures.x.value = animate(0, { ...spec, velocity: vxPx });
-			gestures.y.value = animate(0, { ...spec, velocity: vyPx });
-			gestures.normalizedX.value = animate(0, { ...spec, velocity: vxNorm });
-			gestures.normalizedY.value = animate(0, { ...spec, velocity: vyNorm });
-			gestures.isDragging.value = 0;
+			resetGestureValues({
+				spec,
+				gestures,
+				shouldDismiss,
+				event,
+				dimensions,
+			});
 
 			if (shouldDismiss) {
 				runOnJS(setNavigatorDismissal)();
 			}
 
-			runTransition({
+			const initialVelocity = velocity.calculateProgressVelocity({
+				animations,
+				shouldDismiss,
+				event,
+				dimensions,
+				directions,
+			});
+
+			startScreenTransition({
 				target: shouldDismiss ? "close" : "open",
-				onFinish: shouldDismiss ? handleDismiss : undefined,
+				onAnimationFinish: shouldDismiss ? handleDismiss : undefined,
 				spec: transitionSpec,
-				velocity,
 				animations,
+				initialVelocity,
 			});
 		},
 		[

package/src/index.ts

@@ -1,7 +1,7 @@
 import { FlatList, Pressable, ScrollView, View } from "react-native";
+import { presets, specs } from "./__configs__";
 import { createTransitionAwareComponent } from "./components/create-transition-aware-component";
 import MaskedView from "./components/integrations/masked-view";
-import { presets, specs } from "./configs";
 
 export default {
 	View: createTransitionAwareComponent(View),

package/src/integrations/native-stack/utils/debounce.tsx

@@ -1,14 +1,14 @@
 export function debounce<T extends (...args: any[]) => void>(
-  func: T,
-  duration: number
+	func: T,
+	duration: number,
 ): T {
-  let timeout: ReturnType<typeof setTimeout>;
+	let timeout: ReturnType<typeof setTimeout>;
 
-  return function (this: unknown, ...args) {
-    clearTimeout(timeout);
+	return function (this: unknown, ...args) {
+		clearTimeout(timeout);
 
-    timeout = setTimeout(() => {
-      func.apply(this, args);
-    }, duration);
-  } as T;
+		timeout = setTimeout(() => {
+			func.apply(this, args);
+		}, duration);
+	} as T;
 }

package/src/integrations/native-stack/utils/useAnimatedHeaderHeight.tsx

@@ -1,18 +1,18 @@
-import * as React from 'react';
-import type { Animated } from 'react-native';
+import * as React from "react";
+import type { Animated } from "react-native";
 
 export const AnimatedHeaderHeightContext = React.createContext<
-  Animated.AnimatedInterpolation<number> | undefined
+	Animated.AnimatedInterpolation<number> | undefined
 >(undefined);
 
 export function useAnimatedHeaderHeight() {
-  const animatedValue = React.useContext(AnimatedHeaderHeightContext);
+	const animatedValue = React.useContext(AnimatedHeaderHeightContext);
 
-  if (animatedValue === undefined) {
-    throw new Error(
-      "Couldn't find the header height. Are you inside a screen in a native stack navigator?"
-    );
-  }
+	if (animatedValue === undefined) {
+		throw new Error(
+			"Couldn't find the header height. Are you inside a screen in a native stack navigator?",
+		);
+	}
 
-  return animatedValue;
+	return animatedValue;
 }

package/src/integrations/native-stack/utils/useDismissedRouteError.tsx

@@ -1,30 +1,30 @@
 import type {
-  ParamListBase,
-  StackNavigationState,
-} from '@react-navigation/native';
-import * as React from 'react';
+	ParamListBase,
+	StackNavigationState,
+} from "@react-navigation/native";
+import * as React from "react";
 
 export function useDismissedRouteError(
-  state: StackNavigationState<ParamListBase>
+	state: StackNavigationState<ParamListBase>,
 ) {
-  const [nextDismissedKey, setNextDismissedKey] = React.useState<string | null>(
-    null
-  );
+	const [nextDismissedKey, setNextDismissedKey] = React.useState<string | null>(
+		null,
+	);
 
-  const dismissedRouteName = nextDismissedKey
-    ? state.routes.find((route) => route.key === nextDismissedKey)?.name
-    : null;
+	const dismissedRouteName = nextDismissedKey
+		? state.routes.find((route) => route.key === nextDismissedKey)?.name
+		: null;
 
-  React.useEffect(() => {
-    if (dismissedRouteName) {
-      const message =
-        `The screen '${dismissedRouteName}' was removed natively but didn't get removed from JS state. ` +
-        `This can happen if the action was prevented in a 'beforeRemove' listener, which is not fully supported in native-stack.\n\n` +
-        `Consider using a 'usePreventRemove' hook with 'headerBackButtonMenuEnabled: false' to prevent users from natively going back multiple screens.`;
+	React.useEffect(() => {
+		if (dismissedRouteName) {
+			const message =
+				`The screen '${dismissedRouteName}' was removed natively but didn't get removed from JS state. ` +
+				`This can happen if the action was prevented in a 'beforeRemove' listener, which is not fully supported in native-stack.\n\n` +
+				`Consider using a 'usePreventRemove' hook with 'headerBackButtonMenuEnabled: false' to prevent users from natively going back multiple screens.`;
 
-      console.error(message);
-    }
-  }, [dismissedRouteName]);
+			console.error(message);
+		}
+	}, [dismissedRouteName]);
 
-  return { setNextDismissedKey };
+	return { setNextDismissedKey };
 }

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

@@ -1,12 +1,12 @@
 // @ts-expect-error importing private module
-import ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
+import ReactNativeStyleAttributes from "react-native/Libraries/Components/View/ReactNativeStyleAttributes";
 
 export function processFonts(
-  fontFamilies: (string | undefined)[]
+	fontFamilies: (string | undefined)[],
 ): (string | undefined)[] {
-  const fontFamilyProcessor = ReactNativeStyleAttributes.fontFamily?.process;
-  if (typeof fontFamilyProcessor === 'function') {
-    return fontFamilies.map(fontFamilyProcessor);
-  }
-  return fontFamilies;
+	const fontFamilyProcessor = ReactNativeStyleAttributes.fontFamily?.process;
+	if (typeof fontFamilyProcessor === "function") {
+		return fontFamilies.map(fontFamilyProcessor);
+	}
+	return fontFamilies;
 }

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

@@ -1,5 +1,5 @@
 export function processFonts(
-  _: (string | undefined)[]
+	_: (string | undefined)[],
 ): (string | undefined)[] {
-  throw new Error('Not supported on Web');
+	throw new Error("Not supported on Web");
 }

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

@@ -32,7 +32,7 @@ import {
 	ScreenStack,
 	ScreenStackItem,
 } from "react-native-screens";
-import { ScreenTransitionTree } from "../../../components/screen-transition-tree";
+import { ScreenTransitionProvider } from "../../../providers/screen-transition-provider";
 import type {
 	NativeStackDescriptor,
 	NativeStackDescriptorMap,
@@ -267,12 +267,12 @@ const SceneView = ({
 	}, [canGoBack, backTitle]);
 
 	const isRemovePrevented = preventedRoutes[route.key]?.preventRemove;
+
 	const modifiedPresentation = enableTransitions
 		? "containedTransparentModal"
 		: presentation === "card"
 			? "push"
 			: presentation;
-
 	const modifiedAnimation = enableTransitions ? "none" : animation;
 	const modifiedHeaderShown =
 		enableTransitions || header !== undefined ? false : headerShown;
@@ -465,13 +465,13 @@ const SceneView = ({
 								value={isParentHeaderShown || headerShown !== false}
 							>
 								<HeaderBackContext.Provider value={headerBack}>
-									<ScreenTransitionTree
+									<ScreenTransitionProvider
 										previous={previousDescriptor}
 										current={descriptor}
 										next={nextDescriptor}
 									>
 										{render()}
-									</ScreenTransitionTree>
+									</ScreenTransitionProvider>
 								</HeaderBackContext.Provider>
 							</HeaderShownContext.Provider>
 						</HeaderHeightContext.Provider>

package/src/providers/gestures.tsx

@@ -26,15 +26,6 @@ type ScreenGestureProviderProps = {
 	children: React.ReactNode;
 };
 
-export const DEFAULT_SCROLL_CONFIG: ScrollConfig = {
-	x: 0,
-	y: 0,
-	contentHeight: 0,
-	contentWidth: 0,
-	layoutHeight: 0,
-	layoutWidth: 0,
-};
-
 const GestureContext = createContext<GestureContextType | undefined>(undefined);
 
 export const ScreenGestureProvider = ({

package/src/{components/screen-transition-tree.tsx → providers/screen-transition-provider.tsx}

@@ -1,10 +1,10 @@
 import type React from "react";
+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 type { NativeStackDescriptor } from "../types/navigator";
-import { ScreenLifecycleController } from "./controllers/screen-lifecycle";
-import { RootTransitionAware } from "./root-transition-aware";
 
 type Props = {
 	previous?: NativeStackDescriptor;
@@ -13,7 +13,7 @@ type Props = {
 	children: React.ReactNode;
 };
 
-export function ScreenTransitionTree({
+export function ScreenTransitionProvider({
 	previous,
 	current,
 	next,

package/src/providers/transition-styles.tsx

@@ -1,5 +1,6 @@
 import { createContext, useContext, useMemo } from "react";
 import { isWorkletFunction, useDerivedValue } from "react-native-reanimated";
+import { NO_STYLES } from "../constants";
 import { _useScreenAnimation } from "../hooks/animation/use-screen-animation";
 import type { TransitionInterpolatedStyle } from "../types/animation";
 
@@ -7,8 +8,6 @@ type Props = {
 	children: React.ReactNode;
 };
 
-const EMPTY_MAP = Object.freeze({});
-
 const TransitionStylesContext = createContext<ReturnType<
 	typeof useMemo<{
 		stylesMap: ReturnType<typeof useDerivedValue<TransitionInterpolatedStyle>>;
@@ -25,13 +24,15 @@ export function TransitionStylesProvider({ children }: Props) {
 		"worklet";
 
 		if (screenStyleInterpolator && !isFunctionWorklet && __DEV__) {
-			console.warn("screenStyleInterpolator is not a worklet function");
-			return EMPTY_MAP;
+			console.warn(
+				`[react-native-screen-transitions] screenStyleInterpolator is not a worklet function`,
+			);
+			return NO_STYLES;
 		}
 
 		return screenStyleInterpolator
 			? screenStyleInterpolator(screenInterpolatorProps.value)
-			: EMPTY_MAP;
+			: NO_STYLES;
 	});
 
 	const value = useMemo(() => {

package/src/types/core.ts

@@ -42,15 +42,6 @@ export type TransitionAwareProps<T extends object> = AnimatedProps<T> & {
 	 * </Transition.View>
 	 */
 	sharedBoundTag?: string;
-
-	/**
-	 * Eagerly measure this component on layout and store the result in the
-	 * Bounds registry. Useful for nested shared elements that may not receive
-	 * the press event but still need up-to-date measurements at navigation time.
-	 *
-	 * Only has an effect when used together with `sharedBoundTag`.
-	 */
-	measureOnLayout?: boolean;
 };
 
 export type TransitionConfig = {

package/src/utils/animation/start-screen-transition.ts

@@ -0,0 +1,61 @@
+import { runOnJS } from "react-native-reanimated";
+import type { AnimationMap } from "../../stores/animations";
+import type { TransitionSpec } from "../../types/animation";
+import { animate } from "./animate";
+
+interface StartScreenTransitionProps {
+	target: "open" | "close";
+	spec?: TransitionSpec;
+	onAnimationFinish?: (finished: boolean) => void;
+	animations: AnimationMap;
+	/** Optional initial velocity for spring-based progress (units: progress/sec). */
+	initialVelocity?: number;
+}
+
+export const startScreenTransition = ({
+	target,
+	spec,
+	onAnimationFinish,
+	animations,
+	initialVelocity,
+}: StartScreenTransitionProps) => {
+	"worklet";
+	const value = target === "open" ? 1 : 0;
+	const config = target === "open" ? spec?.open : spec?.close;
+
+	const isSpringConfig =
+		!!config && !("duration" in config) && !("easing" in config);
+
+	const effectiveConfig =
+		isSpringConfig && typeof initialVelocity === "number"
+			? { ...config, velocity: initialVelocity }
+			: config;
+
+	const { progress, animating, closing } = animations;
+
+	if (target === "close") {
+		closing.value = 1;
+	}
+
+	if (!config) {
+		animating.value = 0;
+		progress.value = value;
+
+		if (onAnimationFinish) {
+			runOnJS(onAnimationFinish)(true);
+		}
+		return;
+	}
+
+	animating.value = 1;
+
+	progress.value = animate(value, effectiveConfig, (finished) => {
+		"worklet";
+		if (finished) {
+			if (onAnimationFinish) {
+				runOnJS(onAnimationFinish)(finished);
+			}
+			animating.value = 0;
+		}
+	});
+};

package/src/utils/bounds/_types/get-bounds.ts

@@ -1,10 +1,10 @@
-import type { ScreenPhase } from '../../../types/core';
-import type { ScreenTransitionState } from '../../../types/animation';
+import type { ScreenTransitionState } from "../../../types/animation";
+import type { ScreenPhase } from "../../../types/core";
 
 export type GetBoundsParams = {
-  id: string | null;
-  phase?: ScreenPhase;
-  previous?: ScreenTransitionState;
-  current: ScreenTransitionState;
-  next?: ScreenTransitionState;
+	id: string | null;
+	phase?: ScreenPhase;
+	previous?: ScreenTransitionState;
+	current: ScreenTransitionState;
+	next?: ScreenTransitionState;
 };