diff --git a/lerna.json b/lerna.json index 7c0f5eb6b5..63cba9f64c 100644 --- a/lerna.json +++ b/lerna.json @@ -11,6 +11,7 @@ "allowBranch": "5.x", "conventionalCommits": true, "createRelease": "github", + "distTag": "5.x", "message": "chore: publish", "ignoreChanges": [ "**/__fixtures__/**", diff --git a/packages/bottom-tabs/README.md b/packages/bottom-tabs/README.md index e31eb02b1e..0ce22430a7 100644 --- a/packages/bottom-tabs/README.md +++ b/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/). diff --git a/packages/compat/README.md b/packages/compat/README.md index cc3c492326..b8b7f72c88 100644 --- a/packages/compat/README.md +++ b/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/). diff --git a/packages/compat/package.json b/packages/compat/package.json index a73ffa9dd6..381c244b1d 100644 --- a/packages/compat/package.json +++ b/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", diff --git a/packages/core/src/BaseNavigationContainer.tsx b/packages/core/src/BaseNavigationContainer.tsx index e02827320f..47ba370112 100644 --- a/packages/core/src/BaseNavigationContainer.tsx +++ b/packages/core/src/BaseNavigationContainer.tsx @@ -29,7 +29,7 @@ import type { type State = NavigationState | PartialState | 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; diff --git a/packages/core/src/EnsureSingleNavigator.tsx b/packages/core/src/EnsureSingleNavigator.tsx index ce5ecdfe89..7c8ad352e6 100644 --- a/packages/core/src/EnsureSingleNavigator.tsx +++ b/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< | { diff --git a/packages/core/src/NavigationStateContext.tsx b/packages/core/src/NavigationStateContext.tsx index d4191f453a..d0a4c6d3c8 100644 --- a/packages/core/src/NavigationStateContext.tsx +++ b/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; diff --git a/packages/core/src/checkLegacyPathConfig.tsx b/packages/core/src/checkLegacyPathConfig.tsx index bdaa903042..9cf0fec4ad 100644 --- a/packages/core/src/checkLegacyPathConfig.tsx +++ b/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.' ); } } diff --git a/packages/core/src/createNavigatorFactory.tsx b/packages/core/src/createNavigatorFactory.tsx index 9eb4a3922c..1bad92335e 100644 --- a/packages/core/src/createNavigatorFactory.tsx +++ b/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." ); } diff --git a/packages/core/src/getPathFromState.tsx b/packages/core/src/getPathFromState.tsx index ba81f5c0be..cd616a8ac9 100644 --- a/packages/core/src/getPathFromState.tsx +++ b/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" ); } diff --git a/packages/core/src/getStateFromPath.tsx b/packages/core/src/getStateFromPath.tsx index c658121ed8..1430d0b254 100644 --- a/packages/core/src/getStateFromPath.tsx +++ b/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" ); } diff --git a/packages/core/src/useComponent.tsx b/packages/core/src/useComponent.tsx new file mode 100644 index 0000000000..9b7f0372a8 --- /dev/null +++ b/packages/core/src/useComponent.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; + +export default function useComponent< + T extends React.ComponentType, + P extends {} +>(Component: T, props: P) { + const propsRef = React.useRef

(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, 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 ; + }).current; +} diff --git a/packages/core/src/useFocusEffect.tsx b/packages/core/src/useFocusEffect.tsx index f34112a48c..348439557d 100644 --- a/packages/core/src/useFocusEffect.tsx +++ b/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)}'.`; } diff --git a/packages/core/src/useNavigationBuilder.tsx b/packages/core/src/useNavigationBuilder.tsx index 40fc91b379..0d0b7cf366 100644 --- a/packages/core/src/useNavigationBuilder.tsx +++ b/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, }; } diff --git a/packages/core/src/useRouteCache.tsx b/packages/core/src/useRouteCache.tsx index 1dfd23dd12..90c4c09332 100644 --- a/packages/core/src/useRouteCache.tsx +++ b/packages/core/src/useRouteCache.tsx @@ -43,7 +43,7 @@ export default function useRouteCache( 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" ); } diff --git a/packages/devtools/README.md b/packages/devtools/README.md index 80445fb3df..bbd4ec2c62 100644 --- a/packages/devtools/README.md +++ b/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 diff --git a/packages/drawer/README.md b/packages/drawer/README.md index 28d3d189cd..9cb3413561 100644 --- a/packages/drawer/README.md +++ b/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/). diff --git a/packages/drawer/package.json b/packages/drawer/package.json index 29cfd6b730..1b1d5badde 100644 --- a/packages/drawer/package.json +++ b/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", diff --git a/packages/material-bottom-tabs/README.md b/packages/material-bottom-tabs/README.md index 5cb06299e3..e60d8b25bb 100644 --- a/packages/material-bottom-tabs/README.md +++ b/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/). diff --git a/packages/material-bottom-tabs/package.json b/packages/material-bottom-tabs/package.json index 9732626ff9..a374194e68 100644 --- a/packages/material-bottom-tabs/package.json +++ b/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", diff --git a/packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx b/packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx index b86a426b5a..93f44c3ca6 100644 --- a/packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx +++ b/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; diff --git a/packages/material-top-tabs/README.md b/packages/material-top-tabs/README.md index ee45ebf5e4..8b1a37a12a 100644 --- a/packages/material-top-tabs/README.md +++ b/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/). diff --git a/packages/material-top-tabs/package.json b/packages/material-top-tabs/package.json index 1941b03885..c8a7b31246 100644 --- a/packages/material-top-tabs/package.json +++ b/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", diff --git a/packages/native/README.md b/packages/native/README.md index c40e4d1ab4..d343adf0f1 100644 --- a/packages/native/README.md +++ b/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/). diff --git a/packages/native/src/useLinking.native.tsx b/packages/native/src/useLinking.native.tsx index a23cdd807b..3f34864d67 100644 --- a/packages/native/src/useLinking.native.tsx +++ b/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; } diff --git a/packages/native/src/useLinking.tsx b/packages/native/src/useLinking.tsx index a6f4cd03da..8c21d9ded0 100644 --- a/packages/native/src/useLinking.tsx +++ b/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; } diff --git a/packages/routers/README.md b/packages/routers/README.md index 5141672c5d..0e109e0f66 100644 --- a/packages/routers/README.md +++ b/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/). diff --git a/packages/routers/package.json b/packages/routers/package.json index f9a6ca56c7..dd038dfaa8 100644 --- a/packages/routers/package.json +++ b/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", diff --git a/packages/routers/src/CommonActions.tsx b/packages/routers/src/CommonActions.tsx index e4fccf228d..0f15ab5f3c 100644 --- a/packages/routers/src/CommonActions.tsx +++ b/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.' ); } diff --git a/packages/stack/README.md b/packages/stack/README.md index ceaf02b8eb..df9fc950de 100644 --- a/packages/stack/README.md +++ b/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/). diff --git a/packages/stack/package.json b/packages/stack/package.json index 031b98215b..3436da61e1 100644 --- a/packages/stack/package.json +++ b/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",