react-native-screen-transitions 3.6.0-beta.0 → 3.7.0-alpha.0

package/src/shared/providers/stack/helpers/managed-stack-state/helpers/reconcile-managed-routes.ts

@@ -0,0 +1,198 @@
+import type {
+	BaseStackDescriptor,
+	RouteWithKey,
+} from "../../../../../types/stack.types";
+import { composeDescriptors } from "../../../../../utils/navigation/compose-descriptors";
+import { syncRoutesWithRemoved } from "../../../../../utils/navigation/sync-routes-with-removed";
+import type {
+	LocalRoutesState,
+	ManagedDescriptorSources,
+	ManagedRoutes,
+	ReconciledRoutes,
+} from "./types";
+
+type ReconcileManagedRoutesParams<TDescriptor extends BaseStackDescriptor> = {
+	current: LocalRoutesState<TDescriptor>;
+	previousRoutesSnapshot: ManagedRoutes<TDescriptor>;
+	nextRoutesSnapshot: ManagedRoutes<TDescriptor>;
+	nextDescriptors: ManagedDescriptorSources<TDescriptor>;
+	closingRouteKeys: Set<string>;
+};
+
+const haveSameRouteKeys = <Route extends RouteWithKey>(
+	previous: Route[],
+	next: Route[],
+): boolean => {
+	if (previous.length !== next.length) {
+		return false;
+	}
+
+	return previous.every((route, index) => route?.key === next[index]?.key);
+};
+
+const alignRoutesWithLatest = <
+	Route extends RouteWithKey,
+	DescriptorMap extends Record<string, unknown>,
+>(
+	currentRoutes: Route[],
+	currentDescriptors: DescriptorMap,
+	nextRoutes: Route[],
+	nextDescriptors: DescriptorMap,
+): { routes: Route[]; descriptors: DescriptorMap } => {
+	if (currentRoutes.length === 0) {
+		return {
+			routes: nextRoutes,
+			descriptors: composeDescriptors(
+				nextRoutes,
+				nextDescriptors,
+				currentDescriptors,
+			),
+		};
+	}
+
+	const nextRouteLookup = new Map<string, Route>();
+	for (const route of nextRoutes) {
+		nextRouteLookup.set(route.key, route);
+	}
+
+	let didChange = currentRoutes.length !== nextRoutes.length;
+	const alignedRoutes = currentRoutes.map((route) => {
+		const nextRoute = nextRouteLookup.get(route.key);
+
+		if (!nextRoute) {
+			return route;
+		}
+
+		if (nextRoute !== route) {
+			didChange = true;
+			return nextRoute;
+		}
+
+		return route;
+	});
+	const routesResult = didChange ? alignedRoutes : currentRoutes;
+
+	return {
+		routes: routesResult,
+		descriptors: composeDescriptors(
+			routesResult,
+			nextDescriptors,
+			currentDescriptors,
+		),
+	};
+};
+
+const acceptAlreadyClosingRouteRemovals = <
+	TDescriptor extends BaseStackDescriptor,
+>({
+	current,
+	previousRoutesSnapshot,
+	nextRoutesSnapshot,
+	nextDescriptors,
+	closingRouteKeys,
+}: ReconcileManagedRoutesParams<TDescriptor>): ReconciledRoutes<TDescriptor> | null => {
+	const nextRouteKeys = new Set(nextRoutesSnapshot.map((route) => route.key));
+	const acceptedRemovedKeys = new Set<string>();
+
+	for (const route of previousRoutesSnapshot) {
+		if (nextRouteKeys.has(route.key)) {
+			continue;
+		}
+
+		if (!closingRouteKeys.has(route.key)) {
+			continue;
+		}
+
+		acceptedRemovedKeys.add(route.key);
+		closingRouteKeys.delete(route.key);
+	}
+
+	if (acceptedRemovedKeys.size === 0) {
+		return null;
+	}
+
+	const remainingClosingRoutes = current.routes.filter((route) => {
+		if (nextRouteKeys.has(route.key)) {
+			return false;
+		}
+
+		if (acceptedRemovedKeys.has(route.key)) {
+			return false;
+		}
+
+		return closingRouteKeys.has(route.key);
+	});
+
+	const routes = [
+		...nextRoutesSnapshot,
+		...remainingClosingRoutes,
+	] as ManagedRoutes<TDescriptor>;
+	const descriptors = {
+		...nextDescriptors,
+	} as ManagedDescriptorSources<TDescriptor>;
+
+	for (const route of remainingClosingRoutes) {
+		const descriptor = current.sourceDescriptors[route.key];
+		if (descriptor) {
+			descriptors[route.key] = descriptor;
+		}
+	}
+
+	return {
+		routes,
+		descriptors,
+	};
+};
+
+export const reconcileManagedRoutes = <TDescriptor extends BaseStackDescriptor>(
+	params: ReconcileManagedRoutesParams<TDescriptor>,
+): ReconciledRoutes<TDescriptor> => {
+	const {
+		current,
+		previousRoutesSnapshot,
+		nextRoutesSnapshot,
+		nextDescriptors,
+		closingRouteKeys,
+	} = params;
+
+	const routeKeysUnchanged = haveSameRouteKeys(
+		previousRoutesSnapshot,
+		nextRoutesSnapshot,
+	);
+
+	if (routeKeysUnchanged) {
+		const result = alignRoutesWithLatest(
+			current.routes,
+			current.sourceDescriptors,
+			nextRoutesSnapshot,
+			nextDescriptors,
+		);
+
+		return {
+			routes: result.routes as ManagedRoutes<TDescriptor>,
+			descriptors: result.descriptors as ManagedDescriptorSources<TDescriptor>,
+		};
+	}
+
+	const acceptedRemoval = acceptAlreadyClosingRouteRemovals(params);
+
+	if (acceptedRemoval) {
+		return acceptedRemoval;
+	}
+
+	const result = syncRoutesWithRemoved({
+		prevRoutes:
+			previousRoutesSnapshot.length > 0
+				? previousRoutesSnapshot
+				: current.routes,
+		prevDescriptors: current.sourceDescriptors,
+		nextRoutes: nextRoutesSnapshot,
+		nextDescriptors,
+		closingRouteKeys,
+	});
+
+	return {
+		routes: result.routes as ManagedRoutes<TDescriptor>,
+		descriptors: result.descriptors as ManagedDescriptorSources<TDescriptor>,
+	};
+};

package/src/shared/providers/stack/helpers/managed-stack-state/helpers/types.ts

@@ -0,0 +1,57 @@
+import type { ManagedStackProps } from "../../../../../types/providers/managed-stack.types";
+import type {
+	BaseStackDescriptor,
+	BaseStackNavigation,
+	BaseStackRoute,
+	BaseStackScene,
+	StackDescriptorSource,
+} from "../../../../../types/stack.types";
+
+export type ManagedRoutes<TDescriptor extends BaseStackDescriptor> =
+	TDescriptor["route"][];
+
+export type ManagedDescriptors<TDescriptor extends BaseStackDescriptor> =
+	Record<string, TDescriptor>;
+
+export type ManagedDescriptorSources<TDescriptor extends BaseStackDescriptor> =
+	Record<string, StackDescriptorSource<TDescriptor>>;
+
+export type LocalRoutesState<TDescriptor extends BaseStackDescriptor> = {
+	routes: ManagedRoutes<TDescriptor>;
+	descriptors: ManagedDescriptors<TDescriptor>;
+	sourceDescriptors: ManagedDescriptorSources<TDescriptor>;
+	focusedRouteKey?: string;
+	routeChildStates: Record<string, unknown>;
+	scenes: BaseStackScene<TDescriptor>[];
+	routeKeys: string[];
+	shouldShowFloatOverlay: boolean;
+	closingRouteKeys: ReadonlySet<string>;
+};
+
+export type ManagedStackControllerSnapshot<
+	TDescriptor extends BaseStackDescriptor,
+> = {
+	state: LocalRoutesState<TDescriptor>;
+};
+
+export type ManagedStackController<
+	TDescriptor extends BaseStackDescriptor,
+	TNavigation extends BaseStackNavigation,
+> = {
+	subscribe: (listener: () => void) => () => void;
+	getSnapshot: () => ManagedStackControllerSnapshot<TDescriptor>;
+	update: (props: ManagedStackProps<TDescriptor, TNavigation>) => void;
+	handleCloseRoute: (payload: { route: BaseStackRoute }) => void;
+	requestDismiss: (payload: { route: BaseStackRoute }) => boolean;
+};
+
+export type ReconciledRoutes<TDescriptor extends BaseStackDescriptor> = {
+	routes: ManagedRoutes<TDescriptor>;
+	descriptors: ManagedDescriptorSources<TDescriptor>;
+};
+
+export type SceneActivityWindow = {
+	focusedIndex: number;
+	topIndex: number;
+	topIsClosing: boolean;
+};

package/src/shared/providers/stack/helpers/managed-stack-state/index.ts

@@ -0,0 +1,40 @@
+import { useRef, useSyncExternalStore } from "react";
+import type { ManagedStackProps } from "../../../../types/providers/managed-stack.types";
+import type {
+	BaseStackDescriptor,
+	BaseStackNavigation,
+} from "../../../../types/stack.types";
+import {
+	createManagedStackController,
+	type ManagedStackController,
+} from "./managed-stack-controller";
+
+export const useManagedStackState = <
+	TDescriptor extends BaseStackDescriptor,
+	TNavigation extends BaseStackNavigation,
+>(
+	props: ManagedStackProps<TDescriptor, TNavigation>,
+) => {
+	const controllerRef = useRef<
+		ManagedStackController<TDescriptor, TNavigation> | undefined
+	>(undefined);
+
+	if (!controllerRef.current) {
+		controllerRef.current = createManagedStackController(props);
+	}
+
+	const controller = controllerRef.current;
+	controller.update(props);
+
+	const snapshot = useSyncExternalStore(
+		controller.subscribe,
+		controller.getSnapshot,
+		controller.getSnapshot,
+	);
+
+	return {
+		state: snapshot.state,
+		handleCloseRoute: controller.handleCloseRoute,
+		requestDismiss: controller.requestDismiss,
+	};
+};

package/src/shared/providers/stack/helpers/managed-stack-state/managed-stack-controller.ts

@@ -0,0 +1,160 @@
+import { StackActions } from "@react-navigation/native";
+import type { ManagedStackProps } from "../../../../types/providers/managed-stack.types";
+import type {
+	BaseStackDescriptor,
+	BaseStackNavigation,
+	BaseStackRoute,
+} from "../../../../types/stack.types";
+import { buildManagedStackState } from "./helpers/build-managed-stack-state";
+import { deriveManagedStackState } from "./helpers/derive-managed-stack-state";
+import type {
+	ManagedDescriptorSources,
+	ManagedStackControllerSnapshot,
+	ManagedStackController as ManagedStackControllerType,
+} from "./helpers/types";
+
+export type { ManagedStackController } from "./helpers/types";
+
+/**
+ * Maintains the stack-local route snapshot used while managed transitions run.
+ *
+ * React Navigation remains the source of truth for settled routes, but it can
+ * remove descriptors before our close animation has finished. This controller
+ * keeps those closing routes locally until their lifecycle reports completion.
+ */
+export const createManagedStackController = <
+	TDescriptor extends BaseStackDescriptor,
+	TNavigation extends BaseStackNavigation,
+>(
+	initialProps: ManagedStackProps<TDescriptor, TNavigation>,
+): ManagedStackControllerType<TDescriptor, TNavigation> => {
+	const closingRouteKeys = new Set<string>();
+	let props = initialProps;
+	let previousPropRoutes = initialProps.state.routes;
+	let snapshot: ManagedStackControllerSnapshot<TDescriptor> = {
+		state: buildManagedStackState({
+			props,
+			routes: initialProps.state.routes,
+			descriptors:
+				initialProps.descriptors as ManagedDescriptorSources<TDescriptor>,
+			closingRouteKeys,
+		}),
+	};
+	const listeners = new Set<() => void>();
+
+	const emit = () => {
+		for (const listener of listeners) {
+			listener();
+		}
+	};
+
+	const subscribe = (listener: () => void) => {
+		listeners.add(listener);
+		return () => {
+			listeners.delete(listener);
+		};
+	};
+
+	const getSnapshot = (): ManagedStackControllerSnapshot<TDescriptor> => {
+		return snapshot;
+	};
+
+	const update = (nextProps: ManagedStackProps<TDescriptor, TNavigation>) => {
+		const previousRoutesSnapshot = previousPropRoutes;
+		props = nextProps;
+
+		const nextState = deriveManagedStackState({
+			props,
+			current: snapshot.state,
+			previousRoutesSnapshot,
+			closingRouteKeys,
+		});
+		previousPropRoutes = nextProps.state.routes;
+
+		if (nextState === snapshot.state) {
+			return;
+		}
+
+		snapshot = {
+			state: nextState,
+		};
+	};
+
+	const handleCloseRoute = ({ route }: { route: BaseStackRoute }) => {
+		const { state, navigation } = props;
+
+		if (state.routes.some((candidate) => candidate.key === route.key)) {
+			navigation.dispatch({
+				...StackActions.pop(),
+				source: route.key,
+				target: state.key,
+			});
+			return;
+		}
+
+		closingRouteKeys.delete(route.key);
+
+		const current = snapshot.state;
+		const routeExists = current.routes.some(
+			(candidate) => candidate.key === route.key,
+		);
+
+		if (!routeExists) {
+			return;
+		}
+
+		const nextRoutes = current.routes.filter(
+			(candidate) => candidate.key !== route.key,
+		);
+
+		const nextDescriptors = { ...current.sourceDescriptors };
+		delete nextDescriptors[route.key];
+
+		snapshot = {
+			state: buildManagedStackState({
+				props,
+				routes: nextRoutes,
+				descriptors: nextDescriptors,
+				closingRouteKeys,
+				previousState: current,
+			}),
+		};
+		emit();
+	};
+
+	const requestDismiss = ({ route }: { route: BaseStackRoute }): boolean => {
+		const current = snapshot.state;
+		const routeIndex = current.routes.findIndex(
+			(candidate) => candidate.key === route.key,
+		);
+
+		if (routeIndex <= 0) {
+			return false;
+		}
+
+		if (closingRouteKeys.has(route.key)) {
+			return true;
+		}
+
+		closingRouteKeys.add(route.key);
+		snapshot = {
+			state: buildManagedStackState({
+				props,
+				routes: current.routes,
+				descriptors: current.sourceDescriptors,
+				closingRouteKeys,
+				previousState: current,
+			}),
+		};
+		emit();
+		return true;
+	};
+
+	return {
+		subscribe,
+		getSnapshot,
+		update,
+		handleCloseRoute,
+		requestDismiss,
+	};
+};

package/src/shared/providers/stack/managed.provider.tsx

@@ -2,9 +2,10 @@ import type { Route } from "@react-navigation/native";
 import * as React from "react";
 import { useMemo } from "react";
 import {
-	StackContext,
 	type StackContextValue,
+	StackProvider,
 } from "../../hooks/navigation/use-stack";
+import { AnimationStore } from "../../stores/animation.store";
 import type {
 	ManagedStackContextValue,
 	ManagedStackProps,
@@ -17,9 +18,7 @@ import type {
 	BaseStackScene,
 } from "../../types/stack.types";
 import { useStackCoreContext } from "./core.provider";
-import { useClosingRouteMap } from "./helpers/use-closing-route-map";
-import { useLocalRoutes } from "./helpers/use-local-routes";
-import { useProcessedRoutes } from "./helpers/use-processed-routes";
+import { useManagedStackState } from "./helpers/managed-stack-state";
 import { useStackDerived } from "./helpers/use-stack-derived";
 
 const ManagedStackContext =
@@ -43,70 +42,55 @@ function useManagedStackValue<
 	props: ManagedStackProps<TDescriptor, TNavigation>,
 ): ManagedStackResult<TDescriptor> {
 	const { flags } = useStackCoreContext();
-	const { state, handleCloseRoute, closingRouteKeys } = useLocalRoutes(props);
+	const { state, handleCloseRoute, requestDismiss } =
+		useManagedStackState(props);
 	const navigatorKey = props.state.key;
 
-	const processed = useProcessedRoutes(state.routes, state.descriptors);
-	const { optimisticFocusedIndex } = useStackDerived(processed.animationMaps);
-	const closingRouteMap = useClosingRouteMap(
-		processed.routeKeys,
-		processed.animationMaps,
+	const animationMaps = useMemo(
+		() => state.routeKeys.map((routeKey) => AnimationStore.getBag(routeKey)),
+		[state.routeKeys],
 	);
+	const { optimisticFocusedIndex } = useStackDerived(animationMaps);
 
 	const focusedIndex = props.state.index;
 
-	// Common stack context (consumed by useStack())
 	const stackContextValue = useMemo<StackContextValue>(
 		() => ({
 			flags,
 			navigatorKey,
-			routeKeys: processed.routeKeys,
+			routeKeys: state.routeKeys,
 			routes: state.routes as Route<string>[],
-			scenes: processed.scenes as BaseStackScene[],
+			scenes: state.scenes as BaseStackScene[],
 			optimisticFocusedIndex,
+			focusedIndex,
+			requestDismiss,
 		}),
 		[
 			flags,
 			navigatorKey,
-			processed.routeKeys,
+			state.routeKeys,
 			state.routes,
-			processed.scenes,
+			state.scenes,
 			optimisticFocusedIndex,
+			focusedIndex,
+			requestDismiss,
 		],
 	);
 
-	// Managed-specific context (consumed by useManagedStackContext())
 	const managedContextValue = useMemo<ManagedStackContextValue>(
 		() => ({
-			activeScreensLimit: processed.activeScreensLimit,
-			closingRouteKeysShared: closingRouteKeys.shared,
 			handleCloseRoute,
-			backdropBehaviors: processed.backdropBehaviors,
 		}),
-		[
-			processed.activeScreensLimit,
-			closingRouteKeys.shared,
-			handleCloseRoute,
-			processed.backdropBehaviors,
-		],
+		[handleCloseRoute],
 	);
 
-	// Combined props for render children (stack-view components)
 	const renderProps = useMemo<ManagedStackRenderProps<TDescriptor>>(
 		() => ({
-			descriptors: state.descriptors,
-			scenes: processed.scenes,
+			scenes: state.scenes,
 			focusedIndex,
-			closingRouteMap,
-			shouldShowFloatOverlay: processed.shouldShowFloatOverlay,
+			shouldShowFloatOverlay: state.shouldShowFloatOverlay,
 		}),
-		[
-			state.descriptors,
-			processed.scenes,
-			focusedIndex,
-			closingRouteMap,
-			processed.shouldShowFloatOverlay,
-		],
+		[state.scenes, focusedIndex, state.shouldShowFloatOverlay],
 	);
 
 	return { stackContextValue, managedContextValue, renderProps };
@@ -125,11 +109,11 @@ function withManagedStack<
 			useManagedStackValue<TDescriptor, TNavigation>(props);
 
 		return (
-			<StackContext.Provider value={stackContextValue}>
+			<StackProvider value={stackContextValue}>
 				<ManagedStackContext.Provider value={managedContextValue}>
 					<Component {...renderProps} />
 				</ManagedStackContext.Provider>
-			</StackContext.Provider>
+			</StackProvider>
 		);
 	};
 }

package/src/shared/types/bounds.types.ts

@@ -78,6 +78,33 @@ export type BoundsNavigationZoomOptions = {
 	 * animates above it.
 	 */
 	backgroundScale?: number;
+	/**
+	 * Maximum dynamic gesture sensitivity applied by zoom.
+	 *
+	 * Zoom lowers gesture sensitivity as the drag gets deeper so the content
+	 * handoff stays stable. This value controls the starting/highest sensitivity
+	 * in that curve.
+	 *
+	 * @default 0.8
+	 */
+	maxSensitivity?: number;
+	/**
+	 * Velocity-driven depth applied to the dismiss scale handoff.
+	 *
+	 * Higher values make fast releases orbit farther around the final scale. Set
+	 * to `0` to remove the velocity depth effect.
+	 *
+	 * @default 0.5
+	 */
+	velocityDepth?: number;
+	/**
+	 * Whether gesture displacement should drive transition progress or remain as
+	 * freeform gesture values. Zoom defaults to `"freeform"` so drag can move the
+	 * content without owning the whole screen progress.
+	 *
+	 * @default "freeform"
+	 */
+	gestureProgressMode?: GestureProgressMode;
 	/**
 	 * Horizontal gesture drag scaling curve, applied when the active dismiss
 	 * direction is horizontal.

package/src/shared/types/index.ts

@@ -34,6 +34,7 @@ export type {
 export type { OverlayProps } from "./overlay.types";
 export type {
 	GestureTracking,
+	InactiveBehavior,
 	Layout,
 	ScreenKey,
 	ScreenTransitionConfig,
@@ -46,4 +47,6 @@ export type {
 	BaseStackScene,
 	BaseStackState,
 	DescriptorMap,
+	StackDescriptorSource,
+	StackSceneActivity,
 } from "./stack.types";

package/src/shared/types/providers/managed-stack.types.ts

@@ -1,4 +1,3 @@
-import type { SharedValue } from "react-native-reanimated";
 import type { StackContextValue } from "../../hooks/navigation/use-stack";
 import type {
 	BaseStackDescriptor,
@@ -6,6 +5,7 @@ import type {
 	BaseStackRoute,
 	BaseStackScene,
 	BaseStackState,
+	StackDescriptorSource,
 } from "../stack.types";
 
 /**
@@ -18,8 +18,11 @@ export interface ManagedStackProps<
 > {
 	state: BaseStackState<TDescriptor["route"]>;
 	navigation: TNavigation;
-	descriptors: Record<string, TDescriptor>;
-	describe: (route: TDescriptor["route"], placeholder: boolean) => TDescriptor;
+	descriptors: Record<string, StackDescriptorSource<TDescriptor>>;
+	describe: (
+		route: TDescriptor["route"],
+		placeholder: boolean,
+	) => StackDescriptorSource<TDescriptor>;
 }
 
 /**
@@ -27,10 +30,7 @@ export interface ManagedStackProps<
  * Shared fields (routes, scenes, etc.) live in StackContext.
  */
 export interface ManagedStackContextValue {
-	activeScreensLimit: number;
-	closingRouteKeysShared: SharedValue<string[]>;
 	handleCloseRoute: (payload: { route: BaseStackRoute }) => void;
-	backdropBehaviors: string[];
 }
 
 /**
@@ -40,10 +40,8 @@ export interface ManagedStackContextValue {
 export interface ManagedStackRenderProps<
 	TDescriptor extends BaseStackDescriptor = BaseStackDescriptor,
 > {
-	descriptors: Record<string, TDescriptor>;
 	scenes: BaseStackScene<TDescriptor>[];
 	focusedIndex: number;
-	closingRouteMap: React.RefObject<Readonly<Record<string, true>>>;
 	shouldShowFloatOverlay: boolean;
 }