@react-navigation/core 7.0.0-rc.0 → 7.0.0-rc.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "7.0.0-rc.0",
+  "version": "7.0.0-rc.10",
   "keywords": [
     "react",
     "react-native",
@@ -17,11 +17,17 @@
     "url": "https://github.com/react-navigation/react-navigation/issues"
   },
   "homepage": "https://reactnavigation.org",
-  "main": "lib/commonjs/index.js",
-  "react-native": "src/index.tsx",
-  "source": "src/index.tsx",
-  "module": "lib/module/index.js",
-  "types": "lib/typescript/src/index.d.ts",
+  "source": "./src/index.tsx",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/src/index.d.ts",
+      "import": "./lib/module/index.js",
+      "require": "./lib/commonjs/index.js"
+    }
+  },
   "files": [
     "src",
     "lib",
@@ -35,21 +41,23 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^7.0.0-rc.0",
+    "@react-navigation/routers": "^7.0.0-rc.6",
     "escape-string-regexp": "^4.0.0",
     "nanoid": "3.3.7",
     "query-string": "^7.1.3",
     "react-is": "^18.2.0",
-    "use-latest-callback": "^0.1.9"
+    "use-latest-callback": "^0.2.1",
+    "use-sync-external-store": "^1.2.2"
   },
   "devDependencies": {
     "@testing-library/react-native": "^12.4.3",
     "@types/react": "~18.2.79",
     "@types/react-is": "^18.2.3",
+    "@types/use-sync-external-store": "^0.0.6",
     "del-cli": "^5.1.0",
     "immer": "^10.0.3",
     "react": "18.2.0",
-    "react-native-builder-bob": "^0.23.2",
+    "react-native-builder-bob": "^0.26.0",
     "react-test-renderer": "18.2.0",
     "typescript": "^5.5.2"
   },
@@ -60,8 +68,18 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      "commonjs",
-      "module",
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
       [
         "typescript",
         {
@@ -70,5 +88,5 @@
       ]
     ]
   },
-  "gitHead": "2a1d67089eea2a3d87e38a870ccee35a79c55d7d"
+  "gitHead": "d801b91d2aea4bf10852b03ea31836c0e5cb9442"
 }

package/src/StaticNavigation.tsx

@@ -93,10 +93,7 @@ type StaticRouteConfig<
   EventMap extends EventMapBase,
   Navigation,
 > = RouteConfigProps<
-  // FIXME: the param list is inferred from the screen component
-  // So we can't use the type here
-  // Fallback to ParamListBase for now
-  ParamListBase,
+  ParamList,
   string,
   State,
   ScreenOptions,
@@ -404,31 +401,39 @@ export function createComponentForStaticNavigation(
     );
   }
 
-  const items = screens ? getItemsFromScreens(Screen, screens) : [];
+  const items: (() => JSX.Element | null)[] = [];
 
-  if (groups) {
-    items.push(
-      ...Object.entries(groups).map(([key, { if: useIf, ...group }]) => {
-        const groupItems = getItemsFromScreens(Screen, group.screens);
+  // Loop through the config to find screens and groups
+  // So we add the screens and groups in the same order as they are defined
+  for (const key in config) {
+    if (key === 'screens' && screens) {
+      items.push(...getItemsFromScreens(Screen, screens));
+    }
 
-        return () => {
-          // Call unconditionally since screen configs may contain `useIf` hooks
-          const children = groupItems.map((item) => item());
+    if (key === 'groups' && groups) {
+      items.push(
+        ...Object.entries(groups).map(([key, { if: useIf, ...group }]) => {
+          const groupItems = getItemsFromScreens(Screen, group.screens);
 
-          const shouldRender = useIf == null || useIf();
+          return () => {
+            // Call unconditionally since screen configs may contain `useIf` hooks
+            const children = groupItems.map((item) => item());
 
-          if (!shouldRender) {
-            return null;
-          }
+            const shouldRender = useIf == null || useIf();
 
-          return (
-            <Group navigationKey={key} {...group} key={key}>
-              {children}
-            </Group>
-          );
-        };
-      })
-    );
+            if (!shouldRender) {
+              return null;
+            }
+
+            return (
+              <Group navigationKey={key} {...group} key={key}>
+                {children}
+              </Group>
+            );
+          };
+        })
+      );
+    }
   }
 
   const NavigatorComponent = () => {
@@ -594,23 +599,32 @@ export function createPathConfigForStaticNavigation(
       );
     };
 
-    const screens = t.config.screens
-      ? createPathConfigForScreens(
-          t.config.screens,
-          o?.initialRouteName ?? t.config.initialRouteName
-        )
-      : {};
+    const screens = {};
 
-    if (t.config.groups) {
-      Object.entries(t.config.groups).forEach(([, group]) => {
+    // Loop through the config to find screens and groups
+    // So we add the screens and groups in the same order as they are defined
+    for (const key in t.config) {
+      if (key === 'screens' && t.config.screens) {
         Object.assign(
           screens,
           createPathConfigForScreens(
-            group.screens,
+            t.config.screens,
             o?.initialRouteName ?? t.config.initialRouteName
           )
         );
-      });
+      }
+
+      if (key === 'groups' && t.config.groups) {
+        Object.entries(t.config.groups).forEach(([, group]) => {
+          Object.assign(
+            screens,
+            createPathConfigForScreens(
+              group.screens,
+              o?.initialRouteName ?? t.config.initialRouteName
+            )
+          );
+        });
+      }
     }
 
     if (Object.keys(screens).length === 0) {

package/src/types.tsx

@@ -122,7 +122,7 @@ export type EventMapCore<State extends NavigationState> = {
 };
 
 export type EventArg<
-  EventName extends string,
+  EventName,
   CanPreventDefault extends boolean | undefined = false,
   Data = undefined,
 > = {
@@ -150,10 +150,13 @@ export type EventArg<
 export type EventListenerCallback<
   EventMap extends EventMapBase,
   EventName extends keyof EventMap,
+  EventCanPreventDefault extends
+    | boolean
+    | undefined = EventMap[EventName]['canPreventDefault'],
 > = (
   e: EventArg<
-    Extract<EventName, string>,
-    EventMap[EventName]['canPreventDefault'],
+    EventName,
+    undefined extends EventCanPreventDefault ? false : EventCanPreventDefault,
     EventMap[EventName]['data']
   >
 ) => void;
@@ -722,12 +725,16 @@ export type RouteGroupConfig<
    * Layout for the screens inside the group.
    * This will override the `screenLayout` of parent group or navigator.
    */
-  screenLayout?: (props: {
-    route: RouteProp<ParamList, keyof ParamList>;
-    navigation: Navigation;
-    theme: ReactNavigation.Theme;
-    children: React.ReactElement;
-  }) => React.ReactElement;
+  screenLayout?:
+    | ((props: {
+        route: RouteProp<ParamList, keyof ParamList>;
+        navigation: Navigation;
+        theme: ReactNavigation.Theme;
+        children: React.ReactElement;
+      }) => React.ReactElement)
+    | {
+        // FIXME: TypeScript doesn't seem to infer `navigation` correctly without this
+      };
 
   /**
    * Children React Elements to extract the route configuration from.
@@ -775,6 +782,20 @@ export type NavigationContainerEventMap = {
   };
 };
 
+type NotUndefined<T> = T extends undefined ? never : T;
+
+export type ParamListRoute<ParamList extends ParamListBase> = {
+  [RouteName in keyof ParamList]: NavigatorScreenParams<{}> extends ParamList[RouteName]
+    ? NotUndefined<ParamList[RouteName]> extends NavigatorScreenParams<infer T>
+      ? ParamListRoute<T>
+      : Route<Extract<RouteName, string>, ParamList[RouteName]>
+    : Route<Extract<RouteName, string>, ParamList[RouteName]>;
+}[keyof ParamList];
+
+type MaybeParamListRoute<ParamList extends {}> = ParamList extends ParamListBase
+  ? ParamListRoute<ParamList>
+  : Route<string>;
+
 export type NavigationContainerRef<ParamList extends {}> =
   NavigationHelpers<ParamList> &
     EventConsumer<NavigationContainerEventMap> & {
@@ -791,7 +812,7 @@ export type NavigationContainerRef<ParamList extends {}> =
       /**
        * Get the currently focused navigation route.
        */
-      getCurrentRoute(): Route<string> | undefined;
+      getCurrentRoute(): MaybeParamListRoute<ParamList> | undefined;
       /**
        * Get the currently focused route's options.
        */
@@ -838,11 +859,11 @@ export type TypeBag<
 };
 
 export type NavigatorTypeBagBase = {
-  ParamList: ParamListBase;
+  ParamList: {};
   NavigatorID: string | undefined;
   State: NavigationState;
   ScreenOptions: {};
-  EventMap: EventMapBase;
+  EventMap: {};
   NavigationList: NavigationListBase<ParamListBase>;
   Navigator: React.ComponentType<any>;
 };

package/src/useIsFocused.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useState } from 'react';
 
 import { useNavigation } from './useNavigation';
 
@@ -9,35 +8,25 @@ import { useNavigation } from './useNavigation';
  */
 export function useIsFocused(): boolean {
   const navigation = useNavigation();
-  const [isFocused, setIsFocused] = useState(navigation.isFocused);
 
-  const valueToReturn = navigation.isFocused();
-
-  if (isFocused !== valueToReturn) {
-    // If the value has changed since the last render, we need to update it.
-    // This could happen if we missed an update from the event listeners during re-render.
-    // React will process this update immediately, so the old subscription value won't be committed.
-    // It is still nice to avoid returning a mismatched value though, so let's override the return value.
-    // This is the same logic as in https://github.com/facebook/react/tree/master/packages/use-subscription
-    setIsFocused(valueToReturn);
-  }
-
-  React.useEffect(() => {
-    const unsubscribeFocus = navigation.addListener('focus', () =>
-      setIsFocused(true)
-    );
-
-    const unsubscribeBlur = navigation.addListener('blur', () =>
-      setIsFocused(false)
-    );
-
-    return () => {
-      unsubscribeFocus();
-      unsubscribeBlur();
-    };
-  }, [navigation]);
-
-  React.useDebugValue(valueToReturn);
-
-  return valueToReturn;
+  const subscribe = React.useCallback(
+    (callback: () => void) => {
+      const unsubscribeFocus = navigation.addListener('focus', callback);
+      const unsubscribeBlur = navigation.addListener('blur', callback);
+
+      return () => {
+        unsubscribeFocus();
+        unsubscribeBlur();
+      };
+    },
+    [navigation]
+  );
+
+  const value = React.useSyncExternalStore(
+    subscribe,
+    navigation.isFocused,
+    navigation.isFocused
+  );
+
+  return value;
 }

package/src/useNavigationBuilder.tsx

@@ -132,7 +132,9 @@ const getRouteConfigsFromChildren = <
               : groupOptions != null
                 ? [...groupOptions, child.props.screenOptions]
                 : [child.props.screenOptions],
-            child.props.screenLayout ?? groupLayout
+            typeof child.props.screenLayout === 'function'
+              ? child.props.screenLayout
+              : groupLayout
           )
         );
         return acc;

package/src/useNavigationState.tsx

@@ -1,5 +1,6 @@
 import type { NavigationState, ParamListBase } from '@react-navigation/routers';
 import * as React from 'react';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
 
 import type { NavigationProp } from './types';
 import { useNavigation } from './useNavigation';
@@ -18,24 +19,21 @@ export function useNavigationState<ParamList extends ParamListBase, T>(
 ): T {
   const navigation = useNavigation<NavigationProp<ParamList>>();
 
-  // We don't care about the state value, we run the selector again at the end
-  // The state is only to make sure that there's a re-render when we have a new value
-  const [, setResult] = React.useState(() => selector(navigation.getState()));
+  const subscribe = React.useCallback(
+    (callback: () => void) => {
+      const unsubscribe = navigation.addListener('state', callback);
 
-  // We store the selector in a ref to avoid re-subscribing listeners every render
-  const selectorRef = React.useRef(selector);
+      return unsubscribe;
+    },
+    [navigation]
+  );
 
-  React.useEffect(() => {
-    selectorRef.current = selector;
-  });
+  const value = useSyncExternalStoreWithSelector(
+    subscribe,
+    navigation.getState,
+    navigation.getState,
+    selector
+  );
 
-  React.useEffect(() => {
-    const unsubscribe = navigation.addListener('state', (e) => {
-      setResult(selectorRef.current(e.data.state));
-    });
-
-    return unsubscribe;
-  }, [navigation]);
-
-  return selector(navigation.getState());
+  return value;
 }