@react-navigation/native 7.0.0-alpha.9 → 7.0.0-rc.1

package/lib/typescript/src/useLinking.native.d.ts

@@ -7,26 +7,26 @@ export declare function useLinking(ref: React.RefObject<NavigationContainerRef<P
         key: string;
         index: number;
         routeNames: string[];
-        history?: unknown[] | undefined;
+        history?: unknown[];
         routes: import("@react-navigation/core").NavigationRoute<ParamListBase, string>[];
         type: string;
         stale: false;
     }>, "stale" | "routes">> & Readonly<{
-        stale?: true | undefined;
+        stale?: true;
         routes: import("@react-navigation/core").PartialRoute<import("@react-navigation/core").Route<string, object | undefined>>[];
     }> & {
-        state?: (Partial<Omit<Readonly<{
+        state?: Partial<Omit<Readonly<{
             key: string;
             index: number;
             routeNames: string[];
-            history?: unknown[] | undefined;
+            history?: unknown[];
             routes: import("@react-navigation/core").NavigationRoute<ParamListBase, string>[];
             type: string;
             stale: false;
         }>, "stale" | "routes">> & Readonly<{
-            stale?: true | undefined;
+            stale?: true;
             routes: import("@react-navigation/core").PartialRoute<import("@react-navigation/core").Route<string, object | undefined>>[];
-        }> & any) | undefined;
+        }> & any;
     }) | undefined>;
 };
 export {};

package/lib/typescript/src/useUnhandledLinking.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useUnhandledLinking.d.ts","sourceRoot":"","sources":["../../../src/useUnhandledLinking.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,eAAe,EACpB,KAAK,YAAY,EAClB,MAAM,wBAAwB,CAAC;AA2BhC,wBAAgB,4BAA4B;;gDAU1B,eAAe,KAC5B,aAAa,eAAe,CAAC,GAAG,SAAS;;EA+C7C"}
+{"version":3,"file":"useUnhandledLinking.d.ts","sourceRoot":"","sources":["../../../src/useUnhandledLinking.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,eAAe,EACpB,KAAK,YAAY,EAClB,MAAM,wBAAwB,CAAC;AA2BhC,wBAAgB,4BAA4B;;gDAU1B,eAAe,KAC5B,YAAY,CAAC,eAAe,CAAC,GAAG,SAAS;;EA+C7C"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native",
   "description": "React Native integration for React Navigation",
-  "version": "7.0.0-alpha.9",
+  "version": "7.0.0-rc.1",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -37,7 +37,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^7.0.0-alpha.9",
+    "@react-navigation/core": "^7.0.0-rc.1",
     "escape-string-regexp": "^4.0.0",
     "fast-deep-equal": "^3.1.3",
     "nanoid": "3.3.7",
@@ -45,18 +45,18 @@
   },
   "devDependencies": {
     "@testing-library/react-native": "^12.4.3",
-    "@types/react": "~18.2.45",
-    "@types/react-dom": "~18.0.11",
+    "@types/react": "~18.2.79",
+    "@types/react-dom": "~18.2.25",
     "del-cli": "^5.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.73.2",
+    "react-native": "0.74.2",
     "react-native-builder-bob": "^0.23.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.5.2"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-native": "0.73.2"
+    "react": ">= 18.2.0",
+    "react-native": ">= 0.72.0"
   },
   "react-native-builder-bob": {
     "source": "src",
@@ -72,5 +72,5 @@
       ]
     ]
   },
-  "gitHead": "c7b047dec7c75bda359a618d39a2aac4c2aea9c1"
+  "gitHead": "18c09f1478a3efcb3a809305c5947b748f10c951"
 }

package/src/NavigationContainer.tsx

@@ -35,7 +35,7 @@ declare global {
   >;
 }
 
-global.REACT_NAVIGATION_DEVTOOLS = new WeakMap();
+globalThis.REACT_NAVIGATION_DEVTOOLS = new WeakMap();
 
 type Props<ParamList extends {}> = NavigationContainerProps & {
   direction?: LocaleDirection;

package/src/__stubs__/createStackNavigator.tsx

@@ -1,11 +1,25 @@
 import {
   createNavigatorFactory,
+  type DefaultNavigatorOptions,
+  type NavigationListBase,
+  type ParamListBase,
+  type StackNavigationState,
   StackRouter,
+  type TypedNavigator,
   useNavigationBuilder,
 } from '@react-navigation/core';
 import * as React from 'react';
 
-export const createStackNavigator = createNavigatorFactory((props) => {
+const StackNavigator = (
+  props: DefaultNavigatorOptions<
+    ParamListBase,
+    string | undefined,
+    StackNavigationState<ParamListBase>,
+    {},
+    {},
+    unknown
+  >
+) => {
   const { state, descriptors, NavigationContent } = useNavigationBuilder(
     StackRouter,
     props
@@ -16,4 +30,18 @@ export const createStackNavigator = createNavigatorFactory((props) => {
       {descriptors[state.routes[state.index].key].render()}
     </NavigationContent>
   );
-});
+};
+
+export function createStackNavigator<
+  ParamList extends ParamListBase,
+>(): TypedNavigator<{
+  ParamList: ParamList;
+  NavigatorID: string | undefined;
+  State: StackNavigationState<ParamList>;
+  ScreenOptions: {};
+  EventMap: {};
+  NavigationList: NavigationListBase<ParamList>;
+  Navigator: typeof StackNavigator;
+}> {
+  return createNavigatorFactory(StackNavigator)();
+}

package/src/createMemoryHistory.tsx

@@ -87,6 +87,7 @@ export function createMemoryHistory() {
       // Need to keep the hash part of the path if there was no previous history entry
       // or the previous history entry had the same path
       let pathWithHash = path;
+      const hash = pathWithHash.includes('#') ? '' : location.hash;
 
       if (!items.length || items.findIndex((item) => item.id === id) < 0) {
         // There are two scenarios for creating an array with only one history record:
@@ -95,12 +96,13 @@ export function createMemoryHistory() {
         //   the page when navigating forward in history.
         // - This is the first time any state modifications are done
         //   So we need to push the entry as there's nothing to replace
-        pathWithHash = pathWithHash + location.hash;
+
+        pathWithHash = pathWithHash + hash;
         items = [{ path: pathWithHash, state, id }];
         index = 0;
       } else {
         if (items[index].path === path) {
-          pathWithHash = pathWithHash + location.hash;
+          pathWithHash = pathWithHash + hash;
         }
         items[index] = { path, state, id };
       }

package/src/createStaticNavigation.tsx

@@ -1,6 +1,7 @@
 import {
   createComponentForStaticNavigation,
   createPathConfigForStaticNavigation,
+  type NavigationContainerRef,
   type ParamListBase,
   type StaticNavigation,
 } from '@react-navigation/core';
@@ -16,7 +17,24 @@ type Props = Omit<
   /**
    * Options for deep linking.
    */
-  linking?: Omit<LinkingOptions<ParamListBase>, 'config'>;
+  linking?: Omit<LinkingOptions<ParamListBase>, 'config' | 'enabled'> & {
+    /**
+     * Whether deep link handling should be enabled.
+     * Defaults to `true` if any `linking` options are specified, `false` otherwise.
+     *
+     * When 'auto' is specified, all leaf screens will get a autogenerated path.
+     * The generated path will be a kebab-case version of the screen name.
+     * This can be overridden for specific screens by specifying `linking` for the screen.
+     */
+    enabled?: 'auto' | true | false;
+    /**
+     * Additional configuration
+     */
+    config?: Omit<
+      NonNullable<LinkingOptions<ParamListBase>['config']>,
+      'screens'
+    >;
+  };
 };
 
 /**
@@ -28,17 +46,49 @@ type Props = Omit<
  */
 export function createStaticNavigation(tree: StaticNavigation<any, any, any>) {
   const Component = createComponentForStaticNavigation(tree, 'RootNavigator');
-  const linkingConfig = {
-    screens: tree.config.screens
-      ? createPathConfigForStaticNavigation(tree)
-      : {},
-  };
 
-  function Navigation({ linking, ...rest }: Props) {
+  function Navigation(
+    { linking, ...rest }: Props,
+    ref: React.Ref<NavigationContainerRef<ParamListBase>>
+  ) {
+    const screens = React.useMemo(() => {
+      if (tree.config.screens) {
+        return createPathConfigForStaticNavigation(
+          tree,
+          { initialRouteName: linking?.config?.initialRouteName },
+          linking?.enabled === 'auto'
+        );
+      }
+
+      return undefined;
+    }, [linking?.config, linking?.enabled]);
+
+    if (linking?.enabled === true && screens == null) {
+      throw new Error(
+        'Linking is enabled but no linking configuration was found for the screens.\n\n' +
+          'To solve this:\n' +
+          "- Specify a 'linking' property for the screens you want to link to.\n" +
+          "- Or set 'linking.enabled' to 'auto' to generate paths automatically.\n\n" +
+          'See usage guide: https://reactnavigation.org/docs/7.x/static-configuration#linking'
+      );
+    }
+
     return (
       <NavigationContainer
         {...rest}
-        linking={linking ? { ...linking, config: linkingConfig } : undefined}
+        ref={ref}
+        linking={
+          linking
+            ? {
+                ...linking,
+                enabled:
+                  typeof linking.enabled === 'boolean'
+                    ? linking.enabled
+                    : screens != null,
+                config: screens ? { ...linking.config, screens } : undefined,
+              }
+            : undefined
+        }
       >
         <Component />
       </NavigationContainer>

package/src/types.tsx

@@ -9,28 +9,10 @@ import type {
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace ReactNavigation {
-    interface Theme {
-      dark: boolean;
-      colors: {
-        primary: string;
-        background: string;
-        card: string;
-        text: string;
-        border: string;
-        notification: string;
-      };
-      fonts: {
-        regular: FontStyle;
-        medium: FontStyle;
-        bold: FontStyle;
-        heavy: FontStyle;
-      };
-    }
+    interface Theme extends NativeTheme {}
   }
 }
 
-export type LocaleDirection = 'ltr' | 'rtl';
-
 type FontStyle = {
   fontFamily: string;
   fontWeight:
@@ -47,7 +29,27 @@ type FontStyle = {
     | '900';
 };
 
-export type Theme = ReactNavigation.Theme;
+interface NativeTheme {
+  dark: boolean;
+  colors: {
+    primary: string;
+    background: string;
+    card: string;
+    text: string;
+    border: string;
+    notification: string;
+  };
+  fonts: {
+    regular: FontStyle;
+    medium: FontStyle;
+    bold: FontStyle;
+    heavy: FontStyle;
+  };
+}
+
+export type Theme = NativeTheme;
+
+export type LocaleDirection = 'ltr' | 'rtl';
 
 export type LinkingOptions<ParamList extends {}> = {
   /**

package/src/useLinking.tsx

@@ -280,6 +280,8 @@ export function useLinking(
       route: ReturnType<typeof findFocusedRoute>,
       state: NavigationState
     ): string => {
+      let path;
+
       // If the `route` object contains a `path`, use that path as long as `route.name` and `params` still match
       // This makes sure that we preserve the original URL for wildcard routes
       if (route?.path) {
@@ -296,12 +298,31 @@ export function useLinking(
             focusedRoute.name === route.name &&
             isEqual(focusedRoute.params, route.params)
           ) {
-            return route.path;
+            path = route.path;
           }
         }
       }
 
-      return getPathFromStateRef.current(state, configRef.current);
+      if (path == null) {
+        path = getPathFromStateRef.current(state, configRef.current);
+      }
+
+      const previousRoute = previousStateRef.current
+        ? findFocusedRoute(previousStateRef.current)
+        : undefined;
+
+      // Preserve the hash if the route didn't change
+      if (
+        previousRoute &&
+        route &&
+        'key' in previousRoute &&
+        'key' in route &&
+        previousRoute.key === route.key
+      ) {
+        path = path + location.hash;
+      }
+
+      return path;
     };
 
     if (ref.current) {

package/src/useScrollToTop.tsx

@@ -39,7 +39,7 @@ function getScrollableNode(ref: React.RefObject<ScrollableWrapper>) {
     // We need to use `getScrollResponder` to get access to the scroll responder
     return ref.current.getScrollResponder();
   } else if ('getNode' in ref.current) {
-    // When a `ScrollView` is wraped in `Animated.createAnimatedComponent`
+    // When a `ScrollView` is wrapped in `Animated.createAnimatedComponent`
     // we need to use `getNode` to get the ref to the actual scrollview.
     // Note that `getNode` is deprecated in newer versions of react-native
     // this is why we check if we already have a scrollable node above.