Make 6.x the default

Author: satya164

blog/2020-02-06-react-navigation-5.0.md

@@ -52,7 +52,6 @@ Hooks are great for stateful logic and code organization. Now we have several ho
 - [`useNavigationState`](/docs/use-navigation-state)
 - [`useFocusEffect`](/docs/use-focus-effect)
 - [`useIsFocused`](/docs/use-is-focused)
-- [`useLinking`](/docs/use-linking)
 - [`useScrollToTop`](/docs/use-scroll-to-top)
 
 ### Update options from component
@@ -158,7 +157,7 @@ This is a big release and, while the basic concepts such as nesting are the same
 
 We recommend starting your new projects with the new version so you can take advantage of the new APIs and the new features.
 
-We have written an [upgrade guide](/docs/upgrading-from-4.x) which will give you an overview of what's changed and how to adapt the old API and concepts to the new API.
+We have written an [upgrade guide](/docs/5.x/upgrading-from-4.x) which will give you an overview of what's changed and how to adapt the old API and concepts to the new API.
 
 ## A note for alpha users
 

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 Na
 
 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/6.x/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/upgrading-from-5.x).
 
 ## Highlights
 
 - Params are now overwritten on navigation instead of merging (with option to merge them)
-- 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
+- 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
 
 ## Try it out
 
@@ -35,7 +35,7 @@ npm install @react-navigation/native@next @react-navigation/stack@next
 
 ## What's next?
 
-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.
+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.
 
 ## Sponsor us
 

docusaurus.config.js

@@ -152,12 +152,7 @@ module.exports = {
             'https://github.com/react-navigation/react-navigation.github.io/edit/main/',
           remarkPlugins: [require('./src/plugins/remark-npm2yarn')],
           includeCurrentVersion: false,
-          lastVersion: '5.x',
-          versions: {
-            '6.x': {
-              label: '6.x (next)',
-            },
-          },
+          lastVersion: '6.x'
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),

src/pages/home/Splash/index.js

@@ -43,7 +43,7 @@ export default function Splash() {
       <div className={styles.migrationText}>
         💡 Coming from v4? Check out our{' '}
         <Link
-          to={useBaseUrl('/docs/upgrading-from-4.x')}
+          to={useBaseUrl('/docs/5.x/upgrading-from-4.x')}
           className={styles.linkText}
         >
           v4 to v5 migration guide

src/pages/versions.js

@@ -11,9 +11,8 @@ import versions from '../../versions.json';
 function Version() {
   const context = useDocusaurusContext();
   const {siteConfig = {}} = context;
-  const nextVersion = versions[0];
-  const latestVersion = versions[1];
-  const pastVersions = versions.slice(2, versions.length);
+  const latestVersion = versions[0];
+  const pastVersions = versions.slice(1, versions.length);
   const repoUrl = `https://github.com/${siteConfig.organizationName}/${siteConfig.projectName}`;
 
   return (
@@ -38,22 +37,6 @@ function Version() {
             </tbody>
           </table>
         </div>
-        <div className="margin-bottom--lg">
-          <h3 id="latest">Next version (Unreleased)</h3>
-          <p>Here you can find the documentation for work-in-process unreleased version.</p>
-          <table>
-            <tbody>
-              <tr>
-                <th>{nextVersion}</th>
-                <td>
-                  <Link to={useBaseUrl(`/docs/${nextVersion}/getting-started`)}>
-                    Documentation
-                  </Link>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
         {pastVersions.length > 0 && (
           <div className="margin-bottom--lg">
             <h3 id="archive">Past Versions</h3>

versioned_docs/version-5.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@^5.x
 ```
 
 ## API Definition

versioned_docs/version-5.x/compatibility.md

@@ -11,7 +11,7 @@ React Navigation 5 has a completely new API, so our old code using React Navigat
 To use the compatibility layer, we need to install [`@react-navigation/compat`](https://github.com/react-navigation/react-navigation/tree/main/packages/compat):
 
 ```bash npm2yarn
-npm install @react-navigation/native @react-navigation/compat @react-navigation/stack
+npm install @react-navigation/native@^5.x @react-navigation/compat@^5.x @react-navigation/stack@^5.x
 ```
 
 Then we can make minimal changes in our code to use it:

versioned_docs/version-5.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@^5.x
 ```
 
 ## API Definition

versioned_docs/version-5.x/drawer-based-navigation.md

@@ -15,7 +15,7 @@ Common pattern in navigation is to use drawer from left (sometimes right) side f
 Before continuing, first 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@^5.x
 ```
 
 ## Minimal example of drawer-based navigation

versioned_docs/version-5.x/drawer-navigator.md

@@ -15,7 +15,7 @@ Component that renders a navigation drawer which can be opened and closed via ge
 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@^5.x
 ```
 
 ## API Definition

versioned_docs/version-5.x/getting-started.md

@@ -22,7 +22,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@^5.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.

versioned_docs/version-5.x/hello-react-navigation.md

@@ -15,7 +15,7 @@ Lets start by demonstrating the most common navigator, `createStackNavigator`.
 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 stack navigator, we need to 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@^5.x
 ```
 
 > 💡 `@react-navigation/stack` depends on `@react-native-community/masked-view` 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.

versioned_docs/version-5.x/material-bottom-tab-navigator.md

@@ -13,7 +13,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@^5.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).

versioned_docs/version-5.x/material-top-tab-navigator.md

@@ -17,7 +17,7 @@ This wraps [`react-native-tab-view`](https://github.com/react-native-community/r
 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@^2.16.0
+npm install @react-navigation/material-top-tabs@^5.x react-native-tab-view@^2.x
 ```
 
 ## API Definition

versioned_docs/version-5.x/stack-navigator.md

@@ -17,7 +17,7 @@ By default the stack navigator is configured to have the familiar iOS and Androi
 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@^5.x
 ```
 
 ## API Definition

versioned_docs/version-5.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@^5.x
 ```
 
 ## Minimal example of tab-based navigation

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@next
+npm install @react-navigation/bottom-tabs
 ```
 
 ## API Definition

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@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.

versioned_docs/version-6.x/drawer-based-navigation.md

@@ -15,7 +15,7 @@ Common pattern in navigation is to use drawer from left (sometimes right) side f
 Before continuing, first 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
 ```
 
 ## Minimal example of drawer-based navigation

versioned_docs/version-6.x/drawer-navigator.md

@@ -15,7 +15,7 @@ Component that renders a navigation drawer which can be opened and closed via ge
 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
 ```
 
 ## API Definition

versioned_docs/version-6.x/elements.md

@@ -9,7 +9,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/bottom-tabs`](https://github.com/react-navigation/react-navigation/tree/main/packages/elements):
 
 ```sh npm2yarn
-npm install @react-navigation/elements@next
+npm install @react-navigation/elements
 ```
 
 ## Components

versioned_docs/version-6.x/getting-started.md

@@ -26,7 +26,7 @@ React Navigation 6 requires at least `react-native@0.63.0`. If you're using Expo
 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.

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@next
+npm install @react-navigation/native-stack
 ```
 
 > 💡 `@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.

versioned_docs/version-6.x/material-bottom-tab-navigator.md

@@ -13,7 +13,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@next react-native-paper react-native-vector-icons
+npm install @react-navigation/material-bottom-tabs 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).

versioned_docs/version-6.x/material-top-tab-navigator.md

@@ -17,7 +17,7 @@ This wraps [`react-native-tab-view`](https://github.com/react-native-community/r
 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 react-native-tab-view react-native-pager-view
+npm install @react-navigation/material-top-tabs react-native-tab-view react-native-pager-view
 ```
 
 ## API Definition

versioned_docs/version-6.x/native-stack-navigator.md

@@ -15,7 +15,7 @@ This navigator does not currently support web. Use `createStackNavigator` for th
 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
 ```
 
 ## API Definition

versioned_docs/version-6.x/stack-navigator.md

@@ -17,7 +17,7 @@ By default the stack navigator is configured to have the familiar iOS and Androi
 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
 ```
 
 ## API Definition

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@next
+npm install @react-navigation/bottom-tabs
 ```
 
 ## Minimal example of tab-based navigation