@react-navigation/core 6.4.6 → 7.0.0-alpha.0

package/src/NavigationIndependentTree.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import NavigationContext from './NavigationContext';
+import NavigationIndependentTreeContext from './NavigationIndependentTreeContext';
+import NavigationRouteContext from './NavigationRouteContext';
+
+/**
+ * Component to make the child navigation container independent of parent containers.
+ */
+export default function NavigationIndependentTree({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    // We need to clear any existing contexts for nested independent container to work correctly
+    <NavigationRouteContext.Provider value={undefined}>
+      <NavigationContext.Provider value={undefined}>
+        <NavigationIndependentTreeContext.Provider value>
+          {children}
+        </NavigationIndependentTreeContext.Provider>
+      </NavigationContext.Provider>
+    </NavigationRouteContext.Provider>
+  );
+}

package/src/NavigationIndependentTreeContext.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+/**
+ * Context which marks the navigation tree as independent.
+ */
+const NavigationIndependentTreeContext = React.createContext(false);
+
+export default NavigationIndependentTreeContext;

package/src/StaticNavigation.tsx

@@ -0,0 +1,401 @@
+import type { NavigationState, ParamListBase } from '@react-navigation/routers';
+import * as React from 'react';
+
+import fromEntries from './fromEntries';
+import type {
+  DefaultNavigatorOptions,
+  EventMapBase,
+  NavigatorScreenParams,
+  PathConfig,
+  RouteConfig,
+  RouteGroupConfig,
+} from './types';
+import useRoute from './useRoute';
+
+/**
+ * Flatten a type to remove all type alias names, unions etc.
+ * This will show a plain object when hovering over the type.
+ */
+type FlatType<T> = { [K in keyof T]: T[K] } & {};
+
+/**
+ * keyof T doesn't work for union types. We can use distributive conditional types instead.
+ * https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types
+ */
+type KeysOf<T> = T extends any ? keyof T : never;
+
+type UnknownToUndefined<T> = unknown extends T ? undefined : T;
+
+type ParamsForScreenComponent<T> = T extends {
+  screen: React.ComponentType<{ route: { params: infer P } }>;
+}
+  ? P
+  : T extends React.ComponentType<{ route: { params: infer P } }>
+  ? P
+  : undefined;
+
+type ParamsForScreen<T> = T extends { screen: StaticNavigation<any, any, any> }
+  ? NavigatorScreenParams<StaticParamList<T['screen']>> | undefined
+  : T extends StaticNavigation<any, any, any>
+  ? NavigatorScreenParams<StaticParamList<T>> | undefined
+  : UnknownToUndefined<ParamsForScreenComponent<T>>;
+
+type ParamListForScreens<
+  Screens extends StaticConfigScreens<
+    ParamListBase,
+    NavigationState,
+    {},
+    EventMapBase
+  >
+> = {
+  [Key in KeysOf<Screens>]: ParamsForScreen<Screens[Key]>;
+};
+
+type ParamListForGroups<
+  Groups extends
+    | Readonly<{
+        [key: string]: {
+          screens: StaticConfigScreens<
+            ParamListBase,
+            NavigationState,
+            {},
+            EventMapBase
+          >;
+        };
+      }>
+    | undefined
+> = Groups extends {
+  [key: string]: {
+    screens: StaticConfigScreens<
+      ParamListBase,
+      NavigationState,
+      {},
+      EventMapBase
+    >;
+  };
+}
+  ? ParamListForScreens<Groups[keyof Groups]['screens']>
+  : {};
+
+type StaticConfigScreens<
+  ParamList extends ParamListBase,
+  State extends NavigationState,
+  ScreenOptions extends {},
+  EventMap extends EventMapBase
+> = {
+  [key in keyof ParamList]:
+    | React.ComponentType<any>
+    | StaticNavigation<any, any, any>
+    | (Omit<
+        RouteConfig<ParamList, keyof ParamList, State, ScreenOptions, EventMap>,
+        'name' | 'component' | 'getComponent' | 'children'
+      > & {
+        /**
+         * Callback to determine whether the screen should be rendered or not.
+         * This can be useful for conditional rendering of screens,
+         * e.g. - if you want to render a different screen for logged in users.
+         *
+         * You can use a custom hook to use custom logic to determine the return value.
+         *
+         * @example
+         * ```js
+         * if: useIsLoggedIn
+         * ```
+         */
+        if?: () => boolean;
+        /**
+         * Linking config for the screen.
+         * This can be a string to specify the path, or an object with more options.
+         *
+         * @example
+         * ```js
+         * linking: {
+         *   path: 'profile/:id',
+         *   exact: true,
+         * },
+         * ```
+         */
+        linking?:
+          | FlatType<
+              Pick<
+                PathConfig<ParamList>,
+                'path' | 'exact' | 'parse' | 'stringify'
+              >
+            >
+          | string;
+        /**
+         * Static navigation config or Component to render for the screen.
+         */
+        screen: StaticNavigation<any, any, any> | React.ComponentType<any>;
+      });
+};
+
+type GroupConfig<
+  ParamList extends ParamListBase,
+  State extends NavigationState,
+  ScreenOptions extends {},
+  EventMap extends EventMapBase
+> = Omit<RouteGroupConfig<ParamList, ScreenOptions>, 'screens' | 'children'> & {
+  /**
+   * Callback to determine whether the screens in the group should be rendered or not.
+   * This can be useful for conditional rendering of group of screens.
+   */
+  if?: () => boolean;
+  /**
+   * Static navigation config or Component to render for the screen.
+   */
+  screens: StaticConfigScreens<ParamList, State, ScreenOptions, EventMap>;
+};
+
+export type StaticConfig<
+  ParamList extends ParamListBase,
+  State extends NavigationState,
+  ScreenOptions extends {},
+  EventMap extends EventMapBase,
+  Navigator extends React.ComponentType<{}>
+> = Omit<
+  Omit<
+    React.ComponentProps<Navigator>,
+    keyof DefaultNavigatorOptions<
+      ParamListBase,
+      NavigationState,
+      {},
+      EventMapBase
+    >
+  > &
+    DefaultNavigatorOptions<ParamList, State, ScreenOptions, EventMap>,
+  'screens' | 'children'
+> & {
+  /**
+   * Screens to render in the navigator and their configuration.
+   */
+  screens: StaticConfigScreens<ParamList, State, ScreenOptions, EventMap>;
+  /**
+   * Groups of screens to render in the navigator and their configuration.
+   */
+  groups?: {
+    [key: string]: GroupConfig<ParamList, State, ScreenOptions, EventMap>;
+  };
+};
+
+/**
+ * Props for a screen component which is rendered by a static navigator.
+ * Takes the route params as a generic argument.
+ */
+export type StaticScreenProps<T extends Record<string, unknown> | undefined> = {
+  route: {
+    params: T;
+  };
+};
+
+/**
+ * Infer the param list from the static navigation config.
+ */
+export type StaticParamList<
+  T extends {
+    readonly config: {
+      readonly screens: Record<string, any>;
+      readonly groups?: {
+        [key: string]: {
+          screens: Record<string, any>;
+        };
+      };
+    };
+  }
+> = FlatType<
+  ParamListForScreens<T['config']['screens']> &
+    ParamListForGroups<T['config']['groups']>
+>;
+
+export type StaticNavigation<NavigatorProps, GroupProps, ScreenProps> = {
+  Navigator: React.ComponentType<NavigatorProps>;
+  Group: React.ComponentType<GroupProps>;
+  Screen: React.ComponentType<ScreenProps>;
+  config: StaticConfig<
+    ParamListBase,
+    NavigationState,
+    {},
+    EventMapBase,
+    React.ComponentType<any>
+  >;
+};
+
+const MemoizedScreen = React.memo(
+  <T extends React.ComponentType<any>>({ component }: { component: T }) => {
+    const route = useRoute();
+    const children = React.createElement(component, { route });
+
+    return children;
+  }
+);
+
+const getItemsFromScreens = (
+  Screen: React.ComponentType<any>,
+  screens: StaticConfigScreens<any, any, any, any>
+) => {
+  return Object.entries(screens).map(([name, item]) => {
+    let component: React.ComponentType<any> | undefined;
+    let props: {} = {};
+    let useIf: (() => boolean) | undefined;
+
+    let isNavigator = false;
+
+    if ('screen' in item) {
+      const { screen, if: _if, ...rest } = item;
+
+      useIf = _if;
+      props = rest;
+
+      if (typeof screen === 'function') {
+        component = screen;
+      } else if ('config' in screen) {
+        isNavigator = true;
+        component = createComponentForStaticNavigation(
+          screen,
+          `${name}Navigator`
+        );
+      }
+    } else if (typeof item === 'function') {
+      component = item;
+    } else if ('config' in item) {
+      isNavigator = true;
+      component = createComponentForStaticNavigation(item, `${name}Navigator`);
+    }
+
+    if (component == null) {
+      throw new Error(
+        `Couldn't find a 'screen' property for the screen '${name}'. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined in, or mixed up default import and named import when importing.`
+      );
+    }
+
+    let element = isNavigator ? (
+      React.createElement(component, {})
+    ) : (
+      <MemoizedScreen component={component} />
+    );
+
+    return () => {
+      const shouldRender = useIf == null || useIf();
+
+      if (!shouldRender) {
+        return null;
+      }
+
+      return (
+        <Screen key={name} name={name} {...props}>
+          {() => element}
+        </Screen>
+      );
+    };
+  });
+};
+
+/**
+ * Create a component that renders a navigator based on the static configuration.
+ *
+ * @param tree Static navigation config.
+ * @param displayName Name of the component to be displayed in React DevTools.
+ * @returns A component which renders the navigator.
+ */
+export function createComponentForStaticNavigation(
+  tree: StaticNavigation<any, any, any>,
+  displayName: string
+): React.ComponentType<{}> {
+  const { Navigator, Group, Screen, config } = tree;
+  const { screens, groups, ...rest } = config;
+
+  const items = getItemsFromScreens(Screen, screens);
+
+  if (groups) {
+    items.push(
+      ...Object.entries(groups).map(([key, { if: useIf, ...group }]) => {
+        const groupItems = getItemsFromScreens(Screen, group.screens);
+
+        return () => {
+          // Call unconditionally since screen configs may contain `useIf` hooks
+          const children = groupItems.map((item) => item());
+
+          const shouldRender = useIf == null || useIf();
+
+          if (!shouldRender) {
+            return null;
+          }
+
+          return (
+            <Group navigationKey={key} {...group} key={key}>
+              {children}
+            </Group>
+          );
+        };
+      })
+    );
+  }
+
+  const NavigatorComponent = () => {
+    const children = items.map((item) => item());
+
+    return <Navigator {...rest}>{children}</Navigator>;
+  };
+
+  NavigatorComponent.displayName = displayName;
+
+  return NavigatorComponent;
+}
+
+/**
+ * Create a path config object from a static navigation config for deep linking.
+ *
+ * @param tree Static navigation config.
+ * @returns Path config object to use in linking config.
+ *
+ * @example
+ * ```js
+ * const config = {
+ *   screens: {
+ *     Home: {
+ *       screens: createPathConfigForStaticNavigation(HomeTabs),
+ *     },
+ *   },
+ * };
+ * ```
+ */
+export function createPathConfigForStaticNavigation(tree: {
+  config: {
+    screens: StaticConfigScreens<
+      ParamListBase,
+      NavigationState,
+      {},
+      EventMapBase
+    >;
+  };
+}) {
+  return fromEntries(
+    Object.entries(tree.config.screens)
+      .map(([key, item]) => {
+        const screenConfig: PathConfig<ParamListBase> = {};
+
+        if ('linking' in item) {
+          if (typeof item.linking === 'string') {
+            screenConfig.path = item.linking;
+          } else {
+            Object.assign(screenConfig, item.linking);
+          }
+        }
+
+        if ('config' in item) {
+          screenConfig.screens = createPathConfigForStaticNavigation(item);
+        } else if (
+          'screen' in item &&
+          'config' in item.screen &&
+          item.screen.config.screens
+        ) {
+          screenConfig.screens = createPathConfigForStaticNavigation(
+            item.screen
+          );
+        }
+
+        return [key, screenConfig] as const;
+      })
+      .filter(([, screen]) => Object.keys(screen).length > 0)
+  );
+}

package/src/createNavigatorFactory.tsx

@@ -3,13 +3,14 @@ import type * as React from 'react';
 
 import Group from './Group';
 import Screen from './Screen';
+import type { StaticConfig } from './StaticNavigation';
 import type { EventMapBase, TypedNavigator } from './types';
 
 /**
  * Higher order component to create a `Navigator` and `Screen` pair.
  * Custom navigators should wrap the navigator component in `createNavigator` before exporting.
  *
- * @param Navigator The navigtor component to wrap.
+ * @param Navigator The navigator component to wrap.
  * @returns Factory method to create a `Navigator` and `Screen` pair.
  */
 export default function createNavigatorFactory<
@@ -18,23 +19,51 @@ export default function createNavigatorFactory<
   EventMap extends EventMapBase,
   NavigatorComponent extends React.ComponentType<any>
 >(Navigator: NavigatorComponent) {
-  return function <ParamList extends ParamListBase>(): TypedNavigator<
+  function createNavigator<ParamList extends ParamListBase>(): TypedNavigator<
     ParamList,
     State,
     ScreenOptions,
     EventMap,
     typeof Navigator
-  > {
-    if (arguments[0] !== undefined) {
-      throw new Error(
-        "Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API? See https://reactnavigation.org/docs/hello-react-navigation for the latest API and guides."
-      );
+  >;
+
+  // eslint-disable-next-line no-redeclare
+  function createNavigator<
+    ParamList extends ParamListBase,
+    Config extends StaticConfig<
+      ParamList,
+      State,
+      ScreenOptions,
+      EventMap,
+      typeof Navigator
+    >
+  >(
+    config: Config
+  ): TypedNavigator<
+    ParamList,
+    State,
+    ScreenOptions,
+    EventMap,
+    typeof Navigator
+  > & { config: Config };
+
+  // eslint-disable-next-line no-redeclare
+  function createNavigator(config?: any): any {
+    if (config != null) {
+      return {
+        Navigator,
+        Screen,
+        Group,
+        config,
+      };
     }
 
     return {
       Navigator,
-      Group,
       Screen,
+      Group,
     };
-  };
+  }
+
+  return createNavigator;
 }

package/src/getActionFromState.tsx

@@ -63,10 +63,7 @@ export default function getActionFromState(
 
   let current: PartialState<NavigationState> | undefined = route?.state;
   let config: ConfigItem | undefined = normalizedConfig?.screens?.[route?.name];
-  let params = { ...route.params } as NavigatorScreenParams<
-    ParamListBase,
-    NavigationState
-  >;
+  let params = { ...route.params } as NavigatorScreenParams<ParamListBase>;
 
   let payload = route
     ? { name: route.name, path: route.path, params }
@@ -111,10 +108,7 @@ export default function getActionFromState(
 
     if (route.state) {
       params.params = { ...route.params };
-      params = params.params as NavigatorScreenParams<
-        ParamListBase,
-        NavigationState
-      >;
+      params = params.params as NavigatorScreenParams<ParamListBase>;
     } else {
       params.path = route.path;
       params.params = route.params;

package/src/getPathFromState.tsx

@@ -9,7 +9,7 @@ import fromEntries from './fromEntries';
 import type { PathConfig, PathConfigMap } from './types';
 import validatePathConfig from './validatePathConfig';
 
-type Options<ParamList> = {
+type Options<ParamList extends {}> = {
   initialRouteName?: string;
   screens: PathConfigMap<ParamList>;
 };

package/src/index.tsx

@@ -10,15 +10,24 @@ export { default as getStateFromPath } from './getStateFromPath';
 export { default as NavigationContainerRefContext } from './NavigationContainerRefContext';
 export { default as NavigationContext } from './NavigationContext';
 export { default as NavigationHelpersContext } from './NavigationHelpersContext';
+export { default as NavigationIndependentTree } from './NavigationIndependentTree';
 export { default as NavigationRouteContext } from './NavigationRouteContext';
 export { default as PreventRemoveContext } from './PreventRemoveContext';
 export { default as PreventRemoveProvider } from './PreventRemoveProvider';
+export {
+  createComponentForStaticNavigation,
+  createPathConfigForStaticNavigation,
+  StaticNavigation,
+  StaticParamList,
+  StaticScreenProps,
+} from './StaticNavigation';
 export * from './types';
 export { default as useFocusEffect } from './useFocusEffect';
 export { default as useIsFocused } from './useIsFocused';
 export { default as useNavigation } from './useNavigation';
 export { default as useNavigationBuilder } from './useNavigationBuilder';
 export { default as useNavigationContainerRef } from './useNavigationContainerRef';
+export { default as useNavigationIndependentTree } from './useNavigationIndependentTree';
 export { default as useNavigationState } from './useNavigationState';
 export { default as UNSTABLE_usePreventRemove } from './usePreventRemove';
 export { default as usePreventRemoveContext } from './usePreventRemoveContext';