diff --git a/blog/2018-04-06-react-navigation-2.0-rc.md b/blog/2018-04-06-react-navigation-2.0-rc.md
index 5050bffcfca..6f0d65da248 100644
--- a/blog/2018-04-06-react-navigation-2.0-rc.md
+++ b/blog/2018-04-06-react-navigation-2.0-rc.md
@@ -11,7 +11,7 @@ Exactly two months after the release of React Navigation 1.0, we are close to an
 
 <!--truncate-->
 
-```sh
+```bash
 yarn add react-navigation@^2.0.0-rc.1
 ```
 
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 a91403b81c4..6ac0e8219bb 100644
--- a/blog/2021-03-12-react-navigation-6.0-next.md
+++ b/blog/2021-03-12-react-navigation-6.0-next.md
@@ -29,7 +29,7 @@ We'll share few highlights of the release in this blog post. If you're looking f
 
 If you'd like to try it out, add `@^6.x` to the package, you're installing. For example:
 
-```sh npm2yarn
+```bash npm2yarn
 npm install @react-navigation/native@^6.x @react-navigation/stack@^6.x
 ```
 
diff --git a/static/assets/libraries/tab-view.gif b/static/assets/libraries/tab-view.gif
new file mode 100644
index 00000000000..ac8e3574a0c
Binary files /dev/null and b/static/assets/libraries/tab-view.gif differ
diff --git a/versioned_docs/version-1.x/deep-linking.md b/versioned_docs/version-1.x/deep-linking.md
index 9c42d51bfa6..4e3b7e229aa 100644
--- a/versioned_docs/version-1.x/deep-linking.md
+++ b/versioned_docs/version-1.x/deep-linking.md
@@ -120,7 +120,7 @@ In Xcode, open the project at `SimpleApp/ios/SimpleApp.xcodeproj`. Select the pr
 
 Now you can press play in Xcode, or re-build on the command line:
 
-```sh
+```bash
 react-native run-ios
 ```
 
@@ -160,7 +160,7 @@ In `SimpleApp/android/app/src/main/AndroidManifest.xml`, do these followings adj
 
 Now, re-install the app:
 
-```sh
+```bash
 react-native run-android
 ```
 
diff --git a/versioned_docs/version-2.x/deep-linking.md b/versioned_docs/version-2.x/deep-linking.md
index 451eb587982..e0e0f6f3854 100644
--- a/versioned_docs/version-2.x/deep-linking.md
+++ b/versioned_docs/version-2.x/deep-linking.md
@@ -120,7 +120,7 @@ In Xcode, open the project at `SimpleApp/ios/SimpleApp.xcodeproj`. Select the pr
 
 Now you can press play in Xcode, or re-build on the command line:
 
-```sh
+```bash
 react-native run-ios
 ```
 
@@ -160,7 +160,7 @@ In `SimpleApp/android/app/src/main/AndroidManifest.xml`, do these followings adj
 
 Now, re-install the app:
 
-```sh
+```bash
 react-native run-android
 ```
 
diff --git a/versioned_docs/version-3.x/deep-linking.md b/versioned_docs/version-3.x/deep-linking.md
index d66e34b3b38..7adc9312c4d 100644
--- a/versioned_docs/version-3.x/deep-linking.md
+++ b/versioned_docs/version-3.x/deep-linking.md
@@ -155,7 +155,7 @@ In Xcode, open the project at `SimpleApp/ios/SimpleApp.xcodeproj`. Select the pr
 
 Now you can press play in Xcode, or re-build on the command line:
 
-```sh
+```bash
 react-native run-ios
 ```
 
@@ -195,7 +195,7 @@ In `SimpleApp/android/app/src/main/AndroidManifest.xml`, do these followings adj
 
 Now, re-install the app:
 
-```sh
+```bash
 react-native run-android
 ```
 
diff --git a/versioned_docs/version-3.x/getting-started.md b/versioned_docs/version-3.x/getting-started.md
index dee163efa76..b4150003183 100644
--- a/versioned_docs/version-3.x/getting-started.md
+++ b/versioned_docs/version-3.x/getting-started.md
@@ -44,7 +44,7 @@ Next, if you are not using the Expo managed workflow then you need to link these
 
   On iOS, to complete the linking, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then run:
 
-  ```sh
+  ```bash
   cd ios
   pod install
   cd ..
@@ -56,7 +56,7 @@ Next, if you are not using the Expo managed workflow then you need to link these
 
   If you're on an older React Native version, you need to manually link the dependencies. To do that, run:
 
-  ```sh
+  ```bash
   react-native link react-native-reanimated
   react-native link react-native-gesture-handler
   ```
diff --git a/versioned_docs/version-4.x/deep-linking.md b/versioned_docs/version-4.x/deep-linking.md
index db4a13a023f..60536603b43 100644
--- a/versioned_docs/version-4.x/deep-linking.md
+++ b/versioned_docs/version-4.x/deep-linking.md
@@ -101,7 +101,7 @@ The reason that is necessary to use `Linking.createURL` is that the scheme will
 
 To test the URI on the simulator in the Expo client app, run the following:
 
-```sh
+```bash
 xcrun simctl openurl booted [ put your URI prefix in here ]
 
 // for example
@@ -113,7 +113,7 @@ xcrun simctl openurl booted exp://127.0.0.1:19000/--/chat/Eric
 
 To test the intent handling in the Expo client app on Android, run the following:
 
-```sh
+```bash
 adb shell am start -W -a android.intent.action.VIEW -d "[ put your URI prefix in here ]" host.exp.exponent
 
 # for example
@@ -145,7 +145,7 @@ Let's configure the native iOS app to open based on the `mychat://` URI scheme.
 
 In `SimpleApp/ios/SimpleApp/AppDelegate.m`:
 
-```sh
+```bash
 // Add the header at the top of the file:
 #import <React/RCTLinkingManager.h>
 
@@ -163,13 +163,13 @@ In Xcode, open the project at `SimpleApp/ios/SimpleApp.xcodeproj`. Select the pr
 
 Now you can press play in Xcode, or re-build on the command line:
 
-```sh
+```bash
 react-native run-ios
 ```
 
 To test the URI on the simulator, run the following:
 
-```sh
+```bash
 xcrun simctl openurl booted mychat://chat/Eric
 ```
 
@@ -184,7 +184,7 @@ In `SimpleApp/android/app/src/main/AndroidManifest.xml`, do these followings adj
 1. Set `launchMode` of `MainActivity` to `singleTask` in order to receive intent on existing `MainActivity`. It is useful if you want to perform navigation using deep link you have been registered - [details](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters)
 2. Add the new `intent-filter` inside the `MainActivity` entry with a `VIEW` type action:
 
-```sh
+```bash
 <activity
     android:name=".MainActivity"
     android:launchMode="singleTask">
@@ -203,13 +203,13 @@ In `SimpleApp/android/app/src/main/AndroidManifest.xml`, do these followings adj
 
 Now, re-install the app:
 
-```sh
+```bash
 react-native run-android
 ```
 
 To test the intent handling in Android, run the following:
 
-```sh
+```bash
 adb shell am start -W -a android.intent.action.VIEW -d "mychat://chat/Eric" com.simpleapp
 ```
 
diff --git a/versioned_docs/version-4.x/getting-started.md b/versioned_docs/version-4.x/getting-started.md
index 93f940bc556..7e5f8f01c79 100644
--- a/versioned_docs/version-4.x/getting-started.md
+++ b/versioned_docs/version-4.x/getting-started.md
@@ -40,7 +40,7 @@ The libraries we will install now are [`react-native-gesture-handler`](https://g
 
 In your project directory, run:
 
-```sh
+```bash
 npx expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
 ```
 
@@ -66,7 +66,7 @@ Next, we need to link these libraries. The steps depends on your React Native ve
 
   If you're on a Mac and developing for iOS, you need to install pods to complete the linking. Make sure you have [Cocoapods](https://cocoapods.org/) installed. Then run:
 
-  ```sh
+  ```bash
   cd ios; pod install; cd ..
   ```
 
@@ -74,7 +74,7 @@ Next, we need to link these libraries. The steps depends on your React Native ve
 
   If you're on an older React Native version, you need to manually link the dependencies. To do that, run:
 
-  ```sh
+  ```bash
   react-native link react-native-reanimated
   react-native link react-native-gesture-handler
   react-native link react-native-screens
@@ -99,7 +99,7 @@ Next, we need to link these libraries. The steps depends on your React Native ve
 
   Now, run the `postinstall` script manually:
 
-  ```sh
+  ```bash
   npm run postinstall
   ```
 
diff --git a/versioned_docs/version-4.x/troubleshooting.md b/versioned_docs/version-4.x/troubleshooting.md
index a6a1db45087..edcd02182c5 100644
--- a/versioned_docs/version-4.x/troubleshooting.md
+++ b/versioned_docs/version-4.x/troubleshooting.md
@@ -19,13 +19,13 @@ If the module points to a local file (i.e. the name of the module starts with `.
 
 If you're using Expo, run:
 
-```sh
+```bash
 expo start -c
 ```
 
 If you're not using Expo, run:
 
-```sh
+```bash
 npx react-native start --reset-cache
 ```
 
@@ -43,13 +43,13 @@ This and some similar errors might occur if you didn't link the [`react-native-g
 
   On newer versions of React Native, [linking is automatic](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md), so if you have linked the library manually, first unlink it:
 
-  ```sh
+  ```bash
   react-native unlink react-native-gesture-handler
   ```
 
   If you're testing on iOS and use Mac, make sure you have run `pod install` in the `ios/` folder:
 
-  ```sh
+  ```bash
   cd ios; pod install; cd ..
   ```
 
@@ -57,7 +57,7 @@ This and some similar errors might occur if you didn't link the [`react-native-g
 
   If you're on an older React Native version, you need to manually link the library. To do that, run:
 
-  ```sh
+  ```bash
   react-native link react-native-gesture-handler
   ```
 
@@ -67,7 +67,7 @@ Now rebuild the app and test on your device or simulator.
 
 This error can often happen if you have a Babel plugin that compiles the code in a non-spec compliant way. For example:
 
-```sh
+```bash
 ["@babel/plugin-proposal-class-properties", { "loose": true}]
 ```
 
@@ -91,13 +91,13 @@ If you have additional options configured here, try removing them to see if it f
 
 If you're using Expo, run:
 
-```sh
+```bash
 expo start -c
 ```
 
 If you're not using Expo, run:
 
-```sh
+```bash
 npx react-native start --reset-cache
 ```
 
diff --git a/versioned_docs/version-4.x/upgrading-from-3.x.md b/versioned_docs/version-4.x/upgrading-from-3.x.md
index 6ac0a71cfa1..cea4e5dbd97 100644
--- a/versioned_docs/version-4.x/upgrading-from-3.x.md
+++ b/versioned_docs/version-4.x/upgrading-from-3.x.md
@@ -76,7 +76,7 @@ The latest drawer and tabs depend on [`react-native-gesture-handler`](https://gi
 
 In your project directory, run the following:
 
-```sh
+```bash
 npx expo install react-native-gesture-handler react-native-reanimated
 ```
 
@@ -94,7 +94,7 @@ Next, we need to link these libraries. The steps depends on your React Native ve
 
   To complete the linking on iOS, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then run:
 
-  ```sh
+  ```bash
   cd ios
   pod install
   cd ..
@@ -104,7 +104,7 @@ Next, we need to link these libraries. The steps depends on your React Native ve
 
   If you're on an older React Native version, you need to manually link the dependencies. To do that, run:
 
-  ```sh
+  ```bash
   react-native link react-native-reanimated
   react-native link react-native-gesture-handler
   ```
diff --git a/versioned_docs/version-5.x/configuring-links.md b/versioned_docs/version-5.x/configuring-links.md
index 884b1270454..4542bece964 100644
--- a/versioned_docs/version-5.x/configuring-links.md
+++ b/versioned_docs/version-5.x/configuring-links.md
@@ -688,7 +688,7 @@ In the example app, you will use the Expo managed workflow. The guide will focus
 
 First, you need to decide the navigation structure of your app. To keep it simple, the main navigator will be bottom-tabs navigator with two screens. Its first screen will be a simple stack navigator, called `HomeStack`, with two screens: `Home` and `Profile`, and the second tabs screen will be just a simple one without any nested navigators, called `Settings`:
 
-```sh
+```bash
 BottomTabs
 ├── Stack (HomeStack)
 │   ├── Home
diff --git a/versioned_docs/version-5.x/contributing.md b/versioned_docs/version-5.x/contributing.md
index 391e337bf06..aa31a3cb0b6 100755
--- a/versioned_docs/version-5.x/contributing.md
+++ b/versioned_docs/version-5.x/contributing.md
@@ -111,7 +111,7 @@ Much like the issue template, the [pull request template](https://github.com/rea
 - Fork the [`repo`](https://github.com/react-navigation/react-navigation) on GitHub
 - Run these commands in the terminal to download locally and install it:
 
-```sh
+```bash
 git clone https://github.com/<USERNAME>/navigation-ex.git
 cd navigation-ex
 git remote add upstream https://github.com/react-navigation/react-navigation.git
@@ -124,25 +124,25 @@ The project uses a monorepo structure for the packages managed by [yarn workspac
 
 Look around. Match the style of the rest of the codebase. This project uses ESLint to ensure consistency throughout the project. You can check your project by running:
 
-```sh
+```bash
 yarn lint
 ```
 
 If any errors occur you'll either have to manually fix them or you can attempt to automatically fix them by running:
 
-```sh
+```bash
 yarn lint --fix
 ```
 
 The codebase is written in TypeScript, and must pass typecheck. To typecheck files, run:
 
-```sh
+```bash
 yarn typescript
 ```
 
 It's useful to run typechecking in watch mode when working on the project. To do it, run:
 
-```sh
+```bash
 yarn typescript --watch
 ```
 
@@ -152,7 +152,7 @@ The [example app](https://github.com/react-navigation/react-navigation/tree/main
 
 While developing, you can run the [example app](https://github.com/react-navigation/react-navigation/tree/main/example) with [Expo](https://expo.io/) to test your changes:
 
-```sh
+```bash
 yarn example start
 ```
 
@@ -160,13 +160,13 @@ yarn example start
 
 React Navigation has tests implemented in [Jest](https://facebook.github.io/jest/). To run either of these, from the React Navigation directory, run either of the following commands (after installing the `node_modules`) to run tests or type-checking.
 
-```sh
+```bash
 yarn test
 ```
 
 It's useful to run tests in watch mode when working on the project. To do it, run:
 
-```sh
+```bash
 yarn test --watch
 ```
 
diff --git a/versioned_docs/version-5.x/deep-linking.md b/versioned_docs/version-5.x/deep-linking.md
index f183ae2ff3a..d978f862b47 100755
--- a/versioned_docs/version-5.x/deep-linking.md
+++ b/versioned_docs/version-5.x/deep-linking.md
@@ -95,7 +95,7 @@ const linking = {
 
 To test the URI on the simulator in the Expo client app, run the following:
 
-```sh
+```bash
 npx uri-scheme open [ put your uri prefix in here] --ios
 
 # for example
@@ -105,7 +105,7 @@ npx uri-scheme open exp://127.0.0.1:19000/--/chat/jan --ios
 
 or use `xcrun` directly:
 
-```sh
+```bash
 xcrun simctl openurl booted [ put your URI prefix in here ]
 
 # for example
@@ -117,7 +117,7 @@ xcrun simctl openurl booted exp://127.0.0.1:19000/--/chat/jane
 
 To test the intent handling in the Expo client app on Android, run the following:
 
-```sh
+```bash
 npx uri-scheme open "[ put your URI prefix in here ]" --/chat/jan --android
 
 # for example
@@ -127,7 +127,7 @@ npx uri-scheme open exp://127.0.0.1:19000/--/chat/jan --android
 
 or use `adb` directly:
 
-```sh
+```bash
 adb shell am start -W -a android.intent.action.VIEW -d "[ put your URI prefix in here ]" host.exp.exponent
 
 # for example
@@ -200,19 +200,19 @@ If you want to do it manually, open the project at `SimpleApp/ios/SimpleApp.xcod
 
 Now you can press play in Xcode, or re-build on the command line:
 
-```sh
+```bash
 npx react-native run-ios
 ```
 
 To test the URI on the simulator, run the following:
 
-```sh
+```bash
 npx uri-scheme open mychat://chat/jane --ios
 ```
 
 or use `xcrun` directly:
 
-```sh
+```bash
 xcrun simctl openurl booted mychat://chat/jane
 ```
 
@@ -248,19 +248,19 @@ If you want to add it manually, open up `SimpleApp/android/app/src/main/AndroidM
 
 Now, re-install the app:
 
-```sh
+```bash
 react-native run-android
 ```
 
 To test the intent handling in Android, run the following:
 
-```sh
+```bash
 npx uri-scheme open mychat://chat/jane --android
 ```
 
 or use `adb` directly:
 
-```sh
+```bash
 adb shell am start -W -a android.intent.action.VIEW -d "mychat://chat/jane" com.simpleapp
 ```
 
diff --git a/versioned_docs/version-5.x/getting-started.md b/versioned_docs/version-5.x/getting-started.md
index fe8737d1f0f..5cead6283ab 100755
--- a/versioned_docs/version-5.x/getting-started.md
+++ b/versioned_docs/version-5.x/getting-started.md
@@ -33,7 +33,7 @@ The libraries we will install now are [`react-native-gesture-handler`](https://g
 
 In your project directory, run:
 
-```sh
+```bash
 npx expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
 ```
 
@@ -55,7 +55,7 @@ From React Native 0.60 and higher, [linking is automatic](https://github.com/rea
 
 If you're on a Mac and developing for iOS, you need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
 
-```sh
+```bash
 npx pod-install ios
 ```
 
diff --git a/versioned_docs/version-5.x/troubleshooting.md b/versioned_docs/version-5.x/troubleshooting.md
index b331ca0a99a..79f26eb3432 100755
--- a/versioned_docs/version-5.x/troubleshooting.md
+++ b/versioned_docs/version-5.x/troubleshooting.md
@@ -18,19 +18,19 @@ If the module points to a local file (i.e. the name of the module starts with `.
 
 If you're using Expo, run:
 
-```sh
+```bash
 expo start -c
 ```
 
 If you're not using Expo, run:
 
-```sh
+```bash
 npx react-native start --reset-cache
 ```
 
 If that doesn't work, you can also try the following:
 
-```sh
+```bash
 rm -rf $TMPDIR/metro-bundler-cache-*
 ```
 
@@ -48,7 +48,7 @@ Sometimes it might even be due to a corrupt installation. If clearing cache didn
 
 Sometimes the error may look like this:
 
-```sh
+```bash
 Error: While trying to resolve module "@react-navigation/native" from file "/path/to/src/App.js", the package "/path/to/node_modules/@react-navigation/native/package.json" was successfully found. However, this package itself specifies a "main" module field that could not be resolved ("/path/to/node_modules/@react-navigation/native/src/index.tsx"
 ```
 
@@ -64,13 +64,13 @@ If it's missing these extensions, add them and then clear metro cache as shown i
 
 This might happen if you have an old version of the `metro-react-native-babel-preset` package. Try upgrading it to the latest version.
 
-```sh npm2yarn
+```bash npm2yarn
 npm install --save-dev metro-react-native-babel-preset
 ```
 
 If you have `@babel/core` installed, also upgrade it to latest version.
 
-```sh npm2yarn
+```bash npm2yarn
 npm install --save-dev @babel/core
 ```
 
@@ -78,7 +78,7 @@ If upgrading the packages don't help, you can also try deleting your `node_modul
 
 If you use `npm`:
 
-```sh
+```bash
 rm -rf node_modules
 rm package-lock.json
 npm install
@@ -86,7 +86,7 @@ npm install
 
 If you use `yarn`:
 
-```sh
+```bash
 rm -rf node_modules
 rm yarn.lock
 yarn
@@ -98,7 +98,7 @@ After upgrading or reinstalling the packages, you should also clear Metro bundle
 
 This might happen if you have an old version of TypeScript in your project. You can try upgrading it:
 
-```sh npm2yarn
+```bash npm2yarn
 npm install --save-dev typescript
 ```
 
@@ -108,13 +108,13 @@ This and some similar errors might occur if you have a bare React Native project
 
 Linking is automatic from React Native 0.60, so if you have linked the library manually, first unlink it:
 
-```sh
+```bash
 react-native unlink react-native-gesture-handler
 ```
 
 If you're testing on iOS and use Mac, make sure you have run `pod install` in the `ios/` folder:
 
-```sh
+```bash
 cd ios
 pod install
 cd ..
@@ -128,13 +128,13 @@ This and some similar errors might occur if you have a bare React Native project
 
 Linking is automatic from React Native 0.60, so if you have linked the library manually, first unlink it:
 
-```sh
+```bash
 react-native unlink react-native-safe-area-context
 ```
 
 If you're testing on iOS and use Mac, make sure you have run `pod install` in the `ios/` folder:
 
-```sh
+```bash
 cd ios
 pod install
 cd ..
@@ -148,7 +148,7 @@ This might occur if you have multiple versions of [`react-native-safe-area-conte
 
 If you're using Expo managed workflow, it's likely that you have installed an incompatible version. To install the correct version, run:
 
-```sh
+```bash
 npx expo install react-native-safe-area-context
 ```
 
@@ -156,13 +156,13 @@ If it didn't fix the error or you're not using Expo managed workflow, you'll nee
 
 If you use `yarn`, run:
 
-```sh
+```bash
 yarn why react-native-safe-area-context
 ```
 
 If you use `npm`, run:
 
-```sh
+```bash
 npm ls react-native-safe-area-context
 ```
 
@@ -180,13 +180,13 @@ If you use `yarn`, you can also temporarily override the version being installed
 
 And then run:
 
-```sh
+```bash
 yarn
 ```
 
 If you're on iOS and not using Expo managed workflow, also run:
 
-```sh
+```bash
 cd ios
 pod install
 cd ..
diff --git a/versioned_docs/version-6.x/configuring-links.md b/versioned_docs/version-6.x/configuring-links.md
index 4040b1f00c2..d14718e3adb 100644
--- a/versioned_docs/version-6.x/configuring-links.md
+++ b/versioned_docs/version-6.x/configuring-links.md
@@ -726,7 +726,7 @@ In the example app, you will use the Expo managed workflow. The guide will focus
 
 First, you need to decide the navigation structure of your app. To keep it simple, the main navigator will be bottom-tabs navigator with two screens. Its first screen will be a simple stack navigator, called `HomeStack`, with two screens: `Home` and `Profile`, and the second tabs screen will be just a simple one without any nested navigators, called `Settings`:
 
-```sh
+```bash
 BottomTabs
 ├── Stack (HomeStack)
 │   ├── Home
diff --git a/versioned_docs/version-6.x/contributing.md b/versioned_docs/version-6.x/contributing.md
index 391e337bf06..aa31a3cb0b6 100755
--- a/versioned_docs/version-6.x/contributing.md
+++ b/versioned_docs/version-6.x/contributing.md
@@ -111,7 +111,7 @@ Much like the issue template, the [pull request template](https://github.com/rea
 - Fork the [`repo`](https://github.com/react-navigation/react-navigation) on GitHub
 - Run these commands in the terminal to download locally and install it:
 
-```sh
+```bash
 git clone https://github.com/<USERNAME>/navigation-ex.git
 cd navigation-ex
 git remote add upstream https://github.com/react-navigation/react-navigation.git
@@ -124,25 +124,25 @@ The project uses a monorepo structure for the packages managed by [yarn workspac
 
 Look around. Match the style of the rest of the codebase. This project uses ESLint to ensure consistency throughout the project. You can check your project by running:
 
-```sh
+```bash
 yarn lint
 ```
 
 If any errors occur you'll either have to manually fix them or you can attempt to automatically fix them by running:
 
-```sh
+```bash
 yarn lint --fix
 ```
 
 The codebase is written in TypeScript, and must pass typecheck. To typecheck files, run:
 
-```sh
+```bash
 yarn typescript
 ```
 
 It's useful to run typechecking in watch mode when working on the project. To do it, run:
 
-```sh
+```bash
 yarn typescript --watch
 ```
 
@@ -152,7 +152,7 @@ The [example app](https://github.com/react-navigation/react-navigation/tree/main
 
 While developing, you can run the [example app](https://github.com/react-navigation/react-navigation/tree/main/example) with [Expo](https://expo.io/) to test your changes:
 
-```sh
+```bash
 yarn example start
 ```
 
@@ -160,13 +160,13 @@ yarn example start
 
 React Navigation has tests implemented in [Jest](https://facebook.github.io/jest/). To run either of these, from the React Navigation directory, run either of the following commands (after installing the `node_modules`) to run tests or type-checking.
 
-```sh
+```bash
 yarn test
 ```
 
 It's useful to run tests in watch mode when working on the project. To do it, run:
 
-```sh
+```bash
 yarn test --watch
 ```
 
diff --git a/versioned_docs/version-6.x/deep-linking.md b/versioned_docs/version-6.x/deep-linking.md
index b9afa3cb2bc..6791958ceeb 100755
--- a/versioned_docs/version-6.x/deep-linking.md
+++ b/versioned_docs/version-6.x/deep-linking.md
@@ -29,7 +29,7 @@ First, you will want to specify a URL scheme for your app. This corresponds to t
 
 Next, install `expo-linking` which we'd need to get the deep link prefix:
 
-```sh
+```bash
 npx expo install expo-linking
 ```
 
@@ -103,7 +103,7 @@ Now you need to add the scheme to your project configuration.
 
 The easiest way to do this is with the `uri-scheme` package by running the following:
 
-```sh
+```bash
 npx uri-scheme add mychat --ios
 ```
 
@@ -193,13 +193,13 @@ Before testing deep links, make sure that you rebuild and install the app in you
 
 If you're testing on iOS, run:
 
-```sh
+```bash
 npx react-native run-ios
 ```
 
 If you're testing on Android, run:
 
-```sh
+```bash
 npx react-native run-android
 ```
 
@@ -211,19 +211,19 @@ If you want to test with your custom scheme in your Expo app, you will need rebu
 
 The `uri-scheme` package is a command line tool that can be used to test deep links on both iOS & Android. It can be used as follows:
 
-```sh
+```bash
 npx uri-scheme open [your deep link] --[ios|android]
 ```
 
 For example:
 
-```sh
+```bash
 npx uri-scheme open "mychat://chat/jane" --ios
 ```
 
 Or if using Expo client:
 
-```sh
+```bash
 npx uri-scheme open "exp://127.0.0.1:19000/--/chat/jane" --ios
 ```
 
@@ -231,13 +231,13 @@ npx uri-scheme open "exp://127.0.0.1:19000/--/chat/jane" --ios
 
 The `xcrun` command can be used as follows to test deep links with the iOS simulator:
 
-```sh
+```bash
 xcrun simctl openurl booted [your deep link]
 ```
 
 For example:
 
-```sh
+```bash
 xcrun simctl openurl booted "mychat://chat/jane"
 ```
 
@@ -245,19 +245,19 @@ xcrun simctl openurl booted "mychat://chat/jane"
 
 The `adb` command can be used as follows to test deep links with the Android emulator or a connected device:
 
-```sh
+```bash
 adb shell am start -W -a android.intent.action.VIEW -d [your deep link] [your android package name]
 ```
 
 For example:
 
-```sh
+```bash
 adb shell am start -W -a android.intent.action.VIEW -d "mychat://chat/jane" com.simpleapp
 ```
 
 Or if using Expo client:
 
-```sh
+```bash
 adb shell am start -W -a android.intent.action.VIEW -d "exp://127.0.0.1:19000/--/chat/jane" host.exp.exponent
 ```
 
diff --git a/versioned_docs/version-6.x/drawer-layout.md b/versioned_docs/version-6.x/drawer-layout.md
new file mode 100644
index 00000000000..e05c774dcec
--- /dev/null
+++ b/versioned_docs/version-6.x/drawer-layout.md
@@ -0,0 +1,267 @@
+---
+id: drawer-layout
+title: React Native Drawer Layout
+sidebar_label: Drawer Layout
+---
+
+A cross-platform Drawer component for React Native implemented using [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/).
+
+<div style={{ display: 'flex', margin: '16px 0' }}>
+  <video playsInline autoPlay muted loop>
+    <source src="/assets/navigators/drawer/drawer.mov" />
+  </video>
+</div>
+
+This package doesn't integrate with React Navigation. If you want to integrate the drawer layout with React Navigation's navigation system, e.g. want to show screens in the drawer and be able to navigate between them using `navigation.navigate` etc, use [Drawer Navigator](drawer-navigator.md) instead.
+
+## Installation
+
+To use this package, open a Terminal in the project root and run:
+
+```bash npm2yarn
+npm install react-native-drawer-layout
+```
+
+Then, you need to install and configure the libraries that are required by the drawer:
+
+1. First, install [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/).
+
+   If you have a Expo managed project, in your project directory, run:
+
+   ```bash
+   npx expo install react-native-gesture-handler react-native-reanimated
+   ```
+
+   If you have a bare React Native project, in your project directory, run:
+
+   ```bash npm2yarn
+   npm install react-native-gesture-handler react-native-reanimated
+   ```
+
+   The Drawer supports both Reanimated 1 and Reanimated 2. If you want to use Reanimated 2, make sure to configure it following the [installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation).
+
+2. To finalize installation of `react-native-gesture-handler`, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
+
+   ```js
+   import 'react-native-gesture-handler';
+   ```
+
+   > Note: If you are building for Android or iOS, do not skip this step, or your app may crash in production even if it works fine in development. This is not applicable to other platforms.
+
+3. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
+
+```bash
+npx pod-install ios
+```
+
+We're done! Now you can build and run the app on your device/simulator.
+
+## Quick start
+
+```js
+import * as React from 'react';
+import { Button, Text } from 'react-native';
+import { Drawer } from 'react-native-drawer-layout';
+
+export default function DrawerExample() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Drawer
+      open={open}
+      onOpen={() => setOpen(true)}
+      onClose={() => setOpen(false)}
+      renderDrawerContent={() => {
+        return <Text>Drawer content</Text>;
+      }}
+    >
+      <Button
+        onPress={() => setOpen((prevOpen) => !prevOpen)}
+        title={`${open ? 'Close' : 'Open'} drawer`}
+      />
+    </Drawer>
+  );
+}
+```
+
+## API reference
+
+The package exports a `Drawer` component which is the one you'd use to render the drawer.
+
+### `Drawer`
+
+Component responsible for rendering a drawer with animations and gestures.
+
+#### Drawer Props
+
+##### `open`
+
+Whether the drawer is open or not.
+
+##### `onOpen`
+
+Callback which is called when the drawer is opened.
+
+##### `onClose`
+
+Callback which is called when the drawer is closed.
+
+##### `renderDrawerContent`
+
+Callback which returns a react element to render as the content of the drawer.
+
+##### `layout`
+
+Object containing the layout of the container. Defaults to the dimensions of the application's window.
+
+##### `drawerPosition`
+
+Position of the drawer on the screen. Defaults to `right` in RTL mode, otherwise `left`.
+
+##### `drawerType`
+
+Type of the drawer. It determines how the drawer looks and animates.
+
+- `front`: Traditional drawer which covers the screen with a overlay behind it.
+- `back`: The drawer is revealed behind the screen on swipe.
+- `slide`: Both the screen and the drawer slide on swipe to reveal the drawer.
+- `permanent`: A permanent drawer is shown as a sidebar.
+
+Defaults to `slide` on iOS and `front` on other platforms.
+
+##### `drawerStyle`
+
+Style object for the drawer. You can pass a custom background color for drawer or a custom width for the drawer.
+
+##### `overlayStyle`
+
+Style object for the overlay.
+
+##### `hideStatusBarOnOpen`
+
+Whether to hide the status bar when the drawer is open. Defaults to `false`.
+
+##### `keyboardDismissMode`
+
+Whether to dismiss the keyboard when the drawer is open. Supported values are:
+
+- `none`: The keyboard will not be dismissed when the drawer is open.
+- `on-drag`: The keyboard will be dismissed when the drawer is opened by a swipe gesture.
+
+Defaults to `on-drag`.
+
+##### `statusBarAnimation`
+
+Animation to use when the status bar is hidden. Supported values are:
+
+- `slide`: The status bar will slide out of view.
+- `fade`: The status bar will fade out of view.
+- `none`: The status bar will not animate.
+
+Use it in combination with `hideStatusBarOnOpen`.
+
+##### `swipeEnabled`
+
+Whether to enable swipe gestures to open the drawer. Defaults to `true`.
+
+Swipe gestures are only supported on iOS and Android.
+
+##### `swipeEdgeWidth`
+
+How far from the edge of the screen the swipe gesture should activate. Defaults to `32`.
+
+This is only supported on iOS and Android.
+
+##### `swipeMinDistance`
+
+Minimum swipe distance that should activate opening the drawer. Defaults to `60`.
+
+This is only supported on iOS and Android.
+
+##### `swipeMinVelocity`
+
+Minimum swipe velocity that should activate opening the drawer. Defaults to `500`.
+
+This is only supported on iOS and Android.
+
+##### `gestureHandlerProps`
+
+Props to pass to the underlying pan gesture handler.
+
+This is only supported on iOS and Android.
+
+##### `children`
+
+Content that the drawer should wrap.
+
+### `useDrawerProgress`
+
+The `useDrawerProgress` hook returns a Reanimated SharedValue (with modern implementation) or Reanimated Node (with legacy implementation) which represents the progress of the drawer. It can be used to animate the content of the screen.
+
+Example with modern implementation:
+
+```js
+import { Animated } from 'react-native-reanimated';
+import { useDrawerProgress } from 'react-native-drawer-layout';
+
+// ...
+
+function MyComponent() {
+  const progress = useDrawerProgress();
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: interpolate(progress, [0, 1], [-100, 0]),
+        },
+      ],
+    };
+  });
+
+  return <Animated.View style={animatedStyle}>{/* ... */}</Animated.View>;
+}
+```
+
+Example with legacy implementation:
+
+```js
+import { Animated } from 'react-native-reanimated';
+import { useDrawerProgress } from 'react-native-drawer-layout';
+
+// ...
+
+function MyComponent() {
+  const progress = useDrawerProgress();
+
+  // If you are on react-native-reanimated 1.x, use `Animated.interpolate` instead of `Animated.interpolateNode`
+  const translateX = Animated.interpolateNode(progress, {
+    inputRange: [0, 1],
+    outputRange: [-100, 0],
+  });
+
+  return (
+    <Animated.View style={{ transform: [{ translateX }] }}>
+      {/* ... */}
+    </Animated.View>
+  );
+}
+```
+
+If you are using class components, you can use the `DrawerProgressContext` to get the progress value.
+
+```js
+import { DrawerProgressContext } from 'react-native-drawer-layout';
+
+// ...
+
+class MyComponent extends React.Component {
+  static contextType = DrawerProgressContext;
+
+  render() {
+    const progress = this.context;
+
+    // ...
+  }
+}
+```
diff --git a/versioned_docs/version-6.x/drawer-navigator.md b/versioned_docs/version-6.x/drawer-navigator.md
index c95b9204489..b40cdb5ebe7 100644
--- a/versioned_docs/version-6.x/drawer-navigator.md
+++ b/versioned_docs/version-6.x/drawer-navigator.md
@@ -4,7 +4,7 @@ title: Drawer Navigator
 sidebar_label: Drawer
 ---
 
-Component that renders a navigation drawer which can be opened and closed via gestures.
+Drawer Navigator renders a navigation drawer on the side of the screen which can be opened and closed via gestures.
 
 <div style={{ display: 'flex', margin: '16px 0' }}>
   <video playsInline autoPlay muted loop>
@@ -12,6 +12,8 @@ Component that renders a navigation drawer which can be opened and closed via ge
   </video>
 </div>
 
+This wraps [`react-native-drawer-layout`](drawer-layout.md). If you want to use the tab view without React Navigation integration, use the library directly instead.
+
 ## Installation
 
 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):
@@ -26,7 +28,7 @@ Then, you need to install and configure the libraries that are required by the d
 
    If you have a Expo managed project, in your project directory, run:
 
-   ```sh
+   ```bash
    npx expo install react-native-gesture-handler react-native-reanimated
    ```
 
@@ -48,7 +50,7 @@ Then, you need to install and configure the libraries that are required by the d
 
 3. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
 
-```sh
+```bash
 npx pod-install ios
 ```
 
diff --git a/versioned_docs/version-6.x/elements.md b/versioned_docs/version-6.x/elements.md
index 627359d196e..9d424f9ca40 100644
--- a/versioned_docs/version-6.x/elements.md
+++ b/versioned_docs/version-6.x/elements.md
@@ -1,14 +1,16 @@
 ---
 id: elements
 title: Elements Library
-sidebar_label: Elements Library
+sidebar_label: Elements
 ---
 
 A component library containing the UI elements and helpers used in React Navigation. It can be useful if you're building your own navigator, or want to reuse a default functionality in your app.
 
+## Installation
+
 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):
 
-```sh npm2yarn
+```bash npm2yarn
 npm install @react-navigation/elements
 ```
 
diff --git a/versioned_docs/version-6.x/getting-started.md b/versioned_docs/version-6.x/getting-started.md
index 9d8f4f1a5c4..2c70f603811 100755
--- a/versioned_docs/version-6.x/getting-started.md
+++ b/versioned_docs/version-6.x/getting-started.md
@@ -39,7 +39,7 @@ The libraries we will install now are [`react-native-screens`](https://github.co
 
 In your project directory, run:
 
-```sh
+```bash
 npx expo install react-native-screens react-native-safe-area-context
 ```
 
@@ -61,7 +61,7 @@ From React Native 0.60 and higher, [linking is automatic](https://github.com/rea
 
 If you're on a Mac and developing for iOS, you need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
 
-```sh
+```bash
 npx pod-install ios
 ```
 
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 926f01debd4..a279668fd94 100755
--- a/versioned_docs/version-6.x/material-top-tab-navigator.md
+++ b/versioned_docs/version-6.x/material-top-tab-navigator.md
@@ -6,14 +6,14 @@ sidebar_label: Material Top Tabs
 
 A material-design themed tab bar on the top of the screen that lets you switch between different routes by tapping the tabs or swiping horizontally. Transitions are animated by default. Screen components for each route are mounted immediately.
 
-This wraps [`react-native-tab-view`](https://github.com/react-navigation/react-navigation/tree/main/packages/react-native-tab-view).
-
 <div style={{ display: 'flex', margin: '16px 0' }}>
   <video playsInline autoPlay muted loop>
     <source src="/assets/navigators/tabs/material-top-tabs.mov" />
   </video>
 </div>
 
+This wraps [`react-native-tab-view`](tab-view.md). If you want to use the tab view without React Navigation integration, use the library directly instead.
+
 ## Installation
 
 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):
@@ -26,7 +26,7 @@ Then, you need to install [`react-native-pager-view`](https://github.com/callsta
 
 If you have a Expo managed project, in your project directory, run:
 
-```sh
+```bash
 npx expo install react-native-pager-view
 ```
 
@@ -38,7 +38,7 @@ npm install react-native-pager-view
 
 If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
 
-```sh
+```bash
 npx pod-install ios
 ```
 
diff --git a/versioned_docs/version-6.x/stack-navigator.md b/versioned_docs/version-6.x/stack-navigator.md
index 280071e18a5..200aa575d4b 100755
--- a/versioned_docs/version-6.x/stack-navigator.md
+++ b/versioned_docs/version-6.x/stack-navigator.md
@@ -30,7 +30,7 @@ Then, you need to install and configure the libraries that are required by the s
 
    If you have a Expo managed project, in your project directory, run:
 
-   ```sh
+   ```bash
    npx expo install react-native-gesture-handler
    ```
 
@@ -52,7 +52,7 @@ Then, you need to install and configure the libraries that are required by the s
 
    If you have a Expo managed project, in your project directory, run:
 
-   ```sh
+   ```bash
    npx expo install @react-native-masked-view/masked-view
    ```
 
@@ -64,7 +64,7 @@ Then, you need to install and configure the libraries that are required by the s
 
 4. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
 
-  ```sh
+  ```bash
   npx pod-install ios
   ```
 
diff --git a/versioned_docs/version-6.x/tab-view.md b/versioned_docs/version-6.x/tab-view.md
new file mode 100644
index 00000000000..c89867bdce7
--- /dev/null
+++ b/versioned_docs/version-6.x/tab-view.md
@@ -0,0 +1,628 @@
+---
+id: tab-view
+title: React Native Tab View
+sidebar_label: Tab View
+---
+
+React Native Tab View is a cross-platform Tab View component for React Native implemented using [`react-native-pager-view`](https://github.com/callstack/react-native-viewpager) on Android & iOS, and [PanResponder](https://reactnative.dev/docs/panresponder) on Web, macOS, and Windows.
+
+It follows material design guidelines by default, but you can also use your own custom tab bar or position the tab bar at the bottom.
+
+<div style={{ display: 'flex', margin: '16px 0' }}>
+  <img src="/assets/libraries/tab-view.gif" width="360px" />
+</div>
+
+This package doesn't integrate with React Navigation. If you want to integrate the tab view with React Navigation's navigation system, e.g. want to show screens in the tab bar and be able to navigate between them using `navigation.navigate` etc, use [Material Top Tab Navigator](material-top-tab-navigator.md) instead.
+
+## Installation
+
+To use this package, open a Terminal in the project root and run:
+
+```bash npm2yarn
+npm install react-native-tab-view
+```
+
+Next, install [`react-native-pager-view`](https://github.com/callstack/react-native-viewpager) if you plan to support iOS and Android.
+
+If you are using Expo, to ensure that you get the compatible versions of the libraries, run:
+
+```bash
+expo install react-native-pager-view
+```
+
+If you are not using Expo, run the following:
+
+```bash npm2yarn
+npm install react-native-pager-view
+```
+
+We're done! Now you can build and run the app on your device/simulator.
+
+## Quick start
+
+```js
+import * as React from 'react';
+import { View, useWindowDimensions } from 'react-native';
+import { TabView, SceneMap } from 'react-native-tab-view';
+
+const FirstRoute = () => (
+  <View style={{ flex: 1, backgroundColor: '#ff4081' }} />
+);
+
+const SecondRoute = () => (
+  <View style={{ flex: 1, backgroundColor: '#673ab7' }} />
+);
+
+const renderScene = SceneMap({
+  first: FirstRoute,
+  second: SecondRoute,
+});
+
+export default function TabViewExample() {
+  const layout = useWindowDimensions();
+
+  const [index, setIndex] = React.useState(0);
+  const [routes] = React.useState([
+    { key: 'first', title: 'First' },
+    { key: 'second', title: 'Second' },
+  ]);
+
+  return (
+    <TabView
+      navigationState={{ index, routes }}
+      renderScene={renderScene}
+      onIndexChange={setIndex}
+      initialLayout={{ width: layout.width }}
+    />
+  );
+}
+```
+
+[Try this example on Snack](https://snack.expo.io/@satya164/react-native-tab-view-quick-start)
+
+## More examples on Snack
+
+- [Custom Tab Bar](https://snack.expo.io/@satya164/react-native-tab-view-custom-tabbar)
+- [Lazy Load](https://snack.expo.io/@satya164/react-native-tab-view-lazy-load)
+
+## API reference
+
+The package exports a `TabView` component which is the one you'd use to render the tab view, and a `TabBar` component which is the default tab bar implementation.
+
+### `TabView`
+
+Container component responsible for rendering and managing tabs. Follows material design styles by default.
+
+Basic usage look like this:
+
+```js
+<TabView
+  navigationState={{ index, routes }}
+  onIndexChange={setIndex}
+  renderScene={SceneMap({
+    first: FirstRoute,
+    second: SecondRoute,
+  })}
+/>
+```
+
+#### TabView Props
+
+##### `navigationState` (`required`)
+
+State for the tab view. The state should contain the following properties:
+
+- `index`: a number representing the index of the active route in the `routes` array
+- `routes`: an array containing a list of route objects used for rendering the tabs
+
+Each route object should contain the following properties:
+
+- `key`: a unique key to identify the route (required)
+- `title`: title for the route to display in the tab bar
+- `icon`: icon for the route to display in the tab bar
+- `accessibilityLabel`: accessibility label for the tab button
+- `testID`: test id for the tab button
+
+Example:
+
+```js
+{
+  index: 1,
+  routes: [
+    { key: 'music', title: 'Music' },
+    { key: 'albums', title: 'Albums' },
+    { key: 'recents', title: 'Recents' },
+    { key: 'purchased', title: 'Purchased' },
+  ]
+}
+```
+
+`TabView` is a controlled component, which means the `index` needs to be updated via the `onIndexChange` callback.
+
+##### `onIndexChange` (`required`)
+
+Callback which is called on tab change, receives the index of the new tab as argument.
+The navigation state needs to be updated when it's called, otherwise the change is dropped.
+
+##### `renderScene` (`required`)
+
+Callback which returns a react element to render as the page for the tab. Receives an object containing the route as the argument:
+
+```js
+const renderScene = ({ route, jumpTo }) => {
+  switch (route.key) {
+    case 'music':
+      return <MusicRoute jumpTo={jumpTo} />;
+    case 'albums':
+      return <AlbumsRoute jumpTo={jumpTo} />;
+  }
+};
+```
+
+You need to make sure that your individual routes implement a `shouldComponentUpdate` to improve the performance. To make it easier to specify the components, you can use the `SceneMap` helper.
+
+`SceneMap` takes an object with the mapping of `route.key` to React components and returns a function to use with `renderScene` prop.
+
+```js
+import { SceneMap } from 'react-native-tab-view';
+
+...
+
+const renderScene = SceneMap({
+  music: MusicRoute,
+  albums: AlbumsRoute,
+});
+```
+
+Specifying the components this way is easier and takes care of implementing a `shouldComponentUpdate` method.
+
+Each scene receives the following props:
+
+- `route`: the current route rendered by the component
+- `jumpTo`: method to jump to other tabs, takes a `route.key` as it's argument
+- `position`: animated node which represents the current position
+
+The `jumpTo` method can be used to navigate to other tabs programmatically:
+
+```js
+props.jumpTo('albums');
+```
+
+All the scenes rendered with `SceneMap` are optimized using `React.PureComponent` and don't re-render when parent's props or states change. If you need more control over how your scenes update (e.g. - triggering a re-render even if the `navigationState` didn't change), use `renderScene` directly instead of using `SceneMap`.
+
+**IMPORTANT:** **Do not** pass inline functions to `SceneMap`, for example, don't do the following:
+
+```js
+SceneMap({
+  first: () => <FirstRoute foo={props.foo} />,
+  second: SecondRoute,
+});
+```
+
+Always define your components elsewhere in the top level of the file. If you pass inline functions, it'll re-create the component every render, which will cause the entire route to unmount and remount every change. It's very bad for performance and will also cause any local state to be lost.
+
+If you need to pass additional props, use a custom `renderScene` function:
+
+```js
+const renderScene = ({ route }) => {
+  switch (route.key) {
+    case 'first':
+      return <FirstRoute foo={this.props.foo} />;
+    case 'second':
+      return <SecondRoute />;
+    default:
+      return null;
+  }
+};
+```
+
+##### `renderTabBar`
+
+Callback which returns a custom React Element to use as the tab bar:
+
+```js
+import { TabBar } from 'react-native-tab-view';
+
+...
+
+<TabView
+  renderTabBar={props => <TabBar {...props} />}
+  ...
+/>
+```
+
+If this is not specified, the default tab bar is rendered. You pass this props to customize the default tab bar, provide your own tab bar, or disable the tab bar completely.
+
+```js
+<TabView
+  renderTabBar={() => null}
+  ...
+/>
+```
+
+##### `tabBarPosition`
+
+Position of the tab bar in the tab view. Possible values are `'top'` and `'bottom'`. Defaults to `'top'`.
+
+##### `lazy`
+
+Function which takes an object with the current route and returns a boolean to indicate whether to lazily render the scenes.
+
+By default all scenes are rendered to provide a smoother swipe experience. But you might want to defer the rendering of unfocused scenes until the user sees them. To enable lazy rendering for a particular scene, return `true` from `getLazy` for that `route`:
+
+```js
+<TabView
+  lazy={({ route }) => route.name === 'Albums'}
+  ...
+/>
+```
+
+When you enable lazy rendering for a screen, it will usually take some time to render when it comes into focus. You can use the `renderLazyPlaceholder` prop to customize what the user sees during this short period.
+
+You can also pass a boolean to enable lazy for all of the scenes:
+
+```js
+<TabView
+  lazy
+/>
+```
+
+##### `lazyPreloadDistance`
+
+When `lazy` is enabled, you can specify how many adjacent routes should be preloaded with this prop. This value defaults to `0` which means lazy pages are loaded as they come into the viewport.
+
+##### `renderLazyPlaceholder`
+
+Callback which returns a custom React Element to render for routes that haven't been rendered yet. Receives an object containing the route as the argument. The `lazy` prop also needs to be enabled.
+
+This view is usually only shown for a split second. Keep it lightweight.
+
+By default, this renders `null`.
+
+##### `keyboardDismissMode`
+
+String indicating whether the keyboard gets dismissed in response to a drag gesture. Possible values are:
+
+- `'auto'` (default): the keyboard is dismissed when the index changes.
+- `'on-drag'`: the keyboard is dismissed when a drag begins.
+- `'none'`: drags do not dismiss the keyboard.
+
+##### `swipeEnabled`
+
+Boolean indicating whether to enable swipe gestures. Swipe gestures are enabled by default. Passing `false` will disable swipe gestures, but the user can still switch tabs by pressing the tab bar.
+
+#### `animationEnabled`
+
+Enables animation when changing tab. By default it's true.
+
+##### `onSwipeStart`
+
+Callback which is called when the swipe gesture starts, i.e. the user touches the screen and moves it.
+
+##### `onSwipeEnd`
+
+Callback which is called when the swipe gesture ends, i.e. the user lifts their finger from the screen after the swipe gesture.
+
+##### `initialLayout`
+
+Object containing the initial height and width of the screens. Passing this will improve the initial rendering performance. For most apps, this is a good default:
+
+```js
+<TabView
+  initialLayout={{ width: Dimensions.get('window').width }}
+  ...
+/>
+```
+
+##### `overScrollMode`
+
+Used to override default value of pager's overScroll mode. Can be `auto`, `always` or `never` (Android only).
+
+##### `sceneContainerStyle`
+
+Style to apply to the view wrapping each screen. You can pass this to override some default styles such as overflow clipping:
+
+##### `pagerStyle`
+
+Style to apply to the pager view wrapping all the scenes.
+
+##### `style`
+
+Style to apply to the tab view container.
+
+### `TabBar`
+
+Material design themed tab bar. To customize the tab bar, you'd need to use the `renderTabBar` prop of `TabView` to render the `TabBar` and pass additional props.
+
+For example, to customize the indicator color and the tab bar background color, you can pass `indicatorStyle` and `style` props to the `TabBar` respectively:
+
+```js
+const renderTabBar = props => (
+  <TabBar
+    {...props}
+    indicatorStyle={{ backgroundColor: 'white' }}
+    style={{ backgroundColor: 'pink' }}
+  />
+);
+
+//...
+
+
+return (
+  <TabView
+    renderTabBar={renderTabBar}
+    ...
+  />
+);
+```
+
+#### TabBar Props
+
+##### `getLabelText`
+
+Function which takes an object with the current route and returns the label text for the tab. Uses `route.title` by default.
+
+```js
+<TabBar
+  getLabelText={({ route }) => route.title}
+  ...
+/>
+```
+
+##### `getAccessible`
+
+Function which takes an object with the current route and returns a boolean to indicate whether to mark a tab as `accessible`. Defaults to `true`.
+
+##### `getAccessibilityLabel`
+
+Function which takes an object with the current route and returns a accessibility label for the tab button. Uses `route.accessibilityLabel` by default if specified, otherwise uses the route title.
+
+```js
+<TabBar
+  getAccessibilityLabel={({ route }) => route.accessibilityLabel}
+  ...
+/>
+```
+
+##### `getTestID`
+
+Function which takes an object with the current route and returns a test id for the tab button to locate this tab button in tests. Uses `route.testID` by default.
+
+```js
+<TabBar
+  getTestID={({ route }) => route.testID}
+  ...
+/>
+```
+
+##### `renderIcon`
+
+Function which takes an object with the current route, focused status and color and returns a custom React Element to be used as a icon.
+
+```js
+<TabBar
+  renderIcon={({ route, focused, color }) => (
+    <Icon
+      name={focused ? 'albums' : 'albums-outlined'}
+      color={color}
+    />
+  )}
+  ...
+/>
+```
+
+##### `renderLabel`
+
+Function which takes an object with the current route, focused status and color and returns a custom React Element to be used as a label.
+
+```js
+<TabBar
+  renderLabel={({ route, focused, color }) => (
+    <Text style={{ color, margin: 8 }}>
+      {route.title}
+    </Text>
+  )}
+  ...
+/>
+```
+
+##### `renderTabBarItem`
+
+Function which takes a `TabBarItemProps` object and returns a custom React Element to be used as a tab button.
+
+##### `renderIndicator`
+
+Function which takes an object with the current route and returns a custom React Element to be used as a tab indicator.
+
+##### `renderBadge`
+
+Function which takes an object with the current route and returns a custom React Element to be used as a badge.
+
+##### `onTabPress`
+
+Function to execute on tab press. It receives the scene for the pressed tab, useful for things like scroll to top.
+
+By default, tab press also switches the tab. To prevent this behavior, you can call `preventDefault`:
+
+```js
+<TabBar
+  onTabPress={({ route, preventDefault }) => {
+    if (route.key === 'home') {
+      preventDefault();
+
+      // Do something else
+    }
+  }}
+  ...
+/>
+```
+
+##### `onTabLongPress`
+
+Function to execute on tab long press, use for things like showing a menu with more options
+
+##### `activeColor`
+
+Custom color for icon and label in the active tab.
+
+##### `inactiveColor`
+
+Custom color for icon and label in the inactive tab.
+
+##### `pressColor`
+
+Color for material ripple (Android >= 5.0 only).
+
+##### `pressOpacity`
+
+Opacity for pressed tab (iOS and Android < 5.0 only).
+
+##### `scrollEnabled`
+
+Boolean indicating whether to make the tab bar scrollable.
+
+If you set `scrollEnabled` to `true`, you should also specify a `width` in `tabStyle` to improve the initial render.
+
+##### `bounces`
+
+Boolean indicating whether the tab bar bounces when scrolling.
+
+##### `tabStyle`
+
+Style to apply to the individual tab items in the tab bar.
+
+By default, all tab items take up the same pre-calculated width based on the width of the container. If you want them to take their original width, you can specify `width: 'auto'` in `tabStyle`.
+
+##### `indicatorStyle`
+
+Style to apply to the active indicator.
+
+##### `indicatorContainerStyle`
+
+Style to apply to the container view for the indicator.
+
+##### `labelStyle`
+
+Style to apply to the tab item label.
+
+##### `contentContainerStyle`
+
+Style to apply to the inner container for tabs.
+
+##### `style` (`TabBar`)
+
+Style to apply to the tab bar container.
+
+##### `gap`
+
+Define a spacing between tabs.
+
+##### `testID`
+
+Test id for the tabBar. Can be used for scrolling the tab bar in tests
+
+## Optimization Tips
+
+### Avoid unnecessary re-renders
+
+The `renderScene` function is called every time the index changes. If your `renderScene` function is expensive, it's good idea move each route to a separate component if they don't depend on the index, and use `shouldComponentUpdate` or `React.memo` in your route components to prevent unnecessary re-renders.
+
+For example, instead of:
+
+```js
+const renderScene = ({ route }) => {
+  switch (route.key) {
+    case 'home':
+      return (
+        <View style={styles.page}>
+          <Avatar />
+          <NewsFeed />
+        </View>
+      );
+    default:
+      return null;
+  }
+};
+```
+
+Do the following:
+
+```js
+const renderScene = ({ route }) => {
+  switch (route.key) {
+    case 'home':
+      return <HomeComponent />;
+    default:
+      return null;
+  }
+};
+```
+
+Where `<HomeComponent />` is a `PureComponent` if you're using class components:
+
+```js
+export default class HomeComponent extends React.PureComponent {
+  render() {
+    return (
+      <View style={styles.page}>
+        <Avatar />
+        <NewsFeed />
+      </View>
+    );
+  }
+}
+```
+
+Or, wrapped in `React.memo` if you're using function components:
+
+```js
+function HomeComponent() {
+  return (
+    <View style={styles.page}>
+      <Avatar />
+      <NewsFeed />
+    </View>
+  );
+}
+
+export default React.memo(HomeComponent);
+```
+
+### Avoid one frame delay
+
+We need to measure the width of the container and hence need to wait before rendering some elements on the screen. If you know the initial width upfront, you can pass it in and we won't need to wait for measuring it. Most of the time, it's just the window width.
+
+For example, pass the following `initialLayout` to `TabView`:
+
+```js
+const initialLayout = {
+  height: 0,
+  width: Dimensions.get('window').width,
+};
+```
+
+The tab view will still react to changes in the dimension and adjust accordingly to accommodate things like orientation change.
+
+### Optimize large number of routes
+
+If you've a large number of routes, especially images, it can slow the animation down a lot. You can instead render a limited number of routes.
+
+For example, do the following to render only 2 routes on each side:
+
+```js
+const renderScene = ({ route }) => {
+  if (Math.abs(index - routes.indexOf(route)) > 2) {
+    return <View />;
+  }
+
+  return <MySceneComponent route={route} />;
+};
+```
+
+### Avoid rendering TabView inside ScrollView
+
+Nesting the `TabView` inside a vertical `ScrollView` will disable the optimizations in the `FlatList` components rendered inside the `TabView`. So avoid doing it if possible.
+
+### Use `lazy` and `renderLazyPlaceholder` props to render routes as needed
+
+The `lazy` option is disabled by default to provide a smoother tab switching experience, but you can enable it and provide a placeholder component for a better lazy loading experience. Enabling `lazy` can improve initial load performance by rendering routes only when they come into view. Refer the [prop reference](#lazy) for more details.
diff --git a/versioned_docs/version-6.x/troubleshooting.md b/versioned_docs/version-6.x/troubleshooting.md
index 4780a529e6b..51436d92854 100755
--- a/versioned_docs/version-6.x/troubleshooting.md
+++ b/versioned_docs/version-6.x/troubleshooting.md
@@ -18,19 +18,19 @@ If the module points to a local file (i.e. the name of the module starts with `.
 
 If you're using Expo, run:
 
-```sh
+```bash
 expo start -c
 ```
 
 If you're not using Expo, run:
 
-```sh
+```bash
 npx react-native start --reset-cache
 ```
 
 If that doesn't work, you can also try the following:
 
-```sh
+```bash
 rm -rf $TMPDIR/metro-bundler-cache-*
 ```
 
@@ -48,7 +48,7 @@ Sometimes it might even be due to a corrupt installation. If clearing cache didn
 
 Sometimes the error may look like this:
 
-```sh
+```bash
 Error: While trying to resolve module "@react-navigation/native" from file "/path/to/src/App.js", the package "/path/to/node_modules/@react-navigation/native/package.json" was successfully found. However, this package itself specifies a "main" module field that could not be resolved ("/path/to/node_modules/@react-navigation/native/src/index.tsx"
 ```
 
@@ -64,13 +64,13 @@ If it's missing these extensions, add them and then clear metro cache as shown i
 
 This might happen if you have an old version of the `metro-react-native-babel-preset` package. Try upgrading it to the latest version.
 
-```sh npm2yarn
+```bash npm2yarn
 npm install --save-dev metro-react-native-babel-preset
 ```
 
 If you have `@babel/core` installed, also upgrade it to latest version.
 
-```sh npm2yarn
+```bash npm2yarn
 npm install --save-dev @babel/core
 ```
 
@@ -78,7 +78,7 @@ If upgrading the packages don't help, you can also try deleting your `node_modul
 
 If you use `npm`:
 
-```sh
+```bash
 rm -rf node_modules
 rm package-lock.json
 npm install
@@ -86,7 +86,7 @@ npm install
 
 If you use `yarn`:
 
-```sh
+```bash
 rm -rf node_modules
 rm yarn.lock
 yarn
@@ -98,7 +98,7 @@ After upgrading or reinstalling the packages, you should also clear Metro bundle
 
 This might happen if you have an old version of TypeScript in your project. You can try upgrading it:
 
-```sh npm2yarn
+```bash npm2yarn
 npm install --save-dev typescript
 ```
 
@@ -108,13 +108,13 @@ This and some similar errors might occur if you have a bare React Native project
 
 Linking is automatic from React Native 0.60, so if you have linked the library manually, first unlink it:
 
-```sh
+```bash
 react-native unlink react-native-gesture-handler
 ```
 
 If you're testing on iOS and use Mac, make sure you have run `pod install` in the `ios/` folder:
 
-```sh
+```bash
 cd ios
 pod install
 cd ..
@@ -128,13 +128,13 @@ This and some similar errors might occur if you have a bare React Native project
 
 Linking is automatic from React Native 0.60, so if you have linked the library manually, first unlink it:
 
-```sh
+```bash
 react-native unlink react-native-safe-area-context
 ```
 
 If you're testing on iOS and use Mac, make sure you have run `pod install` in the `ios/` folder:
 
-```sh
+```bash
 cd ios
 pod install
 cd ..
@@ -148,7 +148,7 @@ This might occur if you have multiple versions of [`react-native-safe-area-conte
 
 If you're using Expo managed workflow, it's likely that you have installed an incompatible version. To install the correct version, run:
 
-```sh
+```bash
 npx expo install react-native-safe-area-context
 ```
 
@@ -156,13 +156,13 @@ If it didn't fix the error or you're not using Expo managed workflow, you'll nee
 
 If you use `yarn`, run:
 
-```sh
+```bash
 yarn why react-native-safe-area-context
 ```
 
 If you use `npm`, run:
 
-```sh
+```bash
 npm ls react-native-safe-area-context
 ```
 
@@ -180,13 +180,13 @@ If you use `yarn`, you can also temporarily override the version being installed
 
 And then run:
 
-```sh
+```bash
 yarn
 ```
 
 If you're on iOS and not using Expo managed workflow, also run:
 
-```sh
+```bash
 cd ios
 pod install
 cd ..
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 17e46e13526..00a732465a5 100755
--- a/versioned_docs/version-6.x/upgrading-from-5.x.md
+++ b/versioned_docs/version-6.x/upgrading-from-5.x.md
@@ -27,13 +27,13 @@ To upgrade `react-native-safe-area-context` and `react-native-screens` to the la
 
 For Expo managed projects:
 
-```sh
+```bash
 npx expo install react-native-safe-area-context react-native-screens
 ```
 
 For bare React Native projects:
 
-```sh npm2yarn
+```bash npm2yarn
 npm install react-native-safe-area-context react-native-screens
 ```
 
@@ -133,7 +133,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:
 
-```sh npm2yarn
+```bash npm2yarn
 npm install @react-navigation/native
 ```
 
@@ -332,7 +332,7 @@ The following changes are in the `@react-navigation/stack` package.
 
 To install the 6.x version of `@react-navigation/stack`, run:
 
-```sh npm2yarn
+```bash npm2yarn
 npm install @react-navigation/stack
 ```
 
@@ -448,7 +448,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:
 
-```sh npm2yarn
+```bash npm2yarn
 npm install @react-navigation/native-stack
 ```
 
@@ -488,7 +488,7 @@ The following changes are in the `@react-navigation/bottom-tabs` package.
 
 To install the 6.x version of `@react-navigation/bottom-tabs`, run:
 
-```sh npm2yarn
+```bash npm2yarn
 npm install @react-navigation/bottom-tabs
 ```
 
@@ -545,7 +545,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:
 
-```sh npm2yarn
+```bash npm2yarn
 npm install @react-navigation/material-top-tabs react-native-tab-view
 ```
 
@@ -553,13 +553,13 @@ To upgrade `react-native-pager-view` to the latest supported version, do the fol
 
 For Expo managed projects:
 
-```sh
+```bash
 npx expo install react-native-pager-view
 ```
 
 For bare React Native projects:
 
-```sh npm2yarn
+```bash npm2yarn
 npm install react-native-pager-view
 ```
 
@@ -608,7 +608,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:
 
-```sh npm2yarn
+```bash npm2yarn
 npm install @react-navigation/material-bottom-tabs
 ```
 
@@ -622,7 +622,7 @@ The following changes are in the `@react-navigation/drawer` package.
 
 To install the 6.x version of `@react-navigation/drawer`, run:
 
-```sh npm2yarn
+```bash npm2yarn
 npm install @react-navigation/drawer
 ```
 
@@ -706,7 +706,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:
 
-```sh npm2yarn
+```bash npm2yarn
 npm install @react-navigation/elements
 ```
 
diff --git a/versioned_docs/version-7.x/configuring-links.md b/versioned_docs/version-7.x/configuring-links.md
index 4040b1f00c2..d14718e3adb 100644
--- a/versioned_docs/version-7.x/configuring-links.md
+++ b/versioned_docs/version-7.x/configuring-links.md
@@ -726,7 +726,7 @@ In the example app, you will use the Expo managed workflow. The guide will focus
 
 First, you need to decide the navigation structure of your app. To keep it simple, the main navigator will be bottom-tabs navigator with two screens. Its first screen will be a simple stack navigator, called `HomeStack`, with two screens: `Home` and `Profile`, and the second tabs screen will be just a simple one without any nested navigators, called `Settings`:
 
-```sh
+```bash
 BottomTabs
 ├── Stack (HomeStack)
 │   ├── Home
diff --git a/versioned_docs/version-7.x/contributing.md b/versioned_docs/version-7.x/contributing.md
index 391e337bf06..aa31a3cb0b6 100755
--- a/versioned_docs/version-7.x/contributing.md
+++ b/versioned_docs/version-7.x/contributing.md
@@ -111,7 +111,7 @@ Much like the issue template, the [pull request template](https://github.com/rea
 - Fork the [`repo`](https://github.com/react-navigation/react-navigation) on GitHub
 - Run these commands in the terminal to download locally and install it:
 
-```sh
+```bash
 git clone https://github.com/<USERNAME>/navigation-ex.git
 cd navigation-ex
 git remote add upstream https://github.com/react-navigation/react-navigation.git
@@ -124,25 +124,25 @@ The project uses a monorepo structure for the packages managed by [yarn workspac
 
 Look around. Match the style of the rest of the codebase. This project uses ESLint to ensure consistency throughout the project. You can check your project by running:
 
-```sh
+```bash
 yarn lint
 ```
 
 If any errors occur you'll either have to manually fix them or you can attempt to automatically fix them by running:
 
-```sh
+```bash
 yarn lint --fix
 ```
 
 The codebase is written in TypeScript, and must pass typecheck. To typecheck files, run:
 
-```sh
+```bash
 yarn typescript
 ```
 
 It's useful to run typechecking in watch mode when working on the project. To do it, run:
 
-```sh
+```bash
 yarn typescript --watch
 ```
 
@@ -152,7 +152,7 @@ The [example app](https://github.com/react-navigation/react-navigation/tree/main
 
 While developing, you can run the [example app](https://github.com/react-navigation/react-navigation/tree/main/example) with [Expo](https://expo.io/) to test your changes:
 
-```sh
+```bash
 yarn example start
 ```
 
@@ -160,13 +160,13 @@ yarn example start
 
 React Navigation has tests implemented in [Jest](https://facebook.github.io/jest/). To run either of these, from the React Navigation directory, run either of the following commands (after installing the `node_modules`) to run tests or type-checking.
 
-```sh
+```bash
 yarn test
 ```
 
 It's useful to run tests in watch mode when working on the project. To do it, run:
 
-```sh
+```bash
 yarn test --watch
 ```
 
diff --git a/versioned_docs/version-7.x/deep-linking.md b/versioned_docs/version-7.x/deep-linking.md
index b9afa3cb2bc..6791958ceeb 100755
--- a/versioned_docs/version-7.x/deep-linking.md
+++ b/versioned_docs/version-7.x/deep-linking.md
@@ -29,7 +29,7 @@ First, you will want to specify a URL scheme for your app. This corresponds to t
 
 Next, install `expo-linking` which we'd need to get the deep link prefix:
 
-```sh
+```bash
 npx expo install expo-linking
 ```
 
@@ -103,7 +103,7 @@ Now you need to add the scheme to your project configuration.
 
 The easiest way to do this is with the `uri-scheme` package by running the following:
 
-```sh
+```bash
 npx uri-scheme add mychat --ios
 ```
 
@@ -193,13 +193,13 @@ Before testing deep links, make sure that you rebuild and install the app in you
 
 If you're testing on iOS, run:
 
-```sh
+```bash
 npx react-native run-ios
 ```
 
 If you're testing on Android, run:
 
-```sh
+```bash
 npx react-native run-android
 ```
 
@@ -211,19 +211,19 @@ If you want to test with your custom scheme in your Expo app, you will need rebu
 
 The `uri-scheme` package is a command line tool that can be used to test deep links on both iOS & Android. It can be used as follows:
 
-```sh
+```bash
 npx uri-scheme open [your deep link] --[ios|android]
 ```
 
 For example:
 
-```sh
+```bash
 npx uri-scheme open "mychat://chat/jane" --ios
 ```
 
 Or if using Expo client:
 
-```sh
+```bash
 npx uri-scheme open "exp://127.0.0.1:19000/--/chat/jane" --ios
 ```
 
@@ -231,13 +231,13 @@ npx uri-scheme open "exp://127.0.0.1:19000/--/chat/jane" --ios
 
 The `xcrun` command can be used as follows to test deep links with the iOS simulator:
 
-```sh
+```bash
 xcrun simctl openurl booted [your deep link]
 ```
 
 For example:
 
-```sh
+```bash
 xcrun simctl openurl booted "mychat://chat/jane"
 ```
 
@@ -245,19 +245,19 @@ xcrun simctl openurl booted "mychat://chat/jane"
 
 The `adb` command can be used as follows to test deep links with the Android emulator or a connected device:
 
-```sh
+```bash
 adb shell am start -W -a android.intent.action.VIEW -d [your deep link] [your android package name]
 ```
 
 For example:
 
-```sh
+```bash
 adb shell am start -W -a android.intent.action.VIEW -d "mychat://chat/jane" com.simpleapp
 ```
 
 Or if using Expo client:
 
-```sh
+```bash
 adb shell am start -W -a android.intent.action.VIEW -d "exp://127.0.0.1:19000/--/chat/jane" host.exp.exponent
 ```
 
diff --git a/versioned_docs/version-7.x/drawer-layout.md b/versioned_docs/version-7.x/drawer-layout.md
new file mode 100644
index 00000000000..e05c774dcec
--- /dev/null
+++ b/versioned_docs/version-7.x/drawer-layout.md
@@ -0,0 +1,267 @@
+---
+id: drawer-layout
+title: React Native Drawer Layout
+sidebar_label: Drawer Layout
+---
+
+A cross-platform Drawer component for React Native implemented using [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/).
+
+<div style={{ display: 'flex', margin: '16px 0' }}>
+  <video playsInline autoPlay muted loop>
+    <source src="/assets/navigators/drawer/drawer.mov" />
+  </video>
+</div>
+
+This package doesn't integrate with React Navigation. If you want to integrate the drawer layout with React Navigation's navigation system, e.g. want to show screens in the drawer and be able to navigate between them using `navigation.navigate` etc, use [Drawer Navigator](drawer-navigator.md) instead.
+
+## Installation
+
+To use this package, open a Terminal in the project root and run:
+
+```bash npm2yarn
+npm install react-native-drawer-layout
+```
+
+Then, you need to install and configure the libraries that are required by the drawer:
+
+1. First, install [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/).
+
+   If you have a Expo managed project, in your project directory, run:
+
+   ```bash
+   npx expo install react-native-gesture-handler react-native-reanimated
+   ```
+
+   If you have a bare React Native project, in your project directory, run:
+
+   ```bash npm2yarn
+   npm install react-native-gesture-handler react-native-reanimated
+   ```
+
+   The Drawer supports both Reanimated 1 and Reanimated 2. If you want to use Reanimated 2, make sure to configure it following the [installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation).
+
+2. To finalize installation of `react-native-gesture-handler`, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
+
+   ```js
+   import 'react-native-gesture-handler';
+   ```
+
+   > Note: If you are building for Android or iOS, do not skip this step, or your app may crash in production even if it works fine in development. This is not applicable to other platforms.
+
+3. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
+
+```bash
+npx pod-install ios
+```
+
+We're done! Now you can build and run the app on your device/simulator.
+
+## Quick start
+
+```js
+import * as React from 'react';
+import { Button, Text } from 'react-native';
+import { Drawer } from 'react-native-drawer-layout';
+
+export default function DrawerExample() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Drawer
+      open={open}
+      onOpen={() => setOpen(true)}
+      onClose={() => setOpen(false)}
+      renderDrawerContent={() => {
+        return <Text>Drawer content</Text>;
+      }}
+    >
+      <Button
+        onPress={() => setOpen((prevOpen) => !prevOpen)}
+        title={`${open ? 'Close' : 'Open'} drawer`}
+      />
+    </Drawer>
+  );
+}
+```
+
+## API reference
+
+The package exports a `Drawer` component which is the one you'd use to render the drawer.
+
+### `Drawer`
+
+Component responsible for rendering a drawer with animations and gestures.
+
+#### Drawer Props
+
+##### `open`
+
+Whether the drawer is open or not.
+
+##### `onOpen`
+
+Callback which is called when the drawer is opened.
+
+##### `onClose`
+
+Callback which is called when the drawer is closed.
+
+##### `renderDrawerContent`
+
+Callback which returns a react element to render as the content of the drawer.
+
+##### `layout`
+
+Object containing the layout of the container. Defaults to the dimensions of the application's window.
+
+##### `drawerPosition`
+
+Position of the drawer on the screen. Defaults to `right` in RTL mode, otherwise `left`.
+
+##### `drawerType`
+
+Type of the drawer. It determines how the drawer looks and animates.
+
+- `front`: Traditional drawer which covers the screen with a overlay behind it.
+- `back`: The drawer is revealed behind the screen on swipe.
+- `slide`: Both the screen and the drawer slide on swipe to reveal the drawer.
+- `permanent`: A permanent drawer is shown as a sidebar.
+
+Defaults to `slide` on iOS and `front` on other platforms.
+
+##### `drawerStyle`
+
+Style object for the drawer. You can pass a custom background color for drawer or a custom width for the drawer.
+
+##### `overlayStyle`
+
+Style object for the overlay.
+
+##### `hideStatusBarOnOpen`
+
+Whether to hide the status bar when the drawer is open. Defaults to `false`.
+
+##### `keyboardDismissMode`
+
+Whether to dismiss the keyboard when the drawer is open. Supported values are:
+
+- `none`: The keyboard will not be dismissed when the drawer is open.
+- `on-drag`: The keyboard will be dismissed when the drawer is opened by a swipe gesture.
+
+Defaults to `on-drag`.
+
+##### `statusBarAnimation`
+
+Animation to use when the status bar is hidden. Supported values are:
+
+- `slide`: The status bar will slide out of view.
+- `fade`: The status bar will fade out of view.
+- `none`: The status bar will not animate.
+
+Use it in combination with `hideStatusBarOnOpen`.
+
+##### `swipeEnabled`
+
+Whether to enable swipe gestures to open the drawer. Defaults to `true`.
+
+Swipe gestures are only supported on iOS and Android.
+
+##### `swipeEdgeWidth`
+
+How far from the edge of the screen the swipe gesture should activate. Defaults to `32`.
+
+This is only supported on iOS and Android.
+
+##### `swipeMinDistance`
+
+Minimum swipe distance that should activate opening the drawer. Defaults to `60`.
+
+This is only supported on iOS and Android.
+
+##### `swipeMinVelocity`
+
+Minimum swipe velocity that should activate opening the drawer. Defaults to `500`.
+
+This is only supported on iOS and Android.
+
+##### `gestureHandlerProps`
+
+Props to pass to the underlying pan gesture handler.
+
+This is only supported on iOS and Android.
+
+##### `children`
+
+Content that the drawer should wrap.
+
+### `useDrawerProgress`
+
+The `useDrawerProgress` hook returns a Reanimated SharedValue (with modern implementation) or Reanimated Node (with legacy implementation) which represents the progress of the drawer. It can be used to animate the content of the screen.
+
+Example with modern implementation:
+
+```js
+import { Animated } from 'react-native-reanimated';
+import { useDrawerProgress } from 'react-native-drawer-layout';
+
+// ...
+
+function MyComponent() {
+  const progress = useDrawerProgress();
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: interpolate(progress, [0, 1], [-100, 0]),
+        },
+      ],
+    };
+  });
+
+  return <Animated.View style={animatedStyle}>{/* ... */}</Animated.View>;
+}
+```
+
+Example with legacy implementation:
+
+```js
+import { Animated } from 'react-native-reanimated';
+import { useDrawerProgress } from 'react-native-drawer-layout';
+
+// ...
+
+function MyComponent() {
+  const progress = useDrawerProgress();
+
+  // If you are on react-native-reanimated 1.x, use `Animated.interpolate` instead of `Animated.interpolateNode`
+  const translateX = Animated.interpolateNode(progress, {
+    inputRange: [0, 1],
+    outputRange: [-100, 0],
+  });
+
+  return (
+    <Animated.View style={{ transform: [{ translateX }] }}>
+      {/* ... */}
+    </Animated.View>
+  );
+}
+```
+
+If you are using class components, you can use the `DrawerProgressContext` to get the progress value.
+
+```js
+import { DrawerProgressContext } from 'react-native-drawer-layout';
+
+// ...
+
+class MyComponent extends React.Component {
+  static contextType = DrawerProgressContext;
+
+  render() {
+    const progress = this.context;
+
+    // ...
+  }
+}
+```
diff --git a/versioned_docs/version-7.x/drawer-navigator.md b/versioned_docs/version-7.x/drawer-navigator.md
index c95b9204489..b40cdb5ebe7 100644
--- a/versioned_docs/version-7.x/drawer-navigator.md
+++ b/versioned_docs/version-7.x/drawer-navigator.md
@@ -4,7 +4,7 @@ title: Drawer Navigator
 sidebar_label: Drawer
 ---
 
-Component that renders a navigation drawer which can be opened and closed via gestures.
+Drawer Navigator renders a navigation drawer on the side of the screen which can be opened and closed via gestures.
 
 <div style={{ display: 'flex', margin: '16px 0' }}>
   <video playsInline autoPlay muted loop>
@@ -12,6 +12,8 @@ Component that renders a navigation drawer which can be opened and closed via ge
   </video>
 </div>
 
+This wraps [`react-native-drawer-layout`](drawer-layout.md). If you want to use the tab view without React Navigation integration, use the library directly instead.
+
 ## Installation
 
 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):
@@ -26,7 +28,7 @@ Then, you need to install and configure the libraries that are required by the d
 
    If you have a Expo managed project, in your project directory, run:
 
-   ```sh
+   ```bash
    npx expo install react-native-gesture-handler react-native-reanimated
    ```
 
@@ -48,7 +50,7 @@ Then, you need to install and configure the libraries that are required by the d
 
 3. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
 
-```sh
+```bash
 npx pod-install ios
 ```
 
diff --git a/versioned_docs/version-7.x/elements.md b/versioned_docs/version-7.x/elements.md
index 627359d196e..9d424f9ca40 100644
--- a/versioned_docs/version-7.x/elements.md
+++ b/versioned_docs/version-7.x/elements.md
@@ -1,14 +1,16 @@
 ---
 id: elements
 title: Elements Library
-sidebar_label: Elements Library
+sidebar_label: Elements
 ---
 
 A component library containing the UI elements and helpers used in React Navigation. It can be useful if you're building your own navigator, or want to reuse a default functionality in your app.
 
+## Installation
+
 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):
 
-```sh npm2yarn
+```bash npm2yarn
 npm install @react-navigation/elements
 ```
 
diff --git a/versioned_docs/version-7.x/getting-started.md b/versioned_docs/version-7.x/getting-started.md
index 9d8f4f1a5c4..2c70f603811 100755
--- a/versioned_docs/version-7.x/getting-started.md
+++ b/versioned_docs/version-7.x/getting-started.md
@@ -39,7 +39,7 @@ The libraries we will install now are [`react-native-screens`](https://github.co
 
 In your project directory, run:
 
-```sh
+```bash
 npx expo install react-native-screens react-native-safe-area-context
 ```
 
@@ -61,7 +61,7 @@ From React Native 0.60 and higher, [linking is automatic](https://github.com/rea
 
 If you're on a Mac and developing for iOS, you need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
 
-```sh
+```bash
 npx pod-install ios
 ```
 
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 252f4f3e4b8..8066f8753d0 100755
--- a/versioned_docs/version-7.x/material-top-tab-navigator.md
+++ b/versioned_docs/version-7.x/material-top-tab-navigator.md
@@ -6,14 +6,14 @@ sidebar_label: Material Top Tabs
 
 A material-design themed tab bar on the top of the screen that lets you switch between different routes by tapping the tabs or swiping horizontally. Transitions are animated by default. Screen components for each route are mounted immediately.
 
-This wraps [`react-native-tab-view`](https://github.com/react-navigation/react-navigation/tree/main/packages/react-native-tab-view).
-
 <div style={{ display: 'flex', margin: '16px 0' }}>
   <video playsInline autoPlay muted loop>
     <source src="/assets/navigators/tabs/material-top-tabs.mov" />
   </video>
 </div>
 
+This wraps [`react-native-tab-view`](tab-view.md). If you want to use the tab view without React Navigation integration, use the library directly instead.
+
 ## Installation
 
 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):
@@ -26,7 +26,7 @@ Then, you need to install [`react-native-pager-view`](https://github.com/callsta
 
 If you have a Expo managed project, in your project directory, run:
 
-```sh
+```bash
 npx expo install react-native-pager-view
 ```
 
@@ -38,7 +38,7 @@ npm install react-native-pager-view
 
 If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
 
-```sh
+```bash
 npx pod-install ios
 ```
 
diff --git a/versioned_docs/version-7.x/stack-navigator.md b/versioned_docs/version-7.x/stack-navigator.md
index 280071e18a5..200aa575d4b 100755
--- a/versioned_docs/version-7.x/stack-navigator.md
+++ b/versioned_docs/version-7.x/stack-navigator.md
@@ -30,7 +30,7 @@ Then, you need to install and configure the libraries that are required by the s
 
    If you have a Expo managed project, in your project directory, run:
 
-   ```sh
+   ```bash
    npx expo install react-native-gesture-handler
    ```
 
@@ -52,7 +52,7 @@ Then, you need to install and configure the libraries that are required by the s
 
    If you have a Expo managed project, in your project directory, run:
 
-   ```sh
+   ```bash
    npx expo install @react-native-masked-view/masked-view
    ```
 
@@ -64,7 +64,7 @@ Then, you need to install and configure the libraries that are required by the s
 
 4. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
 
-  ```sh
+  ```bash
   npx pod-install ios
   ```
 
diff --git a/versioned_docs/version-7.x/tab-view.md b/versioned_docs/version-7.x/tab-view.md
new file mode 100644
index 00000000000..c89867bdce7
--- /dev/null
+++ b/versioned_docs/version-7.x/tab-view.md
@@ -0,0 +1,628 @@
+---
+id: tab-view
+title: React Native Tab View
+sidebar_label: Tab View
+---
+
+React Native Tab View is a cross-platform Tab View component for React Native implemented using [`react-native-pager-view`](https://github.com/callstack/react-native-viewpager) on Android & iOS, and [PanResponder](https://reactnative.dev/docs/panresponder) on Web, macOS, and Windows.
+
+It follows material design guidelines by default, but you can also use your own custom tab bar or position the tab bar at the bottom.
+
+<div style={{ display: 'flex', margin: '16px 0' }}>
+  <img src="/assets/libraries/tab-view.gif" width="360px" />
+</div>
+
+This package doesn't integrate with React Navigation. If you want to integrate the tab view with React Navigation's navigation system, e.g. want to show screens in the tab bar and be able to navigate between them using `navigation.navigate` etc, use [Material Top Tab Navigator](material-top-tab-navigator.md) instead.
+
+## Installation
+
+To use this package, open a Terminal in the project root and run:
+
+```bash npm2yarn
+npm install react-native-tab-view
+```
+
+Next, install [`react-native-pager-view`](https://github.com/callstack/react-native-viewpager) if you plan to support iOS and Android.
+
+If you are using Expo, to ensure that you get the compatible versions of the libraries, run:
+
+```bash
+expo install react-native-pager-view
+```
+
+If you are not using Expo, run the following:
+
+```bash npm2yarn
+npm install react-native-pager-view
+```
+
+We're done! Now you can build and run the app on your device/simulator.
+
+## Quick start
+
+```js
+import * as React from 'react';
+import { View, useWindowDimensions } from 'react-native';
+import { TabView, SceneMap } from 'react-native-tab-view';
+
+const FirstRoute = () => (
+  <View style={{ flex: 1, backgroundColor: '#ff4081' }} />
+);
+
+const SecondRoute = () => (
+  <View style={{ flex: 1, backgroundColor: '#673ab7' }} />
+);
+
+const renderScene = SceneMap({
+  first: FirstRoute,
+  second: SecondRoute,
+});
+
+export default function TabViewExample() {
+  const layout = useWindowDimensions();
+
+  const [index, setIndex] = React.useState(0);
+  const [routes] = React.useState([
+    { key: 'first', title: 'First' },
+    { key: 'second', title: 'Second' },
+  ]);
+
+  return (
+    <TabView
+      navigationState={{ index, routes }}
+      renderScene={renderScene}
+      onIndexChange={setIndex}
+      initialLayout={{ width: layout.width }}
+    />
+  );
+}
+```
+
+[Try this example on Snack](https://snack.expo.io/@satya164/react-native-tab-view-quick-start)
+
+## More examples on Snack
+
+- [Custom Tab Bar](https://snack.expo.io/@satya164/react-native-tab-view-custom-tabbar)
+- [Lazy Load](https://snack.expo.io/@satya164/react-native-tab-view-lazy-load)
+
+## API reference
+
+The package exports a `TabView` component which is the one you'd use to render the tab view, and a `TabBar` component which is the default tab bar implementation.
+
+### `TabView`
+
+Container component responsible for rendering and managing tabs. Follows material design styles by default.
+
+Basic usage look like this:
+
+```js
+<TabView
+  navigationState={{ index, routes }}
+  onIndexChange={setIndex}
+  renderScene={SceneMap({
+    first: FirstRoute,
+    second: SecondRoute,
+  })}
+/>
+```
+
+#### TabView Props
+
+##### `navigationState` (`required`)
+
+State for the tab view. The state should contain the following properties:
+
+- `index`: a number representing the index of the active route in the `routes` array
+- `routes`: an array containing a list of route objects used for rendering the tabs
+
+Each route object should contain the following properties:
+
+- `key`: a unique key to identify the route (required)
+- `title`: title for the route to display in the tab bar
+- `icon`: icon for the route to display in the tab bar
+- `accessibilityLabel`: accessibility label for the tab button
+- `testID`: test id for the tab button
+
+Example:
+
+```js
+{
+  index: 1,
+  routes: [
+    { key: 'music', title: 'Music' },
+    { key: 'albums', title: 'Albums' },
+    { key: 'recents', title: 'Recents' },
+    { key: 'purchased', title: 'Purchased' },
+  ]
+}
+```
+
+`TabView` is a controlled component, which means the `index` needs to be updated via the `onIndexChange` callback.
+
+##### `onIndexChange` (`required`)
+
+Callback which is called on tab change, receives the index of the new tab as argument.
+The navigation state needs to be updated when it's called, otherwise the change is dropped.
+
+##### `renderScene` (`required`)
+
+Callback which returns a react element to render as the page for the tab. Receives an object containing the route as the argument:
+
+```js
+const renderScene = ({ route, jumpTo }) => {
+  switch (route.key) {
+    case 'music':
+      return <MusicRoute jumpTo={jumpTo} />;
+    case 'albums':
+      return <AlbumsRoute jumpTo={jumpTo} />;
+  }
+};
+```
+
+You need to make sure that your individual routes implement a `shouldComponentUpdate` to improve the performance. To make it easier to specify the components, you can use the `SceneMap` helper.
+
+`SceneMap` takes an object with the mapping of `route.key` to React components and returns a function to use with `renderScene` prop.
+
+```js
+import { SceneMap } from 'react-native-tab-view';
+
+...
+
+const renderScene = SceneMap({
+  music: MusicRoute,
+  albums: AlbumsRoute,
+});
+```
+
+Specifying the components this way is easier and takes care of implementing a `shouldComponentUpdate` method.
+
+Each scene receives the following props:
+
+- `route`: the current route rendered by the component
+- `jumpTo`: method to jump to other tabs, takes a `route.key` as it's argument
+- `position`: animated node which represents the current position
+
+The `jumpTo` method can be used to navigate to other tabs programmatically:
+
+```js
+props.jumpTo('albums');
+```
+
+All the scenes rendered with `SceneMap` are optimized using `React.PureComponent` and don't re-render when parent's props or states change. If you need more control over how your scenes update (e.g. - triggering a re-render even if the `navigationState` didn't change), use `renderScene` directly instead of using `SceneMap`.
+
+**IMPORTANT:** **Do not** pass inline functions to `SceneMap`, for example, don't do the following:
+
+```js
+SceneMap({
+  first: () => <FirstRoute foo={props.foo} />,
+  second: SecondRoute,
+});
+```
+
+Always define your components elsewhere in the top level of the file. If you pass inline functions, it'll re-create the component every render, which will cause the entire route to unmount and remount every change. It's very bad for performance and will also cause any local state to be lost.
+
+If you need to pass additional props, use a custom `renderScene` function:
+
+```js
+const renderScene = ({ route }) => {
+  switch (route.key) {
+    case 'first':
+      return <FirstRoute foo={this.props.foo} />;
+    case 'second':
+      return <SecondRoute />;
+    default:
+      return null;
+  }
+};
+```
+
+##### `renderTabBar`
+
+Callback which returns a custom React Element to use as the tab bar:
+
+```js
+import { TabBar } from 'react-native-tab-view';
+
+...
+
+<TabView
+  renderTabBar={props => <TabBar {...props} />}
+  ...
+/>
+```
+
+If this is not specified, the default tab bar is rendered. You pass this props to customize the default tab bar, provide your own tab bar, or disable the tab bar completely.
+
+```js
+<TabView
+  renderTabBar={() => null}
+  ...
+/>
+```
+
+##### `tabBarPosition`
+
+Position of the tab bar in the tab view. Possible values are `'top'` and `'bottom'`. Defaults to `'top'`.
+
+##### `lazy`
+
+Function which takes an object with the current route and returns a boolean to indicate whether to lazily render the scenes.
+
+By default all scenes are rendered to provide a smoother swipe experience. But you might want to defer the rendering of unfocused scenes until the user sees them. To enable lazy rendering for a particular scene, return `true` from `getLazy` for that `route`:
+
+```js
+<TabView
+  lazy={({ route }) => route.name === 'Albums'}
+  ...
+/>
+```
+
+When you enable lazy rendering for a screen, it will usually take some time to render when it comes into focus. You can use the `renderLazyPlaceholder` prop to customize what the user sees during this short period.
+
+You can also pass a boolean to enable lazy for all of the scenes:
+
+```js
+<TabView
+  lazy
+/>
+```
+
+##### `lazyPreloadDistance`
+
+When `lazy` is enabled, you can specify how many adjacent routes should be preloaded with this prop. This value defaults to `0` which means lazy pages are loaded as they come into the viewport.
+
+##### `renderLazyPlaceholder`
+
+Callback which returns a custom React Element to render for routes that haven't been rendered yet. Receives an object containing the route as the argument. The `lazy` prop also needs to be enabled.
+
+This view is usually only shown for a split second. Keep it lightweight.
+
+By default, this renders `null`.
+
+##### `keyboardDismissMode`
+
+String indicating whether the keyboard gets dismissed in response to a drag gesture. Possible values are:
+
+- `'auto'` (default): the keyboard is dismissed when the index changes.
+- `'on-drag'`: the keyboard is dismissed when a drag begins.
+- `'none'`: drags do not dismiss the keyboard.
+
+##### `swipeEnabled`
+
+Boolean indicating whether to enable swipe gestures. Swipe gestures are enabled by default. Passing `false` will disable swipe gestures, but the user can still switch tabs by pressing the tab bar.
+
+#### `animationEnabled`
+
+Enables animation when changing tab. By default it's true.
+
+##### `onSwipeStart`
+
+Callback which is called when the swipe gesture starts, i.e. the user touches the screen and moves it.
+
+##### `onSwipeEnd`
+
+Callback which is called when the swipe gesture ends, i.e. the user lifts their finger from the screen after the swipe gesture.
+
+##### `initialLayout`
+
+Object containing the initial height and width of the screens. Passing this will improve the initial rendering performance. For most apps, this is a good default:
+
+```js
+<TabView
+  initialLayout={{ width: Dimensions.get('window').width }}
+  ...
+/>
+```
+
+##### `overScrollMode`
+
+Used to override default value of pager's overScroll mode. Can be `auto`, `always` or `never` (Android only).
+
+##### `sceneContainerStyle`
+
+Style to apply to the view wrapping each screen. You can pass this to override some default styles such as overflow clipping:
+
+##### `pagerStyle`
+
+Style to apply to the pager view wrapping all the scenes.
+
+##### `style`
+
+Style to apply to the tab view container.
+
+### `TabBar`
+
+Material design themed tab bar. To customize the tab bar, you'd need to use the `renderTabBar` prop of `TabView` to render the `TabBar` and pass additional props.
+
+For example, to customize the indicator color and the tab bar background color, you can pass `indicatorStyle` and `style` props to the `TabBar` respectively:
+
+```js
+const renderTabBar = props => (
+  <TabBar
+    {...props}
+    indicatorStyle={{ backgroundColor: 'white' }}
+    style={{ backgroundColor: 'pink' }}
+  />
+);
+
+//...
+
+
+return (
+  <TabView
+    renderTabBar={renderTabBar}
+    ...
+  />
+);
+```
+
+#### TabBar Props
+
+##### `getLabelText`
+
+Function which takes an object with the current route and returns the label text for the tab. Uses `route.title` by default.
+
+```js
+<TabBar
+  getLabelText={({ route }) => route.title}
+  ...
+/>
+```
+
+##### `getAccessible`
+
+Function which takes an object with the current route and returns a boolean to indicate whether to mark a tab as `accessible`. Defaults to `true`.
+
+##### `getAccessibilityLabel`
+
+Function which takes an object with the current route and returns a accessibility label for the tab button. Uses `route.accessibilityLabel` by default if specified, otherwise uses the route title.
+
+```js
+<TabBar
+  getAccessibilityLabel={({ route }) => route.accessibilityLabel}
+  ...
+/>
+```
+
+##### `getTestID`
+
+Function which takes an object with the current route and returns a test id for the tab button to locate this tab button in tests. Uses `route.testID` by default.
+
+```js
+<TabBar
+  getTestID={({ route }) => route.testID}
+  ...
+/>
+```
+
+##### `renderIcon`
+
+Function which takes an object with the current route, focused status and color and returns a custom React Element to be used as a icon.
+
+```js
+<TabBar
+  renderIcon={({ route, focused, color }) => (
+    <Icon
+      name={focused ? 'albums' : 'albums-outlined'}
+      color={color}
+    />
+  )}
+  ...
+/>
+```
+
+##### `renderLabel`
+
+Function which takes an object with the current route, focused status and color and returns a custom React Element to be used as a label.
+
+```js
+<TabBar
+  renderLabel={({ route, focused, color }) => (
+    <Text style={{ color, margin: 8 }}>
+      {route.title}
+    </Text>
+  )}
+  ...
+/>
+```
+
+##### `renderTabBarItem`
+
+Function which takes a `TabBarItemProps` object and returns a custom React Element to be used as a tab button.
+
+##### `renderIndicator`
+
+Function which takes an object with the current route and returns a custom React Element to be used as a tab indicator.
+
+##### `renderBadge`
+
+Function which takes an object with the current route and returns a custom React Element to be used as a badge.
+
+##### `onTabPress`
+
+Function to execute on tab press. It receives the scene for the pressed tab, useful for things like scroll to top.
+
+By default, tab press also switches the tab. To prevent this behavior, you can call `preventDefault`:
+
+```js
+<TabBar
+  onTabPress={({ route, preventDefault }) => {
+    if (route.key === 'home') {
+      preventDefault();
+
+      // Do something else
+    }
+  }}
+  ...
+/>
+```
+
+##### `onTabLongPress`
+
+Function to execute on tab long press, use for things like showing a menu with more options
+
+##### `activeColor`
+
+Custom color for icon and label in the active tab.
+
+##### `inactiveColor`
+
+Custom color for icon and label in the inactive tab.
+
+##### `pressColor`
+
+Color for material ripple (Android >= 5.0 only).
+
+##### `pressOpacity`
+
+Opacity for pressed tab (iOS and Android < 5.0 only).
+
+##### `scrollEnabled`
+
+Boolean indicating whether to make the tab bar scrollable.
+
+If you set `scrollEnabled` to `true`, you should also specify a `width` in `tabStyle` to improve the initial render.
+
+##### `bounces`
+
+Boolean indicating whether the tab bar bounces when scrolling.
+
+##### `tabStyle`
+
+Style to apply to the individual tab items in the tab bar.
+
+By default, all tab items take up the same pre-calculated width based on the width of the container. If you want them to take their original width, you can specify `width: 'auto'` in `tabStyle`.
+
+##### `indicatorStyle`
+
+Style to apply to the active indicator.
+
+##### `indicatorContainerStyle`
+
+Style to apply to the container view for the indicator.
+
+##### `labelStyle`
+
+Style to apply to the tab item label.
+
+##### `contentContainerStyle`
+
+Style to apply to the inner container for tabs.
+
+##### `style` (`TabBar`)
+
+Style to apply to the tab bar container.
+
+##### `gap`
+
+Define a spacing between tabs.
+
+##### `testID`
+
+Test id for the tabBar. Can be used for scrolling the tab bar in tests
+
+## Optimization Tips
+
+### Avoid unnecessary re-renders
+
+The `renderScene` function is called every time the index changes. If your `renderScene` function is expensive, it's good idea move each route to a separate component if they don't depend on the index, and use `shouldComponentUpdate` or `React.memo` in your route components to prevent unnecessary re-renders.
+
+For example, instead of:
+
+```js
+const renderScene = ({ route }) => {
+  switch (route.key) {
+    case 'home':
+      return (
+        <View style={styles.page}>
+          <Avatar />
+          <NewsFeed />
+        </View>
+      );
+    default:
+      return null;
+  }
+};
+```
+
+Do the following:
+
+```js
+const renderScene = ({ route }) => {
+  switch (route.key) {
+    case 'home':
+      return <HomeComponent />;
+    default:
+      return null;
+  }
+};
+```
+
+Where `<HomeComponent />` is a `PureComponent` if you're using class components:
+
+```js
+export default class HomeComponent extends React.PureComponent {
+  render() {
+    return (
+      <View style={styles.page}>
+        <Avatar />
+        <NewsFeed />
+      </View>
+    );
+  }
+}
+```
+
+Or, wrapped in `React.memo` if you're using function components:
+
+```js
+function HomeComponent() {
+  return (
+    <View style={styles.page}>
+      <Avatar />
+      <NewsFeed />
+    </View>
+  );
+}
+
+export default React.memo(HomeComponent);
+```
+
+### Avoid one frame delay
+
+We need to measure the width of the container and hence need to wait before rendering some elements on the screen. If you know the initial width upfront, you can pass it in and we won't need to wait for measuring it. Most of the time, it's just the window width.
+
+For example, pass the following `initialLayout` to `TabView`:
+
+```js
+const initialLayout = {
+  height: 0,
+  width: Dimensions.get('window').width,
+};
+```
+
+The tab view will still react to changes in the dimension and adjust accordingly to accommodate things like orientation change.
+
+### Optimize large number of routes
+
+If you've a large number of routes, especially images, it can slow the animation down a lot. You can instead render a limited number of routes.
+
+For example, do the following to render only 2 routes on each side:
+
+```js
+const renderScene = ({ route }) => {
+  if (Math.abs(index - routes.indexOf(route)) > 2) {
+    return <View />;
+  }
+
+  return <MySceneComponent route={route} />;
+};
+```
+
+### Avoid rendering TabView inside ScrollView
+
+Nesting the `TabView` inside a vertical `ScrollView` will disable the optimizations in the `FlatList` components rendered inside the `TabView`. So avoid doing it if possible.
+
+### Use `lazy` and `renderLazyPlaceholder` props to render routes as needed
+
+The `lazy` option is disabled by default to provide a smoother tab switching experience, but you can enable it and provide a placeholder component for a better lazy loading experience. Enabling `lazy` can improve initial load performance by rendering routes only when they come into view. Refer the [prop reference](#lazy) for more details.
diff --git a/versioned_docs/version-7.x/troubleshooting.md b/versioned_docs/version-7.x/troubleshooting.md
index 4780a529e6b..51436d92854 100755
--- a/versioned_docs/version-7.x/troubleshooting.md
+++ b/versioned_docs/version-7.x/troubleshooting.md
@@ -18,19 +18,19 @@ If the module points to a local file (i.e. the name of the module starts with `.
 
 If you're using Expo, run:
 
-```sh
+```bash
 expo start -c
 ```
 
 If you're not using Expo, run:
 
-```sh
+```bash
 npx react-native start --reset-cache
 ```
 
 If that doesn't work, you can also try the following:
 
-```sh
+```bash
 rm -rf $TMPDIR/metro-bundler-cache-*
 ```
 
@@ -48,7 +48,7 @@ Sometimes it might even be due to a corrupt installation. If clearing cache didn
 
 Sometimes the error may look like this:
 
-```sh
+```bash
 Error: While trying to resolve module "@react-navigation/native" from file "/path/to/src/App.js", the package "/path/to/node_modules/@react-navigation/native/package.json" was successfully found. However, this package itself specifies a "main" module field that could not be resolved ("/path/to/node_modules/@react-navigation/native/src/index.tsx"
 ```
 
@@ -64,13 +64,13 @@ If it's missing these extensions, add them and then clear metro cache as shown i
 
 This might happen if you have an old version of the `metro-react-native-babel-preset` package. Try upgrading it to the latest version.
 
-```sh npm2yarn
+```bash npm2yarn
 npm install --save-dev metro-react-native-babel-preset
 ```
 
 If you have `@babel/core` installed, also upgrade it to latest version.
 
-```sh npm2yarn
+```bash npm2yarn
 npm install --save-dev @babel/core
 ```
 
@@ -78,7 +78,7 @@ If upgrading the packages don't help, you can also try deleting your `node_modul
 
 If you use `npm`:
 
-```sh
+```bash
 rm -rf node_modules
 rm package-lock.json
 npm install
@@ -86,7 +86,7 @@ npm install
 
 If you use `yarn`:
 
-```sh
+```bash
 rm -rf node_modules
 rm yarn.lock
 yarn
@@ -98,7 +98,7 @@ After upgrading or reinstalling the packages, you should also clear Metro bundle
 
 This might happen if you have an old version of TypeScript in your project. You can try upgrading it:
 
-```sh npm2yarn
+```bash npm2yarn
 npm install --save-dev typescript
 ```
 
@@ -108,13 +108,13 @@ This and some similar errors might occur if you have a bare React Native project
 
 Linking is automatic from React Native 0.60, so if you have linked the library manually, first unlink it:
 
-```sh
+```bash
 react-native unlink react-native-gesture-handler
 ```
 
 If you're testing on iOS and use Mac, make sure you have run `pod install` in the `ios/` folder:
 
-```sh
+```bash
 cd ios
 pod install
 cd ..
@@ -128,13 +128,13 @@ This and some similar errors might occur if you have a bare React Native project
 
 Linking is automatic from React Native 0.60, so if you have linked the library manually, first unlink it:
 
-```sh
+```bash
 react-native unlink react-native-safe-area-context
 ```
 
 If you're testing on iOS and use Mac, make sure you have run `pod install` in the `ios/` folder:
 
-```sh
+```bash
 cd ios
 pod install
 cd ..
@@ -148,7 +148,7 @@ This might occur if you have multiple versions of [`react-native-safe-area-conte
 
 If you're using Expo managed workflow, it's likely that you have installed an incompatible version. To install the correct version, run:
 
-```sh
+```bash
 npx expo install react-native-safe-area-context
 ```
 
@@ -156,13 +156,13 @@ If it didn't fix the error or you're not using Expo managed workflow, you'll nee
 
 If you use `yarn`, run:
 
-```sh
+```bash
 yarn why react-native-safe-area-context
 ```
 
 If you use `npm`, run:
 
-```sh
+```bash
 npm ls react-native-safe-area-context
 ```
 
@@ -180,13 +180,13 @@ If you use `yarn`, you can also temporarily override the version being installed
 
 And then run:
 
-```sh
+```bash
 yarn
 ```
 
 If you're on iOS and not using Expo managed workflow, also run:
 
-```sh
+```bash
 cd ios
 pod install
 cd ..
diff --git a/versioned_sidebars/version-1.x-sidebars.json b/versioned_sidebars/version-1.x-sidebars.json
index 390493da885..ce86668c362 100644
--- a/versioned_sidebars/version-1.x-sidebars.json
+++ b/versioned_sidebars/version-1.x-sidebars.json
@@ -40,7 +40,7 @@
     ]
   },
   "api": {
-    "API Reference": [
+    "API reference": [
       "version-1.x/api-reference",
       "version-1.x/navigation-prop",
       "version-1.x/navigation-actions",
diff --git a/versioned_sidebars/version-2.x-sidebars.json b/versioned_sidebars/version-2.x-sidebars.json
index c8fd0a8736c..06234080899 100644
--- a/versioned_sidebars/version-2.x-sidebars.json
+++ b/versioned_sidebars/version-2.x-sidebars.json
@@ -16,7 +16,7 @@
       "version-2.x/react-native-screens",
       "version-2.x/limitations"
     ],
-    "Assorted Guides": [
+    "Assorted guides": [
       "version-2.x/tab-based-navigation",
       "version-2.x/drawer-based-navigation",
       "version-2.x/auth-flow",
@@ -41,7 +41,7 @@
       "version-2.x/navigation-views",
       "version-2.x/transitioner"
     ],
-    "Related Resources": [
+    "Related resources": [
       "version-2.x/community-libraries-and-navigators",
       "version-2.x/more-resources"
     ],
@@ -52,7 +52,7 @@
     ]
   },
   "version-2.x-api": {
-    "API Reference": [
+    "API reference": [
       "version-2.x/api-reference",
       "version-2.x/navigation-prop",
       "version-2.x/navigation-actions",
diff --git a/versioned_sidebars/version-3.x-sidebars.json b/versioned_sidebars/version-3.x-sidebars.json
index 95c0ee7066f..77b10a6e400 100644
--- a/versioned_sidebars/version-3.x-sidebars.json
+++ b/versioned_sidebars/version-3.x-sidebars.json
@@ -38,7 +38,7 @@
       "version-3.x/web-support",
       "version-3.x/function-after-focusing-screen"
     ],
-    "API Reference": [
+    "API reference": [
       "version-3.x/navigation-prop",
       "version-3.x/navigation-context",
       "version-3.x/navigation-events",
@@ -83,7 +83,7 @@
       "version-3.x/navigation-views",
       "version-3.x/transitioner"
     ],
-    "Related Resources": [
+    "Related resources": [
       "version-3.x/community-libraries-and-navigators",
       "version-3.x/more-resources"
     ],
diff --git a/versioned_sidebars/version-4.x-sidebars.json b/versioned_sidebars/version-4.x-sidebars.json
index bcc11ede186..cfe698b2f07 100644
--- a/versioned_sidebars/version-4.x-sidebars.json
+++ b/versioned_sidebars/version-4.x-sidebars.json
@@ -40,7 +40,7 @@
       "version-4.x/react-native-screens",
       "version-4.x/upgrading-from-3.x"
     ],
-    "API Reference": [
+    "API reference": [
       "version-4.x/navigation-prop",
       "version-4.x/navigation-context",
       "version-4.x/navigation-events",
@@ -85,7 +85,7 @@
       "version-4.x/custom-routers",
       "version-4.x/navigation-views"
     ],
-    "Additional Resources": [
+    "Additional resources": [
       "version-4.x/supported-react-native-versions",
       "version-4.x/community-libraries-and-navigators",
       "version-4.x/more-resources"
diff --git a/versioned_sidebars/version-5.x-sidebars.json b/versioned_sidebars/version-5.x-sidebars.json
index 3ee30498cd4..90c79c608a6 100644
--- a/versioned_sidebars/version-5.x-sidebars.json
+++ b/versioned_sidebars/version-5.x-sidebars.json
@@ -43,7 +43,7 @@
       "version-5.x/react-native-screens",
       "version-5.x/upgrading-from-4.x"
     ],
-    "API Reference": [
+    "API reference": [
       "version-5.x/navigation-container",
       "version-5.x/server-container",
       "version-5.x/screen",
@@ -99,7 +99,7 @@
       "version-5.x/custom-routers",
       "version-5.x/custom-navigators"
     ],
-    "Additional Resources": [
+    "Additional resources": [
       "version-5.x/supported-react-native-versions",
       "version-5.x/community-libraries-and-navigators",
       "version-5.x/more-resources"
diff --git a/versioned_sidebars/version-6.x-sidebars.json b/versioned_sidebars/version-6.x-sidebars.json
index 0d150cbf161..9d10a6ae495 100644
--- a/versioned_sidebars/version-6.x-sidebars.json
+++ b/versioned_sidebars/version-6.x-sidebars.json
@@ -42,7 +42,21 @@
       "version-6.x/MST-integration",
       "version-6.x/upgrading-from-5.x"
     ],
-    "API Reference": [
+    "Navigators": [
+      "version-6.x/stack-navigator",
+      "version-6.x/native-stack-navigator",
+      "version-6.x/drawer-navigator",
+      "version-6.x/bottom-tab-navigator",
+      "version-6.x/material-bottom-tab-navigator",
+      "version-6.x/material-top-tab-navigator"
+    ],
+    "Libraries": [
+      "version-6.x/devtools",
+      "version-6.x/elements",
+      "version-6.x/tab-view",
+      "version-6.x/drawer-layout"
+    ],
+    "API reference": [
       "version-6.x/navigation-container",
       "version-6.x/server-container",
       "version-6.x/group",
@@ -54,20 +68,6 @@
       "version-6.x/navigation-events",
       "version-6.x/navigation-state",
       "version-6.x/link",
-      "version-6.x/devtools",
-      "version-6.x/elements",
-      {
-        "type": "category",
-        "label": "Navigators",
-        "items": [
-          "version-6.x/stack-navigator",
-          "version-6.x/native-stack-navigator",
-          "version-6.x/drawer-navigator",
-          "version-6.x/bottom-tab-navigator",
-          "version-6.x/material-bottom-tab-navigator",
-          "version-6.x/material-top-tab-navigator"
-        ]
-      },
       {
         "type": "category",
         "label": "Hooks",
@@ -99,7 +99,7 @@
       "version-6.x/custom-routers",
       "version-6.x/custom-navigators"
     ],
-    "Additional Resources": [
+    "Additional resources": [
       "version-6.x/migration-guides",
       "version-6.x/navigation-solutions-and-community-libraries",
       "version-6.x/more-resources"
@@ -110,4 +110,4 @@
       "version-6.x/contributing"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/versioned_sidebars/version-7.x-sidebars.json b/versioned_sidebars/version-7.x-sidebars.json
index fa0db1a57f8..8e9b5a5afe6 100644
--- a/versioned_sidebars/version-7.x-sidebars.json
+++ b/versioned_sidebars/version-7.x-sidebars.json
@@ -49,7 +49,21 @@
       "version-7.x/static-authentication",
       "version-7.x/static-combine-with-dynamic"
     ],
-    "API Reference": [
+    "Navigators": [
+      "version-7.x/stack-navigator",
+      "version-7.x/native-stack-navigator",
+      "version-7.x/drawer-navigator",
+      "version-7.x/bottom-tab-navigator",
+      "version-7.x/material-bottom-tab-navigator",
+      "version-7.x/material-top-tab-navigator"
+    ],
+    "Libraries": [
+      "version-7.x/devtools",
+      "version-7.x/elements",
+      "version-7.x/tab-view",
+      "version-7.x/drawer-layout"
+    ],
+    "API reference": [
       "version-7.x/navigation-container",
       "version-7.x/server-container",
       "version-7.x/group",
@@ -61,20 +75,6 @@
       "version-7.x/navigation-events",
       "version-7.x/navigation-state",
       "version-7.x/link",
-      "version-7.x/devtools",
-      "version-7.x/elements",
-      {
-        "type": "category",
-        "label": "Navigators",
-        "items": [
-          "version-7.x/stack-navigator",
-          "version-7.x/native-stack-navigator",
-          "version-7.x/drawer-navigator",
-          "version-7.x/bottom-tab-navigator",
-          "version-7.x/material-bottom-tab-navigator",
-          "version-7.x/material-top-tab-navigator"
-        ]
-      },
       {
         "type": "category",
         "label": "Hooks",
@@ -106,7 +106,7 @@
       "version-7.x/custom-routers",
       "version-7.x/custom-navigators"
     ],
-    "Additional Resources": [
+    "Additional resources": [
       "version-7.x/migration-guides",
       "version-7.x/navigation-solutions-and-community-libraries",
       "version-7.x/more-resources"
@@ -117,4 +117,4 @@
       "version-7.x/contributing"
     ]
   }
-}
\ No newline at end of file
+}