mark 7.x as stable (#1380)

Author: satya164

Diff for: 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 for: 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 for: 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,27 +49,27 @@ 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.
 
 ### Simplified APIs for existing functionality
 
 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 for: 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).