@react-navigation/routers 8.0.0-alpha.13 → 8.0.0-alpha.14

package/src/BaseRouter.tsx

@@ -6,105 +6,116 @@ import type {
   PartialState,
 } from './types';
 
-/**
- * Base router object that can be used when writing custom routers.
- * This provides few helper methods to handle common actions such as `RESET`.
- */
-export const BaseRouter = {
-  getStateForAction<State extends NavigationState>(
-    state: State,
-    action: CommonNavigationAction
-  ): State | PartialState<State> | null {
-    switch (action.type) {
-      case 'SET_PARAMS':
-      case 'REPLACE_PARAMS': {
-        const index = action.source
-          ? state.routes.findIndex((r) => r.key === action.source)
-          : state.index;
-
-        if (index === -1) {
-          return null;
-        }
+function getStateForAction<State extends NavigationState>(
+  state: State,
+  action: CommonNavigationAction
+): State | PartialState<State> | null;
+function getStateForAction(
+  state: NavigationState,
+  action: CommonNavigationAction
+) {
+  switch (action.type) {
+    case 'SET_PARAMS':
+    case 'REPLACE_PARAMS': {
+      const index = action.source
+        ? state.routes.findIndex((r) => r.key === action.source)
+        : state.index;
 
-        return {
-          ...state,
-          routes: state.routes.map((r, i) =>
-            i === index
-              ? {
-                  ...r,
-                  params:
-                    action.type === 'REPLACE_PARAMS'
-                      ? action.payload.params
-                      : { ...r.params, ...action.payload.params },
-                }
-              : r
-          ),
-        };
+      if (index === -1) {
+        return null;
       }
 
-      case 'PUSH_PARAMS': {
-        const index = action.source
-          ? state.routes.findIndex((r) => r.key === action.source)
-          : state.index;
+      return {
+        ...state,
+        routes: state.routes.map((r, i) =>
+          i === index
+            ? {
+                ...r,
+                params:
+                  action.type === 'REPLACE_PARAMS'
+                    ? action.payload.params
+                    : { ...r.params, ...action.payload.params },
+              }
+            : r
+        ),
+      };
+    }
 
-        if (index === -1) {
-          return null;
-        }
+    case 'PUSH_PARAMS': {
+      const index = action.source
+        ? state.routes.findIndex((r) => r.key === action.source)
+        : state.index;
 
-        return {
-          ...state,
-          routes: state.routes.map((r, i) =>
-            i === index
-              ? {
-                  ...r,
-                  params: action.payload.params,
-                  history: [
-                    ...(r.history ?? []),
-                    { type: 'params', params: r.params },
-                  ],
-                }
-              : r
-          ),
-        };
+      if (index === -1) {
+        return null;
       }
 
-      case 'RESET': {
-        const nextState = action.payload as State | PartialState<State>;
+      return {
+        ...state,
+        routes: state.routes.map((r, i) =>
+          i === index
+            ? {
+                ...r,
+                params: action.payload.params,
+                history: [
+                  ...(r.history ?? []),
+                  { type: 'params', params: r.params },
+                ],
+              }
+            : r
+        ),
+      };
+    }
 
-        const routeNamesSet = new Set(state.routeNames);
+    case 'RESET': {
+      const nextState = action.payload;
 
+      const routeNamesSet = new Set(state.routeNames);
+
+      if (
+        nextState.routes.length === 0 ||
+        nextState.routes.some(
+          (route: { name: string }) => !routeNamesSet.has(route.name)
+        )
+      ) {
+        return null;
+      }
+
+      if (nextState.stale === false) {
         if (
-          nextState.routes.length === 0 ||
-          nextState.routes.some(
-            (route: { name: string }) => !routeNamesSet.has(route.name)
-          )
+          state.routeNames.length !== nextState.routeNames.length ||
+          nextState.routeNames.some((name) => !routeNamesSet.has(name)) ||
+          !Number.isInteger(nextState.index) ||
+          nextState.index < 0 ||
+          nextState.index >= nextState.routes.length
         ) {
           return null;
         }
 
-        if (nextState.stale === false) {
-          if (
-            state.routeNames.length !== nextState.routeNames.length ||
-            nextState.routeNames.some((name) => !routeNamesSet.has(name))
-          ) {
-            return null;
-          }
-
-          return {
-            ...nextState,
-            routes: nextState.routes.map((route) =>
-              route.key ? route : { ...route, key: `${route.name}-${nanoid()}` }
-            ),
-          };
-        }
-
-        return nextState;
+        return {
+          ...nextState,
+          routes: nextState.routes.map((route) =>
+            'key' in route && route.key
+              ? route
+              : { ...route, key: `${route.name}-${nanoid()}` }
+          ),
+        };
       }
 
-      default:
-        return null;
+      return nextState;
     }
-  },
+
+    default:
+      return null;
+  }
+}
+
+/**
+ * Base router object that can be used when writing custom routers.
+ * This provides few helper methods to handle common actions such as `RESET`.
+ */
+export const BaseRouter = {
+  getStateForAction,
 
   shouldActionChangeFocus(action: CommonNavigationAction) {
     return action.type === 'NAVIGATE';

package/src/DrawerRouter.tsx

@@ -1,11 +1,11 @@
 import { nanoid } from 'nanoid/non-secure';
 
+import { SwitchRouter } from './SwitchRouter';
 import {
   type TabActionHelpers,
   TabActions,
   type TabActionType,
   type TabNavigationState,
-  TabRouter,
   type TabRouterOptions,
 } from './TabRouter';
 import type {
@@ -14,6 +14,7 @@ import type {
   PartialState,
   Router,
 } from './types';
+
 export type DrawerStatus = 'open' | 'closed';
 
 export type DrawerActionType =
@@ -44,7 +45,11 @@ export type DrawerNavigationState<ParamList extends ParamListBase> = Omit<
    * List of previously visited route keys and drawer open status.
    */
   history: (
-    | { type: 'route'; key: string }
+    | {
+        type: 'route';
+        key: string;
+        params?: object | undefined;
+      }
     | { type: 'drawer'; status: DrawerStatus }
   )[];
 };
@@ -87,10 +92,7 @@ export function DrawerRouter({
   DrawerNavigationState<ParamListBase>,
   DrawerActionType | CommonNavigationAction
 > {
-  const router = TabRouter(rest) as unknown as Router<
-    DrawerNavigationState<ParamListBase>,
-    TabActionType | CommonNavigationAction
-  >;
+  const router = SwitchRouter<'drawer'>(rest);
 
   const isDrawerInHistory = (
     state:
@@ -179,11 +181,16 @@ export function DrawerRouter({
         return partialState;
       }
 
-      let state = router.getRehydratedState(partialState, {
-        routeNames,
-        routeParamList,
-        routeGetIdList,
-      });
+      let state: DrawerNavigationState<ParamListBase> = {
+        ...router.getRehydratedState(partialState, {
+          routeNames,
+          routeParamList,
+          routeGetIdList,
+        }),
+        default: defaultStatus,
+        type: 'drawer',
+        key: `drawer-${nanoid()}`,
+      };
 
       if (isDrawerInHistory(partialState)) {
         // Re-sync the drawer entry in history to correct it if it was wrong
@@ -191,12 +198,7 @@ export function DrawerRouter({
         state = addDrawerToHistory(state);
       }
 
-      return {
-        ...state,
-        default: defaultStatus,
-        type: 'drawer',
-        key: `drawer-${nanoid()}`,
-      };
+      return state;
     },
 
     getStateForRouteFocus(state, key) {
@@ -224,8 +226,12 @@ export function DrawerRouter({
         case 'NAVIGATE': {
           const result = router.getStateForAction(state, action, options);
 
-          if (result != null && result.index !== state.index) {
-            return closeDrawer(result as DrawerNavigationState<ParamListBase>);
+          if (
+            result != null &&
+            result.stale === false &&
+            result.index !== state.index
+          ) {
+            return closeDrawer(result);
           }
 
           return result;

package/src/StackRouter.tsx

@@ -703,20 +703,23 @@ export function StackRouter(options: StackRouterOptions) {
           /**
            * When popping entries,
            * - Pop entries from route.history
-           * - Pop routes from state.routes
+           * - Pop the route itself and continue from the route below it
            *
            * Repeat until:
            * - We have popped the amount of items in count
            * - There are no more items to pop
+           *
+           * Routes above the current route (e.g. above the source) are kept intact
            */
           if (route.history?.length || currentIndex > 0) {
             let count = action.payload.count;
-            let nextRoutes = routes;
+
+            let removedFromIndex: number | undefined;
+
+            const sourceIndex = currentIndex;
 
             while (count > 0 && (route.history?.length || currentIndex > 0)) {
               if (route.history?.length) {
-                nextRoutes = [...nextRoutes];
-
                 const end = Math.min(count, route.history.length);
                 const last = route.history.at(-end);
                 const history = route.history.slice(0, -end);
@@ -724,7 +727,7 @@ export function StackRouter(options: StackRouterOptions) {
 
                 count = count - removed;
 
-                nextRoutes[currentIndex] = {
+                route = {
                   ...route,
                   params: last?.type === 'params' ? last.params : route.params,
                   history,
@@ -732,19 +735,11 @@ export function StackRouter(options: StackRouterOptions) {
               }
 
               if (currentIndex > 0 && count > 0) {
-                const length = nextRoutes.length;
-                const end = Math.max(currentIndex - count + 1, 1);
+                count = count - 1;
+                removedFromIndex = currentIndex;
+                currentIndex = currentIndex - 1;
 
-                nextRoutes = nextRoutes
-                  .slice(0, end)
-                  .concat(nextRoutes.slice(currentIndex + 1));
-
-                const removed = length - nextRoutes.length;
-
-                count = count - removed;
-                currentIndex = nextRoutes.length - 1;
-
-                const currentRoute = nextRoutes[currentIndex];
+                const currentRoute = routes[currentIndex];
 
                 if (currentRoute == null) {
                   throw new Error(
@@ -756,6 +751,21 @@ export function StackRouter(options: StackRouterOptions) {
               }
             }
 
+            let nextRoutes =
+              removedFromIndex === undefined
+                ? routes
+                : routes
+                    .slice(0, removedFromIndex)
+                    .concat(routes.slice(sourceIndex + 1));
+
+            if (route !== routes[currentIndex]) {
+              if (nextRoutes === routes) {
+                nextRoutes = [...routes];
+              }
+
+              nextRoutes[currentIndex] = route;
+            }
+
             return retainRoutes(state, getStateWithRoutes(state, nextRoutes));
           }