@react-navigation/routers 7.0.0-alpha.4 → 7.0.0-alpha.6

package/src/StackRouter.tsx

@@ -4,6 +4,7 @@ import { BaseRouter } from './BaseRouter';
 import type {
   CommonNavigationAction,
   DefaultRouterOptions,
+  NavigationRoute,
   NavigationState,
   ParamListBase,
   Route,
@@ -43,6 +44,20 @@ export type StackActionType =
       };
       source?: string;
       target?: string;
+    }
+  | {
+      type: 'REMOVE';
+      payload: {
+        name: string;
+        params?: object;
+      };
+      source?: string;
+      target?: string;
+    }
+  | {
+      type: 'RETAIN';
+      source?: string;
+      target?: string;
     };
 
 export type StackRouterOptions = DefaultRouterOptions;
@@ -53,6 +68,10 @@ export type StackNavigationState<ParamList extends ParamListBase> =
      * Type of the router, in this case, it's stack.
      */
     type: 'stack';
+    /**
+     * List of routes, which are supposed to be preloaded before navigating to.
+     */
+    preloadedRoutes: NavigationRoute<ParamList, keyof ParamList>[];
   };
 
 export type StackActionHelpers<ParamList extends ParamListBase> = {
@@ -113,6 +132,29 @@ export type StackActionHelpers<ParamList extends ParamListBase> = {
             | [screen: RouteName, params: ParamList[RouteName], merge: boolean]
       : never
   ): void;
+
+  /**
+   * Remove a screen from the preloaded list in the navigator.
+   *
+   * @param name Name of the route to remove preload.
+   * @param [params] Params object for the route.
+   */
+  remove<RouteName extends keyof ParamList>(
+    ...args: RouteName extends unknown
+      ? undefined extends ParamList[RouteName]
+        ?
+            | [screen: RouteName]
+            | [screen: RouteName, params: ParamList[RouteName]]
+        : [screen: RouteName, params: ParamList[RouteName]]
+      : never
+  ): void;
+
+  /**
+   * Removes a screen from the active routes, at the same time
+   * retaining the screen in the preloaded screens list,
+   * so it is not getting detached.
+   */
+  retain(): void;
 };
 
 export const StackActions = {
@@ -131,6 +173,12 @@ export const StackActions = {
   popTo(name: string, params?: object, merge?: boolean): StackActionType {
     return { type: 'POP_TO', payload: { name, params, merge } };
   },
+  remove(name: string, params?: object): StackActionType {
+    return { type: 'REMOVE', payload: { name, params } };
+  },
+  retain(): StackActionType {
+    return { type: 'RETAIN' };
+  },
 };
 
 export function StackRouter(options: StackRouterOptions) {
@@ -155,6 +203,7 @@ export function StackRouter(options: StackRouterOptions) {
         key: `stack-${nanoid()}`,
         index: 0,
         routeNames,
+        preloadedRoutes: [],
         routes: [
           {
             key: `${initialRouteName}-${nanoid()}`,
@@ -174,20 +223,35 @@ export function StackRouter(options: StackRouterOptions) {
 
       const routes = state.routes
         .filter((route) => routeNames.includes(route.name))
-        .map(
-          (route) =>
-            ({
-              ...route,
-              key: route.key || `${route.name}-${nanoid()}`,
-              params:
-                routeParamList[route.name] !== undefined
-                  ? {
-                      ...routeParamList[route.name],
-                      ...route.params,
-                    }
-                  : route.params,
-            }) as Route<string>
-        );
+        .map((route) => ({
+          ...route,
+          key: route.key || `${route.name}-${nanoid()}`,
+          params:
+            routeParamList[route.name] !== undefined
+              ? {
+                  ...routeParamList[route.name],
+                  ...route.params,
+                }
+              : route.params,
+        }));
+
+      const preloadedRoutes =
+        state.preloadedRoutes
+          ?.filter((route) => routeNames.includes(route.name))
+          .map(
+            (route) =>
+              ({
+                ...route,
+                key: route.key || `${route.name}-${nanoid()}`,
+                params:
+                  routeParamList[route.name] !== undefined
+                    ? {
+                        ...routeParamList[route.name],
+                        ...route.params,
+                      }
+                    : route.params,
+              }) as Route<string>
+          ) ?? [];
 
       if (routes.length === 0) {
         const initialRouteName =
@@ -209,6 +273,7 @@ export function StackRouter(options: StackRouterOptions) {
         index: routes.length - 1,
         routeNames,
         routes,
+        preloadedRoutes,
       };
     },
 
@@ -327,6 +392,14 @@ export function StackRouter(options: StackRouterOptions) {
             }
           }
 
+          if (!route) {
+            route = state.preloadedRoutes.find(
+              (route) =>
+                route.name === action.payload.name &&
+                id === getId?.({ params: route.params })
+            );
+          }
+
           let params;
 
           if (action.type === 'NAVIGATE' && action.payload.merge && route) {
@@ -379,11 +452,23 @@ export function StackRouter(options: StackRouterOptions) {
           return {
             ...state,
             index: routes.length - 1,
+            preloadedRoutes: state.preloadedRoutes.filter(
+              (route) => routes[routes.length - 1].key !== route.key
+            ),
             routes,
           };
         }
 
         case 'NAVIGATE_DEPRECATED': {
+          if (
+            state.preloadedRoutes.find(
+              (route) =>
+                route.name === action.payload.name &&
+                id === getId?.({ params: route.params })
+            )
+          ) {
+            return null;
+          }
           if (!state.routeNames.includes(action.payload.name)) {
             return null;
           }
@@ -606,6 +691,96 @@ export function StackRouter(options: StackRouterOptions) {
 
           return null;
 
+        case 'PRELOAD': {
+          const getId = options.routeGetIdList[action.payload.name];
+          const id = getId?.({ params: action.payload.params });
+
+          let route: Route<string> | undefined;
+
+          if (id !== undefined) {
+            route = state.routes.find(
+              (route) =>
+                route.name === action.payload.name &&
+                id === getId?.({ params: route.params })
+            );
+          }
+
+          if (route) {
+            return {
+              ...state,
+              routes: state.routes.map((r) => {
+                if (r.key !== route?.key) {
+                  return r;
+                }
+                return {
+                  ...r,
+                  params:
+                    routeParamList[action.payload.name] !== undefined
+                      ? {
+                          ...routeParamList[action.payload.name],
+                          ...action.payload.params,
+                        }
+                      : action.payload.params,
+                };
+              }),
+            };
+          } else {
+            return {
+              ...state,
+              preloadedRoutes: state.preloadedRoutes
+                .filter(
+                  (r) =>
+                    r.name !== action.payload.name ||
+                    id !== getId?.({ params: r.params })
+                )
+                .concat({
+                  key: `${action.payload.name}-${nanoid()}`,
+                  name: action.payload.name,
+                  params:
+                    routeParamList[action.payload.name] !== undefined
+                      ? {
+                          ...routeParamList[action.payload.name],
+                          ...action.payload.params,
+                        }
+                      : action.payload.params,
+                }),
+            };
+          }
+        }
+        case 'RETAIN': {
+          const index =
+            action.target === state.key && action.source
+              ? state.routes.findIndex((r) => r.key === action.source)
+              : state.index;
+
+          if (index === -1) {
+            return null;
+          }
+
+          const route = state.routes[index];
+
+          const routes = state.routes.filter((r) => r !== route);
+          return {
+            ...state,
+            index: routes.length - 1,
+            routes,
+            preloadedRoutes: state.preloadedRoutes.concat(route),
+          };
+        }
+
+        case 'REMOVE': {
+          const getId = options.routeGetIdList[action.payload.name];
+          const id = getId?.({ params: action.payload.params });
+
+          return {
+            ...state,
+            preloadedRoutes: state.preloadedRoutes.filter(
+              (route) =>
+                route.name !== action.payload.name ||
+                id !== getId?.({ params: route.params })
+            ),
+          };
+        }
         default:
           return BaseRouter.getStateForAction(state, action);
       }

package/src/TabRouter.tsx

@@ -41,6 +41,10 @@ export type TabNavigationState<ParamList extends ParamListBase> = Omit<
    * List of previously visited route keys.
    */
   history: { type: 'route'; key: string }[];
+  /**
+   * List of routes' key, which are supposed to be preloaded before navigating to.
+   */
+  preloadedRouteKeys: string[];
 };
 
 export type TabActionHelpers<ParamList extends ParamListBase> = {
@@ -178,6 +182,7 @@ export function TabRouter({
         routeNames,
         history,
         routes,
+        preloadedRouteKeys: [],
       };
     },
 
@@ -207,8 +212,8 @@ export function TabRouter({
                   ...(route ? route.params : undefined),
                 }
               : route
-              ? route.params
-              : undefined,
+                ? route.params
+                : undefined,
         } as Route<string>;
       });
 
@@ -217,9 +222,10 @@ export function TabRouter({
         routes.length - 1
       );
 
+      const routeKeys = routes.map((route) => route.key);
+
       const history =
-        state.history?.filter((it) => routes.find((r) => r.key === it.key)) ??
-        [];
+        state.history?.filter((it) => routeKeys.includes(it.key)) ?? [];
 
       return changeIndex(
         {
@@ -230,6 +236,10 @@ export function TabRouter({
           routeNames,
           history,
           routes,
+          preloadedRouteKeys:
+            state.preloadedRouteKeys?.filter((key) =>
+              routeKeys.includes(key)
+            ) ?? [],
         },
         index,
         backBehavior,
@@ -303,7 +313,7 @@ export function TabRouter({
             return null;
           }
 
-          return changeIndex(
+          const updatedState = changeIndex(
             {
               ...state,
               routes: state.routes.map((route) => {
@@ -362,6 +372,13 @@ export function TabRouter({
             backBehavior,
             initialRouteName
           );
+
+          return {
+            ...updatedState,
+            preloadedRouteKeys: updatedState.preloadedRouteKeys.filter(
+              (key) => key !== state.routes[updatedState.index].key
+            ),
+          };
         }
 
         case 'GO_BACK': {
@@ -380,11 +397,58 @@ export function TabRouter({
 
           return {
             ...state,
+            preloadedRouteKeys: state.preloadedRouteKeys.filter(
+              (key) => key !== state.routes[index].key
+            ),
             history: state.history.slice(0, -1),
             index,
           };
         }
 
+        case 'PRELOAD': {
+          const routeIndex = state.routes.findIndex(
+            (route) => route.name === action.payload.name
+          );
+          if (routeIndex === -1) {
+            return null;
+          }
+          const route = state.routes[routeIndex];
+
+          const getId = routeGetIdList[route.name];
+
+          const currentId = getId?.({ params: route.params });
+          const nextId = getId?.({ params: action.payload.params });
+
+          const key =
+            currentId === nextId ? route.key : `${route.name}-${nanoid()}`;
+
+          const params =
+            action.payload.params !== undefined ||
+            routeParamList[route.name] !== undefined
+              ? {
+                  ...routeParamList[route.name],
+                  ...action.payload.params,
+                }
+              : undefined;
+
+          const newRoute =
+            params !== route.params ? { ...route, key, params } : route;
+
+          return {
+            ...state,
+            preloadedRouteKeys: state.preloadedRouteKeys
+              .filter((key) => key !== route.key)
+              .concat(newRoute.key),
+            routes: state.routes.map((route, index) =>
+              index === routeIndex ? newRoute : route
+            ),
+            history:
+              key === route.key
+                ? state.history
+                : state.history.filter((record) => record.key !== route.key),
+          };
+        }
+
         default:
           return BaseRouter.getStateForAction(state, action);
       }

package/src/types.tsx

@@ -2,7 +2,7 @@ import type * as CommonActions from './CommonActions';
 
 export type CommonNavigationAction = CommonActions.Action;
 
-type NavigationRoute<
+export type NavigationRoute<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList,
 > = Route<Extract<RouteName, string>, ParamList[RouteName]> & {