react-native-screen-transitions 3.3.0 → 3.4.0-alpha.1

package/src/shared/{hooks/gestures/use-build-gestures.tsx → providers/gestures/use-build-gestures.ts}

@@ -1,26 +1,25 @@
-import { StackActions } from "@react-navigation/native";
 import { useCallback, useMemo, useRef } from "react";
 import { Gesture, type GestureType } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
-import type {
-	DirectionClaimMap,
-	GestureContextType,
-	ScrollConfig,
-} from "../../providers/gestures.provider";
-import { useKeys } from "../../providers/screen/keys.provider";
+import { useNavigationHelpers } from "../../hooks/navigation/use-navigation-helpers";
 import { GestureStore, type GestureStoreMap } from "../../stores/gesture.store";
-import type { ClaimedDirections, Direction } from "../../types/ownership.types";
+import {
+	type ClaimedDirections,
+	DIRECTIONS,
+} from "../../types/ownership.types";
 import { claimsAnyDirection } from "../../utils/gesture/compute-claimed-directions";
 import { resolveOwnership } from "../../utils/gesture/resolve-ownership";
 import { validateSnapPoints } from "../../utils/gesture/validate-snap-points";
-import { useScreenGestureHandlers } from "./use-screen-gesture-handlers";
-
-const DIRECTIONS: Direction[] = [
-	"vertical",
-	"vertical-inverted",
-	"horizontal",
-	"horizontal-inverted",
-];
+import {
+	useDescriptorDerivations,
+	useDescriptors,
+} from "../screen/descriptors";
+import { useHandlers } from "./handlers/use-handlers";
+import type {
+	DirectionClaimMap,
+	GestureContextType,
+	ScrollConfig,
+} from "./types";
 
 /**
  * Finds ancestor pan gestures that we shadow (claim the same direction).
@@ -79,27 +78,24 @@ export const useBuildGestures = ({
 	panGestureRef: React.MutableRefObject<GestureType | undefined>;
 	gestureAnimationValues: GestureStoreMap;
 } => {
-	const { current } = useKeys();
-	const navState = current.navigation.getState();
-
-	const isFirstScreen = useMemo(() => {
-		return navState.routes.findIndex((r) => r.key === current.route.key) === 0;
-	}, [navState.routes, current.route.key]);
+	const { current } = useDescriptors();
+	const { isFirstKey } = useDescriptorDerivations();
+	const { dismissScreen } = useNavigationHelpers();
 
 	const panGestureRef = useRef<GestureType | undefined>(undefined);
 	const gestureAnimationValues = GestureStore.getRouteGestures(
 		current.route.key,
 	);
 
-	const { snapPoints } = current.options;
+	const { snapPoints: rawSnapPoints } = current.options;
 	const canDismiss = Boolean(
-		isFirstScreen ? false : current.options.gestureEnabled,
+		isFirstKey ? false : current.options.gestureEnabled,
 	);
-	const { hasSnapPoints } = useMemo(
-		() => validateSnapPoints({ snapPoints, canDismiss }),
-		[snapPoints, canDismiss],
+	const effectiveSnapPoints = useMemo(
+		() => validateSnapPoints({ snapPoints: rawSnapPoints, canDismiss }),
+		[rawSnapPoints, canDismiss],
 	);
-	const gestureEnabled = canDismiss || hasSnapPoints;
+	const gestureEnabled = canDismiss || effectiveSnapPoints.hasSnapPoints;
 
 	const ownershipStatus = useMemo(
 		() => resolveOwnership(claimedDirections, ancestorContext ?? null),
@@ -109,32 +105,21 @@ export const useBuildGestures = ({
 	const selfClaimsAny = claimsAnyDirection(claimedDirections);
 
 	const handleDismiss = useCallback(() => {
-		if (ancestorContext?.gestureAnimationValues.isDismissing?.value) return;
-
-		const state = current.navigation.getState();
-		const routeStillPresent = state.routes.some(
-			(route) => route.key === current.route.key,
-		);
-		if (!routeStillPresent) return;
-
-		current.navigation.dispatch({
-			...StackActions.pop(),
-			source: current.route.key,
-			target: state.key,
-		});
-	}, [current, ancestorContext]);
+		if (ancestorContext?.gestureAnimationValues.dismissing?.value) return;
+		dismissScreen();
+	}, [ancestorContext, dismissScreen]);
 
 	const { onTouchesDown, onTouchesMove, onStart, onUpdate, onEnd } =
-		useScreenGestureHandlers({
+		useHandlers({
 			scrollConfig,
 			canDismiss,
 			handleDismiss,
 			ownershipStatus,
-			ancestorIsDismissing:
-				ancestorContext?.gestureAnimationValues.isDismissing,
+			ancestorIsDismissing: ancestorContext?.gestureAnimationValues.dismissing,
 			claimedDirections,
 			ancestorContext,
 			childDirectionClaims,
+			effectiveSnapPoints,
 		});
 
 	return useMemo(() => {

package/src/shared/providers/layout-anchor.provider.tsx

@@ -1,11 +1,12 @@
 import { type ReactNode, useCallback, useMemo } from "react";
-import { useWindowDimensions, type View } from "react-native";
+import type { View } from "react-native";
 import {
 	type AnimatedRef,
 	type MeasuredDimensions,
 	measure,
 } from "react-native-reanimated";
 import createProvider from "../utils/create-provider";
+import { useViewportContext } from "./viewport.provider";
 
 interface LayoutAnchorProviderProps {
 	anchorRef: AnimatedRef<View>;
@@ -20,6 +21,11 @@ interface LayoutAnchorContextValue {
 	 * the true layout position and dimensions.
 	 */
 	correctMeasurement: (measured: MeasuredDimensions) => MeasuredDimensions;
+	/**
+	 * Returns true when the corrected measurement is plausibly inside viewport space.
+	 * This helps reject transient off-page measurements from paged containers.
+	 */
+	isMeasurementInViewport: (measured: MeasuredDimensions) => boolean;
 }
 
 /**
@@ -42,7 +48,9 @@ const { LayoutAnchorProvider, useLayoutAnchorContext } = createProvider(
 	{ guarded: false },
 )<LayoutAnchorProviderProps, LayoutAnchorContextValue>(
 	({ anchorRef, children }) => {
-		const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+		const {
+			dimensions: { width: screenWidth, height: screenHeight },
+		} = useViewportContext();
 
 		const correctMeasurement = useCallback(
 			(measured: MeasuredDimensions): MeasuredDimensions => {
@@ -72,7 +80,30 @@ const { LayoutAnchorProvider, useLayoutAnchorContext } = createProvider(
 			[anchorRef, screenWidth, screenHeight],
 		);
 
-		const value = useMemo(() => ({ correctMeasurement }), [correctMeasurement]);
+		const isMeasurementInViewport = useCallback(
+			(measured: MeasuredDimensions): boolean => {
+				"worklet";
+				if (measured.width <= 0 || measured.height <= 0) return false;
+
+				const toleranceX = screenWidth * 0.15;
+				const toleranceY = screenHeight * 0.15;
+				const centerX = measured.pageX + measured.width / 2;
+				const centerY = measured.pageY + measured.height / 2;
+
+				return (
+					centerX >= -toleranceX &&
+					centerX <= screenWidth + toleranceX &&
+					centerY >= -toleranceY &&
+					centerY <= screenHeight + toleranceY
+				);
+			},
+			[screenWidth, screenHeight],
+		);
+
+		const value = useMemo(
+			() => ({ correctMeasurement, isMeasurementInViewport }),
+			[correctMeasurement, isMeasurementInViewport],
+		);
 
 		return {
 			value,

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

@@ -14,11 +14,12 @@ import type { SharedValue } from "react-native-reanimated/lib/typescript/commonT
 import useStableCallback from "../hooks/use-stable-callback";
 import useStableCallbackValue from "../hooks/use-stable-callback-value";
 import { AnimationStore } from "../stores/animation.store";
-import { BoundStore } from "../stores/bounds.store";
+import { BoundStore } from "../stores/bounds";
+import { applyMeasuredBoundsWrites } from "../stores/bounds/helpers/apply-measured-bounds-writes";
 import { prepareStyleForBounds } from "../utils/bounds/helpers/styles";
 import createProvider from "../utils/create-provider";
 import { useLayoutAnchorContext } from "./layout-anchor.provider";
-import { type BaseDescriptor, useKeys } from "./screen/keys.provider";
+import { useDescriptorDerivations, useDescriptors } from "./screen/descriptors";
 
 interface MaybeMeasureAndStoreParams {
 	onPress?: ((...args: unknown[]) => void) | undefined;
@@ -45,34 +46,24 @@ interface RegisterBoundsContextValue {
 	updateSignal: SharedValue<number>;
 }
 
-/**
- * Builds the full ancestor key chain for nested navigators.
- * Returns an array of screen keys from immediate parent to root.
- * [parentKey, grandparentKey, greatGrandparentKey, ...]
- */
-const getAncestorKeys = (current: BaseDescriptor): string[] => {
-	const ancestors: string[] = [];
-	const nav = current.navigation as any;
-
-	// Safety check for navigators without getParent
-	if (typeof nav?.getParent !== "function") {
-		return ancestors;
-	}
-
-	let parent = nav.getParent();
-
-	while (parent) {
-		const state = parent.getState();
-		if (state?.routes && state.index !== undefined) {
-			const focusedRoute = state.routes[state.index];
-			if (focusedRoute?.key) {
-				ancestors.push(focusedRoute.key);
-			}
-		}
-		parent = parent.getParent();
-	}
+const getRouteParamId = (
+	route: { params?: object } | undefined,
+): string | null => {
+	const params = route?.params as Record<string, unknown> | undefined;
+	const rawId = params?.id;
+	return typeof rawId === "string" ? rawId : null;
+};
 
-	return ancestors;
+const matchesSelectionTag = (
+	tag: string | undefined,
+	selectedId: string | null,
+): boolean => {
+	"worklet";
+	if (!tag || !selectedId) return false;
+	if (tag === selectedId) return true;
+	if (tag.endsWith(`:${selectedId}`)) return true;
+	if (tag.endsWith(`-${selectedId}`)) return true;
+	return false;
 };
 
 /**
@@ -92,14 +83,14 @@ const useInitialLayoutHandler = (params: {
 		maybeMeasureAndStore,
 	} = params;
 
-	const isAnimating = AnimationStore.getAnimation(
+	const isAnimating = AnimationStore.getRouteAnimation(
 		currentScreenKey,
 		"animating",
 	);
 
 	// Check if any ancestor is animating
 	const ancestorAnimations = ancestorKeys.map((key) =>
-		AnimationStore.getAnimation(key, "animating"),
+		AnimationStore.getRouteAnimation(key, "animating"),
 	);
 
 	const hasMeasuredOnLayout = useSharedValue(false);
@@ -139,20 +130,30 @@ const useInitialLayoutHandler = (params: {
  * Captures bounds right before transition starts.
  */
 const useBlurMeasurement = (params: {
+	enabled: boolean;
 	sharedBoundTag?: string;
+	selectedRouteId: string | null;
 	ancestorKeys: string[];
 	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
 }) => {
-	const { current } = useKeys();
-	const { sharedBoundTag, ancestorKeys, maybeMeasureAndStore } = params;
+	const { current } = useDescriptors();
+	const {
+		enabled,
+		sharedBoundTag,
+		selectedRouteId,
+		ancestorKeys,
+		maybeMeasureAndStore,
+	} = params;
 	const hasCapturedSource = useRef(false);
 
 	const ancestorClosing = [current.route.key, ...ancestorKeys].map((key) =>
-		AnimationStore.getAnimation(key, "closing"),
+		AnimationStore.getRouteAnimation(key, "closing"),
 	);
 
 	const maybeMeasureOnBlur = useStableCallbackValue(() => {
 		"worklet";
+		if (!enabled) return;
+		if (!matchesSelectionTag(sharedBoundTag, selectedRouteId)) return;
 
 		//.some doesnt work here apparently... :-(
 		for (const closing of ancestorClosing) {
@@ -166,11 +167,15 @@ const useBlurMeasurement = (params: {
 		useCallback(() => {
 			hasCapturedSource.current = false;
 
+			if (!enabled) {
+				return;
+			}
+
 			return () => {
 				if (!sharedBoundTag || hasCapturedSource.current) return;
 				runOnUI(maybeMeasureOnBlur)();
 			};
-		}, [sharedBoundTag, maybeMeasureOnBlur]),
+		}, [enabled, sharedBoundTag, maybeMeasureOnBlur]),
 	);
 
 	return {
@@ -199,10 +204,38 @@ const useParentSyncReaction = (params: {
 	);
 };
 
-const { RegisterBoundsProvider, useRegisterBoundsContext } = createProvider(
-	"RegisterBounds",
-	{ guarded: false },
-)<RegisterBoundsProviderProps, RegisterBoundsContextValue>(
+const CloseRemeasureReactionEffect = (params: {
+	sharedBoundTag: string;
+	remeasureOnFocus: boolean;
+	nextClosing: ReturnType<typeof AnimationStore.getRouteAnimation>;
+	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
+}) => {
+	const {
+		sharedBoundTag,
+		remeasureOnFocus,
+		nextClosing,
+		maybeMeasureAndStore,
+	} = params;
+
+	useAnimatedReaction(
+		() => nextClosing.get(),
+		(closing, prevClosing) => {
+			"worklet";
+			if (closing === 1 && (prevClosing === 0 || prevClosing === null)) {
+				maybeMeasureAndStore({ shouldUpdateSource: true });
+			}
+		},
+		[sharedBoundTag, remeasureOnFocus, nextClosing],
+	);
+
+	return null;
+};
+
+let useRegisterBoundsContext: () => RegisterBoundsContextValue | null;
+
+const registerBoundsBundle = createProvider("RegisterBounds", {
+	guarded: false,
+})<RegisterBoundsProviderProps, RegisterBoundsContextValue>(
 	({
 		style,
 		onPress,
@@ -211,20 +244,21 @@ const { RegisterBoundsProvider, useRegisterBoundsContext } = createProvider(
 		remeasureOnFocus,
 		children,
 	}) => {
-		const { current, next } = useKeys();
+		const { current, next } = useDescriptors();
+		const { ancestorKeys, navigatorKey, ancestorNavigatorKeys } =
+			useDescriptorDerivations();
 		const currentScreenKey = current.route.key;
-		const ancestorKeys = useMemo(() => getAncestorKeys(current), [current]);
+		const selectedNextRouteId = getRouteParamId(next?.route);
 		const layoutAnchor = useLayoutAnchorContext();
 
 		// Context & signals
-		const parentContext: RegisterBoundsContextValue | null =
-			useRegisterBoundsContext();
+		const parentContext = useRegisterBoundsContext();
 
 		const ownSignal = useSharedValue(0);
 		const updateSignal: SharedValue<number> =
 			parentContext?.updateSignal ?? ownSignal;
 
-		const isAnimating = AnimationStore.getAnimation(
+		const isAnimating = AnimationStore.getRouteAnimation(
 			currentScreenKey,
 			"animating",
 		);
@@ -244,74 +278,91 @@ const { RegisterBoundsProvider, useRegisterBoundsContext } = createProvider(
 				shouldUpdateSource,
 			}: MaybeMeasureAndStoreParams = {}) => {
 				"worklet";
-				if (!sharedBoundTag) return;
+				if (!sharedBoundTag) {
+					if (onPress) runOnJS(onPress)();
+					return;
+				}
+
+				if (shouldSetSource && isAnimating.get()) {
+					const existing = BoundStore.getSnapshot(
+						sharedBoundTag,
+						currentScreenKey,
+					);
+					if (existing) {
+						applyMeasuredBoundsWrites({
+							sharedBoundTag,
+							ancestorKeys,
+							navigatorKey,
+							ancestorNavigatorKeys,
+							currentScreenKey,
+							measured: existing.bounds,
+							preparedStyles,
+							shouldSetSource: true,
+						});
+					}
+
+					if (onPress) runOnJS(onPress)();
+					return;
+				}
+
+				const hasPendingLink = BoundStore.hasPendingLink(sharedBoundTag);
+				const hasSourceLink = BoundStore.hasSourceLink(
+					sharedBoundTag,
+					currentScreenKey,
+				);
+				const hasDestinationLink = BoundStore.hasDestinationLink(
+					sharedBoundTag,
+					currentScreenKey,
+				);
+
+				const wantsSetSource = !!shouldSetSource;
+				const wantsSetDestination = !!shouldSetDestination;
+				const wantsUpdateSource = !!shouldUpdateSource;
+				const wantsSnapshotOnly =
+					!wantsSetSource && !wantsSetDestination && !wantsUpdateSource;
+
+				const canSetSource = wantsSetSource;
+				const canSetDestination = wantsSetDestination && hasPendingLink;
+				const canUpdateSource = wantsUpdateSource && hasSourceLink;
+				const canSnapshotOnly =
+					wantsSnapshotOnly &&
+					(hasPendingLink || hasSourceLink || hasDestinationLink);
+
+				if (
+					!canSetSource &&
+					!canSetDestination &&
+					!canUpdateSource &&
+					!canSnapshotOnly
+				) {
+					if (onPress) runOnJS(onPress)();
+					return;
+				}
 
 				const measured = measure(animatedRef);
-				if (!measured) return;
+				if (!measured) {
+					if (onPress) runOnJS(onPress)();
+					return;
+				}
 
-				// Correct for parent transforms (e.g., when parent screen is animating)
 				const correctedMeasured = layoutAnchor
 					? layoutAnchor.correctMeasurement(measured)
 					: measured;
 
 				emitUpdate();
 
-				BoundStore.registerSnapshot(
+				applyMeasuredBoundsWrites({
 					sharedBoundTag,
 					currentScreenKey,
-					correctedMeasured,
+					measured: correctedMeasured,
 					preparedStyles,
 					ancestorKeys,
-				);
-
-				if (shouldSetSource) {
-					if (isAnimating.get()) {
-						// If animation is already in progress,
-						// lets use the existing measuremenets.
-						const existing = BoundStore.getSnapshot(
-							sharedBoundTag,
-							currentScreenKey,
-						);
-						if (existing) {
-							BoundStore.setLinkSource(
-								sharedBoundTag,
-								currentScreenKey,
-								existing.bounds,
-								preparedStyles,
-								ancestorKeys,
-							);
-						}
-						return;
-					}
-					BoundStore.setLinkSource(
-						sharedBoundTag,
-						currentScreenKey,
-						correctedMeasured,
-						preparedStyles,
-						ancestorKeys,
-					);
-				}
-
-				if (shouldUpdateSource) {
-					BoundStore.updateLinkSource(
-						sharedBoundTag,
-						currentScreenKey,
-						correctedMeasured,
-						preparedStyles,
-						ancestorKeys,
-					);
-				}
-
-				// Set as destination (on mount during animation)
-				if (shouldSetDestination) {
-					BoundStore.setLinkDestination(
-						sharedBoundTag,
-						currentScreenKey,
-						correctedMeasured,
-						preparedStyles,
-						ancestorKeys,
-					);
-				}
+					navigatorKey,
+					ancestorNavigatorKeys,
+					shouldRegisterSnapshot: true,
+					shouldSetSource: canSetSource,
+					shouldUpdateSource: canUpdateSource,
+					shouldSetDestination: canSetDestination,
+				});
 
 				if (onPress) runOnJS(onPress)();
 			},
@@ -326,7 +377,9 @@ const { RegisterBoundsProvider, useRegisterBoundsContext } = createProvider(
 
 		// Side effects
 		const { markSourceCaptured } = useBlurMeasurement({
+			enabled: !onPress,
 			sharedBoundTag,
+			selectedRouteId: selectedNextRouteId,
 			maybeMeasureAndStore,
 			ancestorKeys,
 		});
@@ -337,21 +390,9 @@ const { RegisterBoundsProvider, useRegisterBoundsContext } = createProvider(
 		// from state).
 		const nextScreenKey = next?.route.key;
 		const nextClosing = nextScreenKey
-			? AnimationStore.getAnimation(nextScreenKey, "closing")
+			? AnimationStore.getRouteAnimation(nextScreenKey, "closing")
 			: null;
 
-		useAnimatedReaction(
-			() => nextClosing?.get() ?? 0,
-			(closing, prevClosing) => {
-				"worklet";
-				if (!sharedBoundTag || !remeasureOnFocus) return;
-				if (closing === 1 && (prevClosing === 0 || prevClosing === null)) {
-					maybeMeasureAndStore({ shouldUpdateSource: true });
-				}
-			},
-			[sharedBoundTag, remeasureOnFocus, nextClosing],
-		);
-
 		useParentSyncReaction({ parentContext, maybeMeasureAndStore });
 
 		const captureActiveOnPress = useStableCallback(() => {
@@ -365,9 +406,24 @@ const { RegisterBoundsProvider, useRegisterBoundsContext } = createProvider(
 
 		return {
 			value: { updateSignal },
-			children: children({ handleInitialLayout, captureActiveOnPress }),
+			children: (
+				<>
+					{sharedBoundTag && remeasureOnFocus && nextClosing ? (
+						<CloseRemeasureReactionEffect
+							sharedBoundTag={sharedBoundTag}
+							remeasureOnFocus={remeasureOnFocus}
+							nextClosing={nextClosing}
+							maybeMeasureAndStore={maybeMeasureAndStore}
+						/>
+					) : null}
+					{children({ handleInitialLayout, captureActiveOnPress })}
+				</>
+			),
 		};
 	},
 );
 
+const RegisterBoundsProvider = registerBoundsBundle.RegisterBoundsProvider;
+useRegisterBoundsContext = registerBoundsBundle.useRegisterBoundsContext;
+
 export { RegisterBoundsProvider };

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

@@ -0,0 +1,93 @@
+import { createContext, type ReactNode, useContext, useMemo } from "react";
+import { type DerivedValue, useDerivedValue } from "react-native-reanimated";
+import type { ScreenInterpolationProps } from "../../../types/animation.types";
+import { useScreenAnimationPipeline } from "./helpers/pipeline";
+
+type Props = {
+	children: ReactNode;
+};
+
+export type ScreenAnimationContextValue = ReturnType<
+	typeof useScreenAnimationPipeline
+> & {
+	screenAnimation: DerivedValue<ScreenInterpolationProps>;
+	ancestorScreenAnimations: DerivedValue<ScreenInterpolationProps>[];
+};
+
+const ScreenAnimationContext =
+	createContext<ScreenAnimationContextValue | null>(null);
+ScreenAnimationContext.displayName = "ScreenAnimation";
+
+function ScreenAnimationProvider({ children }: Props) {
+	const parentContext = useContext(ScreenAnimationContext);
+
+	const {
+		screenInterpolatorProps,
+		nextInterpolator,
+		currentInterpolator,
+		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,
+		}),
+		[
+			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,
+};