react-native-screen-transitions 3.2.0-beta.0 → 3.2.0-beta.1

package/src/component-stack/types.ts

@@ -1,209 +1,101 @@
-import type { DerivedValue } from "react-native-reanimated";
-import type { ScreenTransitionConfig } from "../shared";
 import type {
-	OverlayInterpolationProps,
-	ScreenInterpolationProps,
-} from "../shared/types/animation.types";
-import type { OverlayMode } from "../shared/types/overlay.types";
+	DefaultNavigatorOptions,
+	Descriptor,
+	NavigationHelpers,
+	NavigationProp,
+	ParamListBase,
+	Route,
+	RouteProp,
+	StackActionHelpers,
+	StackNavigationState,
+	StackRouterOptions,
+	Theme,
+} from "@react-navigation/native";
+import type { ScreenTransitionConfig } from "../shared";
+import type { OverlayProps } from "../shared/types/overlay.types";
 
-/**
- * A synthetic route object for component navigation.
- * Mimics React Navigation's Route type but without the navigation dependency.
- */
-export interface ComponentRoute<Params = Record<string, unknown>> {
-	/** Unique identifier for this route instance */
-	key: string;
-	/** Name identifier for the screen */
-	name: string;
-	/** Optional parameters passed to the screen */
-	params?: Params;
-}
+export type ComponentStackNavigationEventMap = {};
 
-/**
- * Navigation action for dispatch method.
- */
-type ComponentNavigationAction =
-	| { type: "PUSH"; name: string; params?: Record<string, unknown> }
-	| { type: "POP" }
-	| { type: "POP_BY_KEY"; key: string }
-	| { type: "NAVIGATE"; name: string; params?: Record<string, unknown> }
-	| { type: "RESET"; name?: string; params?: Record<string, unknown> }
-	| { type: string; source?: string; target?: string; payload?: unknown };
+export type ComponentStackNavigationProp<
+	ParamList extends ParamListBase,
+	RouteName extends keyof ParamList = string,
+	NavigatorID extends string | undefined = undefined,
+> = NavigationProp<
+	ParamList,
+	RouteName,
+	NavigatorID,
+	StackNavigationState<ParamList>,
+	ComponentStackNavigationOptions,
+	ComponentStackNavigationEventMap
+> &
+	StackActionHelpers<ParamList>;
 
-/**
- * Navigation object provided to screens and available via useComponentNavigation hook.
- */
-export interface ComponentNavigation {
-	/** Push a new screen by name */
-	push: (name: string, params?: Record<string, unknown>) => void;
-	/** Pop the current screen */
-	pop: () => void;
-	/** Navigate back (alias for pop) */
-	goBack: () => void;
-	/** Navigate to a specific screen by name, reusing existing if present */
-	navigate: (name: string, params?: Record<string, unknown>) => void;
-	/** Check if we can go back */
-	canGoBack: () => boolean;
-	/** Reset to a specific screen or initial state */
-	reset: (name?: string, params?: Record<string, unknown>) => void;
-	/** Dispatch a navigation action (compatible with React Navigation's StackActions) */
-	dispatch: (action: ComponentNavigationAction) => void;
-	/** Get current navigation state (for gesture handling compatibility) */
-	getState: () => ComponentStackState;
-	/** Current index in the stack */
-	index: number;
-}
+export type ComponentStackScreenProps<
+	ParamList extends ParamListBase,
+	RouteName extends keyof ParamList = string,
+	NavigatorID extends string | undefined = undefined,
+> = {
+	navigation: ComponentStackNavigationProp<ParamList, RouteName, NavigatorID>;
+	route: RouteProp<ParamList, RouteName>;
+};
+
+export type ComponentStackOptionsArgs<
+	ParamList extends ParamListBase,
+	RouteName extends keyof ParamList = keyof ParamList,
+	NavigatorID extends string | undefined = undefined,
+> = ComponentStackScreenProps<ParamList, RouteName, NavigatorID> & {
+	theme: Theme;
+};
+
+export type ComponentStackNavigationHelpers = NavigationHelpers<
+	ParamListBase,
+	ComponentStackNavigationEventMap
+>;
+
+export type ComponentStackScene = {
+	route: Route<string>;
+	descriptor: ComponentStackDescriptor;
+};
+
+type ComponentStackNavigationConfig = {};
 
 /**
- * Screen options for component stack, extending the base transition config.
+ * Props passed to overlay components in component-stack.
+ * Uses the shared OverlayProps type with component-stack's navigation type.
  */
-export type ComponentStackScreenTransitionConfig = ScreenTransitionConfig & {
+export type ComponentStackOverlayProps = OverlayProps<
+	ComponentStackNavigationProp<ParamListBase>
+>;
+
+type ComponentStackScreenTransitionConfig = ScreenTransitionConfig & {
 	/**
 	 * Whether to detach the previous screen from the view hierarchy to save memory.
 	 * Set it to `false` if you need the previous screen to be seen through the active screen.
+	 * Only applicable if `detachInactiveScreens` isn't set to `false`.
 	 */
 	detachPreviousScreen?: boolean;
 };
 
-/**
- * Props passed to overlay components.
- */
-export type ComponentStackOverlayProps = {
-	/** Route of the currently focused screen in the stack. */
-	focusedRoute: ComponentRoute;
-	/** Index of the focused route in the stack. */
-	focusedIndex: number;
-	/** All routes currently in the stack. */
-	routes: ComponentRoute[];
-	/** Custom metadata from the focused screen's options. */
-	meta?: Record<string, unknown>;
-	/** Navigation object for the overlay. */
-	navigation: ComponentNavigation;
-	/** Animation values for the overlay. */
-	overlayAnimation: DerivedValue<OverlayInterpolationProps>;
-	/** Animation values for the screen. */
-	screenAnimation: DerivedValue<ScreenInterpolationProps>;
-};
-
-/**
- * Props passed to container overlay components.
- * Extends overlay props with children to wrap screen content.
- */
-export type ComponentStackContainerOverlayProps = ComponentStackOverlayProps & {
-	/** The screen content to be wrapped by the container overlay. */
-	children: React.ReactNode;
-};
-
-/**
- * Full navigation options for a component stack screen.
- */
 export type ComponentStackNavigationOptions =
-	ComponentStackScreenTransitionConfig & {
-		/** Function that returns a React Element to display as overlay. */
-		overlay?:
-			| ((props: ComponentStackOverlayProps) => React.ReactNode)
-			| ((props: ComponentStackContainerOverlayProps) => React.ReactNode);
-		/**
-		 * Layout: How the Overlay is positioned
-		 * - 'float': Single persistent overlay above all screens (like iOS)
-		 * - 'screen': Per-screen overlay that transitions with content
-		 * - 'container': Wraps all screen content (for MaskedView, custom containers)
-		 * @default 'screen'
-		 */
-		overlayMode?: OverlayMode;
-		/** Whether to show the overlay. Defaults to true when overlay is provided. */
-		overlayShown?: boolean;
-		/**
-		 * Whether inactive screens should be suspended from re-rendering.
-		 * Defaults to `true` when `enableFreeze()` is run at the top of the application.
-		 */
-		freezeOnBlur?: boolean;
-	};
+	ComponentStackScreenTransitionConfig & {};
 
-/**
- * Descriptor for a component stack screen.
- * Similar to React Navigation's Descriptor but simplified.
- */
-export interface ComponentStackDescriptor {
-	/** The route object for this screen */
-	route: ComponentRoute;
-	/** Navigation object */
-	navigation: ComponentNavigation;
-	/** Render function for the screen content */
-	render: () => React.JSX.Element | null;
-	/** Screen options/configuration */
-	options: ComponentStackNavigationOptions;
-}
+export type ComponentStackNavigatorProps = DefaultNavigatorOptions<
+	ParamListBase,
+	string | undefined,
+	StackNavigationState<ParamListBase>,
+	ComponentStackNavigationOptions,
+	ComponentStackNavigationEventMap,
+	ComponentStackNavigationProp<ParamListBase>
+> &
+	StackRouterOptions &
+	ComponentStackNavigationConfig;
 
-/**
- * A scene in the component stack (route + descriptor pair).
- */
-export interface ComponentStackScene {
-	route: ComponentRoute;
-	descriptor: ComponentStackDescriptor;
-}
+export type ComponentStackDescriptor = Descriptor<
+	ComponentStackNavigationOptions,
+	ComponentStackNavigationProp<ParamListBase>,
+	RouteProp<ParamListBase>
+>;
 
-/**
- * Map of route keys to descriptors.
- */
 export type ComponentStackDescriptorMap = {
 	[key: string]: ComponentStackDescriptor;
 };
-
-/**
- * Props passed to screen components.
- */
-export interface ComponentStackScreenProps<Params = Record<string, unknown>> {
-	/** Navigation object for controlling the stack */
-	navigation: ComponentNavigation;
-	/** Route object with params */
-	route: ComponentRoute<Params>;
-}
-
-/**
- * State of the component navigation stack.
- */
-export interface ComponentStackState {
-	/** All routes in the stack */
-	routes: ComponentRoute[];
-	/** Index of the currently focused route */
-	index: number;
-	/** Unique key for this stack instance */
-	key: string;
-}
-
-/**
- * Screen definition for the component navigator.
- */
-export interface ComponentScreenConfig {
-	/** Unique name for this screen */
-	name: string;
-	/** Component to render for this screen */
-	component: React.ComponentType<ComponentStackScreenProps<any>>;
-	/** Screen-specific options */
-	options?: ComponentStackNavigationOptions;
-}
-
-/**
- * Props for the ComponentNavigator component.
- */
-export interface ComponentNavigatorProps {
-	/** Screen definitions */
-	children: React.ReactNode;
-	/** Initial screen name to display */
-	initialRouteName?: string;
-	/** Default options applied to all screens */
-	screenOptions?: ComponentStackNavigationOptions;
-}
-
-/**
- * Props for the ComponentScreen component.
- */
-export interface ComponentScreenProps {
-	/** Unique name for this screen */
-	name: string;
-	/** Component to render */
-	component: React.ComponentType<ComponentStackScreenProps<any>>;
-	/** Screen-specific options */
-	options?: ComponentStackNavigationOptions;
-}

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

@@ -501,112 +501,110 @@ export const NativeStackView = withStackCore(
 		return (
 			<>
 				{shouldShowFloatOverlay ? <Overlay.Float /> : null}
-				<Overlay.Container>
-					<ScreenStack style={styles.container}>
-						{scenes.map((scene, index) => {
-							const { route, descriptor, isPreloaded } = scene;
-							const isFocused = focusedIndex === index;
-							const isBelowFocused = focusedIndex - 1 === index;
-
-							// Get previous/next descriptors from state.routes (not scenes) for proper navigation
-							const previousKey = state.routes[index - 1]?.key;
-							const nextKey = state.routes[index + 1]?.key;
-							const previousDescriptor = previousKey
-								? descriptors[previousKey]
-								: undefined;
-							const nextDescriptor = nextKey ? descriptors[nextKey] : undefined;
-
-							const isModal = modalRouteKeys.includes(route.key);
-
-							// On Fabric, when screen is frozen, animated and reanimated values are not updated
-							// due to component being unmounted. To avoid this, we don't freeze the previous screen there
-							const shouldFreeze = isFabric()
-								? !isPreloaded && !isFocused && !isBelowFocused
-								: !isPreloaded && !isFocused;
-
-							return (
-								<SceneView
-									key={route.key}
-									index={index}
-									focused={isFocused}
-									shouldFreeze={shouldFreeze}
-									descriptor={descriptor}
-									previousDescriptor={previousDescriptor}
-									nextDescriptor={nextDescriptor}
-									isPresentationModal={isModal}
-									isPreloaded={isPreloaded}
-									onWillDisappear={() => {
-										navigation.emit({
-											type: "transitionStart",
-											data: { closing: true },
-											target: route.key,
-										});
-									}}
-									onWillAppear={() => {
-										navigation.emit({
-											type: "transitionStart",
-											data: { closing: false },
-											target: route.key,
-										});
-									}}
-									onAppear={() => {
-										navigation.emit({
-											type: "transitionEnd",
-											data: { closing: false },
-											target: route.key,
-										});
-									}}
-									onDisappear={() => {
-										navigation.emit({
-											type: "transitionEnd",
-											data: { closing: true },
-											target: route.key,
-										});
-									}}
-									onDismissed={(event) => {
-										navigation.dispatch({
-											...StackActions.pop(event.nativeEvent.dismissCount),
-											source: route.key,
-											target: state.key,
-										});
-
-										setNextDismissedKey(route.key);
-									}}
-									onHeaderBackButtonClicked={() => {
-										navigation.dispatch({
-											...StackActions.pop(),
-											source: route.key,
-											target: state.key,
-										});
-									}}
-									onNativeDismissCancelled={(event) => {
-										navigation.dispatch({
-											...StackActions.pop(event.nativeEvent.dismissCount),
-											source: route.key,
-											target: state.key,
-										});
-									}}
-									onGestureCancel={() => {
-										navigation.emit({
-											type: "gestureCancel",
-											target: route.key,
-										});
-									}}
-									onSheetDetentChanged={(event) => {
-										navigation.emit({
-											type: "sheetDetentChange",
-											target: route.key,
-											data: {
-												index: event.nativeEvent.index,
-												stable: event.nativeEvent.isStable,
-											},
-										});
-									}}
-								/>
-							);
-						})}
-					</ScreenStack>
-				</Overlay.Container>
+				<ScreenStack style={styles.container}>
+					{scenes.map((scene, index) => {
+						const { route, descriptor, isPreloaded } = scene;
+						const isFocused = focusedIndex === index;
+						const isBelowFocused = focusedIndex - 1 === index;
+
+						// Get previous/next descriptors from state.routes (not scenes) for proper navigation
+						const previousKey = state.routes[index - 1]?.key;
+						const nextKey = state.routes[index + 1]?.key;
+						const previousDescriptor = previousKey
+							? descriptors[previousKey]
+							: undefined;
+						const nextDescriptor = nextKey ? descriptors[nextKey] : undefined;
+
+						const isModal = modalRouteKeys.includes(route.key);
+
+						// On Fabric, when screen is frozen, animated and reanimated values are not updated
+						// due to component being unmounted. To avoid this, we don't freeze the previous screen there
+						const shouldFreeze = isFabric()
+							? !isPreloaded && !isFocused && !isBelowFocused
+							: !isPreloaded && !isFocused;
+
+						return (
+							<SceneView
+								key={route.key}
+								index={index}
+								focused={isFocused}
+								shouldFreeze={shouldFreeze}
+								descriptor={descriptor}
+								previousDescriptor={previousDescriptor}
+								nextDescriptor={nextDescriptor}
+								isPresentationModal={isModal}
+								isPreloaded={isPreloaded}
+								onWillDisappear={() => {
+									navigation.emit({
+										type: "transitionStart",
+										data: { closing: true },
+										target: route.key,
+									});
+								}}
+								onWillAppear={() => {
+									navigation.emit({
+										type: "transitionStart",
+										data: { closing: false },
+										target: route.key,
+									});
+								}}
+								onAppear={() => {
+									navigation.emit({
+										type: "transitionEnd",
+										data: { closing: false },
+										target: route.key,
+									});
+								}}
+								onDisappear={() => {
+									navigation.emit({
+										type: "transitionEnd",
+										data: { closing: true },
+										target: route.key,
+									});
+								}}
+								onDismissed={(event) => {
+									navigation.dispatch({
+										...StackActions.pop(event.nativeEvent.dismissCount),
+										source: route.key,
+										target: state.key,
+									});
+
+									setNextDismissedKey(route.key);
+								}}
+								onHeaderBackButtonClicked={() => {
+									navigation.dispatch({
+										...StackActions.pop(),
+										source: route.key,
+										target: state.key,
+									});
+								}}
+								onNativeDismissCancelled={(event) => {
+									navigation.dispatch({
+										...StackActions.pop(event.nativeEvent.dismissCount),
+										source: route.key,
+										target: state.key,
+									});
+								}}
+								onGestureCancel={() => {
+									navigation.emit({
+										type: "gestureCancel",
+										target: route.key,
+									});
+								}}
+								onSheetDetentChanged={(event) => {
+									navigation.emit({
+										type: "sheetDetentChange",
+										target: route.key,
+										data: {
+											index: event.nativeEvent.index,
+											stable: event.nativeEvent.isStable,
+										},
+									});
+								}}
+							/>
+						);
+					})}
+				</ScreenStack>
 			</>
 		);
 	}),

package/src/shared/__tests__/sync-routes-with-removed.test.ts

@@ -112,152 +112,6 @@ describe("syncRoutesWithRemoved", () => {
 		});
 	});
 
-	describe("mid-dismiss route reordering", () => {
-		it("moves mid-dismiss route to end when pushing while swiping (progress < 0.5)", () => {
-			const closingRouteKeys = createClosingRouteKeys();
-
-			setRouteState("a", { progress: 1 });
-			setRouteState("b-old", { progress: 0.3 }); // Mid-dismiss
-			setRouteState("b-new", { progress: 0 }); // Just pushed
-
-			const result = syncRoutesWithRemoved({
-				prevRoutes: [createRoute("a"), createRoute("b-old")],
-				prevDescriptors: { a: {}, "b-old": {} },
-				nextRoutes: [
-					createRoute("a"),
-					createRoute("b-old"),
-					createRoute("b-new"),
-				],
-				nextDescriptors: { a: {}, "b-old": {}, "b-new": {} },
-				closingRouteKeys,
-			});
-
-			expect(result.routes.map((r) => r.key)).toEqual(["a", "b-new", "b-old"]);
-		});
-
-		it("marks moved route as closing", () => {
-			const closingRouteKeys = createClosingRouteKeys();
-
-			setRouteState("a", { progress: 1 });
-			setRouteState("b-old", { progress: 0.3 });
-			setRouteState("b-new", { progress: 0 });
-
-			syncRoutesWithRemoved({
-				prevRoutes: [createRoute("a"), createRoute("b-old")],
-				prevDescriptors: { a: {}, "b-old": {} },
-				nextRoutes: [
-					createRoute("a"),
-					createRoute("b-old"),
-					createRoute("b-new"),
-				],
-				nextDescriptors: { a: {}, "b-old": {}, "b-new": {} },
-				closingRouteKeys,
-			});
-
-			expect(closingRouteKeys.ref.current.has("b-old")).toBe(true);
-		});
-
-		it("detects dismissing via isDragging flag", () => {
-			const closingRouteKeys = createClosingRouteKeys();
-
-			setRouteState("a", { progress: 1 });
-			setRouteState("b-old", { progress: 1, isDragging: 1 }); // Being dragged
-			setRouteState("b-new", { progress: 0 });
-
-			const result = syncRoutesWithRemoved({
-				prevRoutes: [createRoute("a"), createRoute("b-old")],
-				prevDescriptors: { a: {}, "b-old": {} },
-				nextRoutes: [
-					createRoute("a"),
-					createRoute("b-old"),
-					createRoute("b-new"),
-				],
-				nextDescriptors: { a: {}, "b-old": {}, "b-new": {} },
-				closingRouteKeys,
-			});
-
-			expect(result.routes.map((r) => r.key)).toEqual(["a", "b-new", "b-old"]);
-		});
-
-		it("detects dismissing via isDismissing flag", () => {
-			const closingRouteKeys = createClosingRouteKeys();
-
-			setRouteState("a", { progress: 1 });
-			setRouteState("b-old", { progress: 1, isDismissing: 1 });
-			setRouteState("b-new", { progress: 0 });
-
-			const result = syncRoutesWithRemoved({
-				prevRoutes: [createRoute("a"), createRoute("b-old")],
-				prevDescriptors: { a: {}, "b-old": {} },
-				nextRoutes: [
-					createRoute("a"),
-					createRoute("b-old"),
-					createRoute("b-new"),
-				],
-				nextDescriptors: { a: {}, "b-old": {}, "b-new": {} },
-				closingRouteKeys,
-			});
-
-			expect(result.routes.map((r) => r.key)).toEqual(["a", "b-new", "b-old"]);
-		});
-
-		it("detects dismissing via closing flag", () => {
-			const closingRouteKeys = createClosingRouteKeys();
-
-			setRouteState("a", { progress: 1 });
-			setRouteState("b-old", { progress: 1, closing: 1 });
-			setRouteState("b-new", { progress: 0 });
-
-			const result = syncRoutesWithRemoved({
-				prevRoutes: [createRoute("a"), createRoute("b-old")],
-				prevDescriptors: { a: {}, "b-old": {} },
-				nextRoutes: [
-					createRoute("a"),
-					createRoute("b-old"),
-					createRoute("b-new"),
-				],
-				nextDescriptors: { a: {}, "b-old": {}, "b-new": {} },
-				closingRouteKeys,
-			});
-
-			expect(result.routes.map((r) => r.key)).toEqual(["a", "b-new", "b-old"]);
-		});
-
-		it("does not move first route even if dismissing", () => {
-			const closingRouteKeys = createClosingRouteKeys();
-
-			setRouteState("a", { progress: 0.3 }); // First route, low progress
-			setRouteState("b", { progress: 1 });
-
-			const result = syncRoutesWithRemoved({
-				prevRoutes: [createRoute("a")],
-				prevDescriptors: { a: {} },
-				nextRoutes: [createRoute("a"), createRoute("b")],
-				nextDescriptors: { a: {}, b: {} },
-				closingRouteKeys,
-			});
-
-			expect(result.routes.map((r) => r.key)).toEqual(["a", "b"]);
-		});
-
-		it("does not move last route even if low progress (newly pushed)", () => {
-			const closingRouteKeys = createClosingRouteKeys();
-
-			setRouteState("a", { progress: 1 });
-			setRouteState("b", { progress: 1 });
-			setRouteState("c", { progress: 0.1 }); // Last route, low progress (just pushed)
-
-			const result = syncRoutesWithRemoved({
-				prevRoutes: [createRoute("a"), createRoute("b")],
-				prevDescriptors: { a: {}, b: {} },
-				nextRoutes: [createRoute("a"), createRoute("b"), createRoute("c")],
-				nextDescriptors: { a: {}, b: {}, c: {} },
-				closingRouteKeys,
-			});
-
-			expect(result.routes.map((r) => r.key)).toEqual(["a", "b", "c"]);
-		});
-	});
 
 	describe("normal back navigation", () => {
 		it("keeps closing route at end for normal back (C -> B)", () => {