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

package/src/blank-stack/components/stack-view.tsx

@@ -1,48 +1,31 @@
-import {
-	NavigationContext,
-	NavigationRouteContext,
-} from "@react-navigation/native";
-import * as React from "react";
 import { Fragment } from "react";
 import { NativeScreen } from "../../shared/components/native-screen";
 import { NativeScreenContainer } from "../../shared/components/native-screen-container";
 import { Overlay } from "../../shared/components/overlay";
+import { SceneView } from "../../shared/components/scene-view";
 import { ScreenComposer } from "../../shared/providers/screen/screen-composer";
 import { withStackCore } from "../../shared/providers/stack/core.provider";
 import { withManagedStack } from "../../shared/providers/stack/managed.provider";
-import { isScreenOverlayVisible } from "../../shared/utils/overlay/visibility";
+import { resolveSceneNeighbors } from "../../shared/utils/navigation/resolve-scene-neighbors";
+import { isFabric } from "../../shared/utils/platform";
 import type {
 	BlankStackDescriptor,
 	BlankStackNavigationHelpers,
 } from "../types";
 
-function isFabric() {
-	return "nativeFabricUIManager" in global;
-}
-
-type SceneViewProps = {
-	descriptor: BlankStackDescriptor;
-};
-
-const SceneView = React.memo(function SceneView({
-	descriptor,
-}: SceneViewProps) {
-	const { route, navigation, render } = descriptor;
-
-	return (
-		<NavigationContext.Provider value={navigation}>
-			<NavigationRouteContext.Provider value={route}>
-				{isScreenOverlayVisible(descriptor.options) && <Overlay.Screen />}
-				{render()}
-			</NavigationRouteContext.Provider>
-		</NavigationContext.Provider>
-	);
-});
-
 export const StackView = withStackCore(
 	{ TRANSITIONS_ALWAYS_ON: true, DISABLE_NATIVE_SCREENS: true },
 	withManagedStack<BlankStackDescriptor, BlankStackNavigationHelpers>(
-		({ descriptors, focusedIndex, scenes, shouldShowFloatOverlay }) => {
+		({
+			descriptors,
+			focusedIndex,
+			scenes,
+			shouldShowFloatOverlay,
+			closingRouteMap,
+		}) => {
+			const isRouteClosing = (routeKey: string) =>
+				Boolean(closingRouteMap.current[routeKey]);
+
 			return (
 				<Fragment>
 					{shouldShowFloatOverlay ? <Overlay.Float /> : null}
@@ -54,10 +37,8 @@ export const StackView = withStackCore(
 							const isFocused = focusedIndex === sceneIndex;
 							const isBelowFocused = focusedIndex - 1 === sceneIndex;
 
-							const previousDescriptor =
-								scenes[sceneIndex - 1]?.descriptor ?? undefined;
-							const nextDescriptor =
-								scenes[sceneIndex + 1]?.descriptor ?? undefined;
+							const { previousDescriptor, nextDescriptor } =
+								resolveSceneNeighbors(scenes, sceneIndex, isRouteClosing);
 
 							const isPreloaded = descriptors[route.key] === undefined;
 

package/src/blank-stack/navigators/create-blank-stack-navigator.tsx

@@ -1,10 +1,8 @@
 import {
 	createNavigatorFactory,
-	type EventArg,
 	type NavigatorTypeBagBase,
 	type ParamListBase,
 	type StackActionHelpers,
-	StackActions,
 	type StackNavigationState,
 	StackRouter,
 	type StackRouterOptions,
@@ -12,7 +10,7 @@ import {
 	type TypedNavigator,
 	useNavigationBuilder,
 } from "@react-navigation/native";
-import * as React from "react";
+import { useTabPressReset } from "../../shared/hooks/navigation/use-tab-press-reset";
 import { StackView } from "../components/stack-view";
 import type {
 	BlankStackNavigationEventMap,
@@ -48,31 +46,7 @@ function BlankStackNavigator({
 			screenLayout,
 		});
 
-	React.useEffect(
-		() =>
-			// @ts-expect-error: there may not be a tab navigator in parent
-			navigation?.addListener?.("tabPress", (e: any) => {
-				const isFocused = navigation.isFocused();
-
-				// Run the operation in the next frame so we're sure all listeners have been run
-				// This is necessary to know if preventDefault() has been called
-				requestAnimationFrame(() => {
-					if (
-						state.index > 0 &&
-						isFocused &&
-						!(e as EventArg<"tabPress", true>).defaultPrevented
-					) {
-						// When user taps on already focused tab and we're inside the tab,
-						// reset the stack to replicate native behaviour
-						navigation.dispatch({
-							...StackActions.popToTop(),
-							target: state.key,
-						});
-					}
-				});
-			}),
-		[navigation, state.index, state.key],
-	);
+	useTabPressReset(navigation, state.index, state.key);
 
 	return (
 		<NavigationContent>

package/src/component-stack/components/component-screen.tsx

@@ -15,7 +15,7 @@ const POINT_NONE = "none" as const;
 const POINT_BOX_NONE = "box-none" as const;
 
 export const ComponentScreen = ({ routeKey, children }: ScreenProps) => {
-	const sceneClosing = AnimationStore.getAnimation(routeKey, "closing");
+	const sceneClosing = AnimationStore.getRouteAnimation(routeKey, "closing");
 	const screenRef = useAnimatedRef<View>();
 
 	const animatedProps = useAnimatedProps(() => {

package/src/component-stack/components/stack-view.tsx

@@ -1,44 +1,24 @@
-import {
-	NavigationContext,
-	NavigationRouteContext,
-} from "@react-navigation/native";
-import * as React from "react";
 import { Fragment } from "react";
 import { Overlay } from "../../shared/components/overlay";
+import { SceneView } from "../../shared/components/scene-view";
 import { ScreenComposer } from "../../shared/providers/screen/screen-composer";
 import { withStackCore } from "../../shared/providers/stack/core.provider";
 import { withManagedStack } from "../../shared/providers/stack/managed.provider";
 import { StackType } from "../../shared/types/stack.types";
-import { isScreenOverlayVisible } from "../../shared/utils/overlay/visibility";
+import { resolveSceneNeighbors } from "../../shared/utils/navigation/resolve-scene-neighbors";
 import type {
 	ComponentStackDescriptor,
 	ComponentStackNavigationHelpers,
 } from "../types";
 import { ComponentScreen } from "./component-screen";
 
-type SceneViewProps = {
-	descriptor: ComponentStackDescriptor;
-};
-
-const SceneView = React.memo(function SceneView({
-	descriptor,
-}: SceneViewProps) {
-	const { route, navigation, render } = descriptor;
-
-	return (
-		<NavigationContext.Provider value={navigation}>
-			<NavigationRouteContext.Provider value={route}>
-				{isScreenOverlayVisible(descriptor.options) && <Overlay.Screen />}
-				{render()}
-			</NavigationRouteContext.Provider>
-		</NavigationContext.Provider>
-	);
-});
-
 export const StackView = withStackCore(
 	{ TRANSITIONS_ALWAYS_ON: true, STACK_TYPE: StackType.COMPONENT },
 	withManagedStack<ComponentStackDescriptor, ComponentStackNavigationHelpers>(
-		({ scenes, shouldShowFloatOverlay }) => {
+		({ scenes, shouldShowFloatOverlay, closingRouteMap }) => {
+			const isRouteClosing = (routeKey: string) =>
+				Boolean(closingRouteMap.current[routeKey]);
+
 			return (
 				<Fragment>
 					{shouldShowFloatOverlay ? <Overlay.Float /> : null}
@@ -47,10 +27,8 @@ export const StackView = withStackCore(
 						const descriptor = scene.descriptor;
 						const route = scene.route;
 
-						const previousDescriptor =
-							scenes[sceneIndex - 1]?.descriptor ?? undefined;
-						const nextDescriptor =
-							scenes[sceneIndex + 1]?.descriptor ?? undefined;
+						const { previousDescriptor, nextDescriptor } =
+							resolveSceneNeighbors(scenes, sceneIndex, isRouteClosing);
 
 						return (
 							<ComponentScreen key={route.key} routeKey={route.key}>

package/src/native-stack/navigators/createNativeStackNavigator.tsx

@@ -1,10 +1,8 @@
 import {
 	createNavigatorFactory,
-	type EventArg,
 	type NavigatorTypeBagBase,
 	type ParamListBase,
 	type StackActionHelpers,
-	StackActions,
 	type StackNavigationState,
 	StackRouter,
 	type StackRouterOptions,
@@ -12,7 +10,7 @@ import {
 	type TypedNavigator,
 	useNavigationBuilder,
 } from "@react-navigation/native";
-import * as React from "react";
+import { useTabPressReset } from "../../shared/hooks/navigation/use-tab-press-reset";
 
 import type {
 	NativeStackNavigationEventMap,
@@ -49,31 +47,7 @@ function NativeStackNavigator({
 			screenLayout,
 		});
 
-	React.useEffect(
-		() =>
-			// @ts-expect-error: there may not be a tab navigator in parent
-			navigation?.addListener?.("tabPress", (e: any) => {
-				const isFocused = navigation.isFocused();
-
-				// Run the operation in the next frame so we're sure all listeners have been run
-				// This is necessary to know if preventDefault() has been called
-				requestAnimationFrame(() => {
-					if (
-						state.index > 0 &&
-						isFocused &&
-						!(e as EventArg<"tabPress", true>).defaultPrevented
-					) {
-						// When user taps on already focused tab and we're inside the tab,
-						// reset the stack to replicate native behaviour
-						navigation.dispatch({
-							...StackActions.popToTop(),
-							target: state.key,
-						});
-					}
-				});
-			}),
-		[navigation, state.index, state.key],
-	);
+	useTabPressReset(navigation, state.index, state.key);
 
 	return (
 		<NavigationContent>

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

@@ -36,6 +36,7 @@ import {
 	withDirectStack,
 } from "../../shared/providers/stack/direct.provider";
 import { StackType } from "../../shared/types/stack.types";
+import { isFabric } from "../../shared/utils/platform";
 import type { NativeStackDescriptor } from "../types";
 import { debounce } from "../utils/debounce";
 import { getModalRouteKeys } from "../utils/getModalRoutesKeys";
@@ -46,10 +47,6 @@ import { useHeaderConfigProps } from "./useHeaderConfigProps";
 
 const ANDROID_DEFAULT_HEADER_HEIGHT = 56;
 
-function isFabric() {
-	return "nativeFabricUIManager" in global;
-}
-
 type SceneViewProps = {
 	index: number;
 	focused: boolean;

package/src/shared/animation/snap-to.ts

@@ -32,7 +32,7 @@ export function snapDescriptorToIndex(
 	}
 
 	const targetProgress = sorted[index];
-	const animations = AnimationStore.getAll(descriptor.route.key);
+	const animations = AnimationStore.getRouteAnimations(descriptor.route.key);
 
 	runOnUI(() => {
 		"worklet";

package/src/shared/components/create-boundary-component/helpers/resolve-pending-source-key.ts

@@ -0,0 +1,16 @@
+import { BoundStore } from "../../../stores/bounds";
+
+export const resolvePendingSourceKey = (
+	sharedBoundTag: string,
+	expectedSourceScreenKey?: string,
+): string | null => {
+	"worklet";
+	if (
+		expectedSourceScreenKey &&
+		BoundStore.hasPendingLinkFromSource(sharedBoundTag, expectedSourceScreenKey)
+	) {
+		return expectedSourceScreenKey;
+	}
+
+	return BoundStore.getLatestPendingSourceScreenKey(sharedBoundTag);
+};

package/src/shared/components/create-boundary-component/hooks/use-auto-source-measurement.ts

@@ -0,0 +1,50 @@
+import { useAnimatedReaction } from "react-native-reanimated";
+import { BoundStore } from "../../../stores/bounds";
+import type { MaybeMeasureAndStoreParams } from "../types";
+
+export const useAutoSourceMeasurement = (params: {
+	enabled: boolean;
+	sharedBoundTag: string;
+	nextScreenKey?: string;
+	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
+}) => {
+	const { enabled, sharedBoundTag, nextScreenKey, maybeMeasureAndStore } =
+		params;
+	const boundaryPresence = BoundStore.getBoundaryPresence();
+
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			if (!enabled) return 0;
+			if (!nextScreenKey) return 0;
+			const tagPresence = boundaryPresence.value[sharedBoundTag];
+			if (!tagPresence) return 0;
+
+			const direct = tagPresence[nextScreenKey];
+			if (direct && direct.count > 0) return nextScreenKey;
+
+			for (const screenKey in tagPresence) {
+				const entry = tagPresence[screenKey];
+				if (entry.ancestorKeys?.includes(nextScreenKey)) {
+					return nextScreenKey;
+				}
+			}
+
+			return 0;
+		},
+		(captureSignal, previousCaptureSignal) => {
+			"worklet";
+			if (!enabled) return;
+			if (!nextScreenKey) return;
+			if (!captureSignal || captureSignal === previousCaptureSignal) return;
+			maybeMeasureAndStore({ shouldSetSource: true });
+		},
+		[
+			enabled,
+			nextScreenKey,
+			sharedBoundTag,
+			boundaryPresence,
+			maybeMeasureAndStore,
+		],
+	);
+};

package/src/shared/components/create-boundary-component/hooks/use-boundary-measure-and-store.ts

@@ -0,0 +1,177 @@
+import type { View } from "react-native";
+import {
+	type AnimatedRef,
+	type MeasuredDimensions,
+	measure,
+	type StyleProps,
+} from "react-native-reanimated";
+import useStableCallbackValue from "../../../hooks/use-stable-callback-value";
+import type { AnimationStore } from "../../../stores/animation.store";
+import { BoundStore } from "../../../stores/bounds";
+import { applyMeasuredBoundsWrites } from "../../../stores/bounds/helpers/apply-measured-bounds-writes";
+import { resolvePendingSourceKey } from "../helpers/resolve-pending-source-key";
+import type { MaybeMeasureAndStoreParams } from "../types";
+
+type LayoutAnchor = {
+	correctMeasurement: (measured: MeasuredDimensions) => MeasuredDimensions;
+	isMeasurementInViewport?: (measured: MeasuredDimensions) => boolean;
+} | null;
+
+const SNAPSHOT_EPSILON = 0.5;
+
+const areMeasurementsEqual = (
+	a: MeasuredDimensions,
+	b: MeasuredDimensions,
+): boolean => {
+	"worklet";
+
+	return (
+		Math.abs(a.x - b.x) <= SNAPSHOT_EPSILON &&
+		Math.abs(a.y - b.y) <= SNAPSHOT_EPSILON &&
+		Math.abs(a.pageX - b.pageX) <= SNAPSHOT_EPSILON &&
+		Math.abs(a.pageY - b.pageY) <= SNAPSHOT_EPSILON &&
+		Math.abs(a.width - b.width) <= SNAPSHOT_EPSILON &&
+		Math.abs(a.height - b.height) <= SNAPSHOT_EPSILON
+	);
+};
+
+export const useBoundaryMeasureAndStore = (params: {
+	enabled: boolean;
+	sharedBoundTag: string;
+	preferredSourceScreenKey?: string;
+	currentScreenKey: string;
+	ancestorKeys: string[];
+	navigatorKey?: string;
+	ancestorNavigatorKeys?: string[];
+	isAnimating: ReturnType<typeof AnimationStore.getRouteAnimation>;
+	preparedStyles: StyleProps;
+	animatedRef: AnimatedRef<View>;
+	layoutAnchor: LayoutAnchor;
+}) => {
+	const {
+		enabled,
+		sharedBoundTag,
+		preferredSourceScreenKey,
+		currentScreenKey,
+		ancestorKeys,
+		navigatorKey,
+		ancestorNavigatorKeys,
+		isAnimating,
+		preparedStyles,
+		animatedRef,
+		layoutAnchor,
+	} = params;
+
+	return useStableCallbackValue(
+		({
+			shouldSetSource,
+			shouldSetDestination,
+			shouldUpdateSource,
+			shouldUpdateDestination,
+		}: MaybeMeasureAndStoreParams = {}) => {
+			"worklet";
+			if (!enabled) return;
+
+			const expectedSourceScreenKey: string | undefined =
+				resolvePendingSourceKey(sharedBoundTag, preferredSourceScreenKey) ||
+				undefined;
+
+			if (shouldSetSource && isAnimating.get()) {
+				const existing = BoundStore.getSnapshot(
+					sharedBoundTag,
+					currentScreenKey,
+				);
+				if (existing) {
+					applyMeasuredBoundsWrites({
+						sharedBoundTag,
+						ancestorKeys,
+						navigatorKey,
+						ancestorNavigatorKeys,
+						currentScreenKey,
+						measured: existing.bounds,
+						preparedStyles,
+						shouldSetSource: true,
+					});
+					return;
+				}
+
+				// No cached snapshot while animating.
+				// Fall through to a live measurement so rapid retargeting still
+				// captures a valid source link.
+			}
+
+			const hasPendingLink = expectedSourceScreenKey
+				? BoundStore.hasPendingLinkFromSource(
+						sharedBoundTag,
+						expectedSourceScreenKey,
+					)
+				: BoundStore.hasPendingLink(sharedBoundTag);
+			const hasSourceLink = BoundStore.hasSourceLink(
+				sharedBoundTag,
+				currentScreenKey,
+			);
+			const hasDestinationLink = BoundStore.hasDestinationLink(
+				sharedBoundTag,
+				currentScreenKey,
+			);
+
+			const canSetSource = !!shouldSetSource;
+			const canSetDestination = !!shouldSetDestination && hasPendingLink;
+			const canUpdateSource = !!shouldUpdateSource && hasSourceLink;
+			const canUpdateDestination =
+				!!shouldUpdateDestination && (hasDestinationLink || hasPendingLink);
+
+			if (
+				!canSetSource &&
+				!canSetDestination &&
+				!canUpdateSource &&
+				!canUpdateDestination
+			) {
+				return;
+			}
+
+			const measured = measure(animatedRef);
+			if (!measured) return;
+
+			const correctedMeasured = layoutAnchor
+				? layoutAnchor.correctMeasurement(measured)
+				: measured;
+
+			const wantsDestinationWrite = canSetDestination || canUpdateDestination;
+			const destinationInViewport =
+				!wantsDestinationWrite ||
+				!layoutAnchor ||
+				!layoutAnchor.isMeasurementInViewport ||
+				layoutAnchor.isMeasurementInViewport(correctedMeasured);
+
+			if (!destinationInViewport && !canSetSource && !canUpdateSource) {
+				return;
+			}
+
+			const existingSnapshot = BoundStore.getSnapshot(
+				sharedBoundTag,
+				currentScreenKey,
+			);
+			const hasSnapshotChanged =
+				!existingSnapshot ||
+				!areMeasurementsEqual(existingSnapshot.bounds, correctedMeasured);
+
+			applyMeasuredBoundsWrites({
+				sharedBoundTag,
+				currentScreenKey,
+				measured: correctedMeasured,
+				preparedStyles,
+				ancestorKeys,
+				navigatorKey,
+				ancestorNavigatorKeys,
+				expectedSourceScreenKey,
+				shouldRegisterSnapshot: hasSnapshotChanged,
+				shouldSetSource: canSetSource,
+				shouldUpdateSource: canUpdateSource && hasSnapshotChanged,
+				shouldUpdateDestination:
+					canUpdateDestination && destinationInViewport && hasSnapshotChanged,
+				shouldSetDestination: canSetDestination && destinationInViewport,
+			});
+		},
+	);
+};

package/src/shared/components/create-boundary-component/hooks/use-boundary-presence.ts

@@ -0,0 +1,55 @@
+import { useLayoutEffect } from "react";
+import { runOnUI } from "react-native-reanimated";
+import { BoundStore } from "../../../stores/bounds";
+import type { BoundaryConfigProps } from "../types";
+
+export const useBoundaryPresence = (params: {
+	enabled: boolean;
+	sharedBoundTag: string;
+	currentScreenKey: string;
+	ancestorKeys: string[];
+	navigatorKey?: string;
+	ancestorNavigatorKeys?: string[];
+	boundaryConfig?: BoundaryConfigProps;
+}) => {
+	const {
+		enabled,
+		sharedBoundTag,
+		currentScreenKey,
+		ancestorKeys,
+		navigatorKey,
+		ancestorNavigatorKeys,
+		boundaryConfig,
+	} = params;
+	const ancestorKeysSignature = ancestorKeys.join("|");
+	const ancestorNavigatorKeysSignature = ancestorNavigatorKeys?.join("|");
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <Depend on the ancestory keys signature>
+	useLayoutEffect(() => {
+		if (!enabled) return;
+
+		runOnUI(BoundStore.registerBoundaryPresence)(
+			sharedBoundTag,
+			currentScreenKey,
+			ancestorKeys,
+			boundaryConfig,
+			navigatorKey,
+			ancestorNavigatorKeys,
+		);
+
+		return () => {
+			runOnUI(BoundStore.unregisterBoundaryPresence)(
+				sharedBoundTag,
+				currentScreenKey,
+			);
+		};
+	}, [
+		enabled,
+		sharedBoundTag,
+		currentScreenKey,
+		ancestorKeysSignature,
+		navigatorKey,
+		ancestorNavigatorKeysSignature,
+		boundaryConfig,
+	]);
+};

package/src/shared/components/create-boundary-component/hooks/use-group-active-measurement.ts

@@ -0,0 +1,59 @@
+import { useAnimatedReaction } from "react-native-reanimated";
+import type { AnimationStore } from "../../../stores/animation.store";
+import { BoundStore } from "../../../stores/bounds";
+import type { BoundaryId, MaybeMeasureAndStoreParams } from "../types";
+
+/**
+ * Watches the group's active id in the BoundStore.
+ * When this boundary becomes the active member of its group,
+ * re-measures itself and updates the link destination with fresh bounds.
+ * This handles the case where a boundary scrolled into view after initial mount
+ * (e.g., paging ScrollView in a detail screen).
+ */
+export const useGroupActiveMeasurement = (params: {
+	enabled: boolean;
+	group: string | undefined;
+	id: BoundaryId;
+	shouldUpdateDestination: boolean;
+	isAnimating: ReturnType<typeof AnimationStore.getRouteAnimation>;
+	maybeMeasureAndStore: (options: MaybeMeasureAndStoreParams) => void;
+}) => {
+	const {
+		enabled,
+		group,
+		id,
+		shouldUpdateDestination,
+		isAnimating,
+		maybeMeasureAndStore,
+	} = params;
+	const idStr = String(id);
+
+	const allGroups = BoundStore.getGroups();
+
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			if (!enabled) return null;
+			if (!group) return null;
+			return allGroups.value[group]?.activeId ?? null;
+		},
+		(activeId, previousActiveId) => {
+			"worklet";
+			if (!enabled) return;
+			if (!group || !shouldUpdateDestination) return;
+			if (isAnimating.value) return;
+
+			if (activeId === idStr && activeId !== previousActiveId) {
+				maybeMeasureAndStore({ shouldUpdateDestination: true });
+			}
+		},
+		[
+			enabled,
+			group,
+			idStr,
+			shouldUpdateDestination,
+			isAnimating,
+			maybeMeasureAndStore,
+		],
+	);
+};