chore: update configs after 6.x release

lerna.json

@@ -11,6 +11,7 @@
       "allowBranch": "5.x",
       "conventionalCommits": true,
       "createRelease": "github",
+      "distTag": "5.x",
       "message": "chore: publish",
       "ignoreChanges": [
         "**/__fixtures__/**",

packages/bottom-tabs/README.md

@@ -2,4 +2,4 @@
 
 Bottom tab navigator for React Navigation following iOS design guidelines.
 
-Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/bottom-tab-navigator/).
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/5.x/bottom-tab-navigator/).

packages/compat/README.md

@@ -2,4 +2,4 @@
 
 Compatibility layer to write navigator definitions in static configuration format.
 
-Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/compatibility/).
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/5.x/compatibility/).

packages/compat/package.json

@@ -11,7 +11,7 @@
   "bugs": {
     "url": "https://github.com/react-navigation/react-navigation/issues"
   },
-  "homepage": "https://reactnavigation.org/docs/compatibility/",
+  "homepage": "https://reactnavigation.org/docs/5.x/compatibility/",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
   "source": "src/index.tsx",

packages/core/src/BaseNavigationContainer.tsx

@@ -29,7 +29,7 @@ import type {
 type State = NavigationState | PartialState<NavigationState> | undefined;
 
 const NOT_INITIALIZED_ERROR =
-  "The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or if the navigator hasn't finished mounting. See https://reactnavigation.org/docs/navigating-without-navigation-prop#handling-initialization for more details.";
+  "The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or if the navigator hasn't finished mounting. See https://reactnavigation.org/docs/5.x/navigating-without-navigation-prop#handling-initialization for more details.";
 
 const serializableWarnings: string[] = [];
 
@@ -43,7 +43,7 @@ try {
     {
       set(_) {
         console.warn(
-          "Redux devtools extension integration can be enabled with the '@react-navigation/devtools' package. For more details, see https://reactnavigation.org/docs/devtools"
+          "Redux devtools extension integration can be enabled with the '@react-navigation/devtools' package. For more details, see https://reactnavigation.org/docs/5.x/devtools"
         );
       },
     }
@@ -337,7 +337,7 @@ const BaseNavigationContainer = React.forwardRef(
               }
             }
 
-            const message = `Non-serializable values were found in the navigation state. Check:\n\n${path} (${reason})\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`;
+            const message = `Non-serializable values were found in the navigation state. Check:\n\n${path} (${reason})\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/5.x/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`;
 
             if (!serializableWarnings.includes(message)) {
               serializableWarnings.push(message);
@@ -374,9 +374,9 @@ const BaseNavigationContainer = React.forwardRef(
           case 'REPLACE':
           case 'JUMP_TO':
             if (payload?.name) {
-              message += `\n\nDo you have a screen named '${payload.name}'?\n\nIf you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.`;
+              message += `\n\nDo you have a screen named '${payload.name}'?\n\nIf you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/5.x/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.`;
             } else {
-              message += `\n\nYou need to pass the name of the screen to navigate to.\n\nSee https://reactnavigation.org/docs/navigation-actions for usage.`;
+              message += `\n\nYou need to pass the name of the screen to navigate to.\n\nSee https://reactnavigation.org/docs/5.x/navigation-actions for usage.`;
             }
 
             break;

packages/core/src/EnsureSingleNavigator.tsx

@@ -4,7 +4,7 @@ type Props = {
   children: React.ReactNode;
 };
 
-const MULTIPLE_NAVIGATOR_ERROR = `Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen". Make sure each navigator is under a separate "Screen" container. See https://reactnavigation.org/docs/nesting-navigators for a guide on nesting.`;
+const MULTIPLE_NAVIGATOR_ERROR = `Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen". Make sure each navigator is under a separate "Screen" container. See https://reactnavigation.org/docs/5.x/nesting-navigators for a guide on nesting.`;
 
 export const SingleNavigatorContext = React.createContext<
   | {

packages/core/src/NavigationStateContext.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { NavigationState, PartialState } from '@react-navigation/routers';
 
 const MISSING_CONTEXT_ERROR =
-  "Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.";
+  "Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/5.x/getting-started for setup instructions.";
 
 export default React.createContext<{
   isDefault?: true;

packages/core/src/checkLegacyPathConfig.tsx

@@ -22,7 +22,7 @@ export default function checkLegacyPathConfig(
         config.hasOwnProperty('initialRouteName'))
     ) {
       throw new Error(
-        'Found invalid keys in the configuration object. See https://reactnavigation.org/docs/configuring-links/ for more details on the shape of the configuration object.'
+        'Found invalid keys in the configuration object. See https://reactnavigation.org/docs/5.x/configuring-links/ for more details on the shape of the configuration object.'
       );
     }
   }

packages/core/src/createNavigatorFactory.tsx

@@ -25,7 +25,7 @@ export default function createNavigatorFactory<
   > {
     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 with React Navigation 5? See https://reactnavigation.org/docs/upgrading-from-4.x for migration guide."
+        "Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5? See https://reactnavigation.org/docs/5.x/upgrading-from-4.x for migration guide."
       );
     }
 

packages/core/src/getPathFromState.tsx

@@ -179,7 +179,7 @@ export default function getPathFromState(
           if (p === '*') {
             if (legacy) {
               throw new Error(
-                "Please update your config to the new format to use wildcard pattern ('*'). https://reactnavigation.org/docs/configuring-links/#updating-config"
+                "Please update your config to the new format to use wildcard pattern ('*'). https://reactnavigation.org/docs/5.x/configuring-links/#updating-config"
               );
             }
 

packages/core/src/getStateFromPath.tsx

@@ -470,7 +470,7 @@ const createConfigItem = (
           .map((it) => {
             if (legacy && it === '*') {
               throw new Error(
-                "Please update your config to the new format to use wildcard pattern ('*'). https://reactnavigation.org/docs/configuring-links/#updating-config"
+                "Please update your config to the new format to use wildcard pattern ('*'). https://reactnavigation.org/docs/5.x/configuring-links/#updating-config"
               );
             }
 

packages/core/src/useComponent.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+export default function useComponent<
+  T extends React.ComponentType<any>,
+  P extends {}
+>(Component: T, props: P) {
+  const propsRef = React.useRef<P | null>(props);
+
+  // Normally refs shouldn't be mutated in render
+  // But we return a component which will be rendered
+  // So it's just for immediate consumption
+  propsRef.current = props;
+
+  React.useEffect(() => {
+    propsRef.current = null;
+  });
+
+  return React.useRef((rest: Omit<React.ComponentProps<T>, keyof P>) => {
+    const props = propsRef.current;
+
+    if (props === null) {
+      throw new Error(
+        'The returned component must be rendered in the same render phase as the hook.'
+      );
+    }
+
+    // @ts-expect-error: the props should be fine here
+    return <Component {...props} {...rest} />;
+  }).current;
+}

packages/core/src/useFocusEffect.tsx

@@ -22,7 +22,7 @@ export default function useFocusEffect(effect: EffectCallback) {
       '    // Your code here\n' +
       '  }, [depA, depB])\n' +
       ');\n\n' +
-      'See usage guide: https://reactnavigation.org/docs/use-focus-effect';
+      'See usage guide: https://reactnavigation.org/docs/5.x/use-focus-effect';
 
     console.error(message);
   }
@@ -60,7 +60,7 @@ export default function useFocusEffect(effect: EffectCallback) {
             '    fetchData();\n' +
             '  }, [someId])\n' +
             ');\n\n' +
-            'See usage guide: https://reactnavigation.org/docs/use-focus-effect';
+            'See usage guide: https://reactnavigation.org/docs/5.x/use-focus-effect';
         } else {
           message += ` You returned '${JSON.stringify(destroy)}'.`;
         }

packages/core/src/useNavigationBuilder.tsx

@@ -14,7 +14,9 @@ import {
 } from '@react-navigation/routers';
 import NavigationStateContext from './NavigationStateContext';
 import NavigationRouteContext from './NavigationRouteContext';
+import NavigationHelpersContext from './NavigationHelpersContext';
 import Screen from './Screen';
+import useComponent from './useComponent';
 import useEventEmitter from './useEventEmitter';
 import useRegisterNavigator from './useRegisterNavigator';
 import useDescriptors from './useDescriptors';
@@ -571,9 +573,14 @@ export default function useNavigationBuilder<
     descriptors,
   });
 
+  const NavigationContent = useComponent(NavigationHelpersContext.Provider, {
+    value: navigation,
+  });
+
   return {
     state,
     navigation,
     descriptors,
+    NavigationContent,
   };
 }

packages/core/src/useRouteCache.tsx

@@ -43,7 +43,7 @@ export default function useRouteCache<State extends NavigationState>(
         get() {
           if (!SUPPRESS_STATE_ACCESS_WARNING.value) {
             console.warn(
-              "Accessing the 'state' property of the 'route' object is not supported. If you want to get the focused route name, use the 'getFocusedRouteNameFromRoute' helper instead: https://reactnavigation.org/docs/screen-options-resolution/#setting-parent-screen-options-based-on-child-navigators-state"
+              "Accessing the 'state' property of the 'route' object is not supported. If you want to get the focused route name, use the 'getFocusedRouteNameFromRoute' helper instead: https://reactnavigation.org/docs/5.x/screen-options-resolution/#setting-parent-screen-options-based-on-child-navigators-state"
             );
           }
 

packages/devtools/README.md

@@ -2,7 +2,7 @@
 
 Developer tools for React Navigation.
 
-Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/devtools).
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/5.x/devtools).
 
 ## Installation
 

packages/drawer/README.md

@@ -1,5 +1,5 @@
 # `@react-navigation/drawer`
 
-Drawer navigator for React Navigation following Material Design guidelines. 
+Drawer navigator for React Navigation following Material Design guidelines.
 
-Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/drawer-navigator/).
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/5.x/drawer-navigator/).

packages/drawer/package.json

@@ -21,7 +21,7 @@
   "bugs": {
     "url": "https://github.com/react-navigation/react-navigation/issues"
   },
-  "homepage": "https://reactnavigation.org/docs/drawer-navigator/",
+  "homepage": "https://reactnavigation.org/docs/5.x/drawer-navigator/",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
   "source": "src/index.tsx",

packages/material-bottom-tabs/README.md

@@ -2,4 +2,4 @@
 
 React Navigation integration for [bottom navigation](https://material.io/components/bottom-navigation) component from [`react-native-paper`](https://callstack.github.io/react-native-paper/bottom-navigation.html).
 
-Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/material-bottom-tab-navigator/).
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/5.x/material-bottom-tab-navigator/).

packages/material-bottom-tabs/package.json

@@ -21,7 +21,7 @@
   "bugs": {
     "url": "https://github.com/react-navigation/react-navigation/issues"
   },
-  "homepage": "https://reactnavigation.org/docs/material-bottom-tab-navigator/",
+  "homepage": "https://reactnavigation.org/docs/5.x/material-bottom-tab-navigator/",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
   "source": "src/index.tsx",

packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx

@@ -58,7 +58,7 @@ try {
 
       console.warn(
         `Tried to use the icon '${name}' in a component from '@react-navigation/material-bottom-tabs', but 'react-native-vector-icons/MaterialCommunityIcons' could not be loaded.`,
-        `To remove this warning, try installing 'react-native-vector-icons' or use another method to specify icon: https://reactnavigation.org/docs/material-bottom-tab-navigator/#tabbaricon.`
+        `To remove this warning, try installing 'react-native-vector-icons' or use another method to specify icon: https://reactnavigation.org/docs/5.x/material-bottom-tab-navigator/#tabbaricon.`
       );
 
       isErrorLogged = true;

packages/material-top-tabs/README.md

@@ -2,4 +2,4 @@
 
 React Navigation integration for animated tab view component from [`react-native-tab-view`](https://github.com/react-native-community/react-native-tab-view).
 
-Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/material-top-tab-navigator/).
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/5.x/material-top-tab-navigator/).

packages/material-top-tabs/package.json

@@ -21,7 +21,7 @@
   "bugs": {
     "url": "https://github.com/react-navigation/react-navigation/issues"
   },
-  "homepage": "https://reactnavigation.org/docs/material-top-tab-navigator/",
+  "homepage": "https://reactnavigation.org/docs/5.x/material-top-tab-navigator/",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
   "source": "src/index.tsx",

packages/native/README.md

@@ -2,4 +2,4 @@
 
 React Native integration for React Navigation.
 
-Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/getting-started/).
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/5.x/getting-started/).

packages/native/src/useLinking.native.tsx

@@ -147,7 +147,7 @@ export default function useLinking(
             state.routes.some((r) => !rootState?.routeNames.includes(r.name))
           ) {
             console.warn(
-              "The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration."
+              "The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/5.x/configuring-links for more details on how to specify a linking configuration."
             );
             return;
           }

packages/native/src/useLinking.tsx

@@ -408,7 +408,7 @@ export default function useLinking(
 
         if (state.routes.some((r) => !rootState?.routeNames.includes(r.name))) {
           console.warn(
-            "The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration."
+            "The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/5.x/configuring-links for more details on how to specify a linking configuration."
           );
           return;
         }

packages/routers/README.md

@@ -14,4 +14,4 @@ yarn add @react-navigation/routers
 
 ## Usage
 
-Documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/custom-routers/).
+Documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/5.x/custom-routers/).

packages/routers/package.json

@@ -16,7 +16,7 @@
   "bugs": {
     "url": "https://github.com/react-navigation/react-navigation/issues"
   },
-  "homepage": "https://reactnavigation.org/docs/custom-routers/",
+  "homepage": "https://reactnavigation.org/docs/5.x/custom-routers/",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
   "source": "src/index.tsx",

packages/routers/src/CommonActions.tsx

@@ -54,7 +54,7 @@ export function navigate(...args: any): Action {
 
     if (!payload.hasOwnProperty('key') && !payload.hasOwnProperty('name')) {
       throw new Error(
-        'You need to specify name or key when calling navigate with an object as the argument. See https://reactnavigation.org/docs/navigation-actions#navigate for usage.'
+        'You need to specify name or key when calling navigate with an object as the argument. See https://reactnavigation.org/docs/5.x/navigation-actions#navigate for usage.'
       );
     }
 

packages/stack/README.md

@@ -2,4 +2,4 @@
 
 Stack navigator for React Navigation.
 
-Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/stack-navigator/).
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/5.x/stack-navigator/).

packages/stack/package.json

@@ -20,7 +20,7 @@
   "bugs": {
     "url": "https://github.com/react-navigation/react-navigation/issues"
   },
-  "homepage": "https://reactnavigation.org/docs/stack-navigator/",
+  "homepage": "https://reactnavigation.org/docs/5.x/stack-navigator/",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
   "source": "src/index.tsx",