Upgrade docusaurus

Author: satya164

.prettierrc.json

@@ -1,4 +1,17 @@
 {
+  "overrides": [
+    {
+      "files": [
+        "src/pages/**/*.md",
+        "blog/*.md",
+        "docs/**/*.md",
+        "versioned_docs/**/*.md"
+      ],
+      "options": {
+        "parser": "mdx"
+      }
+    }
+  ],
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "es5",

blog/2018-02-06-react-navigation-1.0.md

@@ -6,7 +6,7 @@ tags: [release, announcement]
 
 As of today, React Navigation version 1.0 has been released! To see a list of recent improvements leading up to the release, refer to the “[Renewed Path to React Navigation V1.0](https://github.com/react-navigation/react-navigation/issues/2585)” issue. Thank you to everybody who has filed high-quality bug reports, submitted pull requests, and helped out fellow developers while we were in beta!
 
-<!--truncate-->
+{/* truncate */}
 
 This release isn’t meant to be interpreted as a signal that React Navigation is “finished" &mdash; work is already underway on a number of significant changes to the API that aim to make React Navigation easier to use and more powerful. These changes will be run through our [new RFC process](https://github.com/react-navigation/rfcs). For example, the [Navigator View API RFC](https://github.com/react-navigation/rfcs/blob/master/text/0002-navigator-view-api.md) outlines a plan to decouple views from the router in order to make it easier for other navigation APIs, such as [react-native-router-flux](https://github.com/aksonov/react-native-router-flux) and [react-router-native](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-native), to build on top of the same navigation views. We’re also very excited about a plan (no RFC is open yet, but keep an eye out for it) to use [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) to run navigation gestures (sliding a drawer open, or swiping back on a stack, for example) on the UI thread using the Animated native driver.
 

blog/2018-04-06-react-navigation-2.0-rc.md

@@ -6,7 +6,7 @@ tags: [release, announcement]
 
 Exactly two months after the release of React Navigation 1.0, we are close to another major version release. We’d like to invite developers that use the library to give the release candidate a try in your app and let us know if you encounter any issues.
 
-<!--truncate-->
+{/* truncate */}
 
 ```bash
 yarn add react-navigation@^2.0.0-rc.1

blog/2018-05-07-react-navigation-2.0.md

@@ -6,7 +6,7 @@ tags: [release, announcement]
 
 The documentation is now live at [reactnavigation.org](https://reactnavigation.org), and v1 lives [here](/docs/1.x/getting-started).
 
-<!--truncate-->
+{/* truncate */}
 
 ## Significant breaking changes
 

blog/2018-11-01-react-navigation-3.0-rc.md

@@ -8,7 +8,7 @@ We are excited to announce the release candidate of version 3.0 today!
 
 This is the first release where React Navigation depends on a native module outside of React Native core: it now depends on react-native-gesture-handler. This library provides an excellent set of primitives for leveraging the operating systems’ native gesture APIs and has enabled us to fix a variety of issues with stack and drawer navigators. React Navigation also depends on react-native-screens, but you don’t need to install the native module if you prefer not to use it (we have a blog post coming soon that will explain what react-native-screens is and why you may want to use it, or you can watch [this talk](https://www.youtube.com/watch?v=Z0Jl1KCWiag) by the author of the library).
 
-<!--truncate-->
+{/* truncate */}
 
 We didn’t get around to every feature that we wanted to land for this release, but we also didn’t want to hold it up further because we expect that you will want to start using it right away - the release includes performance improvements, bugfixes, ergonomics improvements, some handy new features, and a re-organizing of the internals to improve support for web as a target of React Navigation.
 

blog/2018-11-17-react-navigation-3.0.md

@@ -8,7 +8,7 @@ The documentation is now live at [reactnavigation.org](https://reactnavigation.o
 
 This is the first release where React Navigation depends on a native module outside of React Native core: it now depends on react-native-gesture-handler. This library provides an excellent set of primitives for leveraging the operating systems’ native gesture APIs and has enabled us to fix a variety of issues with stack and drawer navigators. React Navigation also depends on react-native-screens, but you don’t need to install the native module if you prefer not to use it (we have a blog post coming soon that will explain what react-native-screens is and why you may want to use it, or you can watch [this talk](https://www.youtube.com/watch?v=Z0Jl1KCWiag) by the author of the library).
 
-<!--truncate-->
+{/* truncate */}
 
 We didn’t get around to every feature that we wanted to land for this release, but we also didn’t want to hold it up further because we expect that you will want to start using it right away - the release includes performance improvements, bugfixes, ergonomics improvements, some handy new features, and a re-organizing of the internals to improve support for web as a target of React Navigation.
 

blog/2019-09-16-react-navigation-4.0.md

@@ -8,7 +8,7 @@ The documentation is now live at [reactnavigation.org](https://reactnavigation.o
 
 In this release, we have removed the navigators from the react-navigation package. The navigators have lived in separate packages for quite a while and you could already use those packages manually, but we still bundled them in the react-navigation package. This made it difficult for us to release significant updates to navigators, because we had to then do a major version release of react-navigation too. By separating the navigator packages there is more freedom to update and improve navigators without any impact on folks that don't use them.
 
-<!--truncate-->
+{/* truncate */}
 
 For example, you will find when you install the latest versions of the drawer and tab navigators that the animations are more performant because they use react-native-reanimated to smoothly animate gestures. These have been available in react-navigation-drawer and react-navigation-tabs for several months now but we delayed updating them in react-navigation itself because we did not want to force every user to update.
 

blog/2019-10-17-react-navigation-native.md

@@ -6,7 +6,7 @@ tags: [announcement]
 
 React Navigation steps firmly into the next level and we’re very excited to announce to you something great happening in React Navigation codebase.
 
-<!--truncate-->
+{/* truncate */}
 
 ## Make it custom
 
@@ -32,8 +32,16 @@ After years of growing development, we need to admit that we’re not always abl
 
 Thanks to the great work of Krzysztof Magiera for [React Native Screens](https://github.com/kmagiera/react-native-screens) library now we can use truly native components instead of JS replicas.
 
-<img src="/assets/blog/5.x/android-native-stack.gif" height="530" alt="Native Stack on Android" />
-<img src="/assets/blog/5.x/ios-native-stack.gif" height="530" alt="Native Stack on iOS" />
+<img
+  src="/assets/blog/5.x/android-native-stack.gif"
+  height="530"
+  alt="Native Stack on Android"
+/>
+<img
+  src="/assets/blog/5.x/ios-native-stack.gif"
+  height="530"
+  alt="Native Stack on iOS"
+/>
 
 We believe you will find it useful in your projects and strongly encourage you to get acquainted with our [documentation](https://github.com/kmagiera/react-native-screens/native-stack). Things that I’m the most excited about are iOS header animations!
 

blog/2019-11-04-using-react-navigation-5-with-ui-kitten.md

@@ -7,7 +7,7 @@ tags: [tutorial, ui-kitten]
 This is a guest post by the [UI Kitten](http://akveo.github.io/react-native-ui-kitten) team. If you like this guide, checkout UI Kitten for more!
 In this blog post, we'll show a step-by-step guide on using React Navigation 5 with UI Kitten.
 
-<!--truncate-->
+{/* truncate */}
 
 ## Introduction
 
@@ -17,7 +17,11 @@ The new React Navigation comes with several significant improvements such as [im
 
 The UI Kitten team started actively using React Navigation alpha and we're proud to announce the full compatibility to the new React Navigation API. In this guide, we won't consider how to implement all of the boilerplate stuff like auth screens. Instead, we will learn how to navigate between screens using Drawer, Bottom Tabs, Top Tabs, and Stack navigators to build a TODO-App. Furthermore, we'll demonstrate using React Navigation with UI Kitten components.
 
-<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/overview.gif" height="480" alt="React Navigation with UI Kitten Overview" />
+<img
+  src="/assets/blog/using-react-navigation-5-with-ui-kitten/overview.gif"
+  height="480"
+  alt="React Navigation with UI Kitten Overview"
+/>
 
 ## Overview
 
@@ -90,7 +94,11 @@ export const AppNavigator = (): React.ReactElement => (
 );
 ```
 
-<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/stack-navigator.gif" height="420" alt="UI Kitten with Stack Navigator" />
+<img
+  src="/assets/blog/using-react-navigation-5-with-ui-kitten/stack-navigator.gif"
+  height="420"
+  alt="UI Kitten with Stack Navigator"
+/>
 
 ### Step 2. Top tabs
 
@@ -182,7 +190,11 @@ export const AppNavigator = (props): React.ReactElement => (
 );
 ```
 
-<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/material-top-tab-navigator.gif" height="480" alt="UI Kitten with Material Top Tabs" />
+<img
+  src="/assets/blog/using-react-navigation-5-with-ui-kitten/material-top-tab-navigator.gif"
+  height="480"
+  alt="UI Kitten with Material Top Tabs"
+/>
 
 ### Step 3. Bottom tabs
 
@@ -296,7 +308,11 @@ export const AppNavigator = (props): React.ReactElement => (
 );
 ```
 
-<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/bottom-tab-navigator.gif" height="480" alt="UI Kitten with Bottom Tabs" />
+<img
+  src="/assets/blog/using-react-navigation-5-with-ui-kitten/bottom-tab-navigator.gif"
+  height="480"
+  alt="UI Kitten with Bottom Tabs"
+/>
 
 ### Step 4. Drawer menu
 
@@ -432,7 +448,11 @@ export const TodoTabBar = (props): SafeAreaLayoutElement => {
 };
 ```
 
-<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/drawer-navigator.gif" height="420" alt="UI Kitten with Drawer" />
+<img
+  src="/assets/blog/using-react-navigation-5-with-ui-kitten/drawer-navigator.gif"
+  height="420"
+  alt="UI Kitten with Drawer"
+/>
 
 ### TypeScript
 
@@ -469,7 +489,10 @@ export interface ResetPasswordScreenProps {
 
 Now you can modify props of Auth screens props by adding types to make your autocomplete and IntelliSense work. For more complex examples, consider reading [type-checking](/docs/typescript) doc or reviewing [complete demo application sources](https://github.com/artyorsh/react-navigation-ex-demo/tree/complete-exmaples).
 
-<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/typescript.gif" alt="UI Kitten & TypeScript" />
+<img
+  src="/assets/blog/using-react-navigation-5-with-ui-kitten/typescript.gif"
+  alt="UI Kitten & TypeScript"
+/>
 
 ### Useful links
 

blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

@@ -8,7 +8,7 @@ This is a guest post by the [React Native Paper](https://reactnativepaper.com/)
 
 In this blog post, we'll show you how to build a Twitter clone app using React Navigation v5 and Paper.
 
-<!--truncate-->
+{/* truncate */}
 
 ## Introduction
 
@@ -24,7 +24,11 @@ In this guide, we would like to show you how to integrate React Navigation with
 
 In the following gif, you can see what is the final version of the app gonna looks like:
 
-<img src="/assets/blog/using-react-navigation-5-with-paper/final-app.gif" height="480" alt="Final Result" />
+<img
+  src="/assets/blog/using-react-navigation-5-with-paper/final-app.gif"
+  height="480"
+  alt="Final Result"
+/>
 
 ## Overview of the App
 
@@ -139,7 +143,11 @@ export const RootNavigator = () => {
 
 That's what we see on a screen:
 
-<img src="/assets/blog/using-react-navigation-5-with-paper/simple-drawer.gif" height="480" alt="Simple Drawer" />
+<img
+  src="/assets/blog/using-react-navigation-5-with-paper/simple-drawer.gif"
+  height="480"
+  alt="Simple Drawer"
+/>
 
 We can open a drawer with a swipe gesture, it looks very smooth. However, the UI doesn't look very impressive so let's add more content to the drawer to make it look just like in the final version.
 
@@ -302,7 +310,11 @@ const styles = StyleSheet.create({
 
 The final version of a drawer looks like this:
 
-<img src="/assets/blog/using-react-navigation-5-with-paper/final-drawer.gif" height="480" alt="Drawer with components from React Native Paper"  />
+<img
+  src="/assets/blog/using-react-navigation-5-with-paper/final-drawer.gif"
+  height="480"
+  alt="Drawer with components from React Native Paper"
+/>
 
 ## Stack Navigator + Paper's Appbar
 
@@ -430,8 +442,10 @@ The Function that we pass to `header` prop has access to 3 properties:
 
 Thanks to the **scene** property we can access the title of topmost screen on the stack and display it in the header.
 **Previous** property tells us if there are any other screens lower on the Stack.
+
 <br />
-Finally, **navigation** property allows navigating to different screens e.g. opening a Drawer.
+Finally, **navigation** property allows navigating to different screens e.g.
+opening a Drawer.
 
 The thing that we haven't covered yet and it is very important is how to actually navigate between Stack Navigator screens.
 In case of Tab or Drawer Navigator, we get it out of the box. We can swipe to open/close the Drawer or press a tab to change the scene. In Stack, we have to implement it by ourselves.
@@ -456,7 +470,11 @@ We have covered only the basics of navigating between screens. If you want to le
 
 Now, let's see what does the app looks like with Stack Navigator and Paper's Appbar.
 
-<img src="/assets/blog/using-react-navigation-5-with-paper/stack.gif" height="480" alt="Stack Navigator with React Native Paper's Appbar" />
+<img
+  src="/assets/blog/using-react-navigation-5-with-paper/stack.gif"
+  height="480"
+  alt="Stack Navigator with React Native Paper's Appbar"
+/>
 
 We still miss the last piece of our navigation flow - **Tab Navigator**. Let's move to the next section where we will take care of it.
 
@@ -526,7 +544,11 @@ export const BottomTabs = () => {
 When we check the screen of the phone now, we will see a nice looking, material bottom navigation. What's more, Stack Navigator integrates nicely with Tab.Navigator and we can still navigate to the tweet `Details` screen.
 
 <br />
-<img src="/assets/blog/using-react-navigation-5-with-paper/bottom-navigation.gif" height="480" alt="Stack Navigator with Material Bottom Tabs" />
+<img
+  src="/assets/blog/using-react-navigation-5-with-paper/bottom-navigation.gif"
+  height="480"
+  alt="Stack Navigator with Material Bottom Tabs"
+/>
 
 ## FAB and Portal
 
@@ -745,7 +767,11 @@ export const BottomTabs = (props) => {
 };
 ```
 
-<img src="/assets/blog/using-react-navigation-5-with-paper/fab.gif" height="480" alt="React Native Paper's FAB with Bottom Tabs" />
+<img
+  src="/assets/blog/using-react-navigation-5-with-paper/fab.gif"
+  height="480"
+  alt="React Native Paper's FAB with Bottom Tabs"
+/>
 
 As you can see on the gif, the FAB button works in the same way as in a Twitter app.
 What's more, it even animates icon change properly even though we haven't implemented it. That's the behavior we get from React Native Paper's FAB out of the box.
@@ -918,12 +944,19 @@ export function DrawerContent(props) {
 ```
 
 Firstly, we get a current theme using `useTheme` hook from Paper. This means we can check `dark` property on it and pass the correct value to `Switch`.
-<br />Secondly, we pass a `toggleTheme` function to `TouchableRipple` to toggle theme whenever user presses a Switch.
+
+<br />
+Secondly, we pass a `toggleTheme` function to `TouchableRipple` to toggle theme
+whenever user presses a Switch.
 
 You should be able to toggle a switch now and both `Provider` from Paper and `NativeNavigationContainer` from React Navigation will automatically apply correct colors to the components.
 
 <br />
-<img src="/assets/blog/using-react-navigation-5-with-paper/theming.gif" height="480" alt="Theming with React Navigation and React Native Paper" />
+<img
+  src="/assets/blog/using-react-navigation-5-with-paper/theming.gif"
+  height="480"
+  alt="Theming with React Navigation and React Native Paper"
+/>
 
 ## Summary