@react-navigation/core 8.0.0-alpha.4 → 8.0.0-alpha.41

package/src/StaticTreeContext.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+import type { TreeForPathConfig } from './StaticNavigation';
+
+export const StaticTreeContext = React.createContext<
+  TreeForPathConfig | undefined
+>(undefined);

package/src/createNavigationContainerRef.tsx

@@ -19,17 +19,17 @@ export function createNavigationContainerRef<
     'removeListener',
     'resetRoot',
     'dispatch',
-    'isFocused',
     'canGoBack',
     'getRootState',
     'getState',
-    'getParent',
     'getCurrentRoute',
     'getCurrentOptions',
   ] as const;
 
   const listeners: Record<string, ((...args: any[]) => void)[]> = {};
 
+  let current: NavigationContainerRef<ParamList> | null = null;
+
   const removeListener = (
     event: string,
     callback: (...args: any[]) => void
@@ -37,9 +37,12 @@ export function createNavigationContainerRef<
     if (listeners[event]) {
       listeners[event] = listeners[event].filter((cb) => cb !== callback);
     }
-  };
 
-  let current: NavigationContainerRef<ParamList> | null = null;
+    current?.removeListener(
+      event as keyof NavigationContainerEventMap,
+      callback
+    );
+  };
 
   const ref: NavigationContainerRefWithCurrent<ParamList> = {
     get current() {
@@ -68,7 +71,11 @@ export function createNavigationContainerRef<
     },
     ...methods.reduce<any>((acc, name) => {
       acc[name] = (...args: any[]) => {
-        if (current == null) {
+        if (name === 'removeListener') {
+          const [event, callback] = args;
+
+          removeListener(event, callback);
+        } else if (current == null) {
           switch (name) {
             case 'addListener': {
               const [event, callback] = args;
@@ -78,12 +85,6 @@ export function createNavigationContainerRef<
 
               return () => removeListener(event, callback);
             }
-            case 'removeListener': {
-              const [event, callback] = args;
-
-              removeListener(event, callback);
-              break;
-            }
             default:
               console.error(NOT_INITIALIZED_ERROR);
           }

package/src/createNavigatorFactory.tsx

@@ -1,23 +1,107 @@
-import type * as React from 'react';
+import type { ParamListBase } from '@react-navigation/routers';
+import * as React from 'react';
 
 import { Group } from './Group';
 import { Screen } from './Screen';
+import {
+  createComponentForStaticConfig,
+  type NoExcessStaticConfig,
+  type StaticConfig,
+  type StaticParamList,
+} from './StaticNavigation';
+import type {
+  NavigatorTypeBagBase,
+  NavigatorTypeBagFor,
+  NestedNavigatorsForParamList,
+  TypedNavigator,
+} from './types';
+import type { KeysOf, NoExcessObject } from './utilities';
+
+type NavigatorNesting<ParamList extends ParamListBase, Nesting> = {
+  [RouteName in keyof ParamList]?: unknown;
+} & Record<Exclude<KeysOf<Nesting>, keyof ParamList>, never>;
+
+type ValidNavigatorNesting<ParamList extends ParamListBase, Nesting> =
+  Nesting extends NavigatorNesting<ParamList, Nesting> ? Nesting : never;
+
+type AnyStaticConfig<TypeBag extends NavigatorTypeBagBase> = StaticConfig<
+  NavigatorTypeBagFor<TypeBag, ParamListBase>
+>;
+
+export type TypedNavigatorFactory<in out TypeBag extends NavigatorTypeBagBase> =
+  {
+    <
+      const ParamList extends ParamListBase,
+      const Nesting extends NavigatorNesting<ParamList, Nesting> =
+        ValidNavigatorNesting<
+          ParamList,
+          NestedNavigatorsForParamList<ParamList>
+        >,
+    >(): TypedNavigator<
+      NavigatorTypeBagFor<TypeBag, ParamList>,
+      undefined,
+      Nesting
+    >;
+    <
+      const Config extends AnyStaticConfig<TypeBag> &
+        NoExcessObject<Config, AnyStaticConfig<TypeBag>>,
+    >(
+      config: Config & NoExcessStaticConfig<NoInfer<Config>, TypeBag>
+    ): TypedNavigator<
+      NavigatorTypeBagFor<TypeBag, StaticParamList<{ config: Config }>>,
+      Config
+    >;
+  };
 
 /**
- * Higher order component to create a `Navigator` and `Screen` pair.
- * Custom navigators should wrap the navigator component in `createNavigator` before exporting.
+ * Higher order function to create a navigator factory
+ * A navigator factory creates a navigator:
+ * - `Navigator` and `Screen` pairs for dynamic configuration
+ * - Static navigator object for static configuration
  *
  * @param Navigator The navigator component to wrap.
- * @returns Factory method to create a `Navigator` and `Screen` pair.
+ * @returns Factory method to create a navigator
  */
-export function createNavigatorFactory(Navigator: React.ComponentType<any>) {
+export function createNavigatorFactory<TypeBag extends NavigatorTypeBagBase>(
+  Navigator: React.ComponentType<any>
+): TypedNavigatorFactory<TypeBag> {
+  const displayName = Navigator.displayName ?? Navigator.name ?? 'Navigator';
+
   function createNavigator(config?: any): any {
     if (config != null) {
+      const NavigatorComponent = createComponentForStaticConfig(
+        {
+          Navigator,
+          Screen,
+          Group,
+          config,
+        },
+        displayName
+      );
+
       return {
-        Navigator,
-        Screen,
-        Group,
         config,
+        with(
+          DecoratorComponent: React.ComponentType<{
+            Navigator: React.ComponentType<any>;
+          }>
+        ) {
+          const WithComponent = () => {
+            return React.createElement(DecoratorComponent, {
+              Navigator: NavigatorComponent,
+            });
+          };
+
+          WithComponent.displayName = `${displayName}With`;
+
+          return {
+            config,
+            getComponent: () => WithComponent,
+          };
+        },
+        getComponent() {
+          return NavigatorComponent;
+        },
       };
     }
 

package/src/findFocusedRoute.tsx

@@ -1,22 +1,22 @@
-import type { InitialState } from '@react-navigation/routers';
+import type { NavigationState, PartialState } from '@react-navigation/routers';
 
-type Result =
-  | {
-      key?: string;
-      name: string;
-      params?: object;
-      path?: string;
-    }
-  | undefined;
+type State = NavigationState | PartialState<NavigationState>;
 
-export function findFocusedRoute(state: InitialState): Result {
-  let current: InitialState | undefined = state;
+export function findFocusedRoute(
+  state: State
+): State['routes'][number] | undefined {
+  let current: State | undefined = state;
 
-  while (current?.routes[current.index ?? 0].state != null) {
-    current = current.routes[current.index ?? 0].state;
-  }
+  while (current != null) {
+    const route: State['routes'][number] | undefined =
+      current.routes[current.index ?? current.routes.length - 1];
 
-  const route = current?.routes[current?.index ?? 0];
+    if (route?.state == null) {
+      return route;
+    }
+
+    current = route.state;
+  }
 
-  return route;
+  return undefined;
 }

package/src/getActionFromState.tsx

@@ -2,20 +2,18 @@ import type {
   CommonActions,
   NavigationState,
   ParamListBase,
-  PartialRoute,
   PartialState,
-  Route,
 } from '@react-navigation/routers';
 
 import type { NavigatorScreenParams, PathConfig, PathConfigMap } from './types';
 
 type ConfigItem = {
-  initialRouteName?: string;
-  screens?: Record<string, ConfigItem>;
+  initialRouteName?: string | undefined;
+  screens?: Record<string, ConfigItem> | undefined;
 };
 
 type Options = {
-  initialRouteName?: string;
+  initialRouteName?: string | undefined;
   screens: PathConfigMap<object>;
 };
 
@@ -23,34 +21,60 @@ type NavigateAction<State extends NavigationState> = {
   type: 'NAVIGATE';
   payload: {
     name: string;
-    params?: NavigatorScreenParams<State>;
-    path?: string;
+    params?: NavigatorScreenParams<State> | undefined;
+    path?: string | undefined;
   };
 };
 
+// Cache the normalized config across calls for the same `options` reference,
+// so we don't re-walk the config tree on every action conversion.
+const cachedNormalizedConfig = new WeakMap<Options, ConfigItem>();
+
 export function getActionFromState(
   state: PartialState<NavigationState>,
   options?: Options
 ): NavigateAction<NavigationState> | CommonActions.Action | undefined {
-  // Create a normalized configs object which will be easier to use
-  const normalizedConfig = options
-    ? createNormalizedConfigItem(options as PathConfig<object> | string)
-    : {};
+  let normalizedConfig;
+
+  if (options) {
+    const cached = cachedNormalizedConfig.get(options);
+
+    if (cached) {
+      normalizedConfig = cached;
+    } else {
+      normalizedConfig = createNormalizedConfigItem(
+        options as PathConfig<object> | string
+      );
+      cachedNormalizedConfig.set(options, normalizedConfig as ConfigItem);
+    }
+  } else {
+    normalizedConfig = {};
+  }
 
-  const routes =
-    state.index != null ? state.routes.slice(0, state.index + 1) : state.routes;
+  const routesLength =
+    state.index == null || state.index >= state.routes.length
+      ? state.routes.length
+      : state.index + 1;
 
-  if (routes.length === 0) {
+  if (routesLength === 0) {
     return undefined;
   }
 
+  const firstRoute = state.routes[0];
+
+  if (firstRoute == null) {
+    return undefined;
+  }
+
+  const secondRoute = state.routes[1];
+
   if (
     !(
-      (routes.length === 1 && routes[0].key === undefined) ||
-      (routes.length === 2 &&
-        routes[0].key === undefined &&
-        routes[0].name === normalizedConfig?.initialRouteName &&
-        routes[1].key === undefined)
+      (routesLength === 1 && firstRoute.key == null) ||
+      (routesLength === 2 &&
+        firstRoute.key == null &&
+        firstRoute.name === normalizedConfig?.initialRouteName &&
+        secondRoute?.key == null)
     )
   ) {
     return {
@@ -61,20 +85,21 @@ export function getActionFromState(
 
   const route = state.routes[state.index ?? state.routes.length - 1];
 
-  let current: PartialState<NavigationState> | undefined = route?.state;
-  let config: ConfigItem | undefined = normalizedConfig?.screens?.[route?.name];
+  if (route == null) {
+    return undefined;
+  }
+
+  let current: NavigationState | PartialState<NavigationState> | undefined =
+    route.state;
+  let config: ConfigItem | undefined = normalizedConfig?.screens?.[route.name];
   let params = { ...route.params } as NavigatorScreenParams<ParamListBase>;
 
-  const payload:
-    | {
-        name: string;
-        params: NavigatorScreenParams<ParamListBase>;
-        path?: string;
-        pop?: boolean;
-      }
-    | undefined = route
-    ? { name: route.name, path: route.path, params }
-    : undefined;
+  const payload: {
+    name: string;
+    params: NavigatorScreenParams<ParamListBase>;
+    path?: string | undefined;
+    pop?: boolean | undefined;
+  } = { name: route.name, path: route.path, params };
 
   // If the screen contains a navigator, pop other screens to navigate to it
   // This avoid pushing multiple instances of navigators onto a stack
@@ -90,7 +115,7 @@ export function getActionFromState(
   // There are 2 ways we can detect if a screen contains a navigator:
   // - The route contains nested state in `route.state`
   // - Nested screens are defined in the config
-  if (payload && config?.screens && Object.keys(config.screens).length) {
+  if (config?.screens && Object.keys(config.screens).length) {
     payload.pop = true;
   }
 
@@ -99,13 +124,24 @@ export function getActionFromState(
       return undefined;
     }
 
-    const routes =
-      current.index != null
-        ? current.routes.slice(0, current.index + 1)
-        : current.routes;
+    const routesLength =
+      current.index == null || current.index >= current.routes.length
+        ? current.routes.length
+        : current.index + 1;
+
+    const route = current.routes[routesLength - 1];
+
+    if (route == null) {
+      return undefined;
+    }
+
+    const firstRoute = current.routes[0];
+
+    if (firstRoute == null) {
+      return undefined;
+    }
 
-    const route: Route<string> | PartialRoute<Route<string>> =
-      routes[routes.length - 1];
+    const secondRoute = current.routes[1];
 
     // Explicitly set to override existing value when merging params
     Object.assign(params, {
@@ -115,14 +151,14 @@ export function getActionFromState(
       state: undefined,
     });
 
-    if (routes.length === 1 && routes[0].key === undefined) {
+    if (routesLength === 1 && firstRoute.key == null) {
       params.initial = true;
       params.screen = route.name;
     } else if (
-      routes.length === 2 &&
-      routes[0].key === undefined &&
-      routes[0].name === config?.initialRouteName &&
-      routes[1].key === undefined
+      routesLength === 2 &&
+      firstRoute.key == null &&
+      firstRoute.name === config?.initialRouteName &&
+      secondRoute?.key == null
     ) {
       params.initial = false;
       params.screen = route.name;
@@ -148,14 +184,10 @@ export function getActionFromState(
     }
   }
 
-  if (payload?.params.screen || payload?.params.state) {
+  if (payload.params.screen || payload.params.state) {
     payload.pop = true;
   }
 
-  if (!payload) {
-    return;
-  }
-
   // Try to construct payload for a `NAVIGATE` action from the state
   // This lets us preserve the navigation state and not lose it
   return {
@@ -164,11 +196,16 @@ export function getActionFromState(
   };
 }
 
-const createNormalizedConfigItem = (config: PathConfig<object> | string) =>
+const createNormalizedConfigItem = (
+  config: PathConfig<object> | string
+): ConfigItem =>
   typeof config === 'object' && config != null
     ? {
         initialRouteName:
-          'initialRouteName' in config ? config.initialRouteName : undefined,
+          'initialRouteName' in config &&
+          typeof config.initialRouteName === 'string'
+            ? config.initialRouteName
+            : undefined,
         screens:
           'screens' in config && config.screens != null
             ? createNormalizedConfigs(config.screens)
@@ -178,7 +215,6 @@ const createNormalizedConfigItem = (config: PathConfig<object> | string) =>
 
 const createNormalizedConfigs = (options: PathConfigMap<object>) =>
   Object.entries(options).reduce<Record<string, ConfigItem>>((acc, [k, v]) => {
-    // @ts-expect-error -we can't properly type this
     acc[k] = createNormalizedConfigItem(v);
     return acc;
   }, {});