diff --git a/blog/2020-02-06-react-navigation-5.0.md b/blog/2020-02-06-react-navigation-5.0.md index 3fe8b3d83b..64f91cad23 100644 --- a/blog/2020-02-06-react-navigation-5.0.md +++ b/blog/2020-02-06-react-navigation-5.0.md @@ -47,16 +47,16 @@ This made it necessary to rewrite the core of the library, which allowed us to m Hooks are great for stateful logic and code organization. Now we have several hooks for common use cases: -- [`useNavigation`](/docs/use-navigation) -- [`useRoute`](/docs/use-route) -- [`useNavigationState`](/docs/use-navigation-state) -- [`useFocusEffect`](/docs/use-focus-effect) -- [`useIsFocused`](/docs/use-is-focused) -- [`useScrollToTop`](/docs/use-scroll-to-top) +- [`useNavigation`](/docs/5.x/use-navigation) +- [`useRoute`](/docs/5.x/use-route) +- [`useNavigationState`](/docs/5.x/use-navigation-state) +- [`useFocusEffect`](/docs/5.x/use-focus-effect) +- [`useIsFocused`](/docs/5.x/use-is-focused) +- [`useScrollToTop`](/docs/5.x/use-scroll-to-top) ### Update options from component -We’ve added a new [`setOptions`](/docs/navigation-prop#setoptions---update-screen-options-from-the-component) method on the `navigation` prop to make configuring screen navigation options more intuitive than its `static navigationOptions` predecessor. It lets us **easily set screen options based on props, state or context without messing with params**. Instead of using static options, we can call it anytime to configure the screen. +We’ve added a new [`setOptions`](/docs/5.x/navigation-prop#setoptions---update-screen-options-from-the-component) method on the `navigation` prop to make configuring screen navigation options more intuitive than its `static navigationOptions` predecessor. It lets us **easily set screen options based on props, state or context without messing with params**. Instead of using static options, we can call it anytime to configure the screen. ```js navigation.setOptions({ @@ -77,7 +77,7 @@ It can be used for things like adding a button in the header which needs to inte In React Navigation, we had basic theming support where you could specify whether to use a light or dark theme. It wasn't easy to customize the colors used by the built-in components such as header, tab bar etc. without extra code or repetition. -Now, we have revamped the [theme system](/docs/themes) for easier customization. It is possible to provide a theme object with your desired colors for background, accent color etc. and it will automatically change the colors of all navigators without any extra code. +Now, we have revamped the [theme system](/docs/5.x/themes) for easier customization. It is possible to provide a theme object with your desired colors for background, accent color etc. and it will automatically change the colors of all navigators without any extra code. ```js const MyTheme = { @@ -98,7 +98,7 @@ The new version has been written from the ground-up with TypeScript. We now get ![TypeScript in action](/assets/blog/announcing-5.0/typescript.gif) -We also have JSDoc for the built-in methods and options, so you get their description directly in your editor. See [our typescript documentation](/docs/typescript) for more details on how to use it. +We also have JSDoc for the built-in methods and options, so you get their description directly in your editor. See [our typescript documentation](/docs/5.x/typescript) for more details on how to use it. ### Redux DevTools integration @@ -117,7 +117,7 @@ Traditionally, we have written our navigators in JavaScript for greater customiz ### Native backends for Material top tab navigator -Similar to native stack, we also have [new backends](/docs/material-top-tab-navigator#pager) for Material top tab navigator based on [`react-native-viewpager`](https://github.com/react-native-community/react-native-viewpager) and [`ScrollView`](https://reactnative.dev/docs/scrollview). +Similar to native stack, we also have [new backends](/docs/5.x/material-top-tab-navigator#pager) for Material top tab navigator based on [`react-native-viewpager`](https://github.com/react-native-community/react-native-viewpager) and [`ScrollView`](https://reactnative.dev/docs/5.x/scrollview). ```js import ViewPagerAdapter from 'react-native-tab-view-viewpager-adapter'; @@ -146,9 +146,9 @@ import { ScrollPager } from 'react-native-tab-view'; In addition to these larger improvements, there are several smaller improvements to fit more use cases and make it easier to do certain tasks: - Revamped drawer navigator to make customizing the drawer sidebar content easier and more flexible. -- Simpler API for [`reset` action](/docs/navigation-prop#reset) where you can pass the new state directly instead of a chain of actions. -- More reliable [`focus` and `blur` events](/docs/navigation-lifecycle) to know when a screen's focus state changes. -- Integration with [`InteractionManager`](https://reactnative.dev/docs/interactionmanager) to delay tasks until animation is complete. +- Simpler API for [`reset` action](/docs/5.x/navigation-prop#reset) where you can pass the new state directly instead of a chain of actions. +- More reliable [`focus` and `blur` events](/docs/5.x/navigation-lifecycle) to know when a screen's focus state changes. +- Integration with [`InteractionManager`](https://reactnative.dev/docs/5.x/interactionmanager) to delay tasks until animation is complete. - Better safe area handling with [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context). ## Upgrading @@ -165,7 +165,7 @@ If you were using React Navigation 5 when it was alpha, you might need to check - If you have added `@react-navigation/core` to your dependencies, remove it, and replace all imports from `@react-navigation/core` with `@react-navigation/native` - If you were importing `NavigationNativeContainer`, change it to `NavigationContainer`, if you were using `NavigationContainer`, change it to `BaseNavigationContainer` -- If you had deep linking configured, the config format has changed for nesting. Check the [deep linking docs](/docs/deep-linking) for details. +- If you had deep linking configured, the config format has changed for nesting. Check the [deep linking docs](/docs/5.x/deep-linking) for details. ## Thanks to these wonderful people diff --git a/blog/2021-03-12-react-navigation-6.0-next.md b/blog/2021-03-12-react-navigation-6.0-next.md index 77252801b0..3775b4b73f 100644 --- a/blog/2021-03-12-react-navigation-6.0-next.md +++ b/blog/2021-03-12-react-navigation-6.0-next.md @@ -13,17 +13,17 @@ We're excited to announce that we finally have a prerelease version of React Nav While React Navigation 5 was complete overhaul to the API of React Navigation, React Navigation 6 keeps the same API, with some breaking changes to make things more consistent and provide more flexibility. We also tried to address some common pain points and confusions that users had. -We'll share few highlights of the release in this blog post. If you're looking for a detailed upgrade guide, you can find it [here](/docs/upgrading-from-5.x). +We'll share few highlights of the release in this blog post. If you're looking for a detailed upgrade guide, you can find it [here](/docs/6.x/upgrading-from-5.x). ## Highlights - Params are now overwritten on navigation instead of merging (with option to merge them) -- Modals in [stack](/docs/stack-navigator) now use the presentation style on iOS by default, and there's a new slide animation for modals on Android -- [Drawer](/docs/drawer-navigator) now uses a slide animation by default on iOS -- Headers are now shown by default in [drawer](/docs/drawer-navigator) and [bottom tab](/docs/bottom-tab-navigator) screens, so you don't need extra stack navigators -- We got rid of `tabBarOptions`, `drawerContentOptions` etc. and moved those to [`options` prop on screen](/docs/screen-options) to make it possible to configure them per screen -- [Material Top Tabs](/docs/material-top-tab-navigator) now use a `ViewPager` based implementation, which means it'll provide a native experience -- We now have a [UI elements library](/docs/elements) which contains various components we use in React Navigation +- Modals in [stack](/docs/6.x/stack-navigator) now use the presentation style on iOS by default, and there's a new slide animation for modals on Android +- [Drawer](/docs/6.x/drawer-navigator) now uses a slide animation by default on iOS +- Headers are now shown by default in [drawer](/docs/6.x/drawer-navigator) and [bottom tab](/docs/6.x/bottom-tab-navigator) screens, so you don't need extra stack navigators +- We got rid of `tabBarOptions`, `drawerContentOptions` etc. and moved those to [`options` prop on screen](/docs/6.x/screen-options) to make it possible to configure them per screen +- [Material Top Tabs](/docs/6.x/material-top-tab-navigator) now use a `ViewPager` based implementation, which means it'll provide a native experience +- We now have a [UI elements library](/docs/6.x/elements) which contains various components we use in React Navigation ## Try it out @@ -35,7 +35,7 @@ npm install @react-navigation/native@^6.x @react-navigation/stack@^6.x ## What's next? -We're planning to update our documentation to recommend [native-stack](/docs/native-stack-navigator) as the default. This will provide the best performance for people who don't need a lot of customization, while still having the option to use the JavaScript based implementation if they need it. +We're planning to update our documentation to recommend [native-stack](/docs/6.x/native-stack-navigator) as the default. This will provide the best performance for people who don't need a lot of customization, while still having the option to use the JavaScript based implementation if they need it. ## Sponsor us diff --git a/blog/2021-08-14-react-navigation-6.0.md b/blog/2021-08-14-react-navigation-6.0.md index adbf3087d7..2c52dc90a5 100644 --- a/blog/2021-08-14-react-navigation-6.0.md +++ b/blog/2021-08-14-react-navigation-6.0.md @@ -7,7 +7,7 @@ author_image_url: https://avatars2.githubusercontent.com/u/1174278?s=200&v=4 tags: [release, announcement] --- -The documentation is now live at [reactnavigation.org](https://reactnavigation.org), and v5 lives [here](/docs/5.x/getting-started). +The documentation is now live at [reactnavigation.org](https://reactnavigation.org/6.x/getting-started), and v5 lives [here](/docs/5.x/getting-started). React Navigation 6 keeps mostly the same core API as React Navigation 5, and you can think of it as further polishing what was in React Navigation 5. Let's talk about the highlights of this release in this blog post. @@ -49,11 +49,11 @@ In React Navigation 6, many of these props are now screen options. The most sign > ``` -See [deprecations](/docs/upgrading-from-5.x#deprecations) for more details. +See [deprecations](/docs/6.x/upgrading-from-5.x#deprecations) for more details. ### Elements library -We extracted some of the components and helpers used across various navigators in React Navigation and published them under a new package called [`@react-navigation/elements`](/docs/elements). It can be useful if you're building your own navigator, or just want to reuse some of the components in your app. +We extracted some of the components and helpers used across various navigators in React Navigation and published them under a new package called [`@react-navigation/elements`](/docs/6.x/elements). It can be useful if you're building your own navigator, or just want to reuse some of the components in your app. Currently only a small set of components are exported, but there are more to come. @@ -61,15 +61,15 @@ Currently only a small set of components are exported, but there are more to com We simplified many APIs with React Navigation 6 to address common use cases. For example: -- Single option to use a modal presentation style and transparent modal with [`presentation`](/docs/stack-navigator#presentation) +- Single option to use a modal presentation style and transparent modal with [`presentation`](/docs/6.x/stack-navigator#presentation) - Custom header doesn't require setting `headerMode="screen"` manually anymore - The `useHeaderHeight` hook now ignores hidden headers and returns the height of the closest visible header in parent -- New option to set a [custom background](/docs/bottom-tab-navigator#tabbarbackground) (such as `BlurView`) for tab bar without having to use a custom tab bar -- New API to manage ref on the container [(`createNavigationContainerRef` and `useNavigationContainerRef`)](/docs/navigating-without-navigation-prop) +- New option to set a [custom background](/docs/6.x/bottom-tab-navigator#tabbarbackground) (such as `BlurView`) for tab bar without having to use a custom tab bar +- New API to manage ref on the container [(`createNavigationContainerRef` and `useNavigationContainerRef`)](/docs/6.x/navigating-without-navigation-prop) ### New `Group` component for organization -The [`Group`](/docs/group) component helps you organize screens inside your navigators and share common `screenOptions` between the `Group`s. Passing `screenOptions` to a group configures all the screens inside that group to use these options. You can override `Group` options by passing `options` to each Screen component, similar to how you can with `screenOptions` on Navigator. You can also nest `Group` components inside other `Group` components. They are lightweight and don’t render anything - like fragments, so they won’t affect performance. +The [`Group`](/docs/6.x/group) component helps you organize screens inside your navigators and share common `screenOptions` between the `Group`s. Passing `screenOptions` to a group configures all the screens inside that group to use these options. You can override `Group` options by passing `options` to each Screen component, similar to how you can with `screenOptions` on Navigator. You can also nest `Group` components inside other `Group` components. They are lightweight and don’t render anything - like fragments, so they won’t affect performance. In this code snippet, you can see that we group regular screens under one group and modal screens under another group: @@ -93,13 +93,13 @@ function App() { Developers often want to show a header for screens inside of drawers and bottom tabs. To do this, we had to nest a stack navigator which provides a header, even if it was a navigator with just one screen. So we now show headers by default in screens of drawer and bottom tabs. No nesting necessary. -We also export a [`Header`](/docs/elements#header) component in the new elements library to use anywhere in your components. +We also export a [`Header`](/docs/6.x/elements#header) component in the new elements library to use anywhere in your components. ### Native navigation by default Historically, React Navigation has been mostly JS based, with animations and gestures written in JavaScript on top of `react-native-gesture-handler`, and `react-native-reanimated` or `Animated`. While this works for a lot of apps, apps with heavy screens can suffer from poor performance, and some native features are difficult to re-create exactly (such as the large header on iOS). So, we wanted to address this by using native primitives for navigation. -With React Navigation 5, we introduced [`@react-navigation/native-stack`](/docs/native-stack-navigator) package powered by [`react-native-screens`](https://github.com/software-mansion/react-native-screens), as well as a native backend for [`@react-navigation/material-top-tabs`](/docs/material-top-tab-navigator) powered by [`react-native-pager-view`](https://github.com/callstack/react-native-pager-view). +With React Navigation 5, we introduced [`@react-navigation/native-stack`](/docs/6.x/native-stack-navigator) package powered by [`react-native-screens`](https://github.com/software-mansion/react-native-screens), as well as a native backend for [`@react-navigation/material-top-tabs`](/docs/6.x/material-top-tab-navigator) powered by [`react-native-pager-view`](https://github.com/callstack/react-native-pager-view). In React Navigation 6, we made `@react-navigation/native-stack` the default choice for setting up Stack navigation. It uses `UINavigationController` on iOS and Fragments on Android to implement navigation natively. We also focused a lot on aligning the API of `@react-navigation/native-stack` with `@react-navigation/stack` so that it’ll be easier to switch between them. @@ -125,7 +125,7 @@ declare global { } ``` -You can read [more about it in our TypeScript docs](/docs/typescript#specifying-default-types-for-usenavigation-link-ref-etc). +You can read [more about it in our TypeScript docs](/docs/6.x/typescript#specifying-default-types-for-usenavigation-link-ref-etc). ### Flipper plugin @@ -139,13 +139,13 @@ One advantage of the Flipper plugin over Redux Devtools Extension is that it doe ![React Navigation Linking](/assets/devtools/flipper-plugin-linking.png) -See the [guide for setting it up](/docs/devtools#useflipper) for more details. Note that Flipper support in Expo managed apps requires a [Custom Development Client](https://docs.expo.dev/clients/introduction/) and it does not work in Expo Go at the time of writing. +See the [guide for setting it up](/docs/6.x/devtools#useflipper) for more details. Note that Flipper support in Expo managed apps requires a [Custom Development Client](https://docs.expo.dev/clients/introduction/) and it does not work in Expo Go at the time of writing. ## Upgrading While React Navigation 6 doesn't introduce changes of the same magnitude as React Navigation 5, there are still some breaking changes. It is possible, however, to mix packages from React Navigation 5 and React Navigation 6 (with a few caveats) so that you can gradually upgrade packages. -See the [upgrade guide](/docs/upgrading-from-5.x) for a full list of changes and more details. +See the [upgrade guide](/docs/6.x/upgrading-from-5.x) for a full list of changes and more details. ## Sponsor us diff --git a/blog/2024-03-25-introducing-static-api.md b/blog/2024-03-25-introducing-static-api.md index cbc50770f5..7ae2007804 100644 --- a/blog/2024-03-25-introducing-static-api.md +++ b/blog/2024-03-25-introducing-static-api.md @@ -67,7 +67,7 @@ function App() { This component is similar to `NavigationContainer` and accepts most of the props accepted by `NavigationContainer`. So this is the place where you can do things like track for screen changes, persist navigation state etc. -See [Static API reference](/docs/7.x/static-configuration?config=static) for more details. +See [Static API reference](/docs/static-configuration?config=static) for more details. ## TypeScript @@ -84,7 +84,7 @@ declare global { } ``` -See [Type checking with TypeScript](/docs/7.x/typescript?config=static) for more details. +See [Type checking with TypeScript](/docs/typescript?config=static) for more details. ## Deep Linking @@ -152,7 +152,7 @@ There are 2 improvements to deep linking API: } ``` -See [Configuring links](/docs/7.x/configuring-links?config=static) for more details. +See [Configuring links](/docs/configuring-links?config=static) for more details. ## Authentication Flow @@ -175,13 +175,13 @@ const RootStack = createNativeStackNavigator({ The if property takes a hook that returns a boolean. When the hook returns true, the screen will be included in the navigation tree, and when it returns false, it won’t be included. -See [Authentication flows](/docs/7.x/auth-flow?config=static) for more details. +See [Authentication flows](/docs/auth-flow?config=static) for more details. ## Interoperability Since we have 2 different APIs in the same library, it's important that they both work together. This way you could start an app with the static API, but if you need flexibility for a specific navigator, you could use the dynamic API for that part. Or you may want to migrate to the static API to reduce the complexity, and with the interoperability, you can do that incrementally. -See [Combining static and dynamic APIs](/docs/7.x/combine-static-with-dynamic) for more details. +See [Combining static and dynamic APIs](/docs/combine-static-with-dynamic) for more details. ## Help us test @@ -191,6 +191,6 @@ The Static API is currently available in React Navigation 7 alpha. You can try i yarn add @react-navigation/native@next @react-navigation/native-stack@next ``` -In addition to the static API, React Navigation 7 also includes a lot of other improvements and new features. Make sure to go through the [upgrade guide](/docs/7.x/upgrading-from-6.x) to see all the changes. +In addition to the static API, React Navigation 7 also includes a lot of other improvements and new features. Make sure to go through the [upgrade guide](/docs/upgrading-from-6.x) to see all the changes. We would love to get feedback from the community on how it works for you and catch any issues before the stable release. If you have any feedback or suggestions, please let us know on our [GitHub Discussions forum](https://github.com/react-navigation/react-navigation/discussions). If you find any issues, please report them on our [GitHub issues](https://github.com/react-navigation/react-navigation/issues). diff --git a/blog/2024-06-27-react-navigation-7.0-rc.md b/blog/2024-06-27-react-navigation-7.0-rc.md index 12fd70b7ff..5ae92a0241 100644 --- a/blog/2024-06-27-react-navigation-7.0-rc.md +++ b/blog/2024-06-27-react-navigation-7.0-rc.md @@ -13,7 +13,7 @@ This release includes a new static API that simplifies the configuration of navi -You can read the full list of changes in the [upgrade guide](/docs/7.x/upgrading-from-6.x). Here are some highlights: +You can read the full list of changes in the [upgrade guide](/docs/upgrading-from-6.x). Here are some highlights: ## Highlights @@ -75,7 +75,7 @@ You can install it with: npm install react-native-drawer-layout@next ``` -See [`react-native-drawer-layout`](/docs/7.x/drawer-layout) for usage. +See [`react-native-drawer-layout`](/docs/drawer-layout) for usage. ## Try it out diff --git a/blog/2024-11-06-react-navigation-7.0.md b/blog/2024-11-06-react-navigation-7.0.md new file mode 100644 index 0000000000..bf99b086be --- /dev/null +++ b/blog/2024-11-06-react-navigation-7.0.md @@ -0,0 +1,53 @@ +--- +title: React Navigation 7.0 +author: Satyajit Sahoo +author_url: https://twitter.com/satya164 +author_title: Core Team +author_image_url: https://avatars2.githubusercontent.com/u/1174278?s=200&v=4 +tags: [announcement] +--- + +The documentation is now live at [reactnavigation.org](https://reactnavigation.org/getting-started), and v6 lives [here](/docs/6.x/getting-started). + +React Navigation 7 aims to improve the developer experience with a new static API as well as bring many new features and improvements. + + + +## Highlights + +- **Static API**: The new static API is an optional API that simplifies the configuration of navigators and makes it easier to work with TypeScript and deep linking. +- **Preloading screens**: Many navigators now support preloading screens prior to navigating to them. This can be useful to improve the perceived performance of the app by preloading the screens that the user is likely to navigate to next. +- **Layout props**: Navigators and screens now support `layout` props to augment the navigators with additional UI and behavior. +- **Improved Web integration**: The built in navigators now have better web-support such rendering anchor tags for more elements. The `Link` and `useLinkProps` APIs have also been revamped to use screen names instead of paths. +- **Searchbar support in all navigators with header**: All navigators with header now support a searchbar in the header. You can customize the searchbar using the `headerSearchBarOptions` option. +- **New `useLogger` devtool to replace flipper plugin**: The `use logger` hook can show navigation actions and state in the console for debugging. +- **Sidebar support in Bottom Tab Navigator**: The Bottom Tab Navigator now supports showing tabs on the side by specifying `tabBarPosition` option as `'left'` or `'right'`. +- **Animation support in Bottom Tab Navigator**: The Bottom Tab Navigator now supports animations when switching between tabs. You can customize the animation using the `animation` option. +- **`react-native-drawer-layout` package**: The drawer implementation used in `@react-navigation/drawer` is now available as a standalone package called `react-native-drawer-layout`. +- Many other improvements and bug fixes. + +See our [blog post for the release candidate](/blog/2024-06-27-react-navigation-7.0-rc.md) for a more detailed list of highlights. + +To see the full list of changes, check out the [upgrade guide](/docs/upgrading-from-6.x). + +## Upgrading + +In addition to the new features and improvements, React Navigation 7 also includes a number of breaking changes. We've put together a [detailed upgrade guide](/docs/upgrading-from-6.x) to help you migrate your app to the latest version. + +## Special thanks + +I'd like to extend a big thank you to all the contributors who helped with this release. Your contributions are what make React Navigation great. + +I want to give a special shoutout to [Michał Osadnik](https://x.com/mosdnk) for working through many of the features and improvements in this release as well as providing much-needed motivation. + +Many thanks to [Patrycja Kalińska](https://x.com/patkalinska) and [Ania Cichocka](https://github.com/AnCichocka) from [Software Mansion](https://swmansion.com/) for helping with the documentation. + +I'd also like to thank [Tymoteusz Boba](https://x.com/tboba_), [Maciej Stosio](https://x.com/maciekstosio) and [Kacper Kafara](https://x.com/kafara_kacper) from the [React Native Screens](https://github.com/software-mansion/react-native-screens). React Navigation wouldn't be where it is today without React Native Screens. + +Last but not least, without dedicated time from [Callstack](https://callstack.com/), it would be impossible to maintain and improve React Navigation. + +## Sponsor us + +If React Navigation helps you to deliver value to your customers, it'd mean a lot if you could sponsor us. Sponsorships will help us to move more quickly towards our goal of building the best cross-platform navigation library and continue to provide timely support for bug reports in our GitHub issues. + +👉 [Visit our GitHub Sponsors page](https://github.com/sponsors/react-navigation) 👈 diff --git a/docusaurus.config.js b/docusaurus.config.js index 67e304657e..53b4427944 100755 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -111,9 +111,17 @@ export default { redirects: [ { from: '/next', - to: '/docs/7.x/getting-started', + to: '/docs/migration-guides', }, ], + createRedirects(existingPath) { + if ( + existingPath.includes('/docs/') && + !/\/docs\/\d+\.x/.test(existingPath) + ) { + return existingPath.replace('/docs/', '/docs/7.x/'); + } + }, }, ], ], @@ -125,7 +133,7 @@ export default { editUrl: 'https://github.com/react-navigation/react-navigation.github.io/edit/main/', includeCurrentVersion: false, - lastVersion: '6.x', + lastVersion: '7.x', breadcrumbs: false, sidebarCollapsed: false, remarkPlugins: [[remarkNpm2Yarn, { sync: true }]], diff --git a/src/plugins/react-navigation-versions.mjs b/src/plugins/react-navigation-versions.mjs index 736d436f3f..7b3c257038 100644 --- a/src/plugins/react-navigation-versions.mjs +++ b/src/plugins/react-navigation-versions.mjs @@ -29,13 +29,13 @@ const query = async (name, tag) => { return pkg; }; -export default function friendsPlugin(context, options) { +export default function reactNavigationVersionsPlugin(context, options) { return { name: 'react-navigation-versions', async contentLoaded({ content, actions }) { const queries = { '7.x': { - tag: 'next', + tag: 'latest', packages: [ '@react-navigation/bottom-tabs', '@react-navigation/core', diff --git a/versioned_docs/version-6.x/bottom-tab-navigator.md b/versioned_docs/version-6.x/bottom-tab-navigator.md index 65c3d3cb9b..c33c91fabb 100755 --- a/versioned_docs/version-6.x/bottom-tab-navigator.md +++ b/versioned_docs/version-6.x/bottom-tab-navigator.md @@ -15,7 +15,7 @@ A simple tab bar on the bottom of the screen that lets you switch between differ To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/bottom-tabs`](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs): ```bash npm2yarn -npm install @react-navigation/bottom-tabs +npm install @react-navigation/bottom-tabs@^6.x ``` ## API Definition diff --git a/versioned_docs/version-6.x/devtools.md b/versioned_docs/version-6.x/devtools.md index 77afcc467a..eac28d62c2 100644 --- a/versioned_docs/version-6.x/devtools.md +++ b/versioned_docs/version-6.x/devtools.md @@ -9,7 +9,7 @@ Developer tools to make debugging easier when using React Navigation. To use the developer tools, install [`@react-navigation/devtools`](https://github.com/react-navigation/react-navigation/tree/master/packages/devtools): ```bash npm2yarn -npm install @react-navigation/devtools +npm install @react-navigation/devtools@^6.x ``` Hooks from this package only work during development and are disabled in production. You don't need to do anything special to remove them from the production build. diff --git a/versioned_docs/version-6.x/drawer-navigator.md b/versioned_docs/version-6.x/drawer-navigator.md index 6d1464e318..ce345ed099 100644 --- a/versioned_docs/version-6.x/drawer-navigator.md +++ b/versioned_docs/version-6.x/drawer-navigator.md @@ -17,7 +17,7 @@ This wraps [`react-native-drawer-layout`](drawer-layout.md). If you want to use To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/drawer`](https://github.com/react-navigation/react-navigation/tree/main/packages/drawer): ```bash npm2yarn -npm install @react-navigation/drawer +npm install @react-navigation/drawer@^6.x ``` Then, you need to install and configure the libraries that are required by the drawer navigator: diff --git a/versioned_docs/version-6.x/elements.md b/versioned_docs/version-6.x/elements.md index 6c099ad11f..6c836d3b41 100644 --- a/versioned_docs/version-6.x/elements.md +++ b/versioned_docs/version-6.x/elements.md @@ -11,7 +11,7 @@ A component library containing the UI elements and helpers used in React Navigat To use this package, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/elements`](https://github.com/react-navigation/react-navigation/tree/main/packages/elements): ```bash npm2yarn -npm install @react-navigation/elements +npm install @react-navigation/elements@^6.x ``` ## Components diff --git a/versioned_docs/version-6.x/getting-started.md b/versioned_docs/version-6.x/getting-started.md index 403cafbacb..c2ac1931f6 100755 --- a/versioned_docs/version-6.x/getting-started.md +++ b/versioned_docs/version-6.x/getting-started.md @@ -28,7 +28,7 @@ Here are some resources to help you out: Install the required packages in your React Native project: ```bash npm2yarn -npm install @react-navigation/native +npm install @react-navigation/native@^6.x ``` React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app. Don't worry too much about this for now, it'll become clear soon enough! To frontload the installation work, let's also install and configure dependencies used by most navigators, then we can move forward with starting to write some code. diff --git a/versioned_docs/version-6.x/hello-react-navigation.md b/versioned_docs/version-6.x/hello-react-navigation.md index daa7867341..9a1ede73cd 100755 --- a/versioned_docs/version-6.x/hello-react-navigation.md +++ b/versioned_docs/version-6.x/hello-react-navigation.md @@ -15,7 +15,7 @@ Let's start by demonstrating the most common navigator, `createNativeStackNaviga The libraries we've installed so far are the building blocks and shared foundations for navigators, and each navigator in React Navigation lives in its own library. To use the native stack navigator, we need to install [`@react-navigation/native-stack`](https://github.com/react-navigation/react-navigation/tree/main/packages/native-stack) : ```bash npm2yarn -npm install @react-navigation/native-stack +npm install @react-navigation/native-stack@^6.x ``` > 💡 `@react-navigation/native-stack` depends on `react-native-screens` and the other libraries that we installed in [Getting started](getting-started.md). If you haven't installed those yet, head over to that page and follow the installation instructions. diff --git a/versioned_docs/version-6.x/material-bottom-tab-navigator.md b/versioned_docs/version-6.x/material-bottom-tab-navigator.md index 59f3dd39f6..77b2313502 100755 --- a/versioned_docs/version-6.x/material-bottom-tab-navigator.md +++ b/versioned_docs/version-6.x/material-bottom-tab-navigator.md @@ -21,7 +21,7 @@ This wraps the [`BottomNavigation`](https://callstack.github.io/react-native-pap To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/material-bottom-tabs`](https://github.com/react-navigation/react-navigation/tree/main/packages/material-bottom-tabs): ```bash npm2yarn -npm install @react-navigation/material-bottom-tabs react-native-paper react-native-vector-icons +npm install @react-navigation/material-bottom-tabs@^6.x react-native-paper react-native-vector-icons ``` This API also requires that you install `react-native-vector-icons`! If you are using Expo managed workflow, it will work without any extra steps. Otherwise, [follow these installation instructions](https://github.com/oblador/react-native-vector-icons#installation). diff --git a/versioned_docs/version-6.x/material-top-tab-navigator.md b/versioned_docs/version-6.x/material-top-tab-navigator.md index 69543c3a06..1d1646e588 100755 --- a/versioned_docs/version-6.x/material-top-tab-navigator.md +++ b/versioned_docs/version-6.x/material-top-tab-navigator.md @@ -17,7 +17,7 @@ This wraps [`react-native-tab-view`](tab-view.md). If you want to use the tab vi To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/material-top-tabs`](https://github.com/react-navigation/react-navigation/tree/main/packages/material-top-tabs): ```bash npm2yarn -npm install @react-navigation/material-top-tabs react-native-tab-view +npm install @react-navigation/material-top-tabs@^6.x react-native-tab-view ``` Then, you need to install [`react-native-pager-view`](https://github.com/callstack/react-native-pager-view) which is required by the navigator. diff --git a/versioned_docs/version-6.x/native-stack-navigator.md b/versioned_docs/version-6.x/native-stack-navigator.md index 015eae1f08..486a7e62f0 100755 --- a/versioned_docs/version-6.x/native-stack-navigator.md +++ b/versioned_docs/version-6.x/native-stack-navigator.md @@ -15,7 +15,7 @@ One thing to keep in mind is that while `@react-navigation/native-stack` offers To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/native-stack`](https://github.com/react-navigation/react-navigation/tree/main/packages/native-stack): ```bash npm2yarn -npm install @react-navigation/native-stack +npm install @react-navigation/native-stack@^6.x ``` ## API Definition diff --git a/versioned_docs/version-6.x/stack-navigator.md b/versioned_docs/version-6.x/stack-navigator.md index b659f4ce1f..8752db1f6e 100755 --- a/versioned_docs/version-6.x/stack-navigator.md +++ b/versioned_docs/version-6.x/stack-navigator.md @@ -19,7 +19,7 @@ One thing to keep in mind is that while `@react-navigation/stack` is extremely c To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/stack`](https://github.com/react-navigation/react-navigation/tree/main/packages/stack): ```bash npm2yarn -npm install @react-navigation/stack +npm install @react-navigation/stack@^6.x ``` Then, you need to install and configure the libraries that are required by the stack navigator: diff --git a/versioned_docs/version-6.x/tab-based-navigation.md b/versioned_docs/version-6.x/tab-based-navigation.md index 173d60dc0f..16879d033e 100755 --- a/versioned_docs/version-6.x/tab-based-navigation.md +++ b/versioned_docs/version-6.x/tab-based-navigation.md @@ -11,7 +11,7 @@ This guide covers [`createBottomTabNavigator`](bottom-tab-navigator.md). You may Before continuing, first install [`@react-navigation/bottom-tabs`](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs): ```bash npm2yarn -npm install @react-navigation/bottom-tabs +npm install @react-navigation/bottom-tabs@^6.x ``` ## Minimal example of tab-based navigation diff --git a/versioned_docs/version-6.x/upgrading-from-5.x.md b/versioned_docs/version-6.x/upgrading-from-5.x.md index d8191103ce..e49d644c84 100755 --- a/versioned_docs/version-6.x/upgrading-from-5.x.md +++ b/versioned_docs/version-6.x/upgrading-from-5.x.md @@ -136,7 +136,7 @@ These following changes are in the core library. You'll need to address this cha To install the 6.x version of `@react-navigation/native`, run: ```bash npm2yarn -npm install @react-navigation/native +npm install @react-navigation/native@^6.x ``` ### Params are now overwritten on navigation instead of merging @@ -335,7 +335,7 @@ The following changes are in the `@react-navigation/stack` package. To install the 6.x version of `@react-navigation/stack`, run: ```bash npm2yarn -npm install @react-navigation/stack +npm install @react-navigation/stack@^6.x ``` ### `keyboardHandlingEnabled` is moved to options @@ -451,7 +451,7 @@ The `@react-navigation/native-stack` package is back. We made few changes to the To install the 6.x version of `@react-navigation/native-stack`, run: ```bash npm2yarn -npm install @react-navigation/native-stack +npm install @react-navigation/native-stack@^6.x ``` ### Breaking changes from `react-native-screens/native-stack` @@ -491,7 +491,7 @@ The following changes are in the `@react-navigation/bottom-tabs` package. To install the 6.x version of `@react-navigation/bottom-tabs`, run: ```bash npm2yarn -npm install @react-navigation/bottom-tabs +npm install @react-navigation/bottom-tabs@^6.x ``` ### A header is shown by default in tab screens @@ -548,7 +548,7 @@ The following changes are in the `@react-navigation/material-top-tabs` package. To install the 6.x version of `@react-navigation/material-top-tabs`, run: ```bash npm2yarn -npm install @react-navigation/material-top-tabs react-native-tab-view +npm install @react-navigation/material-top-tabs@^6.x react-native-tab-view ``` To upgrade `react-native-pager-view` to the latest supported version, do the following: @@ -611,7 +611,7 @@ The following changes are in the `@react-navigation/material-bottom-tabs` packag To install the 6.x version of `@react-navigation/material-bottom-tabs`, run: ```bash npm2yarn -npm install @react-navigation/material-bottom-tabs +npm install @react-navigation/material-bottom-tabs@^6.x ``` ### Material Bottom Tabs now uses `react-native-safe-area-context` to apply safe area insets @@ -625,7 +625,7 @@ The following changes are in the `@react-navigation/drawer` package. To install the 6.x version of `@react-navigation/drawer`, run: ```bash npm2yarn -npm install @react-navigation/drawer +npm install @react-navigation/drawer@^6.x ``` ### Drawer now uses Reanimated 2 if available @@ -709,7 +709,7 @@ Similar to bottom tabs, the `lazy` prop is now moved to `options` for drawer. We have a new package which contains various UI elements related to navigation, such as a `Header` component. This means that we can now use these components in all navigators. You can also install the library to import components such as `Header` to use in any navigator: ```bash npm2yarn -npm install @react-navigation/elements +npm install @react-navigation/elements@^6.x ``` Now you can import items from there: diff --git a/versioned_docs/version-7.x/bottom-tab-navigator.md b/versioned_docs/version-7.x/bottom-tab-navigator.md index e063c67310..f46652fac8 100755 --- a/versioned_docs/version-7.x/bottom-tab-navigator.md +++ b/versioned_docs/version-7.x/bottom-tab-navigator.md @@ -15,7 +15,7 @@ A simple tab bar on the bottom of the screen that lets you switch between differ To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/bottom-tabs`](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs): ```bash npm2yarn -npm install @react-navigation/bottom-tabs@next +npm install @react-navigation/bottom-tabs ``` ## Usage diff --git a/versioned_docs/version-7.x/devtools.md b/versioned_docs/version-7.x/devtools.md index 21c2917a73..692ae42369 100644 --- a/versioned_docs/version-7.x/devtools.md +++ b/versioned_docs/version-7.x/devtools.md @@ -12,7 +12,7 @@ Developer tools to make debugging easier when using React Navigation. To use the developer tools, install [`@react-navigation/devtools`](https://github.com/react-navigation/react-navigation/tree/master/packages/devtools): ```bash npm2yarn -npm install @react-navigation/devtools@next +npm install @react-navigation/devtools ``` Hooks from this package only work during development and are disabled in production. You don't need to do anything special to remove them from the production build. diff --git a/versioned_docs/version-7.x/drawer-navigator.md b/versioned_docs/version-7.x/drawer-navigator.md index e2c825dbe1..93312af224 100644 --- a/versioned_docs/version-7.x/drawer-navigator.md +++ b/versioned_docs/version-7.x/drawer-navigator.md @@ -17,7 +17,7 @@ This wraps [`react-native-drawer-layout`](drawer-layout.md). If you want to use To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/drawer`](https://github.com/react-navigation/react-navigation/tree/main/packages/drawer): ```bash npm2yarn -npm install @react-navigation/drawer@next +npm install @react-navigation/drawer ``` Then, you need to install and configure the libraries that are required by the drawer navigator: diff --git a/versioned_docs/version-7.x/elements.md b/versioned_docs/version-7.x/elements.md index 746bc3551c..24cad89e3c 100644 --- a/versioned_docs/version-7.x/elements.md +++ b/versioned_docs/version-7.x/elements.md @@ -14,7 +14,7 @@ A component library containing the UI elements and helpers used in React Navigat To use this package, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/elements`](https://github.com/react-navigation/react-navigation/tree/main/packages/elements): ```bash npm2yarn -npm install @react-navigation/elements@next +npm install @react-navigation/elements ``` ## Components diff --git a/versioned_docs/version-7.x/getting-started.md b/versioned_docs/version-7.x/getting-started.md index db50e49dfb..8f751321c8 100755 --- a/versioned_docs/version-7.x/getting-started.md +++ b/versioned_docs/version-7.x/getting-started.md @@ -31,7 +31,7 @@ Here are some resources to help you out: Install the required packages in your React Native project: ```bash npm2yarn -npm install @react-navigation/native@next +npm install @react-navigation/native ``` React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app. Don't worry too much about this for now, it'll become clear soon enough! To frontload the installation work, let's also install and configure dependencies used by most navigators, then we can move forward with starting to write some code. diff --git a/versioned_docs/version-7.x/hello-react-navigation.md b/versioned_docs/version-7.x/hello-react-navigation.md index 8083664af5..5f4bfeaf0d 100755 --- a/versioned_docs/version-7.x/hello-react-navigation.md +++ b/versioned_docs/version-7.x/hello-react-navigation.md @@ -18,7 +18,7 @@ Let's start by demonstrating the most common navigator, `createNativeStackNaviga The libraries we've installed so far are the building blocks and shared foundations for navigators, and each navigator in React Navigation lives in its own library. To use the native stack navigator, we need to install [`@react-navigation/native-stack`](https://github.com/react-navigation/react-navigation/tree/main/packages/native-stack) : ```bash npm2yarn -npm install @react-navigation/native-stack@next +npm install @react-navigation/native-stack ``` :::info @@ -32,7 +32,7 @@ npm install @react-navigation/native-stack@next The [`@react-navigation/elements`](elements.md) library provides a set of components that are designed to work well with React Navigation. We'll use a few of these components in this guide. So let's install it first: ```bash npm2yarn -npm install @react-navigation/elements@next +npm install @react-navigation/elements ``` ## Creating a native stack navigator diff --git a/versioned_docs/version-7.x/material-top-tab-navigator.md b/versioned_docs/version-7.x/material-top-tab-navigator.md index db76639c72..517eee93e5 100755 --- a/versioned_docs/version-7.x/material-top-tab-navigator.md +++ b/versioned_docs/version-7.x/material-top-tab-navigator.md @@ -17,7 +17,7 @@ This wraps [`react-native-tab-view`](tab-view.md). If you want to use the tab vi To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/material-top-tabs`](https://github.com/react-navigation/react-navigation/tree/main/packages/material-top-tabs): ```bash npm2yarn -npm install @react-navigation/material-top-tabs@next +npm install @react-navigation/material-top-tabs ``` Then, you need to install [`react-native-pager-view`](https://github.com/callstack/react-native-pager-view) which is required by the navigator. diff --git a/versioned_docs/version-7.x/native-stack-navigator.md b/versioned_docs/version-7.x/native-stack-navigator.md index feed47d01b..74371a919c 100755 --- a/versioned_docs/version-7.x/native-stack-navigator.md +++ b/versioned_docs/version-7.x/native-stack-navigator.md @@ -23,7 +23,7 @@ One thing to keep in mind is that while `@react-navigation/native-stack` offers To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/native-stack`](https://github.com/react-navigation/react-navigation/tree/main/packages/native-stack): ```bash npm2yarn -npm install @react-navigation/native-stack@next +npm install @react-navigation/native-stack ``` ## Usage diff --git a/versioned_docs/version-7.x/stack-navigator.md b/versioned_docs/version-7.x/stack-navigator.md index 63d1f367c7..f6c88a2694 100755 --- a/versioned_docs/version-7.x/stack-navigator.md +++ b/versioned_docs/version-7.x/stack-navigator.md @@ -23,7 +23,7 @@ One thing to keep in mind is that while `@react-navigation/stack` is extremely c To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/stack`](https://github.com/react-navigation/react-navigation/tree/main/packages/stack): ```bash npm2yarn -npm install @react-navigation/stack@next +npm install @react-navigation/stack ``` Then, you need to install and configure the libraries that are required by the stack navigator: diff --git a/yarn.lock b/yarn.lock index c6bdef49a2..7d62d1b006 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4136,9 +4136,9 @@ __metadata: linkType: hard "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001538, caniuse-lite@npm:^1.0.30001541": - version: 1.0.30001564 - resolution: "caniuse-lite@npm:1.0.30001564" - checksum: 27722fea974fc8d2cd334cdef23e1299465c870c97902cc5c293673e6c3ae5241f36f31ca180c903160f0b1c3b51e2b2e8962c537b0a6ac6518a1113b5b5665e + version: 1.0.30001667 + resolution: "caniuse-lite@npm:1.0.30001667" + checksum: 6bc8555a47603e1e76eaef9b185d6fdeeca7d9c20a283f7c32c971eb1b52ea3a80e6ec086920f088f06abe619240f1023a2d3a08b5b1f2f11df1475695e9f71c languageName: node linkType: hard