From 653ef8a0bac9794668f0383f90b22147af5b0f74 Mon Sep 17 00:00:00 2001
From: Jeremy Hamilton <jeremy.hamilton@tekfive.com>
Date: Wed, 16 Dec 2020 14:41:51 -0800
Subject: [PATCH] update to version 3.0.0

---
 package.json                                  |   2 +-
 website/docs/input.md                         |   8 +-
 website/docs/searchbar.md                     |   2 +-
 website/docs/testing.md                       |   4 +-
 website/versioned_docs/version-1.2.0/input.md |   2 +-
 .../versioned_docs/version-1.2.0/searchbar.md |   2 +-
 .../versioned_docs/version-1.2.0/testing.md   |   4 +-
 website/versioned_docs/version-2.0.4/badge.md | 243 -------
 .../versioned_docs/version-2.0.4/button.md    | 344 ---------
 .../version-2.0.4/button_group.md             | 308 --------
 website/versioned_docs/version-2.0.4/card.md  | 236 -------
 .../versioned_docs/version-2.0.4/checkbox.md  | 295 --------
 .../version-2.0.4/customization.md            | 429 -----------
 .../version-2.0.4/getting_started.md          |  85 ---
 website/versioned_docs/version-2.0.4/icon.md  | 271 -------
 website/versioned_docs/version-2.0.4/image.md | 100 ---
 website/versioned_docs/version-2.0.4/input.md | 322 ---------
 .../versioned_docs/version-2.0.4/listitem.md  | 667 ------------------
 .../versioned_docs/version-2.0.4/rating.md    | 306 --------
 .../versioned_docs/version-2.0.4/slider.md    | 262 -------
 .../versioned_docs/version-2.0.4/testing.md   |  48 --
 website/versioned_docs/version-2.0.4/tile.md  | 286 --------
 .../versioned_docs/version-2.0.4/tooltip.md   | 254 -------
 .../versioned_docs/version-2.2.1/avatar.md    | 412 -----------
 .../version-2.2.1/bottomsheet.md              | 121 ----
 website/versioned_docs/version-2.2.1/card.md  | 236 -------
 .../version-2.2.1/contributing.md             | 199 ------
 .../versioned_docs/version-2.2.1/divider.md   |  36 -
 .../versioned_docs/version-2.2.1/header.md    | 308 --------
 .../versioned_docs/version-2.2.1/labels.md    | 126 ----
 .../versioned_docs/version-2.2.1/listitem.md  | 667 ------------------
 .../versioned_docs/version-2.2.1/overlay.md   | 136 ----
 .../versioned_docs/version-2.2.1/overview.md  |  33 -
 .../versioned_docs/version-2.2.1/pricing.md   | 154 ----
 .../versioned_docs/version-2.2.1/searchbar.md | 397 -----------
 .../version-2.2.1/social_icons.md             | 279 --------
 website/versioned_docs/version-2.2.1/text.md  | 127 ----
 .../version-2.2.1/troubleshooting.md          | 158 -----
 .../versioned_docs/version-2.2.1/web_usage.md |  79 ---
 website/versioned_docs/version-2.3.2/input.md |   2 +-
 .../versioned_docs/version-2.3.2/searchbar.md |   2 +-
 .../versioned_docs/version-2.3.2/testing.md   |   4 +-
 .../avatar.md                                 | 122 ++--
 .../{version-2.2.1 => version-3.0.0}/badge.md |  44 +-
 .../version-3.0.0/bottomsheet.md              |  81 +++
 .../button.md                                 |  22 +-
 .../button_group.md                           |   6 +-
 website/versioned_docs/version-3.0.0/card.md  | 123 ++++
 .../checkbox.md                               | 208 +++---
 .../contributing.md                           |   0
 .../customization.md                          |  27 +
 .../divider.md                                |   0
 .../getting_started.md                        |   1 -
 .../header.md                                 | 108 +--
 .../{version-2.2.1 => version-3.0.0}/icon.md  |  72 +-
 .../{version-2.2.1 => version-3.0.0}/image.md |  66 +-
 .../{version-2.2.1 => version-3.0.0}/input.md | 110 +--
 .../labels.md                                 |   0
 .../versioned_docs/version-3.0.0/listitem.md  | 407 +++++++++++
 .../overlay.md                                |  22 +-
 .../overview.md                               |   0
 .../pricing.md                                | 118 ++--
 .../rating.md                                 | 112 +--
 .../searchbar.md                              | 232 +++---
 .../slider.md                                 |  44 +-
 .../social_icons.md                           |   0
 .../testing.md                                |   4 +-
 .../{version-2.0.4 => version-3.0.0}/text.md  |   0
 .../{version-2.2.1 => version-3.0.0}/tile.md  |  22 +-
 .../tooltip.md                                | 139 ++--
 .../troubleshooting.md                        |   0
 .../web_usage.md                              |   0
 .../version-2.0.4-sidebars.json               |  39 -
 ...ebars.json => version-3.0.0-sidebars.json} |  62 +-
 website/versions.json                         |   3 +-
 75 files changed, 1426 insertions(+), 8724 deletions(-)
 delete mode 100644 website/versioned_docs/version-2.0.4/badge.md
 delete mode 100644 website/versioned_docs/version-2.0.4/button.md
 delete mode 100644 website/versioned_docs/version-2.0.4/button_group.md
 delete mode 100644 website/versioned_docs/version-2.0.4/card.md
 delete mode 100644 website/versioned_docs/version-2.0.4/checkbox.md
 delete mode 100644 website/versioned_docs/version-2.0.4/customization.md
 delete mode 100644 website/versioned_docs/version-2.0.4/getting_started.md
 delete mode 100644 website/versioned_docs/version-2.0.4/icon.md
 delete mode 100644 website/versioned_docs/version-2.0.4/image.md
 delete mode 100644 website/versioned_docs/version-2.0.4/input.md
 delete mode 100644 website/versioned_docs/version-2.0.4/listitem.md
 delete mode 100644 website/versioned_docs/version-2.0.4/rating.md
 delete mode 100644 website/versioned_docs/version-2.0.4/slider.md
 delete mode 100644 website/versioned_docs/version-2.0.4/testing.md
 delete mode 100644 website/versioned_docs/version-2.0.4/tile.md
 delete mode 100644 website/versioned_docs/version-2.0.4/tooltip.md
 delete mode 100644 website/versioned_docs/version-2.2.1/avatar.md
 delete mode 100644 website/versioned_docs/version-2.2.1/bottomsheet.md
 delete mode 100644 website/versioned_docs/version-2.2.1/card.md
 delete mode 100644 website/versioned_docs/version-2.2.1/contributing.md
 delete mode 100644 website/versioned_docs/version-2.2.1/divider.md
 delete mode 100644 website/versioned_docs/version-2.2.1/header.md
 delete mode 100644 website/versioned_docs/version-2.2.1/labels.md
 delete mode 100644 website/versioned_docs/version-2.2.1/listitem.md
 delete mode 100644 website/versioned_docs/version-2.2.1/overlay.md
 delete mode 100644 website/versioned_docs/version-2.2.1/overview.md
 delete mode 100644 website/versioned_docs/version-2.2.1/pricing.md
 delete mode 100644 website/versioned_docs/version-2.2.1/searchbar.md
 delete mode 100644 website/versioned_docs/version-2.2.1/social_icons.md
 delete mode 100644 website/versioned_docs/version-2.2.1/text.md
 delete mode 100644 website/versioned_docs/version-2.2.1/troubleshooting.md
 delete mode 100644 website/versioned_docs/version-2.2.1/web_usage.md
 rename website/versioned_docs/{version-2.0.4 => version-3.0.0}/avatar.md (86%)
 rename website/versioned_docs/{version-2.2.1 => version-3.0.0}/badge.md (98%)
 create mode 100644 website/versioned_docs/version-3.0.0/bottomsheet.md
 rename website/versioned_docs/{version-2.2.1 => version-3.0.0}/button.md (94%)
 rename website/versioned_docs/{version-2.2.1 => version-3.0.0}/button_group.md (95%)
 create mode 100644 website/versioned_docs/version-3.0.0/card.md
 rename website/versioned_docs/{version-2.2.1 => version-3.0.0}/checkbox.md (100%)
 rename website/versioned_docs/{version-2.0.4 => version-3.0.0}/contributing.md (100%)
 rename website/versioned_docs/{version-2.2.1 => version-3.0.0}/customization.md (93%)
 rename website/versioned_docs/{version-2.0.4 => version-3.0.0}/divider.md (100%)
 rename website/versioned_docs/{version-2.2.1 => version-3.0.0}/getting_started.md (99%)
 rename website/versioned_docs/{version-2.0.4 => version-3.0.0}/header.md (100%)
 rename website/versioned_docs/{version-2.2.1 => version-3.0.0}/icon.md (100%)
 rename website/versioned_docs/{version-2.2.1 => version-3.0.0}/image.md (81%)
 rename website/versioned_docs/{version-2.2.1 => version-3.0.0}/input.md (94%)
 rename website/versioned_docs/{version-2.0.4 => version-3.0.0}/labels.md (100%)
 create mode 100644 website/versioned_docs/version-3.0.0/listitem.md
 rename website/versioned_docs/{version-2.0.4 => version-3.0.0}/overlay.md (100%)
 rename website/versioned_docs/{version-2.0.4 => version-3.0.0}/overview.md (100%)
 rename website/versioned_docs/{version-2.0.4 => version-3.0.0}/pricing.md (100%)
 rename website/versioned_docs/{version-2.2.1 => version-3.0.0}/rating.md (100%)
 rename website/versioned_docs/{version-2.0.4 => version-3.0.0}/searchbar.md (98%)
 rename website/versioned_docs/{version-2.2.1 => version-3.0.0}/slider.md (100%)
 rename website/versioned_docs/{version-2.0.4 => version-3.0.0}/social_icons.md (100%)
 rename website/versioned_docs/{version-2.2.1 => version-3.0.0}/testing.md (89%)
 rename website/versioned_docs/{version-2.0.4 => version-3.0.0}/text.md (100%)
 rename website/versioned_docs/{version-2.2.1 => version-3.0.0}/tile.md (100%)
 rename website/versioned_docs/{version-2.2.1 => version-3.0.0}/tooltip.md (92%)
 rename website/versioned_docs/{version-2.0.4 => version-3.0.0}/troubleshooting.md (100%)
 rename website/versioned_docs/{version-2.0.4 => version-3.0.0}/web_usage.md (100%)
 delete mode 100644 website/versioned_sidebars/version-2.0.4-sidebars.json
 rename website/versioned_sidebars/{version-2.2.1-sidebars.json => version-3.0.0-sidebars.json} (58%)

diff --git a/package.json b/package.json
index ed80d89f3f..dadf83470b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-elements",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0",
   "description": "React Native Elements & UI Toolkit",
   "main": "src/index.js",
   "files": [
diff --git a/website/docs/input.md b/website/docs/input.md
index 3a964801fd..4861f50a2c 100644
--- a/website/docs/input.md
+++ b/website/docs/input.md
@@ -136,9 +136,9 @@ adds error message (optional)
 props to be passed to the React Native `Text` component used to display the
 error message (optional)
 
-|                                      Type                                       | Default |
-| :-----------------------------------------------------------------------------: | :-----: |
-| {[...Text props](https://facebook.github.io/react-native/docs/text.html#props)} |  none   |
+|                            Type                            | Default |
+| :--------------------------------------------------------: | :-----: |
+| {[...Text props](https://reactnative.dev/docs/text#props)} |  none   |
 
 ---
 
@@ -299,7 +299,7 @@ styling for right Icon Component container
 
 Store a reference to the Input in your component by using the ref prop
 provided by React
-([see docs](https://facebook.github.io/react/docs/refs-and-the-dom.html)):
+([see docs](https://reactjs.org/docs/refs-and-the-dom.html)):
 
 ```js
 const input = React.createRef();
diff --git a/website/docs/searchbar.md b/website/docs/searchbar.md
index 7ccd06a307..3064e77150 100644
--- a/website/docs/searchbar.md
+++ b/website/docs/searchbar.md
@@ -388,7 +388,7 @@ The value of the search field
 
 Store a reference to the SearchBar in your component by using the ref prop
 provided by React
-([see docs](https://facebook.github.io/react/docs/refs-and-the-dom.html)):
+([see docs](https://reactjs.org/docs/refs-and-the-dom.html)):
 
 ```js
 <SearchBar
diff --git a/website/docs/testing.md b/website/docs/testing.md
index 93de64342d..7d46b5cb97 100644
--- a/website/docs/testing.md
+++ b/website/docs/testing.md
@@ -27,9 +27,9 @@ yarn test -u
 npm run test -u
 ```
 
-For Snapshot Testing, we use [Jest](https://facebook.github.io/jest/).
+For Snapshot Testing, we use [Jest](https://jestjs.io/).
 
-You can read more about snapshot testing [here](https://facebook.github.io/jest/docs/en/snapshot-testing.html).
+You can read more about snapshot testing [here](https://jestjs.io/docs/en/snapshot-testing.html).
 
 ## Functional Testing
 
diff --git a/website/versioned_docs/version-1.2.0/input.md b/website/versioned_docs/version-1.2.0/input.md
index 71ba5f8195..c949930ee4 100644
--- a/website/versioned_docs/version-1.2.0/input.md
+++ b/website/versioned_docs/version-1.2.0/input.md
@@ -265,7 +265,7 @@ styling for right Icon Component container
 
 Store a reference to the Input in your component by using the ref prop
 provided by React
-([see docs](https://facebook.github.io/react/docs/refs-and-the-dom.html)):
+([see docs](https://reactjs.org/docs/refs-and-the-dom.html)):
 
 ```js
 const input = React.createRef();
diff --git a/website/versioned_docs/version-1.2.0/searchbar.md b/website/versioned_docs/version-1.2.0/searchbar.md
index 7b6f478f6b..17b2a28989 100644
--- a/website/versioned_docs/version-1.2.0/searchbar.md
+++ b/website/versioned_docs/version-1.2.0/searchbar.md
@@ -378,7 +378,7 @@ callback fired when pressing the cancel button (iOS) or the back icon (Android)
 
 Store a reference to the SearchBar in your component by using the ref prop
 provided by React
-([see docs](https://facebook.github.io/react/docs/refs-and-the-dom.html)):
+([see docs](https://reactjs.org/docs/refs-and-the-dom.html)):
 
 ```js
 <SearchBar
diff --git a/website/versioned_docs/version-1.2.0/testing.md b/website/versioned_docs/version-1.2.0/testing.md
index 93de64342d..7d46b5cb97 100644
--- a/website/versioned_docs/version-1.2.0/testing.md
+++ b/website/versioned_docs/version-1.2.0/testing.md
@@ -27,9 +27,9 @@ yarn test -u
 npm run test -u
 ```
 
-For Snapshot Testing, we use [Jest](https://facebook.github.io/jest/).
+For Snapshot Testing, we use [Jest](https://jestjs.io/).
 
-You can read more about snapshot testing [here](https://facebook.github.io/jest/docs/en/snapshot-testing.html).
+You can read more about snapshot testing [here](https://jestjs.io/docs/en/snapshot-testing.html).
 
 ## Functional Testing
 
diff --git a/website/versioned_docs/version-2.0.4/badge.md b/website/versioned_docs/version-2.0.4/badge.md
deleted file mode 100644
index b456492d7e..0000000000
--- a/website/versioned_docs/version-2.0.4/badge.md
+++ /dev/null
@@ -1,243 +0,0 @@
----
-id: badge
-title: Badge
----
-
-Badges are small components typically used to communicate a numerical value or
-indicate the status of an item to the user.
-
-<div class="component-preview">
-  <figure>
-  <img src="/img/badge/badge--standard.jpg" alt="Standard" />
-    <figcaption>Standard</figcaption>
-  </figure>
-  <figure>
-    <img src="/img/badge/badge--mini.jpg" alt="Mini Badge" />
-    <figcaption>Mini Badge</figcaption>
-  </figure>
-  <figure>
-  <img src="/img/badge/badge--indicator.jpg" alt="Badge as Indicator" />
-    <figcaption>Badge as Indicator</figcaption>
-  </figure>
-</div>
-
-### Mini Badge
-
-This type of badge shows when no `value` prop is provided. This form is
-effective for showing statuses.
-
-### withBadge Higher-Order Component
-
-The withBadge HOC allows you to easily add badges to icons and other components.
-
-## Usage
-
-```js
-import { Text, View } from 'react-native'
-import { Avatar, Badge, Icon, withBadge } from 'react-native-elements'
-
-// Standard badge
-<Badge value="99+" status="error" />
-<Badge value={<Text>My Custom Badge</Text>} />
-
-// Mini badge
-<Badge status="success" />
-<Badge status="error" />
-<Badge status="primary" />
-<Badge status="warning" />
-
-// Avatar with mini badge
-<View>
-  <Avatar
-    rounded
-    source={{
-      uri: 'https://randomuser.me/api/portraits/men/41.jpg',
-    }}
-    size="large"
-  />
-
-  <Badge
-    status="success"
-    containerStyle={{ position: 'absolute', top: -4, right: -4 }}
-  />
-</View>
-
-// withBadge HOC
-
-const BadgedIcon = withBadge(1)(Icon)
-<BadgedIcon type="ionicon" name="ios-chatbubbles" />
-
-// Using the decorator proposal
-@connect(state => ({
-  notifications: state.notifications,
-}))
-@withBadge(props => props.notifications.length)
-export default class MyDecoratedIcon extends React.Component {
-  render() {
-    return (
-      <Icon type="ionicon" name="md-cart" />
-    );
-  }
-}
-```
-
----
-
-## Props
-
-- [`badgeStyle`](#badgestyle)
-- [`containerStyle`](#containerstyle)
-- [`onPress`](#onpress)
-- [`status`](#status)
-- [`textProps`](#textprops)
-- [`textStyle`](#textstyle)
-- [`value`](#value)
-- [`Component`](#Component)
-
----
-
-## Reference
-
-### `badgeStyle`
-
-Additional styling for badge (background) view component (optional)
-
-|        Type         |    Default     |
-| :-----------------: | :------------: |
-| View style (object) | Internal Style |
-
----
-
-### `containerStyle`
-
-Style for the container (optional)
-
-|        Type         |    Default     |
-| :-----------------: | :------------: |
-| View style (object) | Internal Style |
-
----
-
-### `onPress`
-
-Function called when pressed on the badge
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `status`
-
-Determines color of the indicator
-
-|                   Type                   | Default |
-| :--------------------------------------: | :-----: |
-| `primary`, `success`, `warning`, `error` | primary |
-
----
-
-### `textProps`
-
-Extra props for text component (optional)
-
-|        Type         | Default |
-| :-----------------: | :-----: |
-| Text props (object) |  none   |
-
----
-
-### `textStyle`
-
-Extra styling for icon component (optional)
-
-|        Type         |    Default     |
-| :-----------------: | :------------: |
-| Text style (object) | Internal Style |
-
----
-
-### `value`
-
-Text value to be displayed by badge, defaults to empty
-
-|                    Type                    | Default |
-| :----------------------------------------: | :-----: |
-| String OR Number OR React Native Component |  none   |
-
----
-
-### `Component`
-
-Custom component to replace the badge outer component
-
-|          Type          |                  Default                   |
-| :--------------------: | :----------------------------------------: |
-| React Native Component | View, if `onPress` then `TouchableOpacity` |
-
----
-
-## Props for withBadge
-
-- [`value`](#value)
-- [`options`](#options)
-
----
-
-## Reference for withBadge
-
-### `value`
-
-Text value to be displayed by badge, defaults to empty
-
-|                                          Type                                           | Default |
-| :-------------------------------------------------------------------------------------: | :-----: |
-| String OR Number OR React Native Component OR Function, which returns one of the former |  none   |
-
----
-
-### `options`
-
-> Also receives all
-> [Badge](https://reactnative.dev/docs/badge#props) props.
-
-Object with the following (optional) keys:
-
-#### `bottom`
-
-|       Type        |  Default  |
-| :---------------: | :-------: |
-| number (optional) | undefined |
-
-#### `left`
-
-|       Type        |  Default  |
-| :---------------: | :-------: |
-| number (optional) | undefined |
-
-#### `right`
-
-|       Type        |                   Default                    |
-| :---------------: | :------------------------------------------: |
-| number (optional) | -16 (-3 with MiniBadge aka. without `value`) |
-
-#### `top`
-
-|       Type        |        Default        |
-| :---------------: | :-------------------: |
-| number (optional) | -1 (3 with MiniBadge) |
-
-#### `hidden`
-
-|        Type        | Default |
-| :----------------: | :-----: |
-| boolean (optional) |  false  |
-
-#### `containerStyle`
-
-|        Type         |    Default     |
-| :-----------------: | :------------: |
-| View style (object) | Internal Style |
-
----
diff --git a/website/versioned_docs/version-2.0.4/button.md b/website/versioned_docs/version-2.0.4/button.md
deleted file mode 100644
index 74e618ecdd..0000000000
--- a/website/versioned_docs/version-2.0.4/button.md
+++ /dev/null
@@ -1,344 +0,0 @@
----
-id: button
-title: Button
----
-
-Buttons are touchable elements used to interact with the screen. They may
-display text, icons, or both. Buttons can be styled with several props to look a
-specific way.
-
-<div class="component-preview">
-  <figure>
-    <img src="/img/button/button--solid.jpg" alt="Solid Button" />
-    <figcaption>Solid</figcaption>
-  </figure>
-  <figure>
-  <img src="/img/button/button--clear.jpg" alt="Clear Button" />
-    <figcaption>Clear</figcaption>
-  </figure>
-  <figure>
-  <img src="/img/button/button--outline.jpg" alt="Outline Button" />
-    <figcaption>Outline</figcaption>
-  </figure>
-</div>
-
-## Usage
-
-```js
-import { Button } from 'react-native-elements';
-import Icon from 'react-native-vector-icons/FontAwesome';
-
-<Button
-  title="Solid Button"
-/>
-
-<Button
-  title="Outline button"
-  type="outline"
-/>
-
-<Button
-  title="Clear button"
-  type="clear"
-/>
-
-<Button
-  icon={
-    <Icon
-      name="arrow-right"
-      size={15}
-      color="white"
-    />
-  }
-  title="Button with icon component"
-/>
-
-<Button
-  icon={{
-    name: "arrow-right",
-    size: 15,
-    color: "white"
-  }}
-  title="Button with icon object"
-/>
-
-<Button
-  icon={
-    <Icon
-      name="arrow-right"
-      size={15}
-      color="white"
-    />
-  }
-  iconRight
-  title="Button with right icon"
-/>
-
-<Button
-  title="Loading button"
-  loading
-/>
-```
-
----
-
-## Props
-
-> Also receives all
-> [TouchableNativeFeedback](http://reactnative.dev/docs/touchablenativefeedback.html#props)
-> (Android) or
-> [TouchableOpacity](http://reactnative.dev/docs/touchableopacity.html#props)
-> (iOS) props
-
-- [`buttonStyle`](#buttonstyle)
-- [`containerStyle`](#containerstyle)
-- [`disabled`](#disabled)
-- [`disabledStyle`](#disabledstyle)
-- [`disabledTitleStyle`](#disabledtitlestyle)
-- [`icon`](#icon)
-- [`iconContainerStyle`](#iconcontainerstyle)
-- [`iconRight`](#iconright)
-- [`linearGradientProps`](#lineargradientprops)
-- [`loading`](#loading)
-- [`loadingProps`](#loadingprops)
-- [`loadingStyle`](#loadingstyle)
-- [`onPress`](#onpress)
-- [`raised`](#raised)
-- [`title`](#title)
-- [`titleProps`](#titleprops)
-- [`titleStyle`](#titlestyle)
-- [`type`](#type)
-- [`TouchableComponent`](#touchablecomponent)
-- [`ViewComponent`](#viewcomponent)
-
----
-
-## Reference
-
-### `buttonStyle`
-
-add additional styling for button component (optional)
-
-|        Type         | Default |
-| :-----------------: | :-----: |
-| View style (object) |  none   |
-
----
-
-### `containerStyle`
-
-styling for Component container
-
-|        Type         | Default |
-| :-----------------: | :-----: |
-| View style (object) |  none   |
-
----
-
-### `disabled`
-
-disables user interaction
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `disabledStyle`
-
-style of the button when disabled
-
-|        Type         |    Default     |
-| :-----------------: | :------------: |
-| View style (object) | Internal Style |
-
----
-
-### `disabledTitleStyle`
-
-style of the title when disabled
-
-|        Type         |    Default     |
-| :-----------------: | :------------: |
-| Text style (object) | Internal Style |
-
----
-
-### `icon`
-
-displays a centered icon (when no title) or to the left (with text). (can be
-used along with iconRight as well). Can be an object or a custom component.
-
-|                            Type                            | Default |
-| :--------------------------------------------------------: | :-----: |
-| {[...Icon props](icon.md#props)}<br/>**OR**<br/> component |  none   |
-
----
-
-### `iconContainerStyle`
-
-styling for Icon Component container
-
-|        Type         | Default |
-| :-----------------: | :-----: |
-| View style (object) |  none   |
-
----
-
-### `iconRight`
-
-displays Icon to the right of title. Needs to be used along with `icon` prop
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `linearGradientProps`
-
-displays a linear gradient. See [usage](#lineargradient-usage).
-
-|                                                      Type                                                      | Default |
-| :------------------------------------------------------------------------------------------------------------: | :-----: |
-| {[...Gradient props](https://github.com/react-native-community/react-native-linear-gradient#additional-props)} |  none   |
-
----
-
-### `loading`
-
-prop to display a loading spinner (optional)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `loadingProps`
-
-add additional props for ActivityIndicator component (optional)
-
-|                                         Type                                         |     Default     |
-| :----------------------------------------------------------------------------------: | :-------------: |
-| {[...ActivityIndicator props](https://reactnative.dev/docs/activityindicator#props)} | Internal object |
-
----
-
-### `loadingStyle`
-
-add additional styling for loading component (optional)
-
-|        Type         |    Default     |
-| :-----------------: | :------------: |
-| View style (object) | Internal Style |
-
----
-
-### `onPress`
-
-onPress method (optional)
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `raised`
-
-Add raised button styling (optional). Has no effect if `type="clear"`.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `title`
-
-button title (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  none   |
-
----
-
-### `titleProps`
-
-add additional props for Text component (optional)
-
-|                            Type                            | Default |
-| :--------------------------------------------------------: | :-----: |
-| {[...Text props](https://reactnative.dev/docs/text#props)} |  none   |
-
----
-
-### `titleStyle`
-
-add additional styling for title component (optional)
-
-|        Type         | Default |
-| :-----------------: | :-----: |
-| Text style (object) |  none   |
-
----
-
-### `type`
-
-Type of button (optional)
-
-|            Type             | Default |
-| :-------------------------: | :-----: |
-| `solid`, `clear`, `outline` |  solid  |
-
----
-
-### `TouchableComponent`
-
-component for user interaction
-
-|        Type         |                           Default                           |
-| :-----------------: | :---------------------------------------------------------: |
-| Touchable Component | TouchableOpacity (ios) or TouchableNativeFeedback (android) |
-
----
-
-### `ViewComponent`
-
-component for container
-
-|          Type          | Default |
-| :--------------------: | :-----: |
-| React Native Component |  View   |
-
----
-
-## LinearGradient Usage
-
-Using LinearGradient in React Native Elements is supported through the
-[react-native-linear-gradient](https://github.com/react-native-community/react-native-linear-gradient)
-package. If you're using expo or create-react-native-app then you can use
-`linearGradientProps` prop right out the box with no additional setup.
-
-For react-native-cli users, make sure to follow the
-[installation instructions](https://github.com/react-native-community/react-native-linear-gradient#add-it-to-your-project)
-and use it like this:
-
-```jsx
-import { Button } from 'react-native-elements';
-import LinearGradient from 'react-native-linear-gradient';
-
-...
-
-<Button
-  ViewComponent={LinearGradient} // Don't forget this!
-  linearGradientProps={{
-    colors: ['red', 'pink'],
-    start: { x: 0, y: 0.5 },
-    end: { x: 1, y: 0.5 },
-  }}
-/>
-```
diff --git a/website/versioned_docs/version-2.0.4/button_group.md b/website/versioned_docs/version-2.0.4/button_group.md
deleted file mode 100644
index 3dbb0330f7..0000000000
--- a/website/versioned_docs/version-2.0.4/button_group.md
+++ /dev/null
@@ -1,308 +0,0 @@
----
-id: button_group
-title: ButtonGroup
----
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-ButtonGroup is a linear set of segments, each of which function as a button that
-can display a different view. Use a ButtonGroup to offer choices that are
-closely related but mutually exclusive.
-
-<img alt="ButtonGroup" src={useBaseUrl('img/button_group.png')} />
-
-## Usage
-
-### Using strings
-
-```js
-constructor () {
-  super()
-  this.state = {
-    selectedIndex: 2
-  }
-  this.updateIndex = this.updateIndex.bind(this)
-}
-
-updateIndex (selectedIndex) {
-  this.setState({selectedIndex})
-}
-
-render () {
-  const buttons = ['Hello', 'World', 'Buttons']
-  const { selectedIndex } = this.state
-
-  return (
-    <ButtonGroup
-      onPress={this.updateIndex}
-      selectedIndex={selectedIndex}
-      buttons={buttons}
-      containerStyle={{height: 100}}
-    />
-  )
-}
-```
-
-### Using components
-
-```js
-constructor () {
-  super()
-  this.state = {
-    selectedIndex: 2
-  }
-  this.updateIndex = this.updateIndex.bind(this)
-}
-updateIndex (selectedIndex) {
-  this.setState({selectedIndex})
-}
-
-const component1 = () => <Text>Hello</Text>
-const component2 = () => <Text>World</Text>
-const component3 = () => <Text>ButtonGroup</Text>
-
-render () {
-  const buttons = [{ element: component1 }, { element: component2 }, { element: component3 }]
-  const { selectedIndex } = this.state
-  return (
-    <ButtonGroup
-      onPress={this.updateIndex}
-      selectedIndex={selectedIndex}
-      buttons={buttons}
-      containerStyle={{height: 100}} />
-  )
-}
-```
-
----
-
-## Props
-
-> This component inherits
-> [all native TouchableHighlight and TouchableOpacity props that come with React Native TouchableHighlight or TouchableOpacity elements](https://reactnative.dev/docs/touchablehighlight.html),
-> along with the following:
-
-- [`buttonStyle`](#buttonstyle)
-- [`buttonContainerStyle`](#buttoncontainerstyle)
-- [`buttons`](#buttons)
-- [`Component`](#Component)
-- [`containerStyle`](#containerstyle)
-- [`disabled`](#disabled)
-- [`disabledStyle`](#disabledstyle)
-- [`disabledTextStyle`](#disabledtextstyle)
-- [`disabledSelectedStyle`](#disabledselectedstyle)
-- [`disabledSelectedTextStyle`](#disabledselectedtextstyle)
-- [`innerBorderStyle`](#innerborderstyle)
-- [`onPress`](#onpress)
-- [`selectMultiple`](#selectmultiple)
-- [`selectedButtonStyle`](#selectedbuttonstyle)
-- [`selectedIndex`](#selectedindex)
-- [`selectedIndexes`](#selectedindexes)
-- [`selectedTextStyle`](#selectedtextstyle)
-- [`textStyle`](#textstyle)
-- [`underlayColor`](#underlaycolor)
-- [`vertical`](#vertical)
-
----
-
-## Reference
-
-### `buttonStyle`
-
-specify styling for button (optional)
-
-|      Type      |      Default      |
-| :------------: | :---------------: |
-| object (style) | inherited styling |
-
----
-
-### `buttonContainerStyle`
-
-specify styling for button containers (optional)
-
-|      Type      |      Default      |
-| :------------: | :---------------: |
-| object (style) | inherited styling |
-
----
-
-### `buttons`
-
-array of buttons for component (required), if returning a component, must be an
-object with { element: componentName }
-
-| Type  | Default |
-| :---: | :-----: |
-| array |  none   |
-
----
-
-### `Component`
-
-Choose other button component such as TouchableOpacity (optional)
-
-|          Type          |      Default       |
-| :--------------------: | :----------------: |
-| React Native Component | TouchableHighlight |
-
----
-
-### `containerStyle`
-
-specify styling for main button container (optional)
-
-|      Type      |      Default      |
-| :------------: | :---------------: |
-| object (style) | inherited styling |
-
----
-
-### `disabled`
-
-Controls if buttons are disabled. Setting `true` makes all of them disabled,
-while using an array only makes those indices disabled.
-
-|          Type           | Default |
-| :---------------------: | :-----: |
-| boolean **OR** number[] |  false  |
-
----
-
-### `disabledStyle`
-
-Styling for each button when disabled.
-
-|        Type         |    Default     |
-| :-----------------: | :------------: |
-| View style (object) | Internal Style |
-
----
-
-### `disabledTextStyle`
-
-Styling for the text of each button when disabled.
-
-|        Type         |    Default     |
-| :-----------------: | :------------: |
-| Text style (object) | Internal Style |
-
----
-
-### `disabledSelectedStyle`
-
-Styling for each selected button when disabled.
-
-|        Type         |    Default     |
-| :-----------------: | :------------: |
-| View style (object) | Internal Style |
-
----
-
-### `disabledSelectedTextStyle`
-
-Styling for the text of each selected button when disabled.
-
-|        Type         |    Default     |
-| :-----------------: | :------------: |
-| Text style (object) | Internal Style |
-
----
-
-### `innerBorderStyle`
-
-update the styling of the interior border of the list of buttons (optional)
-
-|          Type           |      Default      |
-| :---------------------: | :---------------: |
-| object { width, color } | inherited styling |
-
----
-
-### `onPress`
-
-method to update Button Group Index (required)
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `selectMultiple`
-
-allows the user to select multiple buttons
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `selectedButtonStyle`
-
-specify styling for selected button (optional)
-
-|      Type      |      Default      |
-| :------------: | :---------------: |
-| object (style) | inherited styling |
-
----
-
-### `selectedIndex`
-
-current selected index of array of buttons (required)
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |  none   |
-
----
-
-### `selectedIndexes`
-
-current selected indexes from the array of buttons
-
-|      Type      | Default |
-| :------------: | :-----: |
-| array (number) |   []    |
-
----
-
-### `selectedTextStyle`
-
-specify specific styling for text in the selected state (optional)
-
-|      Type      |      Default      |
-| :------------: | :---------------: |
-| object (style) | inherited styling |
-
----
-
-### `textStyle`
-
-specify specific styling for text (optional)
-
-|      Type      |      Default      |
-| :------------: | :---------------: |
-| object (style) | inherited styling |
-
----
-
-### `underlayColor`
-
-specify underlayColor for TouchableHighlight (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  white  |
-
----
-
-### `vertical`
-
-Display the ButtonGroup vertically
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
diff --git a/website/versioned_docs/version-2.0.4/card.md b/website/versioned_docs/version-2.0.4/card.md
deleted file mode 100644
index 2f2b0f2980..0000000000
--- a/website/versioned_docs/version-2.0.4/card.md
+++ /dev/null
@@ -1,236 +0,0 @@
----
-id: card
-title: Card
----
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-Cards are a great way to display information, usually containing content and
-actions about a single subject. Cards can contain images, buttons, text and
-more.
-
-<img alt="Card Component" src={useBaseUrl('img/card.png')} />
-
-## Usage
-
-```js
-const users = [
- {
-    name: 'brynn',
-    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg'
- },
- ... // more users here
-]
-
-import { View, Text, Image } from 'react-native'
-import { Card, ListItem, Button, Icon } from 'react-native-elements'
-
-// implemented without image with header
-<Card title="CARD WITH DIVIDER">
-  {
-    users.map((u, i) => {
-      return (
-        <View key={i} style={styles.user}>
-          <Image
-            style={styles.image}
-            resizeMode="cover"
-            source={{ uri: u.avatar }}
-          />
-          <Text style={styles.name}>{u.name}</Text>
-        </View>
-      );
-    })
-  }
-</Card>
-
-// implemented without image without header, using ListItem component
- <Card containerStyle={{padding: 0}} >
-  {
-    users.map((u, i) => {
-      return (
-        <ListItem
-          key={i}
-          roundAvatar
-          title={u.name}
-          leftAvatar={{ source: { uri: u.avatar } }}
-        />
-      );
-    })
-  }
-</Card>
-
-
-// implemented with Text and Button as children
-<Card
-  title='HELLO WORLD'
-  image={require('../images/pic2.jpg')}>
-  <Text style={{marginBottom: 10}}>
-    The idea with React Native Elements is more about component structure than actual design.
-  </Text>
-  <Button
-    icon={<Icon name='code' color='#ffffff' />}
-    buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
-    title='VIEW NOW' />
-</Card>
-```
-
----
-
-## Props
-
-- [`containerStyle`](#containerstyle)
-- [`dividerStyle`](#dividerstyle)
-- [`featuredSubtitle`](#featuredsubtitle)
-- [`featuredSubtitleStyle`](#featuredsubtitlestyle)
-- [`featuredTitle`](#featuredtitle)
-- [`featuredTitleStyle`](#featuredtitlestyle)
-- [`image`](#image)
-- [`imageProps`](#imageprops)
-- [`imageStyle`](#imagestyle)
-- [`imageWrapperStyle`](#imagewrapperstyle)
-- [`title`](#title)
-- [`titleNumberOfLines`](#titlenumberoflines)
-- [`titleStyle`](#titlestyle)
-- [`wrapperStyle`](#wrapperstyle)
-
----
-
-## Reference
-
-### `containerStyle`
-
-outer container style (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `dividerStyle`
-
-additional divider styling (if title provided) (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `featuredSubtitle`
-
-subtitle rendered over the image (only works if image prop is present)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  none   |
-
----
-
-### `featuredSubtitleStyle`
-
-styling for featured subtitle
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `featuredTitle`
-
-title rendered over the image (only works if image prop is present)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  none   |
-
----
-
-### `featuredTitleStyle`
-
-styling for featured title
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `image`
-
-add an image as the heading with the image prop (optional)
-
-|           Type            | Default |
-| :-----------------------: | :-----: |
-| image uri or require path |  none   |
-
----
-
-### `imageProps`
-
-optional properties to pass to the image if provided e.g "resizeMode"
-
-|                 Type                 | Default |
-| :----------------------------------: | :-----: |
-| {[...Image props](image.md#props)} ) |  none   |
-
----
-
-### `imageStyle`
-
-specify image styling if image is provided
-
-|     Type      |      Default      |
-| :-----------: | :---------------: |
-| object(style) | inherited styling |
-
----
-
-### `imageWrapperStyle`
-
-specify styling for view surrounding image
-
-|     Type      | Default |
-| :-----------: | :-----: |
-| object(style) |  none   |
-
----
-
-### `title`
-
-optional card title (optional)
-
-|               Type               | Default |
-| :------------------------------: | :-----: |
-| string OR React Native Component |  none   |
-
----
-
-### `titleNumberOfLines`
-
-number of lines for title (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |  none   |
-
----
-
-### `titleStyle`
-
-additional title styling (if title provided) (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `wrapperStyle`
-
-inner container style (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
diff --git a/website/versioned_docs/version-2.0.4/checkbox.md b/website/versioned_docs/version-2.0.4/checkbox.md
deleted file mode 100644
index 8ae4df0988..0000000000
--- a/website/versioned_docs/version-2.0.4/checkbox.md
+++ /dev/null
@@ -1,295 +0,0 @@
----
-id: checkbox
-title: CheckBox
----
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-CheckBoxes allow users to complete tasks that involve making choices such as
-selecting options, or switching settings on or off. It provides a clear visual
-of either a true or false choice.
-
-<img alt="Checkboxes" src={useBaseUrl('img/checkbox.png')} />
-
-## Usage
-
-```js
-import { CheckBox } from 'react-native-elements'
-
-<CheckBox
-  title='Click Here'
-  checked={this.state.checked}
-/>
-
-<CheckBox
-  center
-  title='Click Here'
-  checked={this.state.checked}
-/>
-
-<CheckBox
-  center
-  title='Click Here'
-  checkedIcon='dot-circle-o'
-  uncheckedIcon='circle-o'
-  checked={this.state.checked}
-/>
-
-<CheckBox
-  center
-  title='Click Here to Remove This Item'
-  iconRight
-  iconType='material'
-  checkedIcon='clear'
-  uncheckedIcon='add'
-  checkedColor='red'
-  checked={this.state.checked}
-/>
-
-<CheckBox
-  checkedIcon={<Image source={require('../checked.png')} />}
-  uncheckedIcon={<Image source={require('../unchecked.png')} />}
-  checked={this.state.checked}
-  onPress={() => this.setState({checked: !this.state.checked})}
-/>
-```
-
----
-
-## Props
-
-- [`iconType`](#icontype)
-- [`Component`](#Component)
-- [`checked`](#checked)
-- [`size`](#size)
-- [`iconRight`](#iconright)
-- [`right`](#right)
-- [`center`](#center)
-- [`title`](#title)
-- [`titleProps`](#titleprops)
-- [`containerStyle`](#containerstyle)
-- [`textStyle`](#textstyle)
-- [`onLongPress`](#onlongpress)
-- [`onLongIconPress`](#onlongiconpress)
-- [`onPress`](#onpress)
-- [`onIconPress`](#oniconpress)
-- [`checkedIcon`](#checkedicon)
-- [`uncheckedIcon`](#uncheckedicon)
-- [`checkedColor`](#checkedcolor)
-- [`uncheckedColor`](#uncheckedcolor)
-- [`checkedTitle`](#checkedtitle)
-- [`fontFamily`](#fontfamily)
-
----
-
-## Reference
-
-### `iconType`
-
-type of icon set. [Supported sets here](icon.md#available-icon-sets).
-
-|  Type  |   Default    |
-| :----: | :----------: |
-| string | font-awesome |
-
----
-
-### `Component`
-
-Specify React Native component for main button (optional)
-
-|          Type          |     Default      |
-| :--------------------: | :--------------: |
-| React Native Component | TouchableOpacity |
-
----
-
-### `checked`
-
-Flag for checking the icon (required)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `size`
-
-Size of the checkbox
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |   24    |
-
----
-
-### `iconRight`
-
-Moves icon to right of text (optional)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `right`
-
-Aligns checkbox to right (optional)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `center`
-
-Aligns checkbox to center (optional)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `title`
-
-Title of checkbox
-
-|               Type               | Default |
-| :------------------------------: | :-----: |
-| string OR React Native Component |  none   |
-
----
-
-### `titleProps`
-
-Additional props for the title Text component (optional)
-
-|                             Type                             | Default |
-| :----------------------------------------------------------: | :-----: |
-| {[...Text props](https://reactnative.dev/docs/text#props-1)} |  none   |
-
----
-
-### `containerStyle`
-
-Style of main container (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `textStyle`
-
-Style of text (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `onLongPress`
-
-onLongPress function for checkbox (optional)
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `onLongIconPress`
-
-onLongPress function for checkbox (optional)
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `onPress`
-
-onPress function for container (optional)
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `onIconPress`
-
-onPress function for checkbox (required)
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `checkedIcon`
-
-Default checked icon ([Font Awesome Icon](http://fontawesome.io/icons/))
-(optional)
-
-|               Type               |    Default     |
-| :------------------------------: | :------------: |
-| string OR React Native Component | check-square-o |
-
----
-
-### `uncheckedIcon`
-
-Default checked icon ([Font Awesome Icon](http://fontawesome.io/icons/))
-(optional)
-
-|               Type               | Default  |
-| :------------------------------: | :------: |
-| string OR React Native Component | square-o |
-
----
-
-### `checkedColor`
-
-Default checked color (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  green  |
-
----
-
-### `uncheckedColor`
-
-Default unchecked color (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string | #bfbfbf |
-
----
-
-### `checkedTitle`
-
-Specify a custom checked message (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  none   |
-
----
-
-### `fontFamily`
-
-Specify different font family
-
-|  Type  |                      Default                      |
-| :----: | :-----------------------------------------------: |
-| string | System font bold (iOS), Sans Serif Bold (android) |
diff --git a/website/versioned_docs/version-2.0.4/customization.md b/website/versioned_docs/version-2.0.4/customization.md
deleted file mode 100644
index ddd9edc9c8..0000000000
--- a/website/versioned_docs/version-2.0.4/customization.md
+++ /dev/null
@@ -1,429 +0,0 @@
----
-id: customization
-title: Customization
----
-
-Congrats! You've installed React Native Elements and your immediate question
-goes something like this:
-
-> So umm, how do I change how it looks?
-
-Great question! A UI Kit wouldn't be that useful if the apps everyone built
-looked the same right? For this case React Native Elements provide a number of
-props on each component to enable you to style them how you want.
-
-## Component Styles
-
-_Every_ component from React Native Elements has a container around it. The
-container is just a traditional `<View />` from react native that has some
-styling on it. This default styling prevents components from colliding with each
-other. If you want to change how two components react to each on the screen your
-first stop should be the `containerStyle` prop.
-
-Similar to `containerStyle`, components may provide their custom style props
-like `buttonStyle`, `titleStyle` etc. Always refer to the documentation for the
-component to find out which style props it provides.
-
-## Theming
-
-While component styles are great for single use, you may want to have the same
-styling for every instance of a component. For example, you may want all your
-buttons to be blue or have the same font. Here are some ways to reuse styles
-with React Native Elements.
-
-### Using Composition
-
-With this approach, we create one component with the styles we want and use that
-instead of the built-in component.
-
-```jsx
-import React from 'react';
-import { Button } from 'react-native-elements';
-
-const RaisedButton = (props) => <Button raised {...props} />;
-
-// Your App
-const App = () => {
-  return <RaisedButton title="Yea" />;
-};
-```
-
-If we want to use a button that's raised in our app, we can use `RaisedButton`
-instead of using `Button`. This component still accepts all the props from the
-normal `Button` just that it has the `raised` prop set by default.
-
-### Using ThemeProvider
-
-The previous solution works great for only one component, but imagine having to
-do this for every component you want custom styles for. That could get a bit
-tedious to manage. Thankfully, there's a better way to do this. React Native
-Elements ships with a 3 utilities for large-scale theming.
-
-Firstly you'll want to set up your `ThemeProvider`.
-
-```jsx
-import { ThemeProvider, Button } from 'react-native-elements';
-
-const theme = {
-  Button: {
-    raised: true,
-  },
-};
-
-// Your App
-const App = () => {
-  return (
-    <ThemeProvider theme={theme}>
-      <Button title="My Button" />
-      <Button title="My 2nd Button" />
-    </ThemeProvider>
-  );
-};
-```
-
-The example above achieves the same goals as the first example — apply the same
-styles to multiple instances of `Button` in the app. However this example
-applies the `raised` prop to every instance of `Button` inside the component
-tree under `ThemeProvider`. Both of these buttons will have the `raised` prop
-set to true.
-
-This is extremely convenient and is made possible through
-[React's Context API](https://reactjs.org/docs/context.html).
-
----
-
-### TypeScript Definitions (extending the default theme)
-
-TypeScript definitions for your theme can be extended by using TypeScript's [declaration merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html) feature. First you need to create a declaration file called `react-native-elements.d.ts` and then declare the module `react-native-elements` and 're-export' the types that you want to extend.
-
-i.e. below we add a custom p1Style to the Text theme object and we add a bunch of colors to the colors object.
-
-```typescript
-type RecursivePartial<T> = { [P in keyof T]?: RecursivePartial<T[P]> };
-
-declare module 'react-native-elements' {
-  export interface TextProps {
-    p1Style: StyleProp<TextStyle>;
-  }
-
-  export interface Colors {
-    background: string;
-    border: string;
-    text: string;
-    altText: string;
-    danger: string;
-  }
-
-  export interface FullTheme {
-    colors: RecursivePartial<Colors>;
-    Text: Partial<TextProps>;
-  }
-}
-```
-
----
-
-### Order of Styles
-
-What happens now if we want a `Button` that isn't raised? To do that we have to understand the order in which styles are applied.
-
-> Internal > Theme > External
-
-#### Internal
-
-Internal components styles are the styles which are defined in the component
-file. These are applied first.
-
-#### Theme
-
-Theme styles are the values that are set by the ThemeProvider If present, these
-are applied second.
-
-```jsx
-import { ThemeProvider, Button } from 'react-native-elements';
-
-const theme = {
-  Button: {
-    titleStyle: {
-      color: 'red',
-    },
-  },
-};
-
-const App = () => {
-  return (
-    <ThemeProvider theme={theme}>
-      <Button title="My Button" />
-    </ThemeProvider>
-  );
-};
-```
-
-This will override the white color for the title set in the component's style.
-
-#### External
-
-External styles are the styles which are set through the component props. These
-are applied last and have the highest precedence.
-
-```jsx
-import { ThemeProvider, Button } from 'react-native-elements';
-
-const theme = {
-  Button: {
-    titleStyle: {
-      color: 'red',
-    },
-  },
-};
-
-const App = () => {
-  return (
-    <ThemeProvider theme={theme}>
-      <Button title="My Button" titleStyle={{ color: 'pink' }} />
-    </ThemeProvider>
-  );
-};
-```
-
-This will override both the white color for the title set in the component's
-style as well as the red color set in the theme.
-
-> Remember if you want to override the values set in the theme you can always
-> use component props.
-
----
-
-### The Theme Object
-
-By default, the theme object looks like this. You can add whatever values you
-want to the theme, and they will be merged with the default. By default the
-platform colors aren't used anywhere. These native colors are added for
-your convenience.
-
-```tsx
-interface theme {
-  colors: {
-    primary;
-    secondary;
-    grey0;
-    grey1;
-    grey2;
-    grey3;
-    grey4;
-    grey5;
-    greyOutline;
-    searchBg;
-    success;
-    error;
-    warning;
-    divider;
-    platform: {
-      ios: {
-        primary;
-        secondary;
-        success;
-        error;
-        warning;
-      };
-      android: {
-        // Same as ios
-      };
-    };
-  };
-}
-```
-
-Setting styles in the theme is as simple as using the name of the component, as
-a key and the props you want to change as the value.
-
-```jsx
-import { ThemeProvider } from 'react-native-elements';
-
-const theme = {
-  Avatar: {
-    rounded: true,
-  },
-  Badge: {
-    textStyle: { fontSize: 30 },
-  },
-};
-
-...
-
-<ThemeProvider theme={theme}>
-```
-
----
-
-### Using the theme in your own components
-
-You may want to make use of the theming utilities in your own components. For
-this you can use the `withTheme` HOC exported from this library. It adds three
-props to the component it wraps - `theme`, `updateTheme` and `replaceTheme`.
-
-```jsx
-import React from 'react';
-import { Text } from 'react-native';
-import { withTheme } from 'react-native-elements';
-
-function MyComponent(props) {
-  const { theme, updateTheme, replaceTheme } = props;
-  return <Text style={{ color: theme.colors.primary }}>Yo!</Text>;
-}
-
-export default withTheme(MyComponent);
-```
-
-The `updateTheme` function merges the theme passed in with the current theme.
-
-```jsx
-const theme = {
-  colors: {
-    primary: 'pink',
-  },
-};
-
-// We can update the primary color
-updateTheme({ colors: { primary: 'red' } });
-```
-
-The `replaceTheme` function merges the theme passed in with the default theme.
-
-Don't want to wrap your components? You can use the `ThemeConsumer` component
-which uses render props!
-
-```jsx
-import React from 'react';
-import { Text } from 'react-native';
-import { ThemeConsumer } from 'react-native-elements';
-
-const MyComponent = () => (
-  <ThemeConsumer>
-    {({ theme }) => (
-      <Text style={{ color: theme.colors.primary }}>Yo!</Text>;
-    )}
-  </ThemeConsumer>
-)
-```
-
-You can also use the ThemeContext directly if you use hooks.
-
-```jsx
-import React, { useContext } from 'react';
-import { Text } from 'react-native';
-import { ThemeContext } from 'react-native-elements';
-
-const MyComponent = () => {
-  const { theme } = useContext(ThemeContext);
-
-  return (
-    <View style={styles.container}>
-      <Text style={{ color: theme.colors.primary }}>Yo!</Text>
-    </View>
-  );
-};
-```
-
----
-
-### Using the respective platform's native colors
-
-You may want to style your app using the native color palette. You can do this
-using the `colors` object and the `Platform` API.
-
-```jsx
-import { Platform } from 'react-native';
-import { Button, colors, ThemeProvider } from 'react-native-elements';
-
-const theme = {
-  colors: {
-    ...Platform.select({
-      default: colors.platform.android,
-      ios: colors.platform.ios,
-    }),
-  },
-};
-
-const App = () => {
-  return (
-    <ThemeProvider theme={theme}>
-      // This button's color will now be the default iOS / Android blue.
-      <Button title="My Button" />
-    </ThemeProvider>
-  );
-};
-```
-
----
-
-### Common Pitfalls
-
-This section outlines some common pitfalls when using Theming.
-
-#### My local styles aren't working with the theme
-
-It's important to understand that the `ThemeProvider` works by merging your local(external) styles with those set on the theme.
-This means that in both cases **the type of these styles must be the same**.
-
-##### Example 1
-
-```jsx
-const theme = {
-  Button: {
-    containerStyle: {
-      marginTop: 10;
-    }
-  }
-}
-
-<Button
-  containerStyle={{ backgroundColor: 'blue' }}
-/>
-```
-
-> ✅ Works
->
-> In both cases the style is an `object`
-
-<br />
-
-##### Example 2
-
-```jsx
-const theme = {
-  Button: {
-    containerStyle: [
-      {
-        marginTop: 10;
-      }
-    ]
-  }
-}
-
-<Button containerStyle={[{ backgroundColor: 'blue' }]} />
-```
-
-> ✅ Works
->
-> In both cases the style is an `array`
-
-<br />
-
-##### Example 3
-
-```jsx
-const theme = {
-  Button: {
-    containerStyle: {
-      marginTop: 10;
-    }
-  }
-}
-
-<Button containerStyle={[{ backgroundColor: 'blue' }]} />
-```
-
-> 🚫 Doesn't work
->
-> In one case the style is an `object` and another the style is an `array`
diff --git a/website/versioned_docs/version-2.0.4/getting_started.md b/website/versioned_docs/version-2.0.4/getting_started.md
deleted file mode 100644
index d7c2fb0b0e..0000000000
--- a/website/versioned_docs/version-2.0.4/getting_started.md
+++ /dev/null
@@ -1,85 +0,0 @@
----
-id: getting_started
-title: Getting Started
-sidebar_label: Getting Started
-slug: /
----
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-The aim of React Native Elements is to provide an all-in-one UI kit for creating
-apps in react native. There are many great ui components made by developers all
-around open source. React Native Elements takes the hassle of assembling these
-packages together by giving you a ready made kit with consistent api and look
-and feel.
-
-## Installation
-
-Installing React Native Elements depends on your type of react native project.
-
-<div class="toggler">
-  <ul role="tablist" >
-    <li id="expo" class="button-expo" aria-selected="false" role="tab" tabindex="0" aria-controls="expo" onclick="displayTab('expo')">
-      Expo | Create React Native App
-    </li>
-    <li id="native" class="button-native" aria-selected="false" role="tab" tabindex="-1" aria-controls="nativetab" onclick="displayTab('native')">
-      React Native CLI
-    </li>
-  </ul>
-</div>
-
-<block class="expo" />
-
-[Expo](https://expo.io) or
-[create-react-native-app](https://github.com/react-community/create-react-native-app)
-projects include **react-native-vector-icons** out of the box, so all you need
-to do is install **react-native-elements**.
-
-```
-yarn add react-native-elements
-# or with npm
-npm install react-native-elements
-```
-
-> **Note:** If you see the `UNMET PEER DEPENDENCY` warning for
-> **react-native-vector-icons** like below, you can ignore it as
-> _react-native-vector-icons_ is already installed by _expo_ or _crna_.
->
-> <img alt="React Native Vector Icons Unmet Peer Dependency" src={useBaseUrl('img/peer-dep-error.png')} />
-
-<block class="native" />
-
-If your project is a standard React Native project created using
-`react-native init` (it should have an ios/android directory), then follow these
-installation instructions:
-
-### Step 1: Install react-native-elements
-
-```
-yarn add react-native-elements
-# or with npm
-npm i react-native-elements --save
-```
-
-### Step 2: Install react-native-vector-icons
-
-If you have already installed **react-native-vector-icons** as a dependency for
-your project you can skip this step. Otherwise run the following command:
-
-> _Manual linking of react-native-vector-icons is not necessary if you're using react-native@0.60.0 or above since it is done automatically. This will throw an error though it won't prevent the application from running. To fix this you'll simply have to run `react-native unlink react-native-vector-icons` and the process will run as expected._
-
-```
-# yarn
-yarn add react-native-vector-icons
-# or with npm
-npm i --save react-native-vector-icons
-
-# link
-react-native link react-native-vector-icons
-```
-
-_If you have any issues installing react-native-vector-icons, check out their
-installation guide
-[here](https://github.com/oblador/react-native-vector-icons#installation) or
-debug it using
-[this issue](https://github.com/react-native-elements/react-native-elements/issues/503)._
diff --git a/website/versioned_docs/version-2.0.4/icon.md b/website/versioned_docs/version-2.0.4/icon.md
deleted file mode 100644
index 8f641b2a6b..0000000000
--- a/website/versioned_docs/version-2.0.4/icon.md
+++ /dev/null
@@ -1,271 +0,0 @@
----
-id: icon
-title: Icon
----
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-Icons are visual indicators usually used to describe action or intent.
-
-<img alt="Icon" src={useBaseUrl('img/icons.png')} />
-
-> Hint: use **reverse** to make your icon look like a button
-
-## Available Icon Sets
-
-The icon sets in React Native Elements are made possible through
-[react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).
-
-The current list of available icons sets are:
-
-- [material](https://material.io/tools/icons)
-- [material-community](https://materialdesignicons.com/)
-- [font-awesome](https://fontawesome.com/v4.7.0/)
-- [font-awesome-5](https://fontawesome.com/)
-- [octicon](https://octicons.github.com/)
-- [ionicon](http://ionicons.com/)
-- [foundation](http://zurb.com/playground/foundation-icon-fonts-3)
-- [evilicon](http://evil-icons.io/)
-- [simple-line-icon](https://simplelineicons.github.io/)
-- [zocial](http://weloveiconfonts.com/)
-- [entypo](http://www.entypo.com/)
-- [feather](https://feathericons.com/)
-- [antdesign](http://ant.design/components/icon/)
-- [fontisto](https://www.fontisto.com/icons)
-
-## Custom Icon Fonts
-
-Register your own custom icons by calling
-`registerCustomIconType('customid', customFont)`. Create a custom font by
-following the
-[ instructions for creating a custom font here](https://github.com/oblador/react-native-vector-icons#custom-fonts).
-Also, you can use [Fontello](http://fontello.com/) to generate custom icon
-fonts.
-
-## Usage
-
-```js
-import { Icon } from 'react-native-elements'
-
-<Icon
-  name='rowing' />
-
-<Icon
-  name='g-translate'
-  color='#00aced' />
-
-<Icon
-  name='sc-telegram'
-  type='evilicon'
-  color='#517fa4'
-/>
-
-<Icon
-  reverse
-  name='ios-american-football'
-  type='ionicon'
-  color='#517fa4'
-/>
-
-<Icon
-  raised
-  name='heartbeat'
-  type='font-awesome'
-  color='#f50'
-  onPress={() => console.log('hello')} />
-```
-
----
-
-## Props
-
-- [`brand`](#brand)
-- [`color`](#color)
-- [`containerStyle`](#containerstyle)
-- [`disabled`](#disabled)
-- [`disabledStyle`](#disabledstyle)
-- [`iconStyle`](#iconstyle)
-- [`name`](#name)
-- [`onPress`](#onpress)
-- [`onLongPress`](#onlongpress)
-- [`raised`](#raised)
-- [`reverse`](#reverse)
-- [`reverseColor`](#reversecolor)
-- [`size`](#size)
-- [`solid`](#solid)
-- [`type`](#type)
-- [`underlayColor`](#underlaycolor)
-- [`Component`](#Component)
-
----
-
-## Reference
-
-### `brand`
-
-Uses the brands font (FontAwesome5 only)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `color`
-
-color of icon (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  black  |
-
----
-
-### `containerStyle`
-
-add styling to container holding icon (optional)
-
-|        Type         |      Default      |
-| :-----------------: | :---------------: |
-| View style (object) | inherited styling |
-
----
-
-### `disabled`
-
-Disables onPress events (optional). Only works when `onPress` has a handler.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `disabledStyle`
-
-Style for the button when disabled (optional). Only works when `onPress` has a
-handler.
-
-|        Type         |              Default               |
-| :-----------------: | :--------------------------------: |
-| View style (object) | `{{ backgroundColor: '#D1D5D8' }}` |
-
----
-
-### `iconStyle`
-
-additional styling to icon (optional)
-
-|        Type         |     Default     |
-| :-----------------: | :-------------: |
-| View style (object) | inherited style |
-
----
-
-### `name`
-
-name of icon (required)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  none   |
-
----
-
-### `onPress`
-
-onPress method for button (optional)
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `onLongPress`
-
-onLongPress method for button (optional)
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `raised`
-
-adds box shadow to button (optional)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `reverse`
-
-reverses color scheme (optional)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `reverseColor`
-
-specify reverse icon color (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  white  |
-
----
-
-### `size`
-
-size of icon (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |   26    |
-
----
-
-### `solid`
-
-Uses the solid font (FontAwesome5 only)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `type`
-
-type of icon set. [Supported sets here](#available-icon-sets).
-
-|  Type  | Default  |
-| :----: | :------: |
-| string | material |
-
----
-
-### `underlayColor`
-
-underlayColor for press event
-
-|  Type  |  Default   |
-| :----: | :--------: |
-| string | icon color |
-
----
-
-### `Component`
-
-update React Native Component (optional)
-
-|          Type          |                                        Default                                        |
-| :--------------------: | :-----------------------------------------------------------------------------------: |
-| React Native component | View if no onPress method is defined, TouchableHighlight if onPress method is defined |
diff --git a/website/versioned_docs/version-2.0.4/image.md b/website/versioned_docs/version-2.0.4/image.md
deleted file mode 100644
index 85192f1095..0000000000
--- a/website/versioned_docs/version-2.0.4/image.md
+++ /dev/null
@@ -1,100 +0,0 @@
----
-id: image
-title: Image
----
-
-Drop-in replacement for the standard React Native Image component that displays
-images with a placeholder and smooth image load transitioning.
-
-<div class="component-preview component-preview--single margin-none">
-  <img src="https://user-images.githubusercontent.com/5962998/48658581-f4170a00-ea1a-11e8-866c-df4f42f21947.gif" alt="Image Component" />
-</div>
-
-## Usage
-
-```js
-import { ActivityIndicator } from 'react-native';
-import { Image } from 'react-native-elements';
-
-// Standard Image
-<Image
-  source={{ uri: image }}
-  style={{ width: 200, height: 200 }}
-/>
-
-
-// Image with custom placeholder content
-<Image
-  source={{ uri: image }}
-  style={{ width: 200, height: 200 }}
-  PlaceholderContent={<ActivityIndicator />}
-/>
-```
-
----
-
-## Props
-
-> Also receives all
-> [React Native Image](https://reactnative.dev/docs/image#props) props
->
-> Contains all
-> [React Native Image](https://reactnative.dev/docs/image#methods) methods.
-
-- [`containerStyle`](#containerstyle)
-- [`placeholderStyle`](#placeholderstyle)
-- [`transition`](#transition)
-- [`ImageComponent`](#imagecomponent)
-- [`PlaceholderContent`](#placeholdercontent)
-
----
-
-## Reference
-
-### `containerStyle`
-
-Additional styling for the container (optional)
-
-|        Type         | Default |
-| :-----------------: | :-----: |
-| View style (object) |  none   |
-
----
-
-### `placeholderStyle`
-
-Additional styling for the placeholder container (optional)
-
-|        Type         | Default |
-| :-----------------: | :-----: |
-| View style (object) |  none   |
-
----
-
-### `transition`
-
-Perform fade transition on image load
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  true   |
-
----
-
-### `ImageComponent`
-
-Specify a different component as the Image component.
-
-|          Type          | Default |
-| :--------------------: | :-----: |
-| React Native Component |  Image  |
-
----
-
-### `PlaceholderContent`
-
-Content to render when image is loading.
-
-|   Type    | Default |
-| :-------: | :-----: |
-| component |  none   |
diff --git a/website/versioned_docs/version-2.0.4/input.md b/website/versioned_docs/version-2.0.4/input.md
deleted file mode 100644
index 028a8f16fe..0000000000
--- a/website/versioned_docs/version-2.0.4/input.md
+++ /dev/null
@@ -1,322 +0,0 @@
----
-id: input
-title: Input
----
-
-Inputs allow users to enter text into a UI. They typically appear in forms and
-dialogs.
-
-<div class="component-preview component-preview--2">
-  <figure>
-    <img src="/img/input/input--placeholder.png" alt="Input with placeholder" />
-    <figcaption>Placeholder</figcaption>
-  </figure>
-  <figure>
-  <img src="/img/input/input--label.png" alt="Input with Label and icons" />
-    <figcaption>Label with Icons</figcaption>
-  </figure>
-</div>
-
-## Usage
-
-```js
-import Icon from 'react-native-vector-icons/FontAwesome';
-import { Input } from 'react-native-elements';
-
-<Input
-  placeholder='BASIC INPUT'
-/>
-
-<Input
-  placeholder='INPUT WITH ICON'
-  leftIcon={{ type: 'font-awesome', name: 'chevron-left' }}
-/>
-
-<Input
-  placeholder='INPUT WITH CUSTOM ICON'
-  leftIcon={
-    <Icon
-      name='user'
-      size={24}
-      color='black'
-    />
-  }
-/>
-
-
- <Input
-   placeholder="Comment"
-   leftIcon={{ type: 'font-awesome', name: 'comment' }}
-   style={styles}
-   onChangeText={value => this.setState({ comment: value })}
-  />
-
-
-<Input
-  placeholder='INPUT WITH ERROR MESSAGE'
-  errorStyle={{ color: 'red' }}
-  errorMessage='ENTER A VALID ERROR HERE'
-/>
-
-<Input placeholder="Password" secureTextEntry={true} />
-```
-
----
-
-## Props
-
-> This component inherits
-> [all native TextInput props that come with a standard React Native TextInput element](https://reactnative.dev/docs/textinput.html),
-> along with the following:
-
-- [`containerStyle`](#containerstyle)
-- [`disabled`](#disabled)
-- [`disabledInputStyle`](#disabledInputStyle)
-- [`inputContainerStyle`](#inputcontainerstyle)
-- [`errorMessage`](#errormessage)
-- [`errorStyle`](#errorstyle)
-- [`errorProps`](#errorprops)
-- [`inputStyle`](#inputstyle)
-- [`label`](#label)
-- [`labelStyle`](#labelstyle)
-- [`labelProps`](#labelprops)
-- [`leftIcon`](#lefticon)
-- [`leftIconContainerStyle`](#lefticoncontainerstyle)
-- [`rightIcon`](#righticon)
-- [`rightIconContainerStyle`](#righticoncontainerstyle)
-- [`renderErrorMessage`](#rendererrormessage)
-- [`InputComponent`](#inputcomponent)
-
----
-
-## Reference
-
-### `containerStyle`
-
-styling for view containing the label, the input and the error message
-
-|        Type         | Default |
-| :-----------------: | :-----: |
-| View style (object) |  none   |
-
----
-
-### `disabled`
-
-disables the input component
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `disabledInputStyle`
-
-disabled styles that will be passed to the `style` props of the React Native `TextInput` (optional)
-
-|        Type         | Default |
-| :-----------------: | :-----: |
-| Text style (object) |  none   |
-
----
-
-### `inputContainerStyle`
-
-styling for Input Component Container (optional)
-
-|        Type         | Default |
-| :-----------------: | :-----: |
-| View style (object) |  none   |
-
----
-
-### `errorMessage`
-
-adds error message (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  none   |
-
----
-
-### `errorStyle`
-
-add styling to error message (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| object |  none   |
-
----
-
-### `errorProps`
-
-props to be passed to the React Native `Text` component used to display the
-error message (optional)
-
-|                              Type                               | Default |
-| :-------------------------------------------------------------: | :-----: |
-| {[...Text props](https://reactnative.dev/docs/text.html#props)} |  none   |
-
----
-
-### `inputStyle`
-
-style that will be passed to the `style` props of the React Native `TextInput`
-(optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| object |  none   |
-
----
-
-### `label`
-
-add a label on top of the input (optional)
-
-|                   Type                   | Default |
-| :--------------------------------------: | :-----: |
-| string **OR** React element or component |  none   |
-
----
-
-### `labelStyle`
-
-styling for the label (optional); You can only use this if `label` is a string
-
-|  Type  | Default |
-| :----: | :-----: |
-| object |  none   |
-
----
-
-### `labelProps`
-
-props to be passed to the React Native `Text` component used to display the
-label or React Component used instead of simple string in `label` prop
-(optional)
-
-|                                             Type                                              | Default |
-| :-------------------------------------------------------------------------------------------: | :-----: |
-| {[...Text props](https://reactnative.dev/docs/text.html#props)} **OR** passed component props |  none   |
-
----
-
-### `leftIcon`
-
-displays an icon on the left (optional)
-
-|                            Type                            | Default |
-| :--------------------------------------------------------: | :-----: |
-| {[...Icon props](icon.md#props)}<br/>**OR**<br/> component |  none   |
-
----
-
-### `leftIconContainerStyle`
-
-styling for left Icon Component container
-
-|        Type         | Default |
-| :-----------------: | :-----: |
-| View style (object) |  none   |
-
----
-
-### `placeholder`
-
-Placeholder text for the input
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  none   |
-
----
-
-### `rightIcon`
-
-displays an icon on the right (optional)
-
-|                            Type                            | Default |
-| :--------------------------------------------------------: | :-----: |
-| {[...Icon props](icon.md#props)}<br/>**OR**<br/> component |  none   |
-
----
-
-### `rightIconContainerStyle`
-
-styling for right Icon Component container
-
-|        Type         | Default |
-| :-----------------: | :-----: |
-| View style (object) |  none   |
-
----
-
-### `renderErrorMessage`
-
-If the error message container should be rendered (take up vertical space). If `false`, when showing errorMessage, the layout will shift to add it at that time.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  true   |
-
----
-
-### `InputComponent`
-
-component that will be rendered in place of the React Native `TextInput`
-(optional)
-
-|          Type          |  Default  |
-| :--------------------: | :-------: |
-| React Native Component | TextInput |
-
----
-
-#### Styles explanation
-
-| Input with a label and an error message          | Styles explanation                            |
-| ------------------------------------------------ | --------------------------------------------- |
-| <img src="/img/input_without_explanation.png" /> | <img src="/img/input_with_explanation.png" /> |
-
----
-
-## Interaction methods
-
-| method         | description                                       |
-| -------------- | ------------------------------------------------- |
-| focus          | Focuses the Input                                 |
-| blur           | Removes focus from the Input                      |
-| clear          | Clears the text in the Input                      |
-| isFocused      | Returns `true` or `false` if the Input is focused |
-| setNativeProps | Sets props directly on the react native component |
-| shake          | Shakes the input for error feedback               |
-
-### Calling methods on Input
-
-Store a reference to the Input in your component by using the ref prop
-provided by React
-([see docs](https://facebook.github.io/react/docs/refs-and-the-dom.html)):
-
-```js
-const input = React.createRef();
-
-<Input
-  ref={input}
-  ...
-/>
-```
-
-You can then use the Input methods like this:
-
-```js
-input.current.focus();
-input.current.blur();
-input.current.clear();
-input.current.isFocused();
-input.current.setNativeProps({ value: 'hello' });
-input.current.shake();
-```
diff --git a/website/versioned_docs/version-2.0.4/listitem.md b/website/versioned_docs/version-2.0.4/listitem.md
deleted file mode 100644
index 7e5604c816..0000000000
--- a/website/versioned_docs/version-2.0.4/listitem.md
+++ /dev/null
@@ -1,667 +0,0 @@
----
-id: listitem
-title: ListItem
----
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-ListItems are used to display rows of information, such as a contact list,
-playlist, or menu. They are very customizable and can contain switches,
-avatars, badges, icons, and more.
-
-<img alt="Lists" src={useBaseUrl('img/lists.png')} />
-
-## Usage
-
-### Using Map Function - Implemented with avatar
-
-```js
-import { ListItem } from 'react-native-elements'
-
-const list = [
-  {
-    name: 'Amy Farha',
-    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
-    subtitle: 'Vice President'
-  },
-  {
-    name: 'Chris Jackson',
-    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
-    subtitle: 'Vice Chairman'
-  },
-  ... // more items
-]
-
-<View>
-  {
-    list.map((l, i) => (
-      <ListItem
-        key={i}
-        leftAvatar={{ source: { uri: l.avatar_url } }}
-        title={l.name}
-        subtitle={l.subtitle}
-        bottomDivider
-      />
-    ))
-  }
-</View>
-```
-
-### Using Map Function - Implemented with link and icon
-
-```js
-import { ListItem } from 'react-native-elements'
-
-const list = [
-  {
-    title: 'Appointments',
-    icon: 'av-timer'
-  },
-  {
-    title: 'Trips',
-    icon: 'flight-takeoff'
-  },
-  ... // more items
-]
-
-<View>
-  {
-    list.map((item, i) => (
-      <ListItem
-        key={i}
-        title={item.title}
-        leftIcon={{ name: item.icon }}
-        bottomDivider
-        chevron
-      />
-    ))
-  }
-</View>
-```
-
-### Using RN FlatList - Implemented with link and avatar
-
-```js
-import { ListItem } from 'react-native-elements'
-
-const list = [
-  {
-    name: 'Amy Farha',
-    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
-    subtitle: 'Vice President'
-  },
-  {
-    name: 'Chris Jackson',
-    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
-    subtitle: 'Vice Chairman'
-  },
-  ... // more items
-]
-
-keyExtractor = (item, index) => index.toString()
-
-renderItem = ({ item }) => (
-  <ListItem
-    title={item.name}
-    subtitle={item.subtitle}
-    leftAvatar={{ source: { uri: item.avatar_url } }}
-    bottomDivider
-    chevron
-  />
-)
-
-render () {
-  return (
-    <FlatList
-      keyExtractor={this.keyExtractor}
-      data={list}
-      renderItem={this.renderItem}
-    />
-  )
-}
-```
-
-### Using RN FlatList - Implemented with custom avatar component.
-
-```js
-import { ListItem } from 'react-native-elements'
-
-const list = [
-  {
-    name: 'Amy Farha',
-    subtitle: 'Vice President'
-  },
-  {
-    name: 'Chris Jackson',
-    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
-    subtitle: 'Vice Chairman'
-  },
-  ... // more items
-]
-
-keyExtractor = (item, index) => index.toString()
-
-renderItem = ({ item }) => (
-  <ListItem
-    title={item.name}
-    subtitle={item.subtitle}
-    leftAvatar={{
-      source: item.avatar_url && { uri: item.avatar_url },
-      title: item.name[0]
-    }}
-    bottomDivider
-    chevron
-  />
-)
-
-render () {
-  return (
-    <FlatList
-      keyExtractor={this.keyExtractor}
-      data={list}
-      renderItem={this.renderItem}
-    />
-  )
-}
-```
-
-### ListItem implemented with custom View for Subtitle
-
-```js
-import { ListItem } from 'react-native-elements'
-
-render () {
-  return (
-    <ListItem
-      title='Limited supply! Its like digital gold!'
-      subtitle={
-        <View style={styles.subtitleView}>
-          <Image source={require('../images/rating.png')} style={styles.ratingImage}/>
-          <Text style={styles.ratingText}>5 months ago</Text>
-        </View>
-      }
-      leftAvatar={{ source: require('../images/avatar1.jpg') }}
-    />
-  )
-}
-
-styles = StyleSheet.create({
-  subtitleView: {
-    flexDirection: 'row',
-    paddingLeft: 10,
-    paddingTop: 5
-  },
-  ratingImage: {
-    height: 19.21,
-    width: 100
-  },
-  ratingText: {
-    paddingLeft: 10,
-    color: 'grey'
-  }
-})
-```
-
-### Badges
-
-<img alt="Badges" src={useBaseUrl('img/list-badges.png')} />
-
-Example badge usage
-
-```js
-<ListItem
-  ...
-  badge={{ value: 3, textStyle: { color: 'orange' }, containerStyle: { marginTop: -20 } }}
-/>
-```
-
-### Linear gradient + Scale feedback
-
-<img src="/img/listitem_with_gradient_scale.gif" width="500" />
-
-```js
-import TouchableScale from 'react-native-touchable-scale'; // https://github.com/kohver/react-native-touchable-scale
-import LinearGradient from 'react-native-linear-gradient'; // Only if no expo
-
-<ListItem
-  Component={TouchableScale}
-  friction={90} //
-  tension={100} // These props are passed to the parent component (here TouchableScale)
-  activeScale={0.95} //
-  linearGradientProps={{
-    colors: ['#FF9800', '#F44336'],
-    start: { x: 1, y: 0 },
-    end: { x: 0.2, y: 0 },
-  }}
-  ViewComponent={LinearGradient} // Only if no expo
-  leftAvatar={{ rounded: true, source: { uri: avatar_url } }}
-  title="Chris Jackson"
-  titleStyle={{ color: 'white', fontWeight: 'bold' }}
-  subtitleStyle={{ color: 'white' }}
-  subtitle="Vice Chairman"
-  chevron={{ color: 'white' }}
-/>;
-```
-
----
-
-## Props
-
-> Also receives all
-> [TouchableHighlight](https://reactnative.dev/docs/touchablehighlight#props)
-> props
-
-- [`Component`](#Component)
-- [`containerStyle`](#containerstyle)
-- [`contentContainerStyle`](#contentcontainerstyle)
-- [`rightContentContainerStyle`](#rightcontentcontainerstyle)
-- [`chevron`](#chevron)
-- [`checkmark`](#checkmark)
-- [`onPress`](#onpress)
-- [`onLongPress`](#onlongpress)
-- [`title`](#title)
-- [`titleStyle`](#titlestyle)
-- [`titleProps`](#titleprops)
-- [`subtitle`](#subtitle)
-- [`subtitleStyle`](#subtitlestyle)
-- [`subtitleProps`](#subtitleprops)
-- [`rightTitle`](#righttitle)
-- [`rightTitleStyle`](#righttitlestyle)
-- [`rightTitleProps`](#righttitleprops)
-- [`rightSubtitle`](#rightsubtitle)
-- [`rightSubtitleStyle`](#rightsubtitlestyle)
-- [`rightSubtitleProps`](#rightsubtitleprops)
-- [`leftIcon`](#lefticon)
-- [`rightIcon`](#righticon)
-- [`leftAvatar`](#leftavatar)
-- [`rightAvatar`](#rightavatar)
-- [`leftElement`](#leftelement)
-- [`rightElement`](#rightelement)
-- [`switch`](#switch)
-- [`input`](#input)
-- [`buttonGroup`](#buttongroup)
-- [`checkBox`](#checkbox)
-- [`badge`](#badge)
-- [`disabled`](#disabled)
-- [`disabledStyle`](#disabledstyle)
-- [`topDivider`](#topdivider)
-- [`bottomDivider`](#bottomdivider)
-- [`ViewComponent`](#viewcomponent)
-- [`pad`](#pad)
-
----
-
-## Reference
-
-### `Component`
-
-replace element with custom element (optional)
-
-|                                  Type                                   |  Default  |
-| :---------------------------------------------------------------------: | :-------: |
-| View or TouchableHighlight (default) if onPress method is added as prop | component |
-
----
-
-### `containerStyle`
-
-additional main container styling (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `contentContainerStyle`
-
-additional wrapper styling (title and subtitle container)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `rightContentContainerStyle`
-
-additional wrapper styling (right title and subtitle container)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `chevron`
-
-set it to true or custom icon props if you want a chevron (optional)
-
-|                                       Type                                        | Default |
-| :-------------------------------------------------------------------------------: | :-----: |
-| boolean **OR** {[...Icon props](icon.md#props)} **OR** React element or component |  none   |
-
----
-
-### `checkmark`
-
-set it to true or custom icon props if you want a checkmark (optional)
-
-|                                       Type                                        | Default |
-| :-------------------------------------------------------------------------------: | :-----: |
-| boolean **OR** {[...Icon props](icon.md#props)} **OR** React element or component |  none   |
-
----
-
-### `onPress`
-
-onPress method for link (optional)
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `onLongPress`
-
-onLongPress method for link (optional)
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `title`
-
-Main title of list item
-
-|            Type             | Default |
-| :-------------------------: | :-----: |
-| string **OR** React element |  none   |
-
----
-
-### `titleStyle`
-
-Add additional styling
-
-|    Type    | Default |
-| :--------: | :-----: |
-| Text style |  none   |
-
----
-
-### `titleProps`
-
-provide all props from react-native Text component
-
-|                              Type                               | Default |
-| :-------------------------------------------------------------: | :-----: |
-| {[...Text props](https://reactnative.dev/docs/text.html#props)} |  none   |
-
----
-
-### `subtitle`
-
-subtitle text or custom view (optional)
-
-|            Type             | Default |
-| :-------------------------: | :-----: |
-| string **OR** React element |  none   |
-
----
-
-### `subtitleStyle`
-
-Add additional styling
-
-|    Type    | Default |
-| :--------: | :-----: |
-| Text style |  none   |
-
----
-
-### `subtitleProps`
-
-provide all props from react-native Text component
-
-|                              Type                               | Default |
-| :-------------------------------------------------------------: | :-----: |
-| {[...Text props](https://reactnative.dev/docs/text.html#props)} |  none   |
-
----
-
-### `rightTitle`
-
-Show up a title on the right side of the list item
-
-|            Type             | Default |
-| :-------------------------: | :-----: |
-| string **OR** React element |  none   |
-
----
-
-### `rightTitleStyle`
-
-add additional styling
-
-|    Type    | Default |
-| :--------: | :-----: |
-| Text style |  none   |
-
----
-
-### `rightTitleProps`
-
-provide all props from react-native Text component
-
-|                              Type                               | Default |
-| :-------------------------------------------------------------: | :-----: |
-| {[...Text props](https://reactnative.dev/docs/text.html#props)} |  none   |
-
----
-
-### `rightSubtitle`
-
-Show up a subtitle on the right side of the list item
-
-|            Type             | Default |
-| :-------------------------: | :-----: |
-| string **OR** React element |  none   |
-
----
-
-### `rightSubtitleStyle`
-
-Add additional styling
-
-|    Type    | Default |
-| :--------: | :-----: |
-| Text style |  none   |
-
----
-
-### `rightSubtitleProps`
-
-provide all props from react-native Text component
-
-|                              Type                               | Default |
-| :-------------------------------------------------------------: | :-----: |
-| {[...Text props](https://reactnative.dev/docs/text.html#props)} |  none   |
-
----
-
-### `leftIcon`
-
-displays an icon on the left (optional)
-
-|                            Type                            | Default |
-| :--------------------------------------------------------: | :-----: |
-| {[...Icon props](icon.md#props)}<br/>**OR**<br/> component |  none   |
-
----
-
-### `rightIcon`
-
-displays an icon on the right (optional)
-
-|                            Type                            | Default |
-| :--------------------------------------------------------: | :-----: |
-| {[...Icon props](icon.md#props)}<br/>**OR**<br/> component |  none   |
-
----
-
-### `leftAvatar`
-
-displays an Avatar on the left (optional)
-
-|                              Type                              | Default |
-| :------------------------------------------------------------: | :-----: |
-| {[...Avatar props](avatar.md#props)}<br/>**OR**<br/> component |  none   |
-
----
-
-### `rightAvatar`
-
-displays an Avatar on the right (optional)
-
-|                                       Type                                        | Default |
-| :-------------------------------------------------------------------------------: | :-----: |
-| View style (object){[...Avatar props](avatar.md#props)}<br/>**OR**<br/> component |  none   |
-
----
-
-### `leftElement`
-
-Add any element on the left side of the list item
-
-|     Type      | Default |
-| :-----------: | :-----: |
-| React element |  none   |
-
----
-
-### `rightElement`
-
-Add any element on the right side of the list item
-
-|     Type      | Default |
-| :-----------: | :-----: |
-| React element |  none   |
-
----
-
-### `switch`
-
-add a switch to the right side. (object with the props of the react-native
-`Switch` component)
-
-|                                Type                                 | Default |
-| :-----------------------------------------------------------------: | :-----: |
-| {[...Switch props](https://reactnative.dev/docs/switch.html#props)} |  none   |
-
----
-
-### `input`
-
-add an Input on the right side (object with the props of the React Native
-Elements `Input` component)
-
-|                Type                | Default |
-| :--------------------------------: | :-----: |
-| {[...Input props](input.md#props)} |  none   |
-
----
-
-### `buttonGroup`
-
-add a button group on the right side (object with the props of the React Native
-Elements `ButtonGroup` component)
-
-|                      Type                       | Default |
-| :---------------------------------------------: | :-----: |
-| {[...ButtonGroup props](button_group.md#props)} |  none   |
-
----
-
-### `checkBox`
-
-add a checkbox on the right side (object with the props of the React Native
-Elements `CheckBox` component)
-
-|                   Type                   | Default |
-| :--------------------------------------: | :-----: |
-| {[...CheckBox props](checkbox.md#props)} |  none   |
-
----
-
-### `badge`
-
-add a badge on the right side (object with the props of the React Native
-Elements `Badge` component)
-
-|                Type                | Default |
-| :--------------------------------: | :-----: |
-| {[...Badge props](badge.md#props)} |  none   |
-
----
-
-### `disabled`
-
-If true the user won't be able to perform any action on the list item.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  none   |
-
----
-
-### `disabledStyle`
-
-Specific styling to be used when list item is disabled.
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `topDivider`
-
-Add divider at the top of the list item
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `bottomDivider`
-
-Add divider at the bottom of the list item
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `ViewComponent`
-
-Container for linear gradient (for non-expo user)
-
-|   Type    | Default |
-| :-------: | :-----: |
-| component |  View   |
-
----
-
-### `pad`
-
-adds spacing between the leftComponent, the title component & right component
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |  `16`   |
diff --git a/website/versioned_docs/version-2.0.4/rating.md b/website/versioned_docs/version-2.0.4/rating.md
deleted file mode 100644
index 6d7f7e9e95..0000000000
--- a/website/versioned_docs/version-2.0.4/rating.md
+++ /dev/null
@@ -1,306 +0,0 @@
----
-id: rating
-title: Rating
----
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-Ratings are used to collect measurable feedback from users. Use Rating over an
-Input where imagery can increase user interaction.
-
-> This component is imported from [react-native-ratings](https://github.com/Monte9/react-native-ratings)
-
-<img src="https://raw.githubusercontent.com/Monte9/react-native-ratings/master/resources/airbnb_ratings.gif" width="500" />
-
-## Usage
-
-```js
-import { Rating, AirbnbRating } from 'react-native-elements';
-
-ratingCompleted(rating) {
-  console.log("Rating is: " + rating)
-}
-
-<AirbnbRating />
-
-<AirbnbRating
-  count={11}
-  reviews={["Terrible", "Bad", "Meh", "OK", "Good", "Hmm...", "Very Good", "Wow", "Amazing", "Unbelievable", "Jesus"]}
-  defaultRating={11}
-  size={20}
-/>
-
-<Rating
-  showRating
-  onFinishRating={this.ratingCompleted}
-  style={{ paddingVertical: 10 }}
-/>
-
-<Rating
-  type='heart'
-  ratingCount={3}
-  imageSize={60}
-  showRating
-  onFinishRating={this.ratingCompleted}
-/>
-
-const WATER_IMAGE = require('./water.png')
-
-<Rating
-  type='custom'
-  ratingImage={WATER_IMAGE}
-  ratingColor='#3498db'
-  ratingBackgroundColor='#c8c7c8'
-  ratingCount={10}
-  imageSize={30}
-  onFinishRating={this.ratingCompleted}
-  style={{ paddingVertical: 10 }}
-/>
-```
-
-### Read-only mode
-
-```js
-const { rating } = this.props;
-
-<Rating imageSize={20} readonly startingValue={rating} style={styles.rating} />;
-```
-
-<img alt="readonly demo jpg" src={useBaseUrl('img/rating_readonly.png')} />
-
-### Fractions
-
-```html
-<Rating showRating fractions="{1}" startingValue="{3.3}" />
-```
-
-![Fractions demo gif](https://cloud.githubusercontent.com/assets/241553/26780040/e8cd1a2c-49f8-11e7-8859-6dd9b4e0a779.gif)
-
----
-
-## Props
-
-### AirbnbRating
-
-- [`defaultRating`](#defaultrating)
-- [`reviews`](#reviews)
-- [`count`](#count)
-- [`showRating`](#showrating)
-- [`onFinishRating`](#onfinishrating)
-
-## Rating
-
-- [`type`](#type)
-- [`ratingImage`](#ratingimage)
-- [`ratingColor`](#ratingcolor)
-- [`ratingBackgroundColor`](#ratingbackgroundcolor)
-- [`ratingCount`](#ratingcount)
-- [`ratingTextColor`](#ratingtextcolor)
-- [`imageSize`](#imagesize)
-- [`showRating`](#showrating)
-- [`readonly`](#readonly)
-- [`startingValue`](#startingvalue)
-- [`fractions`](#fractions)
-- [`minValue`](#minValue)
-- [`style`](#style)
-- [`onStartRating`](#onstartrating)
-- [`onFinishRating`](#onfinishrating)
-
----
-
-## Reference
-
-### `defaultRating`
-
-Initial value for the rating
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |    3    |
-
----
-
-### `reviews`
-
-Labels to show when each value is tapped
-e.g. If the first star is tapped, then value in index 0 will be used as the label
-
-|   Type   |                   Default                    |
-| :------: | :------------------------------------------: |
-| string[] | ['Terrible', 'Bad', 'Okay', 'Good', 'Great'] |
-
----
-
-### `count`
-
-Total number of ratings to display
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |    5    |
-
----
-
-### `showRating`
-
-Determines if to show the reviews above the rating
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  true   |
-
----
-
-### `onFinishRating`
-
-Callback method when the user finishes rating. Gives you the final rating value
-as a whole number **(required)**
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `onStartRating`
-
-Callback method when the user starts the rating. (optional)
-
-|   Type   |  Default  |
-| :------: | :-------: |
-| function | undefined |
-
----
-
-### `fractions`
-
-The number of decimal places for the rating value; must be between 0 and 20
-(optional)
-
-|  Type  |  Default  |
-| :----: | :-------: |
-| number | undefined |
-
----
-
-### `imageSize`
-
-The size of each rating image (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |   50    |
-
----
-
-### `ratingBackgroundColor`
-
-Pass in a custom background-fill-color for the rating icon; use this along with
-`type='custom'` prop above (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| string (color) |  white  |
-
----
-
-### `ratingColor`
-
-Pass in a custom fill-color for the rating icon; use this along with
-`type='custom'` prop above (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| string (color) | #f1c40f |
-
----
-
-### `ratingCount`
-
-The number of rating images to display (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |    5    |
-
----
-
-### `ratingImage`
-
-Pass in a custom image source; use this along with `type='custom'` prop above
-(optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  star   |
-
----
-
-### `ratingTextColor`
-
-Pass in a custom text color for the rating text (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| string (color) | #f1c40f |
-
----
-
-### `readonly`
-
-Whether the rating can be modified by the user (optional)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `showRating`
-
-Displays the Built-in Rating UI to show the rating value in real-time (optional)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  none   |
-
----
-
-### `startingValue`
-
-The initial rating to render (optional)
-
-|  Type  |     Default     |
-| :----: | :-------------: |
-| number | ratingCount / 2 |
-
----
-
-### `minValue`
-
-The minimum value the user can select
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |    0    |
-
----
-
-### `style`
-
-Exposes style prop to add additional styling to the container view (optional)
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `type`
-
-Choose one of the built-in types: `star`, `rocket`, `bell`, `heart` or use type
-`custom` to render a custom image (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  star   |
diff --git a/website/versioned_docs/version-2.0.4/slider.md b/website/versioned_docs/version-2.0.4/slider.md
deleted file mode 100644
index 2a446859c0..0000000000
--- a/website/versioned_docs/version-2.0.4/slider.md
+++ /dev/null
@@ -1,262 +0,0 @@
----
-id: slider
-title: Slider
----
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-Sliders allow users to select a value from a fixed set of options.
-
-<img alt="Slider" src={useBaseUrl('img/slider_screenshot.png')} />
-
-> This component is a forked implementation of
-> [react-native-slider](https://github.com/jeanregisser/react-native-slider).
-
-## Usage
-
-```js
-import { Slider } from 'react-native-elements';
-
-<View style={{ flex: 1, alignItems: 'stretch', justifyContent: 'center' }}>
-  <Slider
-    value={this.state.value}
-    onValueChange={(value) => this.setState({ value })}
-  />
-  <Text>Value: {this.state.value}</Text>
-</View>;
-```
-
----
-
-## Props
-
-- [`animateTransitions`](#animatetransitions)
-- [`animationConfig`](#animationconfig)
-- [`animationType`](#animationtype)
-- [`debugTouchArea`](#debugtoucharea)
-- [`disabled`](#disabled)
-- [`maximumTrackTintColor`](#maximumtracktintcolor)
-- [`maximumValue`](#maximumvalue)
-- [`minimumTrackTintColor`](#minimumtracktintcolor)
-- [`minimumValue`](#minimumvalue)
-- [`onSlidingComplete`](#onslidingcomplete)
-- [`onSlidingStart`](#onslidingstart)
-- [`onValueChange`](#onvaluechange)
-- [`orientation`](#orientation)
-- [`step`](#step)
-- [`style`](#style)
-- [`thumbStyle`](#thumbstyle)
-- [`thumbTintColor`](#thumbtintcolor)
-- [`thumbTouchSize`](#thumbtouchsize)
-- [`trackStyle`](#trackstyle)
-- [`value`](#value)
-
----
-
-## Reference
-
-### `animateTransitions`
-
-Set to true if you want to use the default 'spring' animation
-
-| Type | Default | Optional |
-| :--: | :-----: | :------: |
-| bool |  false  |   Yes    |
-
----
-
-### `animationConfig`
-
-Used to configure the animation parameters. These are the same parameters in the
-[Animated library](https://reactnative.dev/docs/animations.html).
-
-|  Type  |  Default  | Optional |
-| :----: | :-------: | :------: |
-| object | undefined |   Yes    |
-
----
-
-### `animationType`
-
-Set to 'spring' or 'timing' to use one of those two types of animations with the
-default
-[animation properties](https://reactnative.dev/docs/animations.html).
-
-|  Type  | Default  | Optional |
-| :----: | :------: | :------: |
-| string | 'timing' |   Yes    |
-
----
-
-### `debugTouchArea`
-
-Set this to true to visually see the thumb touch rect in green.
-
-| Type | Default | Optional |
-| :--: | :-----: | :------: |
-| bool |  false  |   Yes    |
-
----
-
-### `disabled`
-
-If true the user won't be able to move the slider
-
-| Type | Default | Optional |
-| :--: | :-----: | :------: |
-| bool |  false  |   Yes    |
-
----
-
-### `maximumTrackTintColor`
-
-The color used for the track to the right of the button
-
-|  Type  |  Default  | Optional |
-| :----: | :-------: | :------: |
-| string | '#b3b3b3' |   Yes    |
-
----
-
-### `maximumValue`
-
-Initial maximum value of the slider
-
-|  Type  | Default | Optional |
-| :----: | :-----: | :------: |
-| number |    1    |   Yes    |
-
----
-
-### `minimumTrackTintColor`
-
-The color used for the track to the left of the button
-
-|  Type  |  Default  | Optional |
-| :----: | :-------: | :------: |
-| string | '#3f3f3f' |   Yes    |
-
----
-
-### `minimumValue`
-
-Initial minimum value of the slider
-
-|  Type  | Default | Optional |
-| :----: | :-----: | :------: |
-| number |    0    |   Yes    |
-
----
-
-### `onSlidingComplete`
-
-Callback called when the user finishes changing the value (e.g. when the slider
-is released)
-
-|   Type   | Default | Optional |
-| :------: | :-----: | :------: |
-| function |         |   Yes    |
-
----
-
-### `onSlidingStart`
-
-Callback called when the user starts changing the value (e.g. when the slider is
-pressed)
-
-|   Type   | Default | Optional |
-| :------: | :-----: | :------: |
-| function |         |   Yes    |
-
----
-
-### `onValueChange`
-
-Callback continuously called while the user is dragging the slider
-
-|   Type   | Default | Optional |
-| :------: | :-----: | :------: |
-| function |         |   Yes    |
-
----
-
-### `orientation`
-
-Set the orientation of the slider.
-
-|  Type  |   Default    | Optional |
-| :----: | :----------: | :------: |
-| string | 'horizontal' |   Yes    |
-
----
-
-### `step`
-
-Step value of the slider. The value should be between 0 and maximumValue -
-minimumValue)
-
-|  Type  | Default | Optional |
-| :----: | :-----: | :------: |
-| number |    0    |   Yes    |
-
----
-
-### `style`
-
-The style applied to the slider container
-
-|                         Type                         | Default | Optional |
-| :--------------------------------------------------: | :-----: | :------: |
-| [style](http://reactnative.dev/docs/view.html#style) |         |   Yes    |
-
----
-
-### `thumbStyle`
-
-The style applied to the thumb
-
-|                         Type                         | Default | Optional |
-| :--------------------------------------------------: | :-----: | :------: |
-| [style](http://reactnative.dev/docs/view.html#style) |         |   Yes    |
-
----
-
-### `thumbTintColor`
-
-The color used for the thumb
-
-|  Type  |  Default  | Optional |
-| :----: | :-------: | :------: |
-| string | '#343434' |   Yes    |
-
----
-
-### `thumbTouchSize`
-
-The size of the touch area that allows moving the thumb. The touch area has the
-same center as the visible thumb. This allows to have a visually small thumb
-while still allowing the user to move it easily.
-
-|  Type  |          Default          | Optional |
-| :----: | :-----------------------: | :------: |
-| object | `{width: 40, height: 40}` |   Yes    |
-
----
-
-### `trackStyle`
-
-The style applied to the track
-
-|                         Type                         | Default | Optional |
-| :--------------------------------------------------: | :-----: | :------: |
-| [style](http://reactnative.dev/docs/view.html#style) |         |   Yes    |
-
----
-
-### `value`
-
-Initial value of the slider
-
-|  Type  | Default | Optional |
-| :----: | :-----: | :------: |
-| number |    0    |   Yes    |
diff --git a/website/versioned_docs/version-2.0.4/testing.md b/website/versioned_docs/version-2.0.4/testing.md
deleted file mode 100644
index 93de64342d..0000000000
--- a/website/versioned_docs/version-2.0.4/testing.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-id: testing
-title: Testing
----
-
-We are using tests to make sure components keep their functionality between versions and edits.
-They're many testing libraries for JavaScript and React Native, depending on what type of testing you're doing.
-
-The type of tests we use on React Native Elements are [Snapshot](#snapshot-testing)
-and [Functional](#functional-testing) tests.
-
-## Snapshot Testing
-
-Snapshot testing sounds exactly like what it does! It takes snapshot of the structure of a rendered
-component the props, and their values and saves it. Whenever a change is made it'll compare it to the original snapshot -
-just to be super sure the change you wanted to make had the desired outcome.
-If the outcomes is what you expected, then you need to **update the snapshot**, so that your changes will be the new
-standard to compare to for changes in the future.
-
-To update the snapshots run this command:
-
-```bash
-# yarn
-yarn test -u
-
-# npm
-npm run test -u
-```
-
-For Snapshot Testing, we use [Jest](https://facebook.github.io/jest/).
-
-You can read more about snapshot testing [here](https://facebook.github.io/jest/docs/en/snapshot-testing.html).
-
-## Functional Testing
-
-Functional tests ensures that a component functions the way it should(_simplified_). This is important
-for making changes to components, as it makes sure we don't break how something worked previously.
-
-For example:
-
-```md
-If a user touches on a button in the button group, then the button selected should be highlighted
-and the previous one un-highlighted.
-```
-
-For Functional Testing, we use [Enzyme](http://airbnb.io/enzyme/).
-
-You can read more about functional testing [here](https://www.guru99.com/functional-testing.html).
diff --git a/website/versioned_docs/version-2.0.4/tile.md b/website/versioned_docs/version-2.0.4/tile.md
deleted file mode 100644
index ead1422411..0000000000
--- a/website/versioned_docs/version-2.0.4/tile.md
+++ /dev/null
@@ -1,286 +0,0 @@
----
-id: tile
-title: Tile
----
-
-Tiles like Cards, are a convenient way to display related content about a single
-subject.
-
-> This component was inspired from [Shoutem UI](https://github.com/shoutem/ui)
-> by [Shoutem](https://github.com/shoutem). Check out
-> [Shoutem](http://shoutem.github.io/) if you haven't already!
-
-## Usage
-
-### Featured Tile
-
-![screen shot 2017-01-15 at 9 50 15 pm](https://cloud.githubusercontent.com/assets/6476108/21969491/beea4630-db6c-11e6-8913-7cc8813e35d6.png)
-
-```js
-import { Tile } from 'react-native-elements';
-
-<Tile
-  imageSrc={require('./img/path')}
-  title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores dolore exercitationem"
-  featured
-  caption="Some Caption Text"
-/>;
-```
-
-### Featured Tile with Icon
-
-![screen shot 2017-01-15 at 9 50 22 pm](https://cloud.githubusercontent.com/assets/6476108/21969581/6004e408-db6d-11e6-9379-556a0c5e967a.png)
-
-```js
-import { Tile } from 'react-native-elements';
-
-<Tile
-  imageSrc={require('./img/path')}
-  icon={{ name: 'play-circle', type: 'font-awesome' }}
-  featured
-/>;
-```
-
-### Tile with Icon
-
-![screen shot 2017-01-15 at 9 50 34 pm](https://cloud.githubusercontent.com/assets/6476108/21969683/fce073f0-db6d-11e6-8d03-6e42c15627a9.png)
-
-```js
-import { Tile } from 'react-native-elements';
-
-<Tile
-  imageSrc={require('./img/path')}
-  title="Lorem ipsum dolor sit amet, consectetur"
-  icon={{ name: 'play-circle', type: 'font-awesome' }} // optional
-  contentContainerStyle={{ height: 70 }}
->
-  <View
-    style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}
-  >
-    <Text>Caption</Text>
-    <Text>Caption</Text>
-  </View>
-</Tile>;
-```
-
----
-
-## Props
-
-> Also receives all
-> [TouchableNativeFeedback](http://reactnative.dev/docs/touchablenativefeedback.html#props)
-> (Android) or
-> [TouchableOpacity](http://reactnative.dev/docs/touchableopacity.html#props)
-> (iOS) props
-
-- [`activeOpacity`](#activeopacity)
-- [`caption`](#caption)
-- [`captionStyle`](#captionstyle)
-- [`containerStyle`](#containerstyle)
-- [`contentContainerStyle`](#contentcontainerstyle)
-- [`featured`](#featured)
-- [`height`](#height)
-- [`icon`](#icon)
-- [`iconContainerStyle`](#iconcontainerstyle)
-- [`imageContainerStyle`](#imagecontainerstyle)
-- [`imageProps`](#imageprops)
-- [`imageSrc`](#imagesrc)
-- [`onPress`](#onpress)
-- [`overlayContainerStyle`](#overlaycontainerstyle)
-- [`title`](#title)
-- [`titleNumberOfLines`](#titlenumberoflines)
-- [`titleStyle`](#titlestyle)
-- [`width`](#width)
-- [`ImageComponent`](#imagecomponent)
-
----
-
-## Reference
-
-### `activeOpacity`
-
-Number passed to control opacity on press (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |   0.2   |
-
----
-
-### `caption`
-
-Text inside the tilt when tile is featured
-
-|                   Type                   | Default |
-| :--------------------------------------: | :-----: |
-| string **OR** React element or component |  none   |
-
----
-
-### `captionStyle`
-
-Styling for the caption (optional); You only use this if `caption` is a string
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `containerStyle`
-
-Styling for the outer tile container (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `contentContainerStyle`
-
-Styling for bottom container when not featured tile (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `featured`
-
-Changes the look of the tile (optional)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `height`
-
-Height for the tile
-
-|  Type  |       Default       |
-| :----: | :-----------------: |
-| number | Device Width \* 0.8 |
-
----
-
-### `icon`
-
-Icon Component Props (optional)
-
-|                                                                                        Type                                                                                         | Default |
-| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: |
-| object {name: string, color: string, size: number, type: string (default is material, or choose from [supported icon sets](icon.md#available-icon-sets)), iconStyle: object(style)} |  none   |
-
----
-
-### `iconContainerStyle`
-
-Styling for the outer icon container (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `imageContainerStyle`
-
-Styling for the image (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `imageProps`
-
-Optional properties to pass to the image if provided e.g "resizeMode" (options)
-
-|                Type                | Default |
-| :--------------------------------: | :-----: |
-| {[...Image props](image.md#props)} |  none   |
-
----
-
-### `imageSrc`
-
-Source for the image (required)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (image) |  none   |
-
----
-
-### `onPress`
-
-Function to call when tile is pressed (optional)
-
-|       Type       | Default |
-| :--------------: | :-----: |
-| function (event) |  none   |
-
----
-
-### `overlayContainerStyle`
-
-Styling for the overlay container when using featured tile (optional)
-
-|        Type         | Default |
-| :-----------------: | :-----: |
-| View style (object) |  none   |
-
----
-
-### `title`
-
-Text inside the tile (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  none   |
-
----
-
-### `titleNumberOfLines`
-
-Number of lines for Title
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |  none   |
-
----
-
-### `titleStyle`
-
-Styling for the title (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `width`
-
-Width for the tile (optional)
-
-|  Type  |   Default    |
-| :----: | :----------: |
-| number | Device Width |
-
----
-
-### `ImageComponent`
-
-Custom ImageComponent for Tile
-
-|            Type            |     Default     |
-| :------------------------: | :-------------: |
-| React component or element | BackgroundImage |
diff --git a/website/versioned_docs/version-2.0.4/tooltip.md b/website/versioned_docs/version-2.0.4/tooltip.md
deleted file mode 100644
index 4d81d3baab..0000000000
--- a/website/versioned_docs/version-2.0.4/tooltip.md
+++ /dev/null
@@ -1,254 +0,0 @@
----
-id: tooltip
-title: Tooltip
----
-
-Tooltips display informative text when users tap on an element.
-
-<img src="/img/tooltipExample.gif" alt="tooltip example gif" width="290" />
-
-## Usage
-
-```js
-import { Tooltip, Text } from 'react-native-elements';
-
-...
-
-<Tooltip popover={<Text>Info here</Text>}>
-  <Text>Press me</Text>
-</Tooltip>
-```
-
-> Web-platform specific note:
->
-> You **must** pass a valid React Native [`Modal`](https://reactnative.dev/docs/modal) component implementation
-> into [`ModalComponent`](#modalcomponent) prop because `Modal` component is not implemented yet in `react-native-web`
-
-```js
-...
-import Modal from 'modal-react-native-web';
-
-...
-
-<Tooltip ModalComponent={Modal} ... />
-...
-```
-
----
-
-## Props
-
-- [`backgroundColor`](#backgroundcolor)
-- [`containerStyle`](#containerstyle)
-- [`height`](#height)
-- [`highlightColor`](#highlightcolor)
-- [`onClose`](#onclose)
-- [`onOpen`](#onopen)
-- [`overlayColor`](#overlaycolor)
-- [`pointerColor`](#pointercolor)
-- [`popover`](#popover)
-- [`toggleOnPress`](#toggleonpress)
-- [`width`](#width)
-- [`withOverlay`](#withoverlay)
-- [`withPointer`](#withpointer)
-- [`toggleAction`](#toggleaction)
-- [`skipAndroidStatusBar`](#skipandroidstatusbar)
-- [`ModalComponent`](#modalcomponent)
-
----
-
-## Reference
-
-### `backgroundColor`
-
-sets backgroundColor of the tooltip and pointer.
-
-|  Type  | Default |
-| :----: | :-----: |
-| string | #617080 |
-
----
-
-### `containerStyle`
-
-Passes style object to tooltip container
-
-|      Type      |      Default      |
-| :------------: | :---------------: |
-| object (style) | inherited styling |
-
----
-
-### `height`
-
-Tooltip container height. Necessary in order to render the container in the
-correct place. Pass height according to the size of the content rendered inside
-the container.
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |   40    |
-
----
-
-### `highlightColor`
-
-Color to highlight the item the tooltip is surrounding.
-
-|  Type  |   Default   |
-| :----: | :---------: |
-| string | transparent |
-
----
-
-### `onClose`
-
-function which gets called on closing the tooltip.
-
-|   Type   | Default  |
-| :------: | :------: |
-| function | () => {} |
-
----
-
-### `onOpen`
-
-function which gets called on opening the tooltip.
-
-|   Type   | Default  |
-| :------: | :------: |
-| function | () => {} |
-
----
-
-### `overlayColor`
-
-Color of overlay shadow when tooltip is open.
-
-|  Type  |           Default           |
-| :----: | :-------------------------: |
-| string | 'rgba(250, 250, 250, 0.70)' |
-
----
-
-### `pointerColor`
-
-Color of tooltip pointer, it defaults to the
-[`backgroundColor`](#backgroundcolor) if none is passed .
-
-|  Type  |                Default                |
-| :----: | :-----------------------------------: |
-| string | [`backgroundColor`](#backgroundcolor) |
-
----
-
-### `popover`
-
-Component to be rendered as the display container.
-
-|     Type      | Default |
-| :-----------: | :-----: |
-| React.Element |  null   |
-
----
-
-### `toggleOnPress`
-
-Flag to determine to toggle or not the tooltip on press.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  true   |
-
----
-
-### `width`
-
-Tooltip container width. Necessary in order to render the container in the
-correct place. Pass height according to the size of the content rendered inside
-the container.
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |   150   |
-
----
-
-### `withOverlay`
-
-Flag to determine whether or not display overlay shadow when tooltip is open.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  true   |
-
----
-
-### `withPointer`
-
-Flag to determine whether or not to display the pointer.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  true   |
-
----
-
-### `toggleAction`
-
-Define type of action that should trigger tooltip.
-Available options _onPress_, _onLongPress_
-
-|  Type  | Default |
-| :----: | :-----: |
-| string | onPress |
-
----
-
-### `skipAndroidStatusBar`
-
-Force skip StatusBar height when calculating element position. Pass `true` if Tooltip used inside react-native Modal component.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `ModalComponent`
-
-override React Native `Modal` component (usable for web-platform)
-
-|          Type          | Default |
-| :--------------------: | :-----: |
-| React Native Component |  Modal  |
-
-## Interaction methods
-
-| method        | description                                                    |
-| ------------- | -------------------------------------------------------------- |
-| toggleTooltip | Toggles tooltip manually. ([example](#toggle-tooltip-example)) |
-
-#### `toggleTooltip` example
-
-Store a reference to the Tooltip in your component by using the ref prop
-provided by React ([see docs](https://reactjs.org/docs/refs-and-the-dom.html)):
-
-```js
-const tooltipRef = useRef(null);
-
-...
-
-<Tooltip
-  ref={tooltipRef}
-  ...
-/>
-```
-
-Then you can manually trigger tooltip from anywhere for example when screen loads:
-
-```js
-useEffect(() => {
-  tooltipRef.current.toggleTooltip();
-}, []);
-```
diff --git a/website/versioned_docs/version-2.2.1/avatar.md b/website/versioned_docs/version-2.2.1/avatar.md
deleted file mode 100644
index 5a6657dafb..0000000000
--- a/website/versioned_docs/version-2.2.1/avatar.md
+++ /dev/null
@@ -1,412 +0,0 @@
----
-id: avatar
-title: Avatar
----
-
-Avatars are found all over ui design from lists to profile screens. They are
-commonly used to represent a user and can contain photos, icons, or even text.
-
-<div class="component-preview component-preview--grid">
-  <figure>
-    <img src="/img/avatar/avatar--photo.jpg" alt="Standard Avatar" />
-    <figcaption>Standard</figcaption>
-  </figure>
-  <figure>
-    <img src="/img/avatar/avatar--title.jpg" alt="Avatar with Title" />
-    <figcaption>Title</figcaption>
-  </figure>
-  <figure>
-    <img src="/img/avatar/avatar--icon.jpg" alt="Avatar with Icon" />
-    <figcaption>Icon</figcaption>
-  </figure>
-  <figure>
-    <img src="/img/avatar/avatar--edit.jpg" alt="Standard Avatar with accessory" />
-    <figcaption>Standard with accessory</figcaption>
-  </figure>
-</div>
-
-## Usage
-
-```js
-import { Avatar, Accessory } from 'react-native-elements';
-
-// Standard Avatar
-<Avatar
-  rounded
-  source={{
-    uri:
-      'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
-  }}
-/>
-
-// Avatar with Title
-<Avatar rounded title="MD" />
-
-// Avatar with Icon
-<Avatar rounded icon={{ name: 'home' }} />
-
-// Standard Avatar with accessory
-<Avatar
-  source={{
-    uri:
-      'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
-  }}
-  >
-  <Accessory />
-</Avatar>
-```
-
-#### Avatar with initials
-
-<img src="/img/avatar_with_initials.png" width="500" />
-
-```js
-import { Avatar } from "react-native-elements";
-
-<Avatar
-  size="small"
-  rounded
-  title="MT"
-  onPress={() => console.log("Works!")}
-  activeOpacity={0.7}
-/>
-<Avatar
-  size="medium"
-  title="BP"
-  onPress={() => console.log("Works!")}
-  activeOpacity={0.7}
-/>
-<Avatar
-  size="large"
-  title="LW"
-  onPress={() => console.log("Works!")}
-  activeOpacity={0.7}
-/>
-<Avatar
-  size="xlarge"
-  rounded
-  title="CR"
-  onPress={() => console.log("Works!")}
-  activeOpacity={0.7}
-/>
-```
-
-#### Avatar with icons
-
-<img src="/img/avatar_with_icons.png" width="500" />
-
-```js
-import { Avatar } from "react-native-elements";
-
-<Avatar
-  rounded
-  icon={{name: 'user', type: 'font-awesome'}}
-  onPress={() => console.log("Works!")}
-  activeOpacity={0.7}
-  containerStyle={{flex: 2, marginLeft: 20, marginTop: 115}}
-/>
-<Avatar
-  size="small"
-  rounded
-  icon={{name: 'user', type: 'font-awesome'}}
-  onPress={() => console.log("Works!")}
-  activeOpacity={0.7}
-  containerStyle={{flex: 2, marginLeft: 20, marginTop: 115}}
-/>
-<Avatar
-  size="medium"
-  overlayContainerStyle={{backgroundColor: 'blue'}}
-  icon={{name: 'meetup', color: 'red', type: 'font-awesome'}}
-  onPress={() => console.log("Works!")}
-  activeOpacity={0.7}
-  containerStyle={{flex: 3, marginTop: 100}}
-/>
-<Avatar
-  size="large"
-  icon={{name: 'rocket', color: 'orange', type: 'font-awesome'}}
-  overlayContainerStyle={{backgroundColor: 'white'}}
-  onPress={() => console.log("Works!")}
-  activeOpacity={0.7}
-  containerStyle={{flex: 4, marginTop: 75}}
-/>
-<Avatar
-  size="xlarge"
-  rounded
-  icon={{name: 'home', type: 'font-awesome'}}
-  onPress={() => console.log("Works!")}
-  activeOpacity={0.7}
-  containerStyle={{flex: 5, marginRight: 60}}
-/>
-<Avatar
-  size={200}
-  rounded
-  icon={{name: 'user', type: 'font-awesome'}}
-  onPress={() => console.log("Works!")}
-  activeOpacity={0.7}
-  containerStyle={{flex: 2, marginLeft: 20, marginTop: 115}}
-/>
-```
-
-#### Avatar with title placeholder
-
-<img src="/img/avatar_with_title_placeholder.gif" width="500" />
-
-```js
-import { ListItem } from 'react-native-elements';
-
-<ListItem
-  leftAvatar={{
-    title: name[0],
-    source: { uri: avatar_url },
-    showAccessory: true,
-  }}
-  title={name}
-  subtitle={role}
-  chevron
-/>;
-```
-
----
-
-## Props
-
-- [`activeOpacity`](#activeopacity)
-- [`avatarStyle`](#avatarstyle)
-- [`containerStyle`](#containerstyle)
-- [`icon`](#icon)
-- [`iconStyle`](#iconstyle)
-- [`imageProps`](#imageprops)
-- [`onLongPress`](#onlongpress)
-- [`onPress`](#onpress)
-- [`overlayContainerStyle`](#overlaycontainerstyle)
-- [`placeholderStyle`](#placeholderstyle)
-- [`rounded`](#rounded)
-- [`size`](#size)
-- [`source`](#source)
-- [`title`](#title)
-- [`titleStyle`](#titlestyle)
-- [`renderPlaceholderContent`](#renderplaceholdercontent)
-- [`Component`](#Component)
-- [`ImageComponent`](#imagecomponent)
-
----
-
-## Child Props
-
-### Accessory
-
-> Receives either all `Icon` or `Image` props.
-
----
-
-## Reference
-
-### `accessory`
-
-Icon or Image used as small overlay.
-If a `source` key is used in the object, then an Image will be used.
-
-|                                  Type                                  |                                    Default                                    |
-| :--------------------------------------------------------------------: | :---------------------------------------------------------------------------: |
-| {[...Icon props](icon.md#props)} or {[...Image props](image.md#props)} | { name: 'mode-edit', type: 'material', color: '#fff', underlayColor: '#000' } |
-
----
-
-### `activeOpacity`
-
-Opacity when pressed
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |   0.2   |
-
----
-
-### `avatarStyle`
-
-Style for avatar image
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `containerStyle`
-
-Styling for outer container
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `icon`
-
-Displays an icon as the main content of the Avatar. **Cannot be used alongside
-title**. When used with the `source` prop it will be used as the placeholder.
-
-|                                                                                        Type                                                                                         | Default |
-| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: |
-| object {name: string, color: string, size: number, type: string (default is material, or choose from [supported icon sets](icon.md#available-icon-sets)), iconStyle: object(style)} |  none   |
-
----
-
-### `iconStyle`
-
-Extra styling for icon component (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `imageProps`
-
-Optional properties to pass to the avatar e.g "resizeMode"
-
-|                Type                | Default |
-| :--------------------------------: | :-----: |
-| {[...Image props](image.md#props)} |  none   |
-
----
-
-### `onAccessoryPress`
-
-Callback function when pressing on the accessory
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `onLongPress`
-
-Callback function when long pressing component
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `onPress`
-
-Callback function when pressing component
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `overlayContainerStyle`
-
-Style for the view outside image or icon
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `placeholderStyle`
-
-Adds style to the placeholder wrapper
-
-|      Type      |             Default              |
-| :------------: | :------------------------------: |
-| object (style) | `{ backgroundColor: '#BDBDBD' }` |
-
----
-
-### `rounded`
-
-Makes the avatar circular
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `showAccessory`
-
-Shows an accessory over the avatar (optional)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `size`
-
-Size of the avatar
-
-|                          Type                          | Default |
-| :----------------------------------------------------: | :-----: |
-| string(`small`, `medium`, `large`, `xlarge`) or number | `small` |
-
----
-
-### `source`
-
-Image source
-
-|                        Type                        | Default |
-| :------------------------------------------------: | :-----: |
-| [ImageSource](https://reactnative.dev/docs/images) |  none   |
-
----
-
-### `title`
-
-Renders title in the placeholder
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  none   |
-
----
-
-### `titleStyle`
-
-Style for the title
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `renderPlaceholderContent`
-
-Custom placeholder element (by default, it's the title)
-
-|            Type            | Default |
-| :------------------------: | :-----: |
-| React component or element |  none   |
-
----
-
-### `Component`
-
-Component for enclosing element (eg: TouchableHighlight, View, etc)
-
-|   Type   |      Default       |
-| :------: | :----------------: |
-| function | TouchableHighlight |
-
----
-
-### `ImageComponent`
-
-Custom ImageComponent for Avatar
-
-|            Type            | Default |
-| :------------------------: | :-----: |
-| React component or element |  Image  |
diff --git a/website/versioned_docs/version-2.2.1/bottomsheet.md b/website/versioned_docs/version-2.2.1/bottomsheet.md
deleted file mode 100644
index 1559293150..0000000000
--- a/website/versioned_docs/version-2.2.1/bottomsheet.md
+++ /dev/null
@@ -1,121 +0,0 @@
----
-id: bottomsheet
-title: Bottom Sheet
----
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-Overlay Modal that displays content from the bottom of the screen.
-
-<img src={useBaseUrl('img/bottomsheet.gif')} alt="Bottom Sheet Component" />
-
-## Usage
-
-```js
-
-<BottomSheet
-  list={[
-    {title: 'List Item 1'},
-    {title: 'List Item 2'},
-    {
-      title: 'Cancel',
-      containerStyle: {backgroundColor: 'red'},
-      titleStyle: {color: 'white'},
-    },
-  ]}
-  cancelButtonIndex={1}
-  buttonProps={{title: 'Open Bottom Sheet'}}
-/>
-
-<BottomSheet
-  list={[
-    {
-      title: 'Appointments',
-      leftIcon: {name: 'av-timer'},
-    },
-    {
-      title: 'Trips',
-      leftIcon: {name: 'flight-takeoff'},
-    },
-    {
-      title: 'Cancel',
-      leftIcon: {name: 'close', color: 'white'},
-      containerStyle: {backgroundColor: 'red'},
-      titleStyle: {color: 'white'},
-    },
-  ]}
-  cancelButtonIndex={1}
-  buttonProps={{title: 'Open Bottom Sheet'}}
-/>
-
-
-<BottomSheet
-  list={[
-    {
-      title: 'Appointments',
-      leftIcon: {name: 'av-timer'},
-    },
-    {
-      title: 'Trips',
-      leftIcon: {name: 'flight-takeoff'},
-    },
-    {
-      title: 'Cancel',
-      leftIcon: {name: 'close', color: 'white'},
-      containerStyle: {backgroundColor: 'red'},
-      titleStyle: {color: 'white'},
-    },
-  ]}
-  cancelButtonIndex={2}
-  buttonProps={{
-    title: 'Open Buttom Sheet',
-    icon: {
-      name: 'chevron-down',
-      size: 15,
-      color: 'white',
-      type: 'entypo',
-    },
-  }}
-/>
-
-```
-
----
-
-## Props
-
-- [`list`](#list)
-- [`cancelButtonIndex`](#cancelbuttonindex)
-- [`buttonProps`](#buttonprops)
-
----
-
-## Reference
-
-### `list`
-
-Array of List Item props of the React Native Element `ListItem` component
-
-|                    Type                    | Default |
-| :----------------------------------------: | :-----: |
-| [{[...ListItem props](listitem.md#props)}] |   []    |
-
----
-
-### `cancelButtonIndex`
-
-index of the list item which closes Bottom Sheet Component
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |  null   |
-
----
-
-### `buttonProps`
-
-props of the React Native Element `Button` Component
-
-|                 Type                 | Default |
-| :----------------------------------: | :-----: |
-| {[...Button props](button.md#props)} |  null   |
diff --git a/website/versioned_docs/version-2.2.1/card.md b/website/versioned_docs/version-2.2.1/card.md
deleted file mode 100644
index 2f2b0f2980..0000000000
--- a/website/versioned_docs/version-2.2.1/card.md
+++ /dev/null
@@ -1,236 +0,0 @@
----
-id: card
-title: Card
----
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-Cards are a great way to display information, usually containing content and
-actions about a single subject. Cards can contain images, buttons, text and
-more.
-
-<img alt="Card Component" src={useBaseUrl('img/card.png')} />
-
-## Usage
-
-```js
-const users = [
- {
-    name: 'brynn',
-    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg'
- },
- ... // more users here
-]
-
-import { View, Text, Image } from 'react-native'
-import { Card, ListItem, Button, Icon } from 'react-native-elements'
-
-// implemented without image with header
-<Card title="CARD WITH DIVIDER">
-  {
-    users.map((u, i) => {
-      return (
-        <View key={i} style={styles.user}>
-          <Image
-            style={styles.image}
-            resizeMode="cover"
-            source={{ uri: u.avatar }}
-          />
-          <Text style={styles.name}>{u.name}</Text>
-        </View>
-      );
-    })
-  }
-</Card>
-
-// implemented without image without header, using ListItem component
- <Card containerStyle={{padding: 0}} >
-  {
-    users.map((u, i) => {
-      return (
-        <ListItem
-          key={i}
-          roundAvatar
-          title={u.name}
-          leftAvatar={{ source: { uri: u.avatar } }}
-        />
-      );
-    })
-  }
-</Card>
-
-
-// implemented with Text and Button as children
-<Card
-  title='HELLO WORLD'
-  image={require('../images/pic2.jpg')}>
-  <Text style={{marginBottom: 10}}>
-    The idea with React Native Elements is more about component structure than actual design.
-  </Text>
-  <Button
-    icon={<Icon name='code' color='#ffffff' />}
-    buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
-    title='VIEW NOW' />
-</Card>
-```
-
----
-
-## Props
-
-- [`containerStyle`](#containerstyle)
-- [`dividerStyle`](#dividerstyle)
-- [`featuredSubtitle`](#featuredsubtitle)
-- [`featuredSubtitleStyle`](#featuredsubtitlestyle)
-- [`featuredTitle`](#featuredtitle)
-- [`featuredTitleStyle`](#featuredtitlestyle)
-- [`image`](#image)
-- [`imageProps`](#imageprops)
-- [`imageStyle`](#imagestyle)
-- [`imageWrapperStyle`](#imagewrapperstyle)
-- [`title`](#title)
-- [`titleNumberOfLines`](#titlenumberoflines)
-- [`titleStyle`](#titlestyle)
-- [`wrapperStyle`](#wrapperstyle)
-
----
-
-## Reference
-
-### `containerStyle`
-
-outer container style (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `dividerStyle`
-
-additional divider styling (if title provided) (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `featuredSubtitle`
-
-subtitle rendered over the image (only works if image prop is present)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  none   |
-
----
-
-### `featuredSubtitleStyle`
-
-styling for featured subtitle
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `featuredTitle`
-
-title rendered over the image (only works if image prop is present)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  none   |
-
----
-
-### `featuredTitleStyle`
-
-styling for featured title
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `image`
-
-add an image as the heading with the image prop (optional)
-
-|           Type            | Default |
-| :-----------------------: | :-----: |
-| image uri or require path |  none   |
-
----
-
-### `imageProps`
-
-optional properties to pass to the image if provided e.g "resizeMode"
-
-|                 Type                 | Default |
-| :----------------------------------: | :-----: |
-| {[...Image props](image.md#props)} ) |  none   |
-
----
-
-### `imageStyle`
-
-specify image styling if image is provided
-
-|     Type      |      Default      |
-| :-----------: | :---------------: |
-| object(style) | inherited styling |
-
----
-
-### `imageWrapperStyle`
-
-specify styling for view surrounding image
-
-|     Type      | Default |
-| :-----------: | :-----: |
-| object(style) |  none   |
-
----
-
-### `title`
-
-optional card title (optional)
-
-|               Type               | Default |
-| :------------------------------: | :-----: |
-| string OR React Native Component |  none   |
-
----
-
-### `titleNumberOfLines`
-
-number of lines for title (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |  none   |
-
----
-
-### `titleStyle`
-
-additional title styling (if title provided) (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `wrapperStyle`
-
-inner container style (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
diff --git a/website/versioned_docs/version-2.2.1/contributing.md b/website/versioned_docs/version-2.2.1/contributing.md
deleted file mode 100644
index fcf7084d11..0000000000
--- a/website/versioned_docs/version-2.2.1/contributing.md
+++ /dev/null
@@ -1,199 +0,0 @@
----
-id: contributing
-title: Contributing
----
-
-Thanks for taking the time to checkout this project and being willing to
-contribute!
-
-Here are some of some of ways you can help:
-
-- [Reporting Bugs](#reporting-bugs)
-- [Suggesting a Feature](#suggesting-a-feature)
-- [Responding to Issues](#responding-to-issues)
-- [Improving the Documentation](#improving-the-documentation)
-- [Implementing Bug Fixes and Improvements](#implementing-bug-fixes-and-improvements)
-
-## Reporting Bugs
-
-React Native Elements has over 9000 users actively developing and using this
-library in their projects. With that many use cases, bugs are sure to come up
-from time to time. When you think you've found a bug, here's what to do:
-
-1. Check your version. A fix may have already been released in new
-   a newer version. Update your version of react-native-elements to the
-   latest.
-
-2. Search the existing
-   [issues](https://github.com/react-native-elements/react-native-elements/issues)
-   and
-   [pull requests](https://github.com/react-native-elements/react-native-elements/pulls).
-   If you see one, add a 👍 reaction (please no
-   +1 comments). Read through the comments and see if you can provide anymore
-   valuable information to the thread. The more use cases we have, the easier it
-   is to solve the issue.
-
-3. If there are no other issues like yours, then create a new one. New issues
-   come with a issue template, so make sure to fill out as much information as
-   possible. If possible, please also provide a [snack](https://snack.expo.io/)
-   demonstrating the issue.
-
-If this is your first open source contribution, please take a look at
-[this](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
-guide.
-
-## Suggesting a feature
-
-Have a cool idea for a component? Think you can implement an existing feature
-better? Go ahead and open and issue, describe what you want to accomplish and
-lastly, why you think React Native Elements would benefit from it.
-
-A few things to consider/add:
-
-- As clearly as possible, attach screenshots, concepts of how this feature
-  should behave
-- Do you have any thoughts on how to implement this feature? Have you done
-  something similar already?
-- Hold off on submitting feature pull requests until the feature has been
-  discussed. Once the feature has been established and agreed upon, create the
-  pull request.
-
-## Responding to Issues
-
-When someone posts an issue, a maintainer might not be able to respond right
-away. Or a person may post and issue that has incomplete information. As a
-contributor you can help by answering the issue yourself if you know the cause
-of it, or help the maintainers by making sure all the information necessary
-to validate the issue is there.
-
-## Improving the Documentation
-
-Our documentation is built with an open-source tool called
-[Docusaurus](https://docusaurus.io). It has a ton of great features, the most
-important being versioning - which allows us to have documentation for every
-version we release.
-
-The easiest way to contribute to a particular doc is through the Edit button on
-the page. It'll take you directly to the exact file for that page on the repo.
-
-Since all documents are versioned, it might be bit tricky to find which file
-needs changing. You can use the rule below to figure out which file you need to
-edit.
-
-- [Changes for an existing doc on a version not yet released](#changes-for-an-existing-doc-on-a-version-not-yet-released)
-- [Adding documentation for a new component](#adding-documentation-for-a-new-component)
-- [Rewording, adding missed info, or making a typo for a released version](#rewording-adding-missed-info-or-making-a-typo-for-a-released-version)
-- [Editing an existing page that's not docs or components](#editing-an-existing-page-that-s-not-docs-or-components)
-- [Editing a document that appears the same in all versions](#editing-a-document-that-appears-the-same-in-all-versions)
-
-### Changes for an existing doc on a version not yet released
-
-These files are located in the `/docs` folder. So if I wanted to add a new prop
-on the Avatar component, I'll need to document that in `/docs/avatar.md`.
-
-### Adding documentation for a new component
-
-You'll be creating your `.md` file in the `/docs` folder. Be sure to fill out
-the header at the top of the file:
-
-```
----
-id: my-component
-title: My Component
----
-```
-
-Lastly you'll need to add it to sidebar. This sidebar file is
-`/website/sidebars.json`. Then add the `id` from the document we just created
-into one of the sidebars.
-
-### Rewording, adding missed info, or making a typo for a released version
-
-These files are located in: <br />
-`/website/versioned_docs/version-{version_name}/{file-name}`. <br /> The last
-directory will differ depending on what version you are submitting docs for.
-
-> Docusaurus only creates new versions of files if the `original` document in
-> the `/docs` folder has changed since a release was made.
-
-If I added docs for `Avatar.md` and it was our ever first release say `0.19.0`,
-when releasing that version it'll create
-`/website/versioned_docs/version-0.19.0/avatar.md`.
-
-Now if I go to release `0.20.0` and didn't change `/docs/Avatar.md`, then
-they'll be **no** `/website/versioned_docs/version-0.20.0/avatar.md`. Docusaurus
-will simply point to the old version from `0.19.0`.
-
-### Editing an existing page that's not docs or components
-
-These files are located in: `/website/pages/en/`.
-
-### Editing a document that appears the same in all versions
-
-This one is particularly the most complicated and requires a bit of duplication.
-
-Let's say we want edit the `Getting Started` doc. We want this document to be
-the same for all versions. Firstly we'll need to make edits to
-`/docs/getting_started.md` so it's available in future versions. Secondly we'll
-need to duplicate those changes in
-`/website/versioned_docs/version-{version-number}/getting_started.md`.
-
-We'll only need to make this change to the **first set of versioned docs**. In
-our case `/website/versioned_docs/version-0.19.0/getting_started.md`.
-
-Be sure to check out the documentation over at
-[docusaurus.io](https://docusaurus.io) if you have any other queries.
-
-## Implementing Bug Fixes and Improvements
-
-If you wish to submit a pull request for a new feature or issue then this is
-guide for you. On GitHub, we extensively use labels to reflect the content and
-status of issues.
-
-For all issues that are bugs check
-[here](https://github.com/react-native-elements/react-native-elements/issues?utf8=✓&q=is%3Aissue+is%3Aopen+label%3A%22%3Aboom%3A++Bug%22+-label%3A%22✅+Fixed+-+Next+Release%22+-label%3A%22📥+PR+Submitted%22).
-
-Improvements are separated into two categories:
-
-- [New components](https://github.com/react-native-elements/react-native-elements/issues?utf8=✓&q=is%3Aissue+is%3Aopen+label%3A%22💡New+Component%22+-label%3A%22✅+Fixed+-+Next+Release%22+-label%3A%22📥+PR+Submitted%22+)
-- [Enhancements](https://github.com/react-native-elements/react-native-elements/issues?utf8=✓&q=is%3Aissue+is%3Aopen+label%3A%22✨Enhancement%22+-label%3A%22✅+Fixed+-+Next+Release%22+-label%3A%22📥+PR+Submitted%22)
-
-Check out the [Labels guide](labels.md) for a more descriptive info on our usage
-of labels.
-
----
-
-To begin you should start by forking this repository first. This should get you
-setup on your local machine:
-
-### Setup
-
-- Install [Node.js](https://nodejs.org/) if you have not already. (_We suggest
-  you to use node v6.x.x_)
-- Fork the **react-native-elements** repo
-  [here](https://github.com/react-native-elements/react-native-elements)
-- `git clone <your-forked-repo-url> && cd react-native-elements`
-- `yarn install` OR `npm install`
-- `npm test`
-
-Now create a new branch with a name that loosely describes
-the issue on which you will be working. Once you think you have addressed
-the issue in question, submit a pull request to the `next` branch.
-
-### Committing and Pushing Changes
-
-We like to provide informative and useful commit messages when pushing changes
-to the repo. This helps tremendously when sifting through the commit history to
-find a particular changeset. A useful guide for creating meaningful commit
-messages can be found
-[here.](https://www.conventionalcommits.org/en/v1.0.0-beta.2/#specification)
-
-### Branching Strategy
-
-There are 3 main branches:
-
-- `master` is the branch with the most recent deployed version
-- `next` is the main development branch. For new features and enhancements, base the
-  changes off this branch.
-- `patch` is a branch for working on patch releases. If you have a bug fix
-  that requires a fast release, use this branch.
diff --git a/website/versioned_docs/version-2.2.1/divider.md b/website/versioned_docs/version-2.2.1/divider.md
deleted file mode 100644
index 248ff1602a..0000000000
--- a/website/versioned_docs/version-2.2.1/divider.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-id: divider
-title: Divider
----
-
-Dividers are visual separators of content. Use Divider when you want to make a
-distinction between sections of content.
-
-## Usage
-
-```js
-import { Divider } from 'react-native-elements';
-
-<Divider style={{ backgroundColor: 'blue' }} />;
-```
-
----
-
-## Props
-
-> Also receives all
-> [View](https://reactnative.dev/docs/view#props) props
-
-- [`style`](#style)
-
----
-
-## Reference
-
-### `style`
-
-Style of the divider
-
-|     Type     |                Default                |
-| :----------: | :-----------------------------------: |
-| style object | {height: 1, backgroundColor: #e1e8ee} |
diff --git a/website/versioned_docs/version-2.2.1/header.md b/website/versioned_docs/version-2.2.1/header.md
deleted file mode 100644
index 475e8ba738..0000000000
--- a/website/versioned_docs/version-2.2.1/header.md
+++ /dev/null
@@ -1,308 +0,0 @@
----
-id: header
-title: Header
----
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-Headers are navigation components that display information and actions relating
-to the current screen.
-
-<img alt="Header" src={useBaseUrl('img/header.png')} />
-
-## Usage
-
-### Header with default components
-
-For quick setup we provide default components, which are React Native Elements
-Icon for left/right buttons and React Native Text for title. You can customize
-them with configuration objects passed in as props.
-
-```js
-<Header
-  leftComponent={{ icon: 'menu', color: '#fff' }}
-  centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
-  rightComponent={{ icon: 'home', color: '#fff' }}
-/>
-```
-
-### Left aligned center component
-
-<img alt="Header" src={useBaseUrl('img/header-left.png')} />
-
-```js
-<Header
-  placement="left"
-  leftComponent={{ icon: 'menu', color: '#fff' }}
-  centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
-  rightComponent={{ icon: 'home', color: '#fff' }}
-/>
-```
-
-### Header with custom components passed in through props
-
-You can pass in your custom components like this too.
-
-```js
-<Header
-  leftComponent={<MyCustomLeftComponent />}
-  centerComponent={<MyCustomCenterComponent />}
-  rightComponent={<MyCustomRightComponent />}
-/>
-```
-
-### Header with mixed components
-
-You can also mix the content, for example you can have default components
-defined by configuration combined with custom components. Passing a render
-function that returns a React Element is valid too.
-
-```js
-<Header
-  leftComponent={<MyCustomLeftComponent />}
-  centerComponent={this.renderCenterComponent()}
-  rightComponent={{ icon: 'home', style: { color: '#fff' } }}
-/>
-```
-
-### Header with custom components passed in as children
-
-```js
-<Header>
-  <MyCustomLeftComponent />
-  <MyCustomCenterComponent />
-  <MyCustomRightComponent />
-</Header>
-```
-
-### Component precedence
-
-Components defined through children take precedence over components passed in as props, so in this case `<MyCustomLeftComponent>` will be rendered instead of `leftComponent={{ icon: 'menu' }}`.
-
-```js
-<Header leftComponent={{ icon: 'menu' }}>
-  <MyCustomLeftComponent />
-  <MyCustomCenterComponent />
-  <MyCustomRightComponent />
-</Header>
-```
-
-### Header customisability
-
-We wanted the Header to be as customisable as possible, so you are free to try
-different combinations of props. For example, if you want to change the left,
-center, or right component's layout, you can adjust the `containerStyle`
-
-```js
-<Header
-  statusBarProps={{ barStyle: 'light-content' }}
-  barStyle="light-content" // or directly
-  leftComponent={<MyCustomLeftComponent />}
-  centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
-  containerStyle={{
-    backgroundColor: '#3D6DCC',
-    justifyContent: 'space-around',
-  }}
-/>
-```
-
----
-
-## Props
-
-- [`containerStyle`](#containerstyle)
-- [`backgroundColor`](#backgroundcolor)
-- [`backgroundImage`](#backgroundimage)
-- [`backgroundImageStyle`](#backgroundimagestyle)
-- [`leftComponent`](#leftcomponent)
-- [`centerComponent`](#centercomponent)
-- [`rightComponent`](#rightcomponent)
-- [`leftContainerStyle`](#leftcontainerstyle)
-- [`centerContainerStyle`](#centercontainerstyle)
-- [`rightContainerStyle`](#rightcontainerstyle)
-- [`placement`](#placement)
-- [`barStyle`](#barstyle)
-- [`statusBarProps`](#statusbarprops)
-- [`ViewComponent`](#viewcomponent)
-- [`linearGradientProps`](#lineargradientprops)
-
----
-
-## Reference
-
-### `containerStyle`
-
-styling around the main container
-
-| Type  | Default |
-| :---: | :-----: |
-| style |  none   |
-
----
-
-### `backgroundColor`
-
-sets backgroundColor of the parent component
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  none   |
-
----
-
-### `backgroundImage`
-
-sets backgroundImage for parent component
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (image) |  none   |
-
----
-
-### `backgroundImageStyle`
-
-styling for backgroundImage in the main container
-
-| Type  | Default |
-| :---: | :-----: |
-| style |  none   |
-
----
-
-### `leftComponent`
-
-define your left component here
-
-|                                                                                           Type                                                                                            | Default |
-| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: |
-| { text: string, [...Text props](https://reactnative.dev/docs/text.html#props)}<br/>**OR**<br/>{ icon: string, [...Icon props](icon.md#props)} <br/>**OR**<br/> React element or component |  none   |
-
----
-
-### `centerComponent`
-
-define your center component here
-
-|                                                                                           Type                                                                                            | Default |
-| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: |
-| { text: string, [...Text props](https://reactnative.dev/docs/text.html#props)}<br/>**OR**<br/>{ icon: string, [...Icon props](icon.md#props)} <br/>**OR**<br/> React element or component |  none   |
-
----
-
-### `rightComponent`
-
-define your right component here
-
-|                                                                                           Type                                                                                            | Default |
-| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: |
-| { text: string, [...Text props](https://reactnative.dev/docs/text.html#props)}<br/>**OR**<br/>{ icon: string, [...Icon props](icon.md#props)} <br/>**OR**<br/> React element or component |  none   |
-
----
-
-### `leftContainerStyle`
-
-styling for container around the leftComponent
-
-| Type  |   Default   |
-| :---: | :---------: |
-| style | { flex: 1 } |
-
----
-
-### `centerContainerStyle`
-
-styling for container around the centerComponent
-
-| Type  |   Default   |
-| :---: | :---------: |
-| style | { flex: 3 } |
-
----
-
-### `rightContainerStyle`
-
-styling for container around the rightComponent
-
-| Type  |   Default   |
-| :---: | :---------: |
-| style | { flex: 1 } |
-
----
-
-### `placement`
-
-Alignment for title
-
-|            Type             | Default  |
-| :-------------------------: | :------: |
-| 'left', 'center' or 'right' | 'center' |
-
----
-
-### `barStyle`
-
-Sets the color of the status bar text.
-
-|                    Type                    |                                  Default                                   |
-| :----------------------------------------: | :------------------------------------------------------------------------: |
-| 'default', 'light-content', 'dark-content' | 'default' ([source](https://reactnative.dev/docs/statusbar.html#barstyle)) |
-
----
-
-### `statusBarProps`
-
-accepts all props for StatusBar
-
-|                                    Type                                     | Default |
-| :-------------------------------------------------------------------------: | :-----: |
-| { [...StatusBar props](https://reactnative.dev/docs/statusbar.html#props) } |  none   |
-
----
-
-### `ViewComponent`
-
-component for container
-
-|          Type          |     Default     |
-| :--------------------: | :-------------: |
-| React Native Component | ImageBackground |
-
----
-
-### `linearGradientProps`
-
-displays a linear gradient. See [usage](#lineargradient-usage).
-
-|                                                      Type                                                      | Default |
-| :------------------------------------------------------------------------------------------------------------: | :-----: |
-| {[...Gradient props](https://github.com/react-native-community/react-native-linear-gradient#additional-props)} |  none   |
-
----
-
-## LinearGradient Usage
-
-Using LinearGradient in React Native Elements is supported through the
-[react-native-linear-gradient](https://github.com/react-native-community/react-native-linear-gradient)
-package. If you're using expo or create-react-native-app then you can use
-`linearGradientProps` prop right out the box with no additional setup.
-
-For react-native-cli users, make sure to follow the
-[installation instructions](https://github.com/react-native-community/react-native-linear-gradient#add-it-to-your-project)
-and use it like this:
-
-```jsx
-import { Header } from 'react-native-elements';
-import LinearGradient from 'react-native-linear-gradient';
-
-...
-
-<Header
-  ViewComponent={LinearGradient} // Don't forget this!
-  linearGradientProps={{
-    colors: ['red', 'pink'],
-    start: { x: 0, y: 0.5 },
-    end: { x: 1, y: 0.5 },
-  }}
-/>
-```
diff --git a/website/versioned_docs/version-2.2.1/labels.md b/website/versioned_docs/version-2.2.1/labels.md
deleted file mode 100644
index eb3836ddc3..0000000000
--- a/website/versioned_docs/version-2.2.1/labels.md
+++ /dev/null
@@ -1,126 +0,0 @@
----
-id: labels
-title: Label Guide
----
-
-This page explains how we use labels throughout the repo to tag issues and pull
-requests. Knowing our label structure will help you to be able to triage issues
-easier and know how to contribute to open issues and pull requests.
-
-## Issues
-
-<a class="label first" href="https://github.com/react-native-elements/react-native-elements/labels/Good%20First%20Issue" target="_blank">
-  Good First Issue
-</a>
-
-A well documented issue explaining the tasks needed to accomplish it, that
-should be suitable for a new contributor to the project
-
-<a class="label bug" href="https://github.com/react-native-elements/react-native-elements/labels/%3Aboom%3A%20%20Bug" target="_blank">
-  💥 Bug
-</a>
-
-The problem reported has been tested and the effect replicated by a maintainer
-
-<a class="label help" href="https://github.com/react-native-elements/react-native-elements/labels/🔦%20Help%20Wanted" target="_blank">
-  🔦 Help Wanted
-</a>
-
-My code is broken and I don't know why. I need help!
-
-<a class="label question" href="https://github.com/react-native-elements/react-native-elements/labels/❔Question" target="_blank">
-  ❔ Question
-</a>
-
-Seeking information that doesn't include code. e.g “can I use react navigation
-with react-native-elements?”
-
-<a class="label reply" href="https://github.com/react-native-elements/react-native-elements/labels/⏳Awaiting%20Reply" target="_blank">
-  ⏳ Awaiting Reply
-</a>
-
-Maintainer has replied to the user and there's been no response. After 2 weeks
-any issues with this label should be closed as inactive.
-
-<a class="label fixed" href="https://github.com/react-native-elements/react-native-elements/labels/✅%20Fixed%20-%20Next%20Release" target="_blank">
-  ✅ Fixed - Next Release
-</a>
-
-Issue or feature has been implemented and will be apart of the next npm release
-
-<a class="label pr-submitted" href="https://github.com/react-native-elements/react-native-elements/labels/📥%20PR%20Submitted" target="_blank">
-  📥 PR Submitted
-</a>
-
-A pull request has been submitted to resolve this issue or implement this
-feature
-
----
-
-## Pull Requests
-
-<a class="label bug-fix" href="https://github.com/react-native-elements/react-native-elements/labels/💊%20Bug%20Fix" target="_blank">
-  💊 Bug Fix
-</a>
-
-Fixes a bug reported in an issue
-
-<a class="label response" href="https://github.com/react-native-elements/react-native-elements/labels/📞%20Needs%20Response%20from%20Author" target="_blank">
-  📞 Needs Response from Author
-</a>
-
-Maintainer has left feedback on the pull request and it needs a response or a
-revision made from the author
-
-<a class="label release" href="https://github.com/react-native-elements/react-native-elements/labels/📦%20RELEASE" target="_blank">
-  📦 RELEASE
-</a>
-
-Pull request for the next version to be released
-
-<a class="label wip" href="https://github.com/react-native-elements/react-native-elements/labels/👨%E2%80%8D💻WIP" target="_blank">
-  👨‍💻 WIP
-</a>
-
-Work In Progress. Author is still working on this PR and it shouldn't be merged
-or reviewed as yet
-
----
-
-## Both
-
-<a class="label thoughts" href="https://github.com/react-native-elements/react-native-elements/labels/🤔Thoughts%3F" target="_blank">
-  🤔 Thoughts?
-</a>
-
-Requires discussion for decisions that are unsure
-
-<a class="label tooling" href="https://github.com/react-native-elements/react-native-elements/labels/🔧%20Tooling" target="_blank">
-  🔧 Tooling
-</a>
-
-Issues or pull requests that affect tooling e.g tests, npm, ci
-
-<a class="label docs" href="https://github.com/react-native-elements/react-native-elements/labels/%3Abook%3A%20Docs" target="_blank">
-  📖 Docs
-</a>
-
-Issues or pull requests surrounding documentation
-
-<a class="label enhancement" href="https://github.com/react-native-elements/react-native-elements/labels/✨Enhancement" target="_blank">
-  ✨ Enhancement
-</a>
-
-Suggests and implements improvements or additions to existing components
-
-<a class="label new" href="https://github.com/react-native-elements/react-native-elements/labels/💡New%20Component" target="_blank">
-  💡 New Component
-</a>
-
-Suggests or implements a new component
-
-<a class="label types" href="https://github.com/react-native-elements/react-native-elements/labels/🗂%20Types" target="_blank">
-  🗂 Types
-</a>
-
-Issues and pull requests around typescript definitions
diff --git a/website/versioned_docs/version-2.2.1/listitem.md b/website/versioned_docs/version-2.2.1/listitem.md
deleted file mode 100644
index 7e5604c816..0000000000
--- a/website/versioned_docs/version-2.2.1/listitem.md
+++ /dev/null
@@ -1,667 +0,0 @@
----
-id: listitem
-title: ListItem
----
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-ListItems are used to display rows of information, such as a contact list,
-playlist, or menu. They are very customizable and can contain switches,
-avatars, badges, icons, and more.
-
-<img alt="Lists" src={useBaseUrl('img/lists.png')} />
-
-## Usage
-
-### Using Map Function - Implemented with avatar
-
-```js
-import { ListItem } from 'react-native-elements'
-
-const list = [
-  {
-    name: 'Amy Farha',
-    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
-    subtitle: 'Vice President'
-  },
-  {
-    name: 'Chris Jackson',
-    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
-    subtitle: 'Vice Chairman'
-  },
-  ... // more items
-]
-
-<View>
-  {
-    list.map((l, i) => (
-      <ListItem
-        key={i}
-        leftAvatar={{ source: { uri: l.avatar_url } }}
-        title={l.name}
-        subtitle={l.subtitle}
-        bottomDivider
-      />
-    ))
-  }
-</View>
-```
-
-### Using Map Function - Implemented with link and icon
-
-```js
-import { ListItem } from 'react-native-elements'
-
-const list = [
-  {
-    title: 'Appointments',
-    icon: 'av-timer'
-  },
-  {
-    title: 'Trips',
-    icon: 'flight-takeoff'
-  },
-  ... // more items
-]
-
-<View>
-  {
-    list.map((item, i) => (
-      <ListItem
-        key={i}
-        title={item.title}
-        leftIcon={{ name: item.icon }}
-        bottomDivider
-        chevron
-      />
-    ))
-  }
-</View>
-```
-
-### Using RN FlatList - Implemented with link and avatar
-
-```js
-import { ListItem } from 'react-native-elements'
-
-const list = [
-  {
-    name: 'Amy Farha',
-    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
-    subtitle: 'Vice President'
-  },
-  {
-    name: 'Chris Jackson',
-    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
-    subtitle: 'Vice Chairman'
-  },
-  ... // more items
-]
-
-keyExtractor = (item, index) => index.toString()
-
-renderItem = ({ item }) => (
-  <ListItem
-    title={item.name}
-    subtitle={item.subtitle}
-    leftAvatar={{ source: { uri: item.avatar_url } }}
-    bottomDivider
-    chevron
-  />
-)
-
-render () {
-  return (
-    <FlatList
-      keyExtractor={this.keyExtractor}
-      data={list}
-      renderItem={this.renderItem}
-    />
-  )
-}
-```
-
-### Using RN FlatList - Implemented with custom avatar component.
-
-```js
-import { ListItem } from 'react-native-elements'
-
-const list = [
-  {
-    name: 'Amy Farha',
-    subtitle: 'Vice President'
-  },
-  {
-    name: 'Chris Jackson',
-    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
-    subtitle: 'Vice Chairman'
-  },
-  ... // more items
-]
-
-keyExtractor = (item, index) => index.toString()
-
-renderItem = ({ item }) => (
-  <ListItem
-    title={item.name}
-    subtitle={item.subtitle}
-    leftAvatar={{
-      source: item.avatar_url && { uri: item.avatar_url },
-      title: item.name[0]
-    }}
-    bottomDivider
-    chevron
-  />
-)
-
-render () {
-  return (
-    <FlatList
-      keyExtractor={this.keyExtractor}
-      data={list}
-      renderItem={this.renderItem}
-    />
-  )
-}
-```
-
-### ListItem implemented with custom View for Subtitle
-
-```js
-import { ListItem } from 'react-native-elements'
-
-render () {
-  return (
-    <ListItem
-      title='Limited supply! Its like digital gold!'
-      subtitle={
-        <View style={styles.subtitleView}>
-          <Image source={require('../images/rating.png')} style={styles.ratingImage}/>
-          <Text style={styles.ratingText}>5 months ago</Text>
-        </View>
-      }
-      leftAvatar={{ source: require('../images/avatar1.jpg') }}
-    />
-  )
-}
-
-styles = StyleSheet.create({
-  subtitleView: {
-    flexDirection: 'row',
-    paddingLeft: 10,
-    paddingTop: 5
-  },
-  ratingImage: {
-    height: 19.21,
-    width: 100
-  },
-  ratingText: {
-    paddingLeft: 10,
-    color: 'grey'
-  }
-})
-```
-
-### Badges
-
-<img alt="Badges" src={useBaseUrl('img/list-badges.png')} />
-
-Example badge usage
-
-```js
-<ListItem
-  ...
-  badge={{ value: 3, textStyle: { color: 'orange' }, containerStyle: { marginTop: -20 } }}
-/>
-```
-
-### Linear gradient + Scale feedback
-
-<img src="/img/listitem_with_gradient_scale.gif" width="500" />
-
-```js
-import TouchableScale from 'react-native-touchable-scale'; // https://github.com/kohver/react-native-touchable-scale
-import LinearGradient from 'react-native-linear-gradient'; // Only if no expo
-
-<ListItem
-  Component={TouchableScale}
-  friction={90} //
-  tension={100} // These props are passed to the parent component (here TouchableScale)
-  activeScale={0.95} //
-  linearGradientProps={{
-    colors: ['#FF9800', '#F44336'],
-    start: { x: 1, y: 0 },
-    end: { x: 0.2, y: 0 },
-  }}
-  ViewComponent={LinearGradient} // Only if no expo
-  leftAvatar={{ rounded: true, source: { uri: avatar_url } }}
-  title="Chris Jackson"
-  titleStyle={{ color: 'white', fontWeight: 'bold' }}
-  subtitleStyle={{ color: 'white' }}
-  subtitle="Vice Chairman"
-  chevron={{ color: 'white' }}
-/>;
-```
-
----
-
-## Props
-
-> Also receives all
-> [TouchableHighlight](https://reactnative.dev/docs/touchablehighlight#props)
-> props
-
-- [`Component`](#Component)
-- [`containerStyle`](#containerstyle)
-- [`contentContainerStyle`](#contentcontainerstyle)
-- [`rightContentContainerStyle`](#rightcontentcontainerstyle)
-- [`chevron`](#chevron)
-- [`checkmark`](#checkmark)
-- [`onPress`](#onpress)
-- [`onLongPress`](#onlongpress)
-- [`title`](#title)
-- [`titleStyle`](#titlestyle)
-- [`titleProps`](#titleprops)
-- [`subtitle`](#subtitle)
-- [`subtitleStyle`](#subtitlestyle)
-- [`subtitleProps`](#subtitleprops)
-- [`rightTitle`](#righttitle)
-- [`rightTitleStyle`](#righttitlestyle)
-- [`rightTitleProps`](#righttitleprops)
-- [`rightSubtitle`](#rightsubtitle)
-- [`rightSubtitleStyle`](#rightsubtitlestyle)
-- [`rightSubtitleProps`](#rightsubtitleprops)
-- [`leftIcon`](#lefticon)
-- [`rightIcon`](#righticon)
-- [`leftAvatar`](#leftavatar)
-- [`rightAvatar`](#rightavatar)
-- [`leftElement`](#leftelement)
-- [`rightElement`](#rightelement)
-- [`switch`](#switch)
-- [`input`](#input)
-- [`buttonGroup`](#buttongroup)
-- [`checkBox`](#checkbox)
-- [`badge`](#badge)
-- [`disabled`](#disabled)
-- [`disabledStyle`](#disabledstyle)
-- [`topDivider`](#topdivider)
-- [`bottomDivider`](#bottomdivider)
-- [`ViewComponent`](#viewcomponent)
-- [`pad`](#pad)
-
----
-
-## Reference
-
-### `Component`
-
-replace element with custom element (optional)
-
-|                                  Type                                   |  Default  |
-| :---------------------------------------------------------------------: | :-------: |
-| View or TouchableHighlight (default) if onPress method is added as prop | component |
-
----
-
-### `containerStyle`
-
-additional main container styling (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `contentContainerStyle`
-
-additional wrapper styling (title and subtitle container)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `rightContentContainerStyle`
-
-additional wrapper styling (right title and subtitle container)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `chevron`
-
-set it to true or custom icon props if you want a chevron (optional)
-
-|                                       Type                                        | Default |
-| :-------------------------------------------------------------------------------: | :-----: |
-| boolean **OR** {[...Icon props](icon.md#props)} **OR** React element or component |  none   |
-
----
-
-### `checkmark`
-
-set it to true or custom icon props if you want a checkmark (optional)
-
-|                                       Type                                        | Default |
-| :-------------------------------------------------------------------------------: | :-----: |
-| boolean **OR** {[...Icon props](icon.md#props)} **OR** React element or component |  none   |
-
----
-
-### `onPress`
-
-onPress method for link (optional)
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `onLongPress`
-
-onLongPress method for link (optional)
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `title`
-
-Main title of list item
-
-|            Type             | Default |
-| :-------------------------: | :-----: |
-| string **OR** React element |  none   |
-
----
-
-### `titleStyle`
-
-Add additional styling
-
-|    Type    | Default |
-| :--------: | :-----: |
-| Text style |  none   |
-
----
-
-### `titleProps`
-
-provide all props from react-native Text component
-
-|                              Type                               | Default |
-| :-------------------------------------------------------------: | :-----: |
-| {[...Text props](https://reactnative.dev/docs/text.html#props)} |  none   |
-
----
-
-### `subtitle`
-
-subtitle text or custom view (optional)
-
-|            Type             | Default |
-| :-------------------------: | :-----: |
-| string **OR** React element |  none   |
-
----
-
-### `subtitleStyle`
-
-Add additional styling
-
-|    Type    | Default |
-| :--------: | :-----: |
-| Text style |  none   |
-
----
-
-### `subtitleProps`
-
-provide all props from react-native Text component
-
-|                              Type                               | Default |
-| :-------------------------------------------------------------: | :-----: |
-| {[...Text props](https://reactnative.dev/docs/text.html#props)} |  none   |
-
----
-
-### `rightTitle`
-
-Show up a title on the right side of the list item
-
-|            Type             | Default |
-| :-------------------------: | :-----: |
-| string **OR** React element |  none   |
-
----
-
-### `rightTitleStyle`
-
-add additional styling
-
-|    Type    | Default |
-| :--------: | :-----: |
-| Text style |  none   |
-
----
-
-### `rightTitleProps`
-
-provide all props from react-native Text component
-
-|                              Type                               | Default |
-| :-------------------------------------------------------------: | :-----: |
-| {[...Text props](https://reactnative.dev/docs/text.html#props)} |  none   |
-
----
-
-### `rightSubtitle`
-
-Show up a subtitle on the right side of the list item
-
-|            Type             | Default |
-| :-------------------------: | :-----: |
-| string **OR** React element |  none   |
-
----
-
-### `rightSubtitleStyle`
-
-Add additional styling
-
-|    Type    | Default |
-| :--------: | :-----: |
-| Text style |  none   |
-
----
-
-### `rightSubtitleProps`
-
-provide all props from react-native Text component
-
-|                              Type                               | Default |
-| :-------------------------------------------------------------: | :-----: |
-| {[...Text props](https://reactnative.dev/docs/text.html#props)} |  none   |
-
----
-
-### `leftIcon`
-
-displays an icon on the left (optional)
-
-|                            Type                            | Default |
-| :--------------------------------------------------------: | :-----: |
-| {[...Icon props](icon.md#props)}<br/>**OR**<br/> component |  none   |
-
----
-
-### `rightIcon`
-
-displays an icon on the right (optional)
-
-|                            Type                            | Default |
-| :--------------------------------------------------------: | :-----: |
-| {[...Icon props](icon.md#props)}<br/>**OR**<br/> component |  none   |
-
----
-
-### `leftAvatar`
-
-displays an Avatar on the left (optional)
-
-|                              Type                              | Default |
-| :------------------------------------------------------------: | :-----: |
-| {[...Avatar props](avatar.md#props)}<br/>**OR**<br/> component |  none   |
-
----
-
-### `rightAvatar`
-
-displays an Avatar on the right (optional)
-
-|                                       Type                                        | Default |
-| :-------------------------------------------------------------------------------: | :-----: |
-| View style (object){[...Avatar props](avatar.md#props)}<br/>**OR**<br/> component |  none   |
-
----
-
-### `leftElement`
-
-Add any element on the left side of the list item
-
-|     Type      | Default |
-| :-----------: | :-----: |
-| React element |  none   |
-
----
-
-### `rightElement`
-
-Add any element on the right side of the list item
-
-|     Type      | Default |
-| :-----------: | :-----: |
-| React element |  none   |
-
----
-
-### `switch`
-
-add a switch to the right side. (object with the props of the react-native
-`Switch` component)
-
-|                                Type                                 | Default |
-| :-----------------------------------------------------------------: | :-----: |
-| {[...Switch props](https://reactnative.dev/docs/switch.html#props)} |  none   |
-
----
-
-### `input`
-
-add an Input on the right side (object with the props of the React Native
-Elements `Input` component)
-
-|                Type                | Default |
-| :--------------------------------: | :-----: |
-| {[...Input props](input.md#props)} |  none   |
-
----
-
-### `buttonGroup`
-
-add a button group on the right side (object with the props of the React Native
-Elements `ButtonGroup` component)
-
-|                      Type                       | Default |
-| :---------------------------------------------: | :-----: |
-| {[...ButtonGroup props](button_group.md#props)} |  none   |
-
----
-
-### `checkBox`
-
-add a checkbox on the right side (object with the props of the React Native
-Elements `CheckBox` component)
-
-|                   Type                   | Default |
-| :--------------------------------------: | :-----: |
-| {[...CheckBox props](checkbox.md#props)} |  none   |
-
----
-
-### `badge`
-
-add a badge on the right side (object with the props of the React Native
-Elements `Badge` component)
-
-|                Type                | Default |
-| :--------------------------------: | :-----: |
-| {[...Badge props](badge.md#props)} |  none   |
-
----
-
-### `disabled`
-
-If true the user won't be able to perform any action on the list item.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  none   |
-
----
-
-### `disabledStyle`
-
-Specific styling to be used when list item is disabled.
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `topDivider`
-
-Add divider at the top of the list item
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `bottomDivider`
-
-Add divider at the bottom of the list item
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `ViewComponent`
-
-Container for linear gradient (for non-expo user)
-
-|   Type    | Default |
-| :-------: | :-----: |
-| component |  View   |
-
----
-
-### `pad`
-
-adds spacing between the leftComponent, the title component & right component
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |  `16`   |
diff --git a/website/versioned_docs/version-2.2.1/overlay.md b/website/versioned_docs/version-2.2.1/overlay.md
deleted file mode 100644
index 318a8d0628..0000000000
--- a/website/versioned_docs/version-2.2.1/overlay.md
+++ /dev/null
@@ -1,136 +0,0 @@
----
-id: overlay
-title: Overlay
----
-
-The Overlay is a view that floats above an app’s content. Overlays are an easy
-way to inform or request information from the user.
-
-<img src="/img/overlay.png" width="400" />
-
-## Usage
-
-```jsx
-import React, { useState } from 'react';
-import { Button, Overlay } from 'react-native-elements';
-
-const OverlayExample = () => {
-  const [visible, setVisible] = useState(false);
-
-  const toggleOverlay = () => {
-    setVisible(!visible);
-  };
-
-  return (
-    <View>
-      <Button title="Open Overlay" onPress={toggleOverlay} />
-
-      <Overlay isVisible={visible} onBackdropPress={toggleOverlay}>
-        <Text>Hello from Overlay!</Text>
-      </Overlay>
-    </View>
-  );
-};
-```
-
-> Web-platform specific note:
->
-> You **must** pass a valid React Native [`Modal`](https://reactnative.dev/docs/modal) component implementation
-> into [`ModalComponent`](#modalcomponent) prop because `Modal` component is not implemented yet in `react-native-web`
-
-```jsx
-...
-import Modal from 'modal-react-native-web';
-
-...
-
-<Overlay ModalComponent={Modal} ... />
-...
-```
-
----
-
-## Props
-
-> Also receives all
-> [Modal](https://reactnative.dev/docs/modal#props) props
-
-- [`backdropStyle`](#backdropStyle)
-- [`children`](#children)
-- [`fullScreen`](#fullscreen)
-- [`isVisible`](#isvisible)
-- [`onBackdropPress`](#onbackdroppress)
-- [`overlayStyle`](#overlaystyle)
-- [`ModalComponent`](#modalcomponent)
-
----
-
-## Reference
-
-### `children`
-
-What the modal will render
-
-|     Type      | Default |
-| :-----------: | :-----: |
-| React Element |  none   |
-
----
-
-### `backdropStyle`
-
-Style of the backdrop container
-
-|        Type         |    Default     |
-| :-----------------: | :------------: |
-| View Style (object) | Internal Style |
-
----
-
-### `fullScreen`
-
-If set to true, the modal will take up the entire screen width and height
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `isVisible`
-
-If true, the overlay is visible
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `overlayStyle`
-
-style of the actual overlay
-
-|        Type         |    Default     |
-| :-----------------: | :------------: |
-| View Style (object) | Internal Style |
-
----
-
-### `onBackdropPress`
-
-handler for backdrop press (only works when `fullscreen` is false)
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `ModalComponent`
-
-override React Native `Modal` component (usable for web-platform)
-
-|          Type          | Default |
-| :--------------------: | :-----: |
-| React Native Component |  Modal  |
diff --git a/website/versioned_docs/version-2.2.1/overview.md b/website/versioned_docs/version-2.2.1/overview.md
deleted file mode 100644
index 270b8fe1f4..0000000000
--- a/website/versioned_docs/version-2.2.1/overview.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-id: overview
-title: Overview
----
-
-This section of the documentation describes the props and examples for all the
-components from React Native Elements. Please take some time and explore all of the components that are at your disposal!
-
-## Using React Native Elements
-
-The components in this library have a single theme running through them. From
-one central location, we can update the colours used in all components. While
-this was great for the developers of the library, the actual users also needed a
-way to use this feature.
-
-But why stop at colours? Why not allow the props of every component to be
-defined in one central place? And so the idea behind theming with React Native
-Elements was born!
-
-```jsx
-import { Button, ThemeProvider } from 'react-native-elements';
-
-const MyApp = () => {
-  return (
-    <ThemeProvider>
-      <Button title="Hey!" />
-    </ThemeProvider>
-  );
-};
-```
-
-To customize the theme, or use it within your own components, be sure to check
-the docs on [Customization](customization.md).
diff --git a/website/versioned_docs/version-2.2.1/pricing.md b/website/versioned_docs/version-2.2.1/pricing.md
deleted file mode 100644
index b760f0b720..0000000000
--- a/website/versioned_docs/version-2.2.1/pricing.md
+++ /dev/null
@@ -1,154 +0,0 @@
----
-id: pricing
-title: Pricing
----
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-Pricing is a convenience component used to display features and pricing tables
-in a beautiful and engaging way.
-
-<img alt="Pricing Component" src={useBaseUrl('img/pricing.png')} />
-
-## Usage
-
-```js
-import { PricingCard } from 'react-native-elements';
-
-<PricingCard
-  color="#4f9deb"
-  title="Free"
-  price="$0"
-  info={['1 User', 'Basic Support', 'All Core Features']}
-  button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
-/>;
-```
-
----
-
-## Props
-
-- [`containerStyle`](#containerstyle)
-- [`buttonFont`](#buttonfont)
-- [`infoFont`](#infofont)
-- [`pricingFont`](#pricingfont)
-- [`titleFont`](#titlefont)
-- [`wrapperStyle`](#wrapperstyle)
-- [`price`](#price)
-- [`onButtonPress`](#onbuttonpress)
-- [`button`](#button)
-- [`info`](#info)
-- [`color`](#color)
-- [`title`](#title)
-
----
-
-## Reference
-
-### `containerStyle`
-
-outer component styling (optional)
-
-|      Type      |      Default      |
-| :------------: | :---------------: |
-| object (style) | inherited styling |
-
----
-
-### `infoStyle`
-
-specify pricing information style
-
-|      Type      | Default |
-| :------------: | :-----: |
-| style (object) |  none   |
-
----
-
-### `pricingStyle`
-
-specify pricing text style
-
-|      Type      | Default |
-| :------------: | :-----: |
-| style (object) |  none   |
-
----
-
-### `titleStyle`
-
-specify title text style
-
-|      Type      | Default |
-| :------------: | :-----: |
-| style (object) |  none   |
-
----
-
-### `wrapperStyle`
-
-inner wrapper component styling (optional)
-
-|      Type      |      Default      |
-| :------------: | :---------------: |
-| object (style) | inherited styling |
-
----
-
-### `price`
-
-price (required)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  none   |
-
----
-
-### `onButtonPress`
-
-function to be run when button is pressed
-
-| Type | Default |
-| :--: | :-----: |
-| any  |  none   |
-
----
-
-### `button`
-
-button information (required)
-
-|                              Type                              | Default |
-| :------------------------------------------------------------: | :-----: |
-| {[...Button props](button.md#props)}<br/>**OR**<br/> component |  none   |
-
----
-
-### `info`
-
-pricing information (optional)
-
-|       Type       | Default |
-| :--------------: | :-----: |
-| array of strings |  none   |
-
----
-
-### `color`
-
-color scheme for button & title
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  none   |
-
----
-
-### `title`
-
-title (required)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  none   |
diff --git a/website/versioned_docs/version-2.2.1/searchbar.md b/website/versioned_docs/version-2.2.1/searchbar.md
deleted file mode 100644
index 7b6f478f6b..0000000000
--- a/website/versioned_docs/version-2.2.1/searchbar.md
+++ /dev/null
@@ -1,397 +0,0 @@
----
-id: searchbar
-title: SearchBar
----
-
-SearchBars are used to search or filter items. Use a SearchBar when the number
-of items directly impacts a user's ability to find one of them.
-
-## Default SearchBar
-
-<img src="/img/searchbar.png" width="300" />
-
-## Platform specific SearchBar
-
-**iOS**
-
-<img src="https://user-images.githubusercontent.com/17592779/31585176-b124cdae-b1bd-11e7-809f-ba966cebc663.gif" width="300"/>
-
-**Android**
-
-<img src="https://user-images.githubusercontent.com/17592779/31586716-f6e8ff9c-b1d4-11e7-918f-2a7e11d51b08.gif" width="300"/>
-
-## Usage
-
-```jsx
-import { SearchBar } from 'react-native-elements';
-
-export default class App extends React.Component {
-  state = {
-    search: '',
-  };
-
-  updateSearch = (search) => {
-    this.setState({ search });
-  };
-
-  render() {
-    const { search } = this.state;
-
-    return (
-      <SearchBar
-        placeholder="Type Here..."
-        onChangeText={this.updateSearch}
-        value={search}
-      />
-    );
-  }
-}
-```
-
----
-
-## Props
-
-> This component inherits all
-> [React Native Elements Input props](input.md#props),
-> which means
-> [all native TextInput props that come with a standard React Native TextInput element](https://reactnative.dev/docs/textinput.html),
-> along with the following:
-
-- [`platform`](#platform)
-- [`clearIcon`](#clearicon)
-- [`searchIcon`](#searchicon)
-- [`cancelIcon`](#cancelicon-platformandroid-only) (**`platform="android"`
-  only**)
-- [`containerStyle`](#containerstyle)
-- [`inputContainerStyle`](#inputcontainerstyle)
-- [`inputStyle`](#inputstyle)
-- [`leftIconContainerStyle`](#lefticoncontainerstyle)
-- [`rightIconContainerStyle`](#righticoncontainerstyle)
-- [`lightTheme`](#lighttheme-platformdefault-only) (**`platform="default"`
-  only**)
-- [`loadingProps`](#loadingprops)
-- [`onChangeText`](#onchangetext)
-- [`onClear`](#onclear)
-- [`placeholder`](#placeholder)
-- [`placeholderTextColor`](#placeholdertextcolor)
-- [`round`](#round-platformdefault-only) (**`platform="default"` only**)
-- [`showCancel`](#showcancel-platformios-only) (**`platform="ios"` only**)
-- [`showLoading`](#showloading)
-- [`underlineColorAndroid`](#underlinecolorandroid)
-- [`cancelButtonTitle`](#cancelbuttontitle)
-- [`cancelButtonProps`](#cancelbuttonprops)
-- [`onCancel`](#oncancel)
-
----
-
-## Reference
-
-### `platform`
-
-choose the look and feel of the search bar. One of "default", "ios", "android"
-
-|  Type  |  Default  |
-| :----: | :-------: |
-| string | "default" |
-
----
-
-### `clearIcon`
-
-This props allows to override the `Icon` props or use a custom component. Use
-`null` or `false` to hide the icon.
-
-|                            Type                            | Default |
-| :--------------------------------------------------------: | :-----: |
-| {[...Icon props](icon.md#props)}<br/>**OR**<br/> component |  none   |
-
----
-
-### `searchIcon`
-
-This props allows to override the `Icon` props or use a custom component. Use
-`null` or `false` to hide the icon.
-
-|                            Type                            | Default |
-| :--------------------------------------------------------: | :-----: |
-| {[...Icon props](icon.md#props)}<br/>**OR**<br/> component |  none   |
-
----
-
-### `cancelIcon` (**`platform="android"` only**)
-
-This props allows to override the `Icon` props or use a custom component. Use
-`null` or `false` to hide the icon.
-
-|                            Type                            | Default |
-| :--------------------------------------------------------: | :-----: |
-| {[...Icon props](icon.md#props)}<br/>**OR**<br/> component |  none   |
-
----
-
-### `containerStyle`
-
-style the container of the SearchBar
-
-|      Type      |      Default      |
-| :------------: | :---------------: |
-| object (style) | inherited styling |
-
----
-
-### `inputContainerStyle`
-
-style the container of the TextInput
-
-|      Type      |      Default      |
-| :------------: | :---------------: |
-| object (style) | inherited styling |
-
----
-
-### `inputStyle`
-
-style the TextInput
-
-|      Type      |      Default      |
-| :------------: | :---------------: |
-| object (style) | inherited styling |
-
----
-
-### `leftIconContainerStyle`
-
-style the icon container on the left side
-
-|      Type      |      Default      |
-| :------------: | :---------------: |
-| object (style) | inherited styling |
-
----
-
-### `rightIconContainerStyle`
-
-style the icon container on the right side
-
-|      Type      |      Default      |
-| :------------: | :---------------: |
-| object (style) | inherited styling |
-
----
-
-### `lightTheme` (**`platform="default"` only**)
-
-change theme to light theme
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `loadingProps`
-
-props passed to ActivityIndicator
-
-|  Type  | Default |
-| :----: | :-----: |
-| object |   { }   |
-
----
-
-### `onChangeText`
-
-method to fire when text is changed
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `onClear`
-
-method to fire when input is cleared
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `placeholder`
-
-set the placeholder text
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |   ''    |
-
----
-
-### `placeholderTextColor`
-
-set the color of the placeholder text
-
-|  Type  |  Default  |
-| :----: | :-------: |
-| string | '#86939e' |
-
----
-
-### `round` (**`platform="default"` only**)
-
-change TextInput styling to rounded corners
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `showCancel` (**`platform="ios"` only**)
-
-When `true` the cancel button will stay visible after blur events.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `showLoading`
-
-show the loading ActivityIndicator effect
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `underlineColorAndroid`
-
-specify other than the default transparent underline color
-
-|      Type      |   Default   |
-| :------------: | :---------: |
-| string (color) | transparent |
-
----
-
-### `cancelButtonTitle`
-
-**(iOS only)** title of the cancel button on the right side
-
-|  Type  | Default  |
-| :----: | :------: |
-| string | "Cancel" |
-
----
-
-### `cancelButtonProps`
-
-**(iOS only)** props passed to cancel Button
-
-> Also receives all
-> [TouchableOpacity](http://reactnative.dev/docs/touchableopacity.html#props)
-> props
-
-- [`buttonStyle`](#buttonstyle)
-- [`buttonTextStyle`](#buttontextstyle)
-- [`color`](#color)
-- [`disabled`](#disabled)
-- [`buttonDisabledStyle`](#buttondisabledstyle)
-- [`buttonDisabledTextStyle`](#buttondisabledtextstyle)
-
-#### `buttonStyle`
-
-cancel Button styling
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
-#### `buttonTextStyle`
-
-cancel Button Text styling
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
-#### `color`
-
-cancel Button text color
-
-|      Type      | Default |
-| :------------: | :-----: |
-| string (color) | #007aff |
-
-#### `disabled`
-
-Prop to indicate cancel Button is disabled
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
-#### `buttonDisabledStyle`
-
-Disabled cancel Button styling
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
-#### `buttonDisabledTextStyle`
-
-Styles for the text when cancel Button is disabled
-
-|      Type      |        Default         |
-| :------------: | :--------------------: |
-| object (style) | `{ color: '#cdcdcd' }` |
-
----
-
-### `onCancel`
-
-callback fired when pressing the cancel button (iOS) or the back icon (Android)
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  null   |
-
----
-
-## Interaction methods
-
-| method | description                                                                                                                                                                                      |
-| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| focus  | call focus on the textinput ([example](#calling))                                                                                                                                                |
-| blur   | call blur on the textinput ([example](#calling))                                                                                                                                                 |
-| clear  | call clear on the textinput ([example](#calling))                                                                                                                                                |
-| cancel | **(Android and iOS SearchBars only)** call cancel on the SearchBar (left arrow on Android, Cancel button on iOS). This will basically blur the input and hide the keyboard ([example](#calling)) |
-
-#### <a name="calling"></a> Calling methods on SearchBar
-
-Store a reference to the SearchBar in your component by using the ref prop
-provided by React
-([see docs](https://facebook.github.io/react/docs/refs-and-the-dom.html)):
-
-```js
-<SearchBar
-  ref={search => this.search = search}
-  ...
-/>
-```
-
-You can then access SearchBar methods like so:
-
-```
-this.search.focus();
-this.search.blur();
-this.search.clear();
-this.search.cancel(); // Only available if `platform` props is "ios" | "android"
-```
diff --git a/website/versioned_docs/version-2.2.1/social_icons.md b/website/versioned_docs/version-2.2.1/social_icons.md
deleted file mode 100644
index 571503fe5b..0000000000
--- a/website/versioned_docs/version-2.2.1/social_icons.md
+++ /dev/null
@@ -1,279 +0,0 @@
----
-id: social_icon
-title: SocialIcon
----
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-SocialIcons are visual cues to online and social media networks.
-
-<img alt="Social Icons" src={useBaseUrl('img/social-icons.png')} />
-
-## Usage
-
-```js
-import { SocialIcon } from 'react-native-elements'
-
-// Icon
-<SocialIcon
-  type='twitter'
-/>
-
-<SocialIcon
-  raised={false}
-  type='gitlab'
-/>
-
-<SocialIcon
-  light
-  type='medium'
-/>
-
-<SocialIcon
-  light
-  raised={false}
-  type='medium'
-/>
-
-
-// Button
-<SocialIcon
-  title='Sign In With Facebook'
-  button
-  type='facebook'
-/>
-
-<SocialIcon
-  title='Some Twitter Message'
-  button
-  type='twitter'
-/>
-
-<SocialIcon
-  button
-  type='medium'
-/>
-
-<SocialIcon
-  button
-  light
-  type='instagram'
-/>
-```
-
----
-
-## Props
-
-- [`button`](#button)
-- [`Component`](#Component)
-- [`disabled`](#disabled)
-- [`fontFamily`](#fontfamily)
-- [`fontStyle`](#fontstyle)
-- [`fontWeight`](#fontweight)
-- [`iconColor`](#iconcolor)
-- [`iconSize`](#iconsize)
-- [`iconStyle`](#iconstyle)
-- [`iconType`](#icontype)
-- [`light`](#light)
-- [`loading`](#loading)
-- [`onLongPress`](#onlongpress)
-- [`onPress`](#onpress)
-- [`raised`](#raised)
-- [`style`](#style)
-- [`title`](#title)
-- [`type`](#type)
-- [`underlayColor`](#underlaycolor)
-
----
-
-## Reference
-
-### `button`
-
-creates button (optional)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `Component`
-
-type of button (optional)
-
-|          Type          |      Default       |
-| :--------------------: | :----------------: |
-| React Native Component | TouchableHighlight |
-
----
-
-### `disabled`
-
-disable button (optional)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `fontFamily`
-
-specify different font family (optional)
-
-|  Type  |                      Default                       |
-| :----: | :------------------------------------------------: |
-| string | System font bold (iOS), Sans Serif Black (android) |
-
----
-
-### `fontStyle`
-
-specify text styling (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `fontWeight`
-
-specify font weight of title if set as a button with a title
-
-|  Type  |          Default           |
-| :----: | :------------------------: |
-| string | bold (ios), black(android) |
-
----
-
-### `iconColor`
-
-icon color (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  white  |
-
----
-
-### `iconSize`
-
-icon size (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |   24    |
-
----
-
-### `iconStyle`
-
-extra styling for icon component (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `iconType`
-
-type of icon set. [Supported sets here](./icon.md#available-icon-sets).
-
-|  Type  |   Default    |
-| :----: | :----------: |
-| string | font-awesome |
-
----
-
-### `light`
-
-reverses icon color scheme, setting background to white and icon to primary
-color
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `loading`
-
-shows loading indicator (optional)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `onLongPress`
-
-onLongPress method (optional)
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `onPress`
-
-onPress method (optional)
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `raised`
-
-raised adds a drop shadow, set to false to remove
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  true   |
-
----
-
-### `style`
-
-button styling (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `title`
-
-title if made into a button (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  none   |
-
----
-
-### `type`
-
-social media type (required)
-
-|                                                                                                                                                            Type                                                                                                                                                            | Default |
-| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: |
-| social media type (angellist, codepen, envelope, etsy, facebook, flickr, foursquare, github-alt, github, gitlab, instagram, linkedin, medium, pinterest, quora, reddit-alien, soundcloud, stack-overflow, steam, stumbleupon, tumblr, twitch, twitter, google, google-plus-official, vimeo, vk, weibo, wordpress, youtube) |  none   |
-
----
-
-### `underlayColor`
-
-underlay color (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  none   |
diff --git a/website/versioned_docs/version-2.2.1/text.md b/website/versioned_docs/version-2.2.1/text.md
deleted file mode 100644
index 15d07372f7..0000000000
--- a/website/versioned_docs/version-2.2.1/text.md
+++ /dev/null
@@ -1,127 +0,0 @@
----
-id: text
-title: Text
----
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-Text displays words and characters at various sizes.
-
-<img alt="Text" src={useBaseUrl('img/text.png')} />
-
-## Usage
-
-```js
-import { Text } from 'react-native-elements';
-
-<Text h1>Heading 1</Text>
-<Text h2>Heading 2</Text>
-<Text h3>Heading 3</Text>
-<Text h4>Heading 4</Text>
-```
-
----
-
-## Props
-
-- [`h1`](#h1)
-- [`h2`](#h2)
-- [`h3`](#h3)
-- [`h4`](#h4)
-- [`h1Style`](#h1style)
-- [`h2Style`](#h2style)
-- [`h3Style`](#h3style)
-- [`h4Style`](#h4style)
-- [`style`](#style)
-
----
-
-## Reference
-
-### `h1`
-
-font size 40 (optional)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  none   |
-
----
-
-### `h2`
-
-font size 34 (optional)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  none   |
-
----
-
-### `h3`
-
-font size 28 (optional)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  none   |
-
----
-
-### `h4`
-
-font size 22 (optional)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  none   |
-
----
-
-### `h1Style`
-
-Styling for when `h1` is set (optional)
-
-|        Type         | Default |
-| :-----------------: | :-----: |
-| Text style (object) |  none   |
-
----
-
-### `h2Style`
-
-Styling for when `h2` is set (optional)
-
-|        Type         | Default |
-| :-----------------: | :-----: |
-| Text style (object) |  none   |
-
----
-
-### `h3Style`
-
-Styling for when `h3` is set (optional)
-
-|        Type         | Default |
-| :-----------------: | :-----: |
-| Text style (object) |  none   |
-
----
-
-### `h4Style`
-
-Styling for when `h4` is set (optional)
-
-|        Type         | Default |
-| :-----------------: | :-----: |
-| Text style (object) |  none   |
-
----
-
-### `style`
-
-add additional styling for Text (optional)
-
-|        Type         | Default |
-| :-----------------: | :-----: |
-| Text style (object) |  none   |
diff --git a/website/versioned_docs/version-2.2.1/troubleshooting.md b/website/versioned_docs/version-2.2.1/troubleshooting.md
deleted file mode 100644
index 8f0511e06f..0000000000
--- a/website/versioned_docs/version-2.2.1/troubleshooting.md
+++ /dev/null
@@ -1,158 +0,0 @@
----
-id: troubleshooting
-title: Troubleshooting
----
-
-Although we try to make the experience of using React Native Elements
-hassle-free, time to time you may encounter some problems along the way.
-
-On this page you can find solutions to commonly encountered issues.
-
-## |> Invariant Violation: Element type is invalid
-
-This error occurs when trying to import a component that doesn't exist. This
-usually happens for a few reasons:
-
-### You incorrectly spelt a component
-
-Spelling a component incorrectly though very simple, happens occasionally.
-
-```
-// Incorrect
-import { Listitem } from 'react-native-elements'
-
-// Correct
-import { ListItem } from 'react-native-elements'
-```
-
-### Importing a component from the wrong version
-
-This error occurs when you're trying to use a component from the wrong version.
-At RNE they're some components that are only available in some versions.
-
-```md
-Example:
-
-`<FormInput />` is only available in v0.19.1 and below. `<Input />` is only
-available in `v1.0.0-beta1` and higher.
-```
-
-To fix this, follow these steps:
-
-1. Check your `package.json` for the version of `react-native-elements` you are
-   using.
-2. View the documentation for your particular version on the website. See
-   available versions
-   [here](/versions)
-   or click the version number next to the logo in the header.
-3. Checking the list of components on the left side bar, make sure you're using
-   the right component.
-
----
-
-## |> "fontFamily (font-name) is not a system font
-
-This is a general error in react native, where you in your code, or a package
-you are using, is trying to use a font that is not bundled with the platform or
-is not added to the project.
-
-If you aren't using a custom font in your application, then it's likely that
-the error comes from React Native Elements looking for
-`react-native-vector-icons`.
-
-They're a couple ways to solve this depending on your setup.
-
-- [`react-native-init`](#using-react-native-init)
-- [`create-react-native-app or Expo XDE`](#using-an-expo-app-create-react-native-app-or-expo-xde)
-- [`Detached create-react-native-app`](#using-a-detached-create-react-native-app-app)
-
-<br/>
-
-### Using `react-native-init`
-
-1. Delete everything to be sure
-
-```bash
-rm -rf node_modules yarn.lock package-lock.json
-```
-
-2. Install React Native Elements
-
-```bash
-# npm
-npm install && npm install react-native-elements --save
-
-# yarn
-yarn && yarn add react-native-elements
-```
-
-3. Install react-native-vector-icons
-
-```bash
-# npm
-npm install react-native-vector-icons --save
-
-# yarn
-yarn add react-native-vector-icons
-```
-
-4. Link react-native-vector-icons. Learn more about
-   [linking](https://reactnative.dev/docs/linking.html).
-
-```
-react-native link react-native-vector-icons
-```
-
-If you encounter any red error screens during the process, try running these
-commands:
-
-> "Unrecognized font x"
->
-> iOS - `rm -rf ios/build`
->
-> Android - `rm -rf android/build && rm -rf android/app/build`
-
-> "Unable to resolve module x"
->
-> npm -`rm -rf node_modules && npm i`
->
-> yarn - `rm -rf node_modules && yarn`
-
-> "Unable to resolve module x"
->
-> `npm start -- --reset-cache`
-
-### Using an Expo app (create-react-native-app or Expo XDE)
-
-1. Delete everything to be sure
-
-```bash
-rm -rf node_modules yarn.lock package-lock.json
-```
-
-2. Install React Native Elements
-
-```bash
-# npm
-npm install && npm install react-native-elements --save
-
-# yarn
-yarn && yarn add react-native-elements
-```
-
-3. Install `@expo/vector-icons`
-
-```bash
-# npm
-npm install @expo/vector-icons --save
-
-# yarn
-yarn add @expo/vector-icons --save
-```
-
-### Using a detached `create-react-native-app` app
-
-- If you choose a regular React Native project, use
-  [Solution 1](#using-react-native-init)
-- If you choose to use Expo SDK (ExpoKit), use
-  [Solution 2](#using-an-expo-app-create-react-native-app-or-expo-xde)
diff --git a/website/versioned_docs/version-2.2.1/web_usage.md b/website/versioned_docs/version-2.2.1/web_usage.md
deleted file mode 100644
index 3a1c072222..0000000000
--- a/website/versioned_docs/version-2.2.1/web_usage.md
+++ /dev/null
@@ -1,79 +0,0 @@
----
-id: web_usage
-title: Usage on the Web
----
-
-React Native Elements just like on mobile can be used in your web projects. This is possible using [react-native-web](https://github.com/necolas/react-native-web). We'll highlight how to set this up using create-react-app.
-
-## Why do I have to set this up?
-
-On the web, you can usually use UI libraries directly from npm without any additional setup. However in react-native, it's a bit different.
-
-The major difference is that React Native can support JSX and advanced javascript out the box. This means that we don't need to transpile our code before we ship it to npm. **We ship JSX and advanced javascript directly to npm** in React Native Elements, so we need to account for this in our web projects.
-
-## Create React App
-
-[Create React App](https://create-react-app.dev/) is a very popular framework for building react applications. Unfortunately it doesn't allow much customization of the build setup. To accomplish this we'll be making use of [react-app-rewired](https://github.com/timarney/react-app-rewired) and [customize-cra](https://github.com/arackaf/customize-cra).
-
-After creating a new create-react-app project, run the following commands.
-
-```bash
-yarn add react-native-elements react-native-web react-native-vector-icons
-```
-
-```bash
-yarn add --dev @babel/plugin-proposal-class-properties customize-cra react-app-rewired
-```
-
-Secondly, create a `config-overrides.js` file in the root of your project.
-
-```js
-const path = require('path');
-const { override, addBabelPlugins, babelInclude } = require('customize-cra');
-
-module.exports = override(
-  ...addBabelPlugins('@babel/plugin-proposal-class-properties'),
-  babelInclude([
-    path.resolve(__dirname, 'node_modules/react-native-elements'),
-    path.resolve(__dirname, 'node_modules/react-native-vector-icons'),
-    path.resolve(__dirname, 'node_modules/react-native-ratings'),
-    path.resolve(__dirname, 'src'),
-  ])
-);
-```
-
-Also you should keep in mind that not all of React Native components are implemented for web-platform out-of-box.
-For example, `Modal` component is not yet implemented in `react-native-web`. Therefore, to use some of our components
-you may need to install additional third-party libraries that implement the missing functionality.
-For [`Overlay`](overlay.md) and [`Tooltip`](tooltip.md) components `Modal` implementation is required.
-
-Lastly, change your scripts in `package.json` to use react-app-rewired:
-
-```diff
-"scripts": {
--   "start": "react-scripts start",
-+   "start": "react-app-rewired start",
--   "build": "react-scripts build",
-+   "build": "react-app-rewired build",
--   "test": "react-scripts test",
-+   "test": "react-app-rewired test"
-}
-```
-
-At this point your app can start. However trying to use any components that use icons, will not show them. In your App.js, load these fonts as you would on the web with a style tag.
-
-```jsx
-<style type="text/css">{`
-  @font-face {
-    font-family: 'MaterialIcons';
-    src: url(${require('react-native-vector-icons/Fonts/MaterialIcons.ttf')}) format('truetype');
-  }
-
-  @font-face {
-    font-family: 'FontAwesome';
-    src: url(${require('react-native-vector-icons/Fonts/FontAwesome.ttf')}) format('truetype');
-  }
-`}</style>
-```
-
-The full setup of the guide can be found at https://github.com/react-native-elements/create-react-app-example.
diff --git a/website/versioned_docs/version-2.3.2/input.md b/website/versioned_docs/version-2.3.2/input.md
index 1f1ae2d9d0..283585b598 100644
--- a/website/versioned_docs/version-2.3.2/input.md
+++ b/website/versioned_docs/version-2.3.2/input.md
@@ -299,7 +299,7 @@ component that will be rendered in place of the React Native `TextInput`
 
 Store a reference to the Input in your component by using the ref prop
 provided by React
-([see docs](https://facebook.github.io/react/docs/refs-and-the-dom.html)):
+([see docs](https://reactjs.org/docs/refs-and-the-dom.html)):
 
 ```js
 const input = React.createRef();
diff --git a/website/versioned_docs/version-2.3.2/searchbar.md b/website/versioned_docs/version-2.3.2/searchbar.md
index 0432b94345..b4109cfa18 100644
--- a/website/versioned_docs/version-2.3.2/searchbar.md
+++ b/website/versioned_docs/version-2.3.2/searchbar.md
@@ -388,7 +388,7 @@ callback fired when pressing the cancel button (iOS) or the back icon (Android)
 
 Store a reference to the SearchBar in your component by using the ref prop
 provided by React
-([see docs](https://facebook.github.io/react/docs/refs-and-the-dom.html)):
+([see docs](https://reactjs.org/docs/refs-and-the-dom.html)):
 
 ```js
 <SearchBar
diff --git a/website/versioned_docs/version-2.3.2/testing.md b/website/versioned_docs/version-2.3.2/testing.md
index 93de64342d..7d46b5cb97 100644
--- a/website/versioned_docs/version-2.3.2/testing.md
+++ b/website/versioned_docs/version-2.3.2/testing.md
@@ -27,9 +27,9 @@ yarn test -u
 npm run test -u
 ```
 
-For Snapshot Testing, we use [Jest](https://facebook.github.io/jest/).
+For Snapshot Testing, we use [Jest](https://jestjs.io/).
 
-You can read more about snapshot testing [here](https://facebook.github.io/jest/docs/en/snapshot-testing.html).
+You can read more about snapshot testing [here](https://jestjs.io/docs/en/snapshot-testing.html).
 
 ## Functional Testing
 
diff --git a/website/versioned_docs/version-2.0.4/avatar.md b/website/versioned_docs/version-3.0.0/avatar.md
similarity index 86%
rename from website/versioned_docs/version-2.0.4/avatar.md
rename to website/versioned_docs/version-3.0.0/avatar.md
index ccd7ff336c..f0564769ca 100644
--- a/website/versioned_docs/version-2.0.4/avatar.md
+++ b/website/versioned_docs/version-3.0.0/avatar.md
@@ -51,8 +51,9 @@ import { Avatar } from 'react-native-elements';
     uri:
       'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
   }}
-  showAccessory
-/>
+  >
+  <Avatar.Accessory {...accessoryProps} />
+</Avatar>
 ```
 
 #### Avatar with initials
@@ -151,17 +152,18 @@ import { Avatar } from "react-native-elements";
 <img src="/img/avatar_with_title_placeholder.gif" width="500" />
 
 ```js
-import { ListItem } from 'react-native-elements';
-
-<ListItem
-  leftAvatar={{
-    title: name[0],
-    source: { uri: avatar_url },
-    showAccessory: true,
-  }}
-  title={name}
-  subtitle={role}
-  chevron
+import { Avatar, ListItem } from 'react-native-elements';
+
+<ListItem>
+  <Avatar
+    title={name[0]}
+    source={{ uri: avatar_url }}
+  />
+  <ListItem.Content>
+    <ListItem.Title>{name}</ListItem.Title>
+    <ListItem.SubTitle>{role}</ListItem.Subtitle>
+  </ListItem.Content>
+  <ListItem.Chevron/>
 />;
 ```
 
@@ -169,43 +171,37 @@ import { ListItem } from 'react-native-elements';
 
 ## Props
 
-- [`accessory`](#accessory)
 - [`activeOpacity`](#activeopacity)
 - [`avatarStyle`](#avatarstyle)
+- [`Component`](#Component)
 - [`containerStyle`](#containerstyle)
 - [`icon`](#icon)
 - [`iconStyle`](#iconstyle)
+- [`ImageComponent`](#imagecomponent)
 - [`imageProps`](#imageprops)
-- [`onAccessoryPress`](#onaccessorypress)
 - [`onLongPress`](#onlongpress)
 - [`onPress`](#onpress)
 - [`overlayContainerStyle`](#overlaycontainerstyle)
 - [`placeholderStyle`](#placeholderstyle)
+- [`renderPlaceholderContent`](#renderplaceholdercontent)
 - [`rounded`](#rounded)
-- [`showAccessory`](#showaccessory)
 - [`size`](#size)
 - [`source`](#source)
 - [`title`](#title)
 - [`titleStyle`](#titlestyle)
-- [`renderPlaceholderContent`](#renderplaceholdercontent)
-- [`Component`](#Component)
-- [`ImageComponent`](#imagecomponent)
 
 ---
 
-## Reference
-
-### `accessory`
+## Child Components
 
-Icon or Image used as small overlay.
-If a `source` key is used in the object, then an Image will be used.
+### Accessory
 
-|                                  Type                                  |                                    Default                                    |
-| :--------------------------------------------------------------------: | :---------------------------------------------------------------------------: |
-| {[...Icon props](icon.md#props)} or {[...Image props](image.md#props)} | { name: 'mode-edit', type: 'material', color: '#fff', underlayColor: '#000' } |
+> Receives either all [Icon](icon.md#props) or [Image](image.md#props) props.
 
 ---
 
+## Reference
+
 ### `activeOpacity`
 
 Opacity when pressed
@@ -226,6 +222,16 @@ Style for avatar image
 
 ---
 
+### `Component`
+
+Component for enclosing element (eg: TouchableHighlight, View, etc)
+
+|   Type   |      Default       |
+| :------: | :----------------: |
+| function | TouchableHighlight |
+
+---
+
 ### `containerStyle`
 
 Styling for outer container
@@ -257,6 +263,14 @@ Extra styling for icon component (optional)
 
 ---
 
+### `ImageComponent`
+
+Custom ImageComponent for Avatar
+
+|            Type            | Default |
+| :------------------------: | :-----: |
+| React component or element |  Image  |
+
 ### `imageProps`
 
 Optional properties to pass to the avatar e.g "resizeMode"
@@ -267,16 +281,6 @@ Optional properties to pass to the avatar e.g "resizeMode"
 
 ---
 
-### `onAccessoryPress`
-
-Callback function when pressing on the accessory
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
 ### `onLongPress`
 
 Callback function when long pressing component
@@ -317,19 +321,19 @@ Adds style to the placeholder wrapper
 
 ---
 
-### `rounded`
+### `renderPlaceholderContent`
 
-Makes the avatar circular
+Custom placeholder element (by default, it's the title)
 
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
+|            Type            | Default |
+| :------------------------: | :-----: |
+| React component or element |  none   |
 
 ---
 
-### `showAccessory`
+### `rounded`
 
-Shows an accessory over the avatar (optional)
+Makes the avatar circular
 
 |  Type   | Default |
 | :-----: | :-----: |
@@ -374,33 +378,3 @@ Style for the title
 |      Type      | Default |
 | :------------: | :-----: |
 | object (style) |  none   |
-
----
-
-### `renderPlaceholderContent`
-
-Custom placeholder element (by default, it's the title)
-
-|            Type            | Default |
-| :------------------------: | :-----: |
-| React component or element |  none   |
-
----
-
-### `Component`
-
-Component for enclosing element (eg: TouchableHighlight, View, etc)
-
-|   Type   |      Default       |
-| :------: | :----------------: |
-| function | TouchableHighlight |
-
----
-
-### `ImageComponent`
-
-Custom ImageComponent for Avatar
-
-|            Type            | Default |
-| :------------------------: | :-----: |
-| React component or element |  Image  |
diff --git a/website/versioned_docs/version-2.2.1/badge.md b/website/versioned_docs/version-3.0.0/badge.md
similarity index 98%
rename from website/versioned_docs/version-2.2.1/badge.md
rename to website/versioned_docs/version-3.0.0/badge.md
index fdc9269cf1..e51a88da3b 100644
--- a/website/versioned_docs/version-2.2.1/badge.md
+++ b/website/versioned_docs/version-3.0.0/badge.md
@@ -86,13 +86,13 @@ export default class MyDecoratedIcon extends React.Component {
 ## Props
 
 - [`badgeStyle`](#badgestyle)
+- [`Component`](#Component)
 - [`containerStyle`](#containerstyle)
 - [`onPress`](#onpress)
 - [`status`](#status)
 - [`textProps`](#textprops)
 - [`textStyle`](#textstyle)
 - [`value`](#value)
-- [`Component`](#Component)
 
 ---
 
@@ -108,6 +108,16 @@ Additional styling for badge (background) view component (optional)
 
 ---
 
+### `Component`
+
+Custom component to replace the badge outer component
+
+|          Type          |                  Default                   |
+| :--------------------: | :----------------------------------------: |
+| React Native Component | View, if `onPress` then `TouchableOpacity` |
+
+---
+
 ### `containerStyle`
 
 Style for the container (optional)
@@ -168,39 +178,19 @@ Text value to be displayed by badge, defaults to empty
 
 ---
 
-### `Component`
-
-Custom component to replace the badge outer component
-
-|          Type          |                  Default                   |
-| :--------------------: | :----------------------------------------: |
-| React Native Component | View, if `onPress` then `TouchableOpacity` |
-
----
-
 ## Props for withBadge
 
-- [`value`](#value)
 - [`options`](#options)
+- [`value`](#value)
 
 ---
 
 ## Reference for withBadge
 
-### `value`
-
-Text value to be displayed by badge, defaults to empty
-
-|                                          Type                                           | Default |
-| :-------------------------------------------------------------------------------------: | :-----: |
-| String OR Number OR React Native Component OR Function, which returns one of the former |  none   |
-
----
-
 ### `options`
 
 > Also receives all
-> [Badge](https://reactnative.dev/docs/badge#props) props.
+> [Badge](badge.md#props) props.
 
 Object with the following (optional) keys:
 
@@ -241,3 +231,11 @@ Object with the following (optional) keys:
 | View style (object) | Internal Style |
 
 ---
+
+### `value`
+
+Text value to be displayed by badge, defaults to empty
+
+|                                          Type                                           | Default |
+| :-------------------------------------------------------------------------------------: | :-----: |
+| String OR Number OR React Native Component OR Function, which returns one of the former |  none   |
diff --git a/website/versioned_docs/version-3.0.0/bottomsheet.md b/website/versioned_docs/version-3.0.0/bottomsheet.md
new file mode 100644
index 0000000000..bcfd0d437f
--- /dev/null
+++ b/website/versioned_docs/version-3.0.0/bottomsheet.md
@@ -0,0 +1,81 @@
+---
+id: bottomsheet
+title: Bottom Sheet
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+Overlay Modal that displays content from the bottom of the screen.
+
+<img src={useBaseUrl('img/bottomsheet.gif')} alt="Bottom Sheet Component" />
+
+## Usage
+
+```js
+const [isVisible, setIsVisible] = useState(false);
+const list = [
+  { title: 'List Item 1' },
+  { title: 'List Item 2' },
+  {
+    title: 'Cancel',
+    containerStyle: { backgroundColor: 'red' },
+    titleStyle: { color: 'white' },
+    onPress: () => setIsVisible(false),
+  },
+];
+
+<BottomSheet
+  isVisible={isVisible}
+  containerStyle={{ backgroundColor: 'rgba(0.5, 0.25, 0, 0.2)' }}
+>
+  {list.map((l, i) => (
+    <ListItem key={i} containerStyle={l.containerStyle} onPress={l.onPress}>
+      <ListItem.Content>
+        <ListItem.Title style={l.titleStyle}>{l.title}</ListItem.Title>
+      </ListItem.Content>
+    </ListItem>
+  ))}
+</BottomSheet>;
+```
+
+---
+
+## Props
+
+- [`containerStyle`](#containerStyle)
+- [`isVisible`](#isvisible)
+- [`modalProps`](#modalprops)
+
+---
+
+## Reference
+
+### `containerStyle`
+
+Style of the bottom sheet's container
+
+Use this to change the color of the underlay
+
+|        Type         |    Default     |
+| :-----------------: | :------------: |
+| View style (object) | Internal Style |
+
+---
+
+### `isVisible`
+
+Is the modal component shown
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  false  |
+
+---
+
+### `modalProps`
+
+Additional props handed to the `Modal`
+
+|                             Type                             | Default |
+| :----------------------------------------------------------: | :-----: |
+| [Modal Props](https://reactnative.dev/docs/modal.html#props) |   {}    |
diff --git a/website/versioned_docs/version-2.2.1/button.md b/website/versioned_docs/version-3.0.0/button.md
similarity index 94%
rename from website/versioned_docs/version-2.2.1/button.md
rename to website/versioned_docs/version-3.0.0/button.md
index 0351918c45..48ae303027 100644
--- a/website/versioned_docs/version-2.2.1/button.md
+++ b/website/versioned_docs/version-3.0.0/button.md
@@ -107,8 +107,8 @@ import Icon from 'react-native-vector-icons/FontAwesome';
 - [`title`](#title)
 - [`titleProps`](#titleprops)
 - [`titleStyle`](#titlestyle)
-- [`type`](#type)
 - [`TouchableComponent`](#touchablecomponent)
+- [`type`](#type)
 - [`ViewComponent`](#viewcomponent)
 
 ---
@@ -286,23 +286,23 @@ add additional styling for title component (optional)
 
 ---
 
-### `type`
+### `TouchableComponent`
 
-Type of button (optional)
+component for user interaction
 
-|            Type             | Default |
-| :-------------------------: | :-----: |
-| `solid`, `clear`, `outline` |  solid  |
+|        Type         |                                                                       Default                                                                        |
+| :-----------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------: |
+| Touchable Component | TouchableOpacity (ios) or TouchableNativeFeedback (android) or TouchableOpacity (android, if [`linearGradientProps`](###linearGradientProps) exists) |
 
 ---
 
-### `TouchableComponent`
+### `type`
 
-component for user interaction
+Type of button (optional)
 
-|        Type         |                           Default                           |
-| :-----------------: | :---------------------------------------------------------: |
-| Touchable Component | TouchableOpacity (ios) or TouchableNativeFeedback (android) |
+|            Type             | Default |
+| :-------------------------: | :-----: |
+| `solid`, `clear`, `outline` |  solid  |
 
 ---
 
diff --git a/website/versioned_docs/version-2.2.1/button_group.md b/website/versioned_docs/version-3.0.0/button_group.md
similarity index 95%
rename from website/versioned_docs/version-2.2.1/button_group.md
rename to website/versioned_docs/version-3.0.0/button_group.md
index 3dbb0330f7..d551289888 100644
--- a/website/versioned_docs/version-2.2.1/button_group.md
+++ b/website/versioned_docs/version-3.0.0/button_group.md
@@ -142,9 +142,9 @@ object with { element: componentName }
 
 Choose other button component such as TouchableOpacity (optional)
 
-|          Type          |      Default       |
-| :--------------------: | :----------------: |
-| React Native Component | TouchableHighlight |
+|          Type          |                           Default                           |
+| :--------------------: | :---------------------------------------------------------: |
+| React Native Component | TouchableOpacity (ios) or TouchableNativeFeedback (android) |
 
 ---
 
diff --git a/website/versioned_docs/version-3.0.0/card.md b/website/versioned_docs/version-3.0.0/card.md
new file mode 100644
index 0000000000..e2b4f939de
--- /dev/null
+++ b/website/versioned_docs/version-3.0.0/card.md
@@ -0,0 +1,123 @@
+---
+id: card
+title: Card
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+Cards are a great way to display information, usually containing content and
+actions about a single subject. Cards can contain images, buttons, text and
+more.
+
+<img alt="Card Component" src={useBaseUrl('img/card.png')} />
+
+## Usage
+
+```js
+const users = [
+ {
+    name: 'brynn',
+    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg'
+ },
+ ... // more users here
+]
+
+import { View, Text, Image } from 'react-native'
+import { Card, ListItem, Button, Icon } from 'react-native-elements'
+
+// implemented without image with header
+<Card>
+  <Card.Title>CARD WITH DIVIDER</Card.Title>
+  <Card.Divider/>
+  {
+    users.map((u, i) => {
+      return (
+        <View key={i} style={styles.user}>
+          <Image
+            style={styles.image}
+            resizeMode="cover"
+            source={{ uri: u.avatar }}
+          />
+          <Text style={styles.name}>{u.name}</Text>
+        </View>
+      );
+    })
+  }
+</Card>
+
+// implemented without image without header, using ListItem component
+ <Card containerStyle={{padding: 0}} >
+  {
+    users.map((u, i) => <ListItem key={i} />)
+  }
+</Card>
+
+
+// implemented with Text and Button as children
+<Card>
+  <Card.Title>HELLO WORLD</Card.Title>
+  <Card.Divider/>
+  <Card.Image source={require('../images/pic2.jpg')}>
+    <Text style={{marginBottom: 10}}>
+      The idea with React Native Elements is more about component structure than actual design.
+    </Text>
+    <Button
+      icon={<Icon name='code' color='#ffffff' />}
+      buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
+      title='VIEW NOW' />
+  </Card.Image>
+</Card>
+```
+
+---
+
+## Props
+
+- [`containerStyle`](#containerstyle)
+- [`wrapperStyle`](#wrapperstyle)
+
+---
+
+## Child Components
+
+### Card.Divider
+
+> Receives all [Divider](divider.md#props) props.
+
+### Card.Title
+
+> Receives all [Text](text.md#props) props.
+
+### Card.Image
+
+> Receives all [Image](image.md#props) props.
+
+### Card.FeaturedTitle
+
+> Receives all [Text](text.md#props) props.
+
+### Card.FeaturedSubtitle
+
+> Receives all [Text](text.md#props) props.
+
+---
+
+## Reference
+
+### `containerStyle`
+
+outer container style (optional)
+
+|      Type      | Default |
+| :------------: | :-----: |
+| object (style) |  none   |
+
+---
+
+### `wrapperStyle`
+
+inner container style (optional)
+
+|      Type      | Default |
+| :------------: | :-----: |
+| object (style) |  none   |
diff --git a/website/versioned_docs/version-2.2.1/checkbox.md b/website/versioned_docs/version-3.0.0/checkbox.md
similarity index 100%
rename from website/versioned_docs/version-2.2.1/checkbox.md
rename to website/versioned_docs/version-3.0.0/checkbox.md
index 8ae4df0988..70940b5ecc 100644
--- a/website/versioned_docs/version-2.2.1/checkbox.md
+++ b/website/versioned_docs/version-3.0.0/checkbox.md
@@ -58,49 +58,39 @@ import { CheckBox } from 'react-native-elements'
 
 ## Props
 
-- [`iconType`](#icontype)
-- [`Component`](#Component)
+- [`center`](#center)
 - [`checked`](#checked)
-- [`size`](#size)
+- [`checkedColor`](#checkedcolor)
+- [`checkedIcon`](#checkedicon)
+- [`checkedTitle`](#checkedtitle)
+- [`Component`](#Component)
+- [`containerStyle`](#containerstyle)
+- [`fontFamily`](#fontfamily)
 - [`iconRight`](#iconright)
+- [`iconType`](#icontype)
+- [`onIconPress`](#oniconpress)
+- [`onLongIconPress`](#onlongiconpress)
+- [`onLongPress`](#onlongpress)
+- [`onPress`](#onpress)
 - [`right`](#right)
-- [`center`](#center)
+- [`size`](#size)
+- [`textStyle`](#textstyle)
 - [`title`](#title)
 - [`titleProps`](#titleprops)
-- [`containerStyle`](#containerstyle)
-- [`textStyle`](#textstyle)
-- [`onLongPress`](#onlongpress)
-- [`onLongIconPress`](#onlongiconpress)
-- [`onPress`](#onpress)
-- [`onIconPress`](#oniconpress)
-- [`checkedIcon`](#checkedicon)
-- [`uncheckedIcon`](#uncheckedicon)
-- [`checkedColor`](#checkedcolor)
 - [`uncheckedColor`](#uncheckedcolor)
-- [`checkedTitle`](#checkedtitle)
-- [`fontFamily`](#fontfamily)
+- [`uncheckedIcon`](#uncheckedicon)
 
 ---
 
 ## Reference
 
-### `iconType`
-
-type of icon set. [Supported sets here](icon.md#available-icon-sets).
-
-|  Type  |   Default    |
-| :----: | :----------: |
-| string | font-awesome |
-
----
-
-### `Component`
+### `center`
 
-Specify React Native component for main button (optional)
+Aligns checkbox to center (optional)
 
-|          Type          |     Default      |
-| :--------------------: | :--------------: |
-| React Native Component | TouchableOpacity |
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  false  |
 
 ---
 
@@ -114,89 +104,90 @@ Flag for checking the icon (required)
 
 ---
 
-### `size`
+### `checkedColor`
 
-Size of the checkbox
+Default checked color (optional)
 
 |  Type  | Default |
 | :----: | :-----: |
-| number |   24    |
+| string |  green  |
 
 ---
 
-### `iconRight`
+### `checkedIcon`
 
-Moves icon to right of text (optional)
+Default checked icon ([Font Awesome Icon](http://fontawesome.io/icons/))
+(optional)
 
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
+|               Type               |    Default     |
+| :------------------------------: | :------------: |
+| string OR React Native Component | check-square-o |
 
 ---
 
-### `right`
+### `checkedTitle`
 
-Aligns checkbox to right (optional)
+Specify a custom checked message (optional)
 
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
+|  Type  | Default |
+| :----: | :-----: |
+| string |  none   |
 
 ---
 
-### `center`
+### `Component`
 
-Aligns checkbox to center (optional)
+Specify React Native component for main button (optional)
 
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
+|          Type          |     Default      |
+| :--------------------: | :--------------: |
+| React Native Component | TouchableOpacity |
 
 ---
 
-### `title`
+### `containerStyle`
 
-Title of checkbox
+Style of main container (optional)
 
-|               Type               | Default |
-| :------------------------------: | :-----: |
-| string OR React Native Component |  none   |
+|      Type      | Default |
+| :------------: | :-----: |
+| object (style) |  none   |
 
 ---
 
-### `titleProps`
+### `fontFamily`
 
-Additional props for the title Text component (optional)
+Specify different font family
 
-|                             Type                             | Default |
-| :----------------------------------------------------------: | :-----: |
-| {[...Text props](https://reactnative.dev/docs/text#props-1)} |  none   |
+|  Type  |                      Default                      |
+| :----: | :-----------------------------------------------: |
+| string | System font bold (iOS), Sans Serif Bold (android) |
 
 ---
 
-### `containerStyle`
+### `iconRight`
 
-Style of main container (optional)
+Moves icon to right of text (optional)
 
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  false  |
 
 ---
 
-### `textStyle`
+### `iconType`
 
-Style of text (optional)
+type of icon set. [Supported sets here](icon.md#available-icon-sets).
 
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
+|  Type  |   Default    |
+| :----: | :----------: |
+| string | font-awesome |
 
 ---
 
-### `onLongPress`
+### `onIconPress`
 
-onLongPress function for checkbox (optional)
+onPress function for checkbox (required)
 
 |   Type   | Default |
 | :------: | :-----: |
@@ -214,9 +205,9 @@ onLongPress function for checkbox (optional)
 
 ---
 
-### `onPress`
+### `onLongPress`
 
-onPress function for container (optional)
+onLongPress function for checkbox (optional)
 
 |   Type   | Default |
 | :------: | :-----: |
@@ -224,9 +215,9 @@ onPress function for container (optional)
 
 ---
 
-### `onIconPress`
+### `onPress`
 
-onPress function for checkbox (required)
+onPress function for container (optional)
 
 |   Type   | Default |
 | :------: | :-----: |
@@ -234,62 +225,71 @@ onPress function for checkbox (required)
 
 ---
 
-### `checkedIcon`
+### `right`
 
-Default checked icon ([Font Awesome Icon](http://fontawesome.io/icons/))
-(optional)
+Aligns checkbox to right (optional)
 
-|               Type               |    Default     |
-| :------------------------------: | :------------: |
-| string OR React Native Component | check-square-o |
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  false  |
 
 ---
 
-### `uncheckedIcon`
+### `size`
 
-Default checked icon ([Font Awesome Icon](http://fontawesome.io/icons/))
-(optional)
+Size of the checkbox
 
-|               Type               | Default  |
-| :------------------------------: | :------: |
-| string OR React Native Component | square-o |
+|  Type  | Default |
+| :----: | :-----: |
+| number |   24    |
 
 ---
 
-### `checkedColor`
+### `textStyle`
 
-Default checked color (optional)
+Style of text (optional)
 
-|  Type  | Default |
-| :----: | :-----: |
-| string |  green  |
+|      Type      | Default |
+| :------------: | :-----: |
+| object (style) |  none   |
 
 ---
 
-### `uncheckedColor`
+### `title`
 
-Default unchecked color (optional)
+Title of checkbox
 
-|  Type  | Default |
-| :----: | :-----: |
-| string | #bfbfbf |
+|               Type               | Default |
+| :------------------------------: | :-----: |
+| string OR React Native Component |  none   |
 
 ---
 
-### `checkedTitle`
+### `titleProps`
 
-Specify a custom checked message (optional)
+Additional props for the title Text component (optional)
+
+|                             Type                             | Default |
+| :----------------------------------------------------------: | :-----: |
+| {[...Text props](https://reactnative.dev/docs/text#props-1)} |  none   |
+
+---
+
+### `uncheckedColor`
+
+Default unchecked color (optional)
 
 |  Type  | Default |
 | :----: | :-----: |
-| string |  none   |
+| string | #bfbfbf |
 
 ---
 
-### `fontFamily`
+### `uncheckedIcon`
 
-Specify different font family
+Default checked icon ([Font Awesome Icon](http://fontawesome.io/icons/))
+(optional)
 
-|  Type  |                      Default                      |
-| :----: | :-----------------------------------------------: |
-| string | System font bold (iOS), Sans Serif Bold (android) |
+|               Type               | Default  |
+| :------------------------------: | :------: |
+| string OR React Native Component | square-o |
diff --git a/website/versioned_docs/version-2.0.4/contributing.md b/website/versioned_docs/version-3.0.0/contributing.md
similarity index 100%
rename from website/versioned_docs/version-2.0.4/contributing.md
rename to website/versioned_docs/version-3.0.0/contributing.md
diff --git a/website/versioned_docs/version-2.2.1/customization.md b/website/versioned_docs/version-3.0.0/customization.md
similarity index 93%
rename from website/versioned_docs/version-2.2.1/customization.md
rename to website/versioned_docs/version-3.0.0/customization.md
index ddd9edc9c8..d4020a99b5 100644
--- a/website/versioned_docs/version-2.2.1/customization.md
+++ b/website/versioned_docs/version-3.0.0/customization.md
@@ -192,6 +192,8 @@ style as well as the red color set in the theme.
 > Remember if you want to override the values set in the theme you can always
 > use component props.
 
+Note: To theme subcomponents such as `ListItem.Title`, in your theme remove the dot and list them as "ListItemTitle"
+
 ---
 
 ### The Theme Object
@@ -206,6 +208,8 @@ interface theme {
   colors: {
     primary;
     secondary;
+    white;
+    black;
     grey0;
     grey1;
     grey2;
@@ -222,6 +226,8 @@ interface theme {
       ios: {
         primary;
         secondary;
+        grey;
+        searchBg;
         success;
         error;
         warning;
@@ -229,6 +235,9 @@ interface theme {
       android: {
         // Same as ios
       };
+      web: {
+        // Same as ios
+      };
     };
   };
 }
@@ -256,6 +265,24 @@ const theme = {
 
 ---
 
+### Dark Mode
+
+React Native Elements also provides a preset dark mode palette to get you started with using dark mode in your app.
+Use the prop `useDark` in `ThemeProvider` to set the default dark theme. You may want to set this by using a button,
+or by using the user's configured settings
+
+```jsx
+import { useColorScheme } from 'react-native-appearance';
+
+...
+  let colorScheme = useColorScheme();
+...
+  <ThemeProvider useDark={colorScheme === 'dark'}>
+...
+```
+
+---
+
 ### Using the theme in your own components
 
 You may want to make use of the theming utilities in your own components. For
diff --git a/website/versioned_docs/version-2.0.4/divider.md b/website/versioned_docs/version-3.0.0/divider.md
similarity index 100%
rename from website/versioned_docs/version-2.0.4/divider.md
rename to website/versioned_docs/version-3.0.0/divider.md
diff --git a/website/versioned_docs/version-2.2.1/getting_started.md b/website/versioned_docs/version-3.0.0/getting_started.md
similarity index 99%
rename from website/versioned_docs/version-2.2.1/getting_started.md
rename to website/versioned_docs/version-3.0.0/getting_started.md
index d7c2fb0b0e..f31f6751e2 100644
--- a/website/versioned_docs/version-2.2.1/getting_started.md
+++ b/website/versioned_docs/version-3.0.0/getting_started.md
@@ -2,7 +2,6 @@
 id: getting_started
 title: Getting Started
 sidebar_label: Getting Started
-slug: /
 ---
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
diff --git a/website/versioned_docs/version-2.0.4/header.md b/website/versioned_docs/version-3.0.0/header.md
similarity index 100%
rename from website/versioned_docs/version-2.0.4/header.md
rename to website/versioned_docs/version-3.0.0/header.md
index 475e8ba738..c85ff9ad12 100644
--- a/website/versioned_docs/version-2.0.4/header.md
+++ b/website/versioned_docs/version-3.0.0/header.md
@@ -110,36 +110,26 @@ center, or right component's layout, you can adjust the `containerStyle`
 
 ## Props
 
-- [`containerStyle`](#containerstyle)
 - [`backgroundColor`](#backgroundcolor)
 - [`backgroundImage`](#backgroundimage)
 - [`backgroundImageStyle`](#backgroundimagestyle)
-- [`leftComponent`](#leftcomponent)
+- [`barStyle`](#barstyle)
 - [`centerComponent`](#centercomponent)
-- [`rightComponent`](#rightcomponent)
-- [`leftContainerStyle`](#leftcontainerstyle)
 - [`centerContainerStyle`](#centercontainerstyle)
-- [`rightContainerStyle`](#rightcontainerstyle)
+- [`containerStyle`](#containerstyle)
+- [`leftComponent`](#leftcomponent)
+- [`leftContainerStyle`](#leftcontainerstyle)
+- [`linearGradientProps`](#lineargradientprops)
 - [`placement`](#placement)
-- [`barStyle`](#barstyle)
+- [`rightComponent`](#rightcomponent)
+- [`rightContainerStyle`](#rightcontainerstyle)
 - [`statusBarProps`](#statusbarprops)
 - [`ViewComponent`](#viewcomponent)
-- [`linearGradientProps`](#lineargradientprops)
 
 ---
 
 ## Reference
 
-### `containerStyle`
-
-styling around the main container
-
-| Type  | Default |
-| :---: | :-----: |
-| style |  none   |
-
----
-
 ### `backgroundColor`
 
 sets backgroundColor of the parent component
@@ -170,13 +160,13 @@ styling for backgroundImage in the main container
 
 ---
 
-### `leftComponent`
+### `barStyle`
 
-define your left component here
+Sets the color of the status bar text.
 
-|                                                                                           Type                                                                                            | Default |
-| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: |
-| { text: string, [...Text props](https://reactnative.dev/docs/text.html#props)}<br/>**OR**<br/>{ icon: string, [...Icon props](icon.md#props)} <br/>**OR**<br/> React element or component |  none   |
+|                    Type                    |                                  Default                                   |
+| :----------------------------------------: | :------------------------------------------------------------------------: |
+| 'default', 'light-content', 'dark-content' | 'default' ([source](https://reactnative.dev/docs/statusbar.html#barstyle)) |
 
 ---
 
@@ -190,39 +180,39 @@ define your center component here
 
 ---
 
-### `rightComponent`
+### `centerContainerStyle`
 
-define your right component here
+styling for container around the centerComponent
 
-|                                                                                           Type                                                                                            | Default |
-| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: |
-| { text: string, [...Text props](https://reactnative.dev/docs/text.html#props)}<br/>**OR**<br/>{ icon: string, [...Icon props](icon.md#props)} <br/>**OR**<br/> React element or component |  none   |
+| Type  |   Default   |
+| :---: | :---------: |
+| style | { flex: 3 } |
 
 ---
 
-### `leftContainerStyle`
+### `containerStyle`
 
-styling for container around the leftComponent
+styling around the main container
 
-| Type  |   Default   |
-| :---: | :---------: |
-| style | { flex: 1 } |
+| Type  | Default |
+| :---: | :-----: |
+| style |  none   |
 
 ---
 
-### `centerContainerStyle`
+### `leftComponent`
 
-styling for container around the centerComponent
+define your left component here
 
-| Type  |   Default   |
-| :---: | :---------: |
-| style | { flex: 3 } |
+|                                                                                           Type                                                                                            | Default |
+| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: |
+| { text: string, [...Text props](https://reactnative.dev/docs/text.html#props)}<br/>**OR**<br/>{ icon: string, [...Icon props](icon.md#props)} <br/>**OR**<br/> React element or component |  none   |
 
 ---
 
-### `rightContainerStyle`
+### `leftContainerStyle`
 
-styling for container around the rightComponent
+styling for container around the leftComponent
 
 | Type  |   Default   |
 | :---: | :---------: |
@@ -230,6 +220,16 @@ styling for container around the rightComponent
 
 ---
 
+### `linearGradientProps`
+
+displays a linear gradient. See [usage](#lineargradient-usage).
+
+|                                                      Type                                                      | Default |
+| :------------------------------------------------------------------------------------------------------------: | :-----: |
+| {[...Gradient props](https://github.com/react-native-community/react-native-linear-gradient#additional-props)} |  none   |
+
+---
+
 ### `placement`
 
 Alignment for title
@@ -240,13 +240,23 @@ Alignment for title
 
 ---
 
-### `barStyle`
+### `rightComponent`
 
-Sets the color of the status bar text.
+define your right component here
 
-|                    Type                    |                                  Default                                   |
-| :----------------------------------------: | :------------------------------------------------------------------------: |
-| 'default', 'light-content', 'dark-content' | 'default' ([source](https://reactnative.dev/docs/statusbar.html#barstyle)) |
+|                                                                                           Type                                                                                            | Default |
+| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: |
+| { text: string, [...Text props](https://reactnative.dev/docs/text.html#props)}<br/>**OR**<br/>{ icon: string, [...Icon props](icon.md#props)} <br/>**OR**<br/> React element or component |  none   |
+
+---
+
+### `rightContainerStyle`
+
+styling for container around the rightComponent
+
+| Type  |   Default   |
+| :---: | :---------: |
+| style | { flex: 1 } |
 
 ---
 
@@ -270,16 +280,6 @@ component for container
 
 ---
 
-### `linearGradientProps`
-
-displays a linear gradient. See [usage](#lineargradient-usage).
-
-|                                                      Type                                                      | Default |
-| :------------------------------------------------------------------------------------------------------------: | :-----: |
-| {[...Gradient props](https://github.com/react-native-community/react-native-linear-gradient#additional-props)} |  none   |
-
----
-
 ## LinearGradient Usage
 
 Using LinearGradient in React Native Elements is supported through the
diff --git a/website/versioned_docs/version-2.2.1/icon.md b/website/versioned_docs/version-3.0.0/icon.md
similarity index 100%
rename from website/versioned_docs/version-2.2.1/icon.md
rename to website/versioned_docs/version-3.0.0/icon.md
index 8a73c61b4e..7eae5f636a 100644
--- a/website/versioned_docs/version-2.2.1/icon.md
+++ b/website/versioned_docs/version-3.0.0/icon.md
@@ -18,20 +18,20 @@ The icon sets in React Native Elements are made possible through
 
 The current list of available icons sets are:
 
-- [material](https://material.io/tools/icons)
-- [material-community](https://materialdesignicons.com/)
+- [antdesign](http://ant.design/components/icon/)
+- [entypo](http://www.entypo.com/)
+- [evilicon](http://evil-icons.io/)
+- [feather](https://feathericons.com/)
 - [font-awesome](https://fontawesome.com/v4.7.0/)
 - [font-awesome-5](https://fontawesome.com/)
-- [octicon](https://octicons.github.com/)
-- [ionicon](http://ionicons.com/)
+- [fontisto](https://www.fontisto.com/icons)
 - [foundation](http://zurb.com/playground/foundation-icon-fonts-3)
-- [evilicon](http://evil-icons.io/)
+- [ionicon](http://ionicons.com/)
+- [material](https://material.io/tools/icons)
+- [material-community](https://materialdesignicons.com/)
+- [octicon](https://octicons.github.com/)
 - [simple-line-icon](https://simplelineicons.github.io/)
 - [zocial](http://weloveiconfonts.com/)
-- [entypo](http://www.entypo.com/)
-- [feather](https://feathericons.com/)
-- [antdesign](http://ant.design/components/icon/)
-- [fontisto](https://www.fontisto.com/icons)
 
 ## Custom Icon Fonts
 
@@ -81,14 +81,15 @@ import { Icon } from 'react-native-elements'
 
 - [`brand`](#brand)
 - [`color`](#color)
+- [`Component`](#Component)
 - [`containerStyle`](#containerstyle)
 - [`disabled`](#disabled)
 - [`disabledStyle`](#disabledstyle)
-- [`iconStyle`](#iconstyle)
 - [`iconProps`](#iconprops)
+- [`iconStyle`](#iconstyle)
 - [`name`](#name)
-- [`onPress`](#onpress)
 - [`onLongPress`](#onlongpress)
+- [`onPress`](#onpress)
 - [`raised`](#raised)
 - [`reverse`](#reverse)
 - [`reverseColor`](#reversecolor)
@@ -96,7 +97,6 @@ import { Icon } from 'react-native-elements'
 - [`solid`](#solid)
 - [`type`](#type)
 - [`underlayColor`](#underlaycolor)
-- [`Component`](#Component)
 
 ---
 
@@ -122,6 +122,16 @@ color of icon (optional)
 
 ---
 
+### `Component`
+
+update React Native Component (optional)
+
+|          Type          |                                        Default                                        |
+| :--------------------: | :-----------------------------------------------------------------------------------: |
+| React Native component | View if no onPress method is defined, TouchableHighlight if onPress method is defined |
+
+---
+
 ### `containerStyle`
 
 add styling to container holding icon (optional)
@@ -153,16 +163,6 @@ handler.
 
 ---
 
-### `iconStyle`
-
-additional styling to icon (optional)
-
-|        Type         |     Default     |
-| :-----------------: | :-------------: |
-| View style (object) | inherited style |
-
----
-
 ### `iconProps`
 
 provide all props from react-native Icon component
@@ -173,6 +173,16 @@ provide all props from react-native Icon component
 
 ---
 
+### `iconStyle`
+
+additional styling to icon (optional)
+
+|        Type         |     Default     |
+| :-----------------: | :-------------: |
+| View style (object) | inherited style |
+
+---
+
 ### `name`
 
 name of icon (required)
@@ -183,9 +193,9 @@ name of icon (required)
 
 ---
 
-### `onPress`
+### `onLongPress`
 
-onPress method for button (optional)
+onLongPress method for button (optional)
 
 |   Type   | Default |
 | :------: | :-----: |
@@ -193,9 +203,9 @@ onPress method for button (optional)
 
 ---
 
-### `onLongPress`
+### `onPress`
 
-onLongPress method for button (optional)
+onPress method for button (optional)
 
 |   Type   | Default |
 | :------: | :-----: |
@@ -270,13 +280,3 @@ underlayColor for press event
 |  Type  |  Default   |
 | :----: | :--------: |
 | string | icon color |
-
----
-
-### `Component`
-
-update React Native Component (optional)
-
-|          Type          |                                        Default                                        |
-| :--------------------: | :-----------------------------------------------------------------------------------: |
-| React Native component | View if no onPress method is defined, TouchableHighlight if onPress method is defined |
diff --git a/website/versioned_docs/version-2.2.1/image.md b/website/versioned_docs/version-3.0.0/image.md
similarity index 81%
rename from website/versioned_docs/version-2.2.1/image.md
rename to website/versioned_docs/version-3.0.0/image.md
index 85192f1095..b6069626d2 100644
--- a/website/versioned_docs/version-2.2.1/image.md
+++ b/website/versioned_docs/version-3.0.0/image.md
@@ -42,10 +42,12 @@ import { Image } from 'react-native-elements';
 > [React Native Image](https://reactnative.dev/docs/image#methods) methods.
 
 - [`containerStyle`](#containerstyle)
-- [`placeholderStyle`](#placeholderstyle)
-- [`transition`](#transition)
 - [`ImageComponent`](#imagecomponent)
+- [`onLongPress`](#onlongpress)
+- [`onPress`](#onpress)
 - [`PlaceholderContent`](#placeholdercontent)
+- [`placeholderStyle`](#placeholderstyle)
+- [`transition`](#transition)
 
 ---
 
@@ -61,33 +63,33 @@ Additional styling for the container (optional)
 
 ---
 
-### `placeholderStyle`
+### `ImageComponent`
 
-Additional styling for the placeholder container (optional)
+Specify a different component as the Image component.
 
-|        Type         | Default |
-| :-----------------: | :-----: |
-| View style (object) |  none   |
+|          Type          | Default |
+| :--------------------: | :-----: |
+| React Native Component |  Image  |
 
 ---
 
-### `transition`
+### `onLongPress`
 
-Perform fade transition on image load
+Callback function when long pressing component
 
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  true   |
+|   Type   | Default |
+| :------: | :-----: |
+| function |  none   |
 
 ---
 
-### `ImageComponent`
+### `onPress`
 
-Specify a different component as the Image component.
+Callback function when pressing component
 
-|          Type          | Default |
-| :--------------------: | :-----: |
-| React Native Component |  Image  |
+|   Type   | Default |
+| :------: | :-----: |
+| function |  none   |
 
 ---
 
@@ -98,3 +100,33 @@ Content to render when image is loading.
 |   Type    | Default |
 | :-------: | :-----: |
 | component |  none   |
+
+---
+
+### `placeholderStyle`
+
+Additional styling for the placeholder container (optional)
+
+|        Type         | Default |
+| :-----------------: | :-----: |
+| View style (object) |  none   |
+
+---
+
+### `transition`
+
+Perform fade transition on image load
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  true   |
+
+---
+
+### `transitionDuration`
+
+Perform fade transition on image load
+
+|  Type  | Default |
+| :----: | :-----: |
+| number |   360   |
diff --git a/website/versioned_docs/version-2.2.1/input.md b/website/versioned_docs/version-3.0.0/input.md
similarity index 94%
rename from website/versioned_docs/version-2.2.1/input.md
rename to website/versioned_docs/version-3.0.0/input.md
index 1f1ae2d9d0..4861f50a2c 100644
--- a/website/versioned_docs/version-2.2.1/input.md
+++ b/website/versioned_docs/version-3.0.0/input.md
@@ -71,21 +71,21 @@ import { Input } from 'react-native-elements';
 
 - [`containerStyle`](#containerstyle)
 - [`disabled`](#disabled)
-- [`disabledInputStyle`](#disabledInputStyle)
-- [`inputContainerStyle`](#inputcontainerstyle)
+- [`disabledInputStyle`](#disabledinputstyle)
 - [`errorMessage`](#errormessage)
-- [`errorStyle`](#errorstyle)
 - [`errorProps`](#errorprops)
+- [`errorStyle`](#errorstyle)
+- [`InputComponent`](#inputcomponent)
+- [`inputContainerStyle`](#inputcontainerstyle)
 - [`inputStyle`](#inputstyle)
 - [`label`](#label)
-- [`labelStyle`](#labelstyle)
 - [`labelProps`](#labelprops)
+- [`labelStyle`](#labelstyle)
 - [`leftIcon`](#lefticon)
 - [`leftIconContainerStyle`](#lefticoncontainerstyle)
+- [`renderErrorMessage`](#rendererrormessage)
 - [`rightIcon`](#righticon)
 - [`rightIconContainerStyle`](#righticoncontainerstyle)
-- [`renderErrorMessage`](#rendererrormessage)
-- [`InputComponent`](#inputcomponent)
 
 ---
 
@@ -121,16 +121,6 @@ disabled styles that will be passed to the `style` props of the React Native `Te
 
 ---
 
-### `inputContainerStyle`
-
-styling for Input Component Container (optional)
-
-|        Type         | Default |
-| :-----------------: | :-----: |
-| View style (object) |  none   |
-
----
-
 ### `errorMessage`
 
 adds error message (optional)
@@ -141,6 +131,17 @@ adds error message (optional)
 
 ---
 
+### `errorProps`
+
+props to be passed to the React Native `Text` component used to display the
+error message (optional)
+
+|                            Type                            | Default |
+| :--------------------------------------------------------: | :-----: |
+| {[...Text props](https://reactnative.dev/docs/text#props)} |  none   |
+
+---
+
 ### `errorStyle`
 
 add styling to error message (optional)
@@ -151,14 +152,24 @@ add styling to error message (optional)
 
 ---
 
-### `errorProps`
+### `InputComponent`
 
-props to be passed to the React Native `Text` component used to display the
-error message (optional)
+component that will be rendered in place of the React Native `TextInput`
+(optional)
 
-|                              Type                               | Default |
-| :-------------------------------------------------------------: | :-----: |
-| {[...Text props](https://reactnative.dev/docs/text.html#props)} |  none   |
+|          Type          |  Default  |
+| :--------------------: | :-------: |
+| React Native Component | TextInput |
+
+---
+
+### `inputContainerStyle`
+
+styling for Input Component Container (optional)
+
+|        Type         | Default |
+| :-----------------: | :-----: |
+| View style (object) |  none   |
 
 ---
 
@@ -183,16 +194,6 @@ add a label on top of the input (optional)
 
 ---
 
-### `labelStyle`
-
-styling for the label (optional); You can only use this if `label` is a string
-
-|  Type  | Default |
-| :----: | :-----: |
-| object |  none   |
-
----
-
 ### `labelProps`
 
 props to be passed to the React Native `Text` component used to display the
@@ -205,6 +206,16 @@ label or React Component used instead of simple string in `label` prop
 
 ---
 
+### `labelStyle`
+
+styling for the label (optional); You can only use this if `label` is a string
+
+|  Type  | Default |
+| :----: | :-----: |
+| object |  none   |
+
+---
+
 ### `leftIcon`
 
 displays an icon on the left (optional)
@@ -235,6 +246,16 @@ Placeholder text for the input
 
 ---
 
+### `renderErrorMessage`
+
+If the error message container should be rendered (take up vertical space). If `false`, when showing errorMessage, the layout will shift to add it at that time.
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  true   |
+
+---
+
 ### `rightIcon`
 
 displays an icon on the right (optional)
@@ -255,30 +276,9 @@ styling for right Icon Component container
 
 ---
 
-### `renderErrorMessage`
-
-If the error message container should be rendered (take up vertical space). If `false`, when showing errorMessage, the layout will shift to add it at that time.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  true   |
-
----
-
-### `InputComponent`
-
-component that will be rendered in place of the React Native `TextInput`
-(optional)
-
-|          Type          |  Default  |
-| :--------------------: | :-------: |
-| React Native Component | TextInput |
-
----
-
 #### Styles explanation
 
-| Input with a label and an error message          | Styles explanation                            |
+| Input with a label and an error message          | Styles explanation                            |
 | ------------------------------------------------ | --------------------------------------------- |
 | <img src="/img/input_without_explanation.png" /> | <img src="/img/input_with_explanation.png" /> |
 
@@ -299,7 +299,7 @@ component that will be rendered in place of the React Native `TextInput`
 
 Store a reference to the Input in your component by using the ref prop
 provided by React
-([see docs](https://facebook.github.io/react/docs/refs-and-the-dom.html)):
+([see docs](https://reactjs.org/docs/refs-and-the-dom.html)):
 
 ```js
 const input = React.createRef();
diff --git a/website/versioned_docs/version-2.0.4/labels.md b/website/versioned_docs/version-3.0.0/labels.md
similarity index 100%
rename from website/versioned_docs/version-2.0.4/labels.md
rename to website/versioned_docs/version-3.0.0/labels.md
diff --git a/website/versioned_docs/version-3.0.0/listitem.md b/website/versioned_docs/version-3.0.0/listitem.md
new file mode 100644
index 0000000000..35b6888417
--- /dev/null
+++ b/website/versioned_docs/version-3.0.0/listitem.md
@@ -0,0 +1,407 @@
+---
+id: listitem
+title: ListItem
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+ListItems are used to display rows of information, such as a contact list,
+playlist, or menu. They are very customizable and can contain switches,
+avatars, badges, icons, and more.
+
+<img alt="Lists" src={useBaseUrl('img/lists.png')} />
+
+## Usage
+
+### Using Map Function - Implemented with avatar
+
+```js
+import { ListItem, Avatar } from 'react-native-elements'
+
+const list = [
+  {
+    name: 'Amy Farha',
+    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
+    subtitle: 'Vice President'
+  },
+  {
+    name: 'Chris Jackson',
+    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
+    subtitle: 'Vice Chairman'
+  },
+  ... // more items
+]
+
+<View>
+  {
+    list.map((l, i) => (
+      <ListItem key={i} bottomDivider>
+        <Avatar source={{uri: l.avatar_url}} />
+        <ListItem.Content>
+          <ListItem.Title>{l.name}</ListItem.Title>
+          <ListItem.Subtitle>{l.subtitle}</ListItem.Subtitle>
+        </ListItem.Content>
+      </ListItem>
+    ))
+  }
+</View>
+```
+
+### Using Map Function - Implemented with link and icon
+
+```js
+import { ListItem, Icon } from 'react-native-elements'
+
+const list = [
+  {
+    title: 'Appointments',
+    icon: 'av-timer'
+  },
+  {
+    title: 'Trips',
+    icon: 'flight-takeoff'
+  },
+  ... // more items
+]
+
+<View>
+  {
+    list.map((item, i) => (
+      <ListItem key={i} bottomDivider>
+        <Icon name={item.icon} />
+        <ListItem.Content>
+          <ListItem.Title>{item.title}</ListItem.Title>
+        </ListItem.Content>
+        <ListItem.Chevron />
+      </ListItem>
+    ))
+  }
+</View>
+```
+
+### Using RN FlatList - Implemented with link and avatar
+
+```js
+import { ListItem, Avatar } from 'react-native-elements'
+
+const list = [
+  {
+    name: 'Amy Farha',
+    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
+    subtitle: 'Vice President'
+  },
+  {
+    name: 'Chris Jackson',
+    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
+    subtitle: 'Vice Chairman'
+  },
+  ... // more items
+]
+
+keyExtractor = (item, index) => index.toString()
+
+renderItem = ({ item }) => (
+  <ListItem bottomDivider>
+    <Avatar source={{uri: item.avatar_url}} />
+    <ListItem.Content>
+      <ListItem.Title>{item.name}</ListItem.Title>
+      <ListItem.Subtitle>{item.subtitle}</ListItem.Subtitle>
+    </ListItem.Content>
+    <ListItem.Chevron />
+  </ListItem>
+)
+
+render () {
+  return (
+    <FlatList
+      keyExtractor={this.keyExtractor}
+      data={list}
+      renderItem={this.renderItem}
+    />
+  )
+}
+```
+
+### Using RN FlatList - Implemented with custom avatar component.
+
+```js
+import { ListItem, Avatar } from 'react-native-elements'
+
+const list = [
+  {
+    name: 'Amy Farha',
+    subtitle: 'Vice President'
+  },
+  {
+    name: 'Chris Jackson',
+    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
+    subtitle: 'Vice Chairman'
+  },
+  ... // more items
+]
+
+keyExtractor = (item, index) => index.toString()
+
+renderItem = ({ item }) => (
+  <ListItem bottomDivider >
+    <Avatar title={item.name[0]} source={item.avatar_url && { uri: item.avatar_url }}/>
+    <ListItem.Content>
+      <ListItem.Title>{item.name}</ListItem.Title>
+      <ListItem.Subtitle>{item.subtitle}</ListItem.Subtitle>
+    </ListItem.Content>
+    <ListItem.Chevron />
+  </ListItem>
+)
+
+render () {
+  return (
+    <FlatList
+      keyExtractor={this.keyExtractor}
+      data={list}
+      renderItem={this.renderItem}
+    />
+  )
+}
+```
+
+### ListItem implemented with custom View for Subtitle
+
+```js
+import { ListItem, Avatar } from 'react-native-elements'
+
+render () {
+  return (
+    <ListItem>
+      <Avatar source={require('../images/avatar1.jpg')} />
+      <ListItem.Content>
+        <ListItem.Title>Limited supply! Its like digital gold!</ListItem.Title>
+        <View style={styles.subtitleView}>
+          <Image source={require('../images/rating.png')} style={styles.ratingImage}/>
+          <Text style={styles.ratingText}>5 months ago</Text>
+        </View>
+      </ListItem.Content>
+    </ListItem>
+  )
+}
+
+styles = StyleSheet.create({
+  subtitleView: {
+    flexDirection: 'row',
+    paddingLeft: 10,
+    paddingTop: 5
+  },
+  ratingImage: {
+    height: 19.21,
+    width: 100
+  },
+  ratingText: {
+    paddingLeft: 10,
+    color: 'grey'
+  }
+})
+```
+
+### Badges
+
+<img alt="Badges" src={useBaseUrl('img/list-badges.png')} />
+
+Example badge usage
+
+```js
+<ListItem>
+  <Badge
+    value={3}
+    textStyle={{ color: 'orange' }}
+    containerStyle={{ marginTop: -20 }}
+  />
+</ListItem>
+```
+
+### Linear gradient + Scale feedback
+
+<img src="/img/listitem_with_gradient_scale.gif" width="500" />
+
+```js
+import { ListItem, Avatar } from 'react-native-elements';
+import TouchableScale from 'react-native-touchable-scale'; // https://github.com/kohver/react-native-touchable-scale
+import LinearGradient from 'react-native-linear-gradient'; // Only if no expo
+
+<ListItem
+  Component={TouchableScale}
+  friction={90} //
+  tension={100} // These props are passed to the parent component (here TouchableScale)
+  activeScale={0.95} //
+  linearGradientProps={{
+    colors: ['#FF9800', '#F44336'],
+    start: { x: 1, y: 0 },
+    end: { x: 0.2, y: 0 },
+  }}
+  ViewComponent={LinearGradient} // Only if no expo
+>
+  <Avatar rounded source={{ uri: avatar_url }} />
+  <ListItem.Content>
+    <ListItem.Title style={{ color: 'white', fontWeight: 'bold' }}>
+      Chris Jackson
+    </ListItem.Title>
+    <ListItem.Subtitle style={{ color: 'white' }}>
+      Vice Chairman
+    </ListItem.Subtitle>
+  </ListItem.Content>
+  <ListItem.Chevron color="white" />
+</ListItem>;
+```
+
+---
+
+## Props
+
+> Also receives all
+> [TouchableHighlight](https://reactnative.dev/docs/touchablehighlight#props)
+> props
+
+- [`bottomDivider`](#bottomdivider)
+- [`Component`](#Component)
+- [`containerStyle`](#containerstyle)
+- [`disabled`](#disabled)
+- [`disabledStyle`](#disabledstyle)
+- [`onLongPress`](#onlongpress)
+- [`onPress`](#onpress)
+- [`pad`](#pad)
+- [`topDivider`](#topdivider)
+- [`ViewComponent`](#viewcomponent)
+
+---
+
+## Child Components
+
+### ListItem.ButtonGroup
+
+> Receives all [ButtonGroup](button_group.md#props) props.
+
+### ListItem.CheckBox
+
+> Receives all [CheckBox](checkbox.md#props) props.
+
+### ListItem.Chevron
+
+> Receives all [Icon](icon.md#props) props.
+
+### ListItem.Content
+
+> Receives all [View](https://reactnative.dev/docs/view#props) props.
+
+### ListItem.Input
+
+> Receives all [Input](input.md#props) props.
+
+### ListItem.Subtitle
+
+> Receives all [Text](text.md#props) props.
+
+### ListItem.Title
+
+> Receives all [Text](text.md#props) props.
+
+---
+
+## Reference
+
+### `bottomDivider`
+
+Add divider at the bottom of the list item
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  false  |
+
+---
+
+### `Component`
+
+replace element with custom element (optional)
+
+|                                  Type                                   |  Default  |
+| :---------------------------------------------------------------------: | :-------: |
+| View or TouchableHighlight (default) if onPress method is added as prop | component |
+
+---
+
+### `containerStyle`
+
+additional main container styling (optional)
+
+|      Type      | Default |
+| :------------: | :-----: |
+| object (style) |  none   |
+
+---
+
+### `disabled`
+
+If true the user won't be able to perform any action on the list item.
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  none   |
+
+---
+
+### `disabledStyle`
+
+Specific styling to be used when list item is disabled.
+
+|      Type      | Default |
+| :------------: | :-----: |
+| object (style) |  none   |
+
+---
+
+### `onLongPress`
+
+onLongPress method for link (optional)
+
+|   Type   | Default |
+| :------: | :-----: |
+| function |  none   |
+
+---
+
+### `onPress`
+
+onPress method for link (optional)
+
+|   Type   | Default |
+| :------: | :-----: |
+| function |  none   |
+
+---
+
+### `pad`
+
+adds spacing between the leftComponent, the title component & right component
+
+|  Type  | Default |
+| :----: | :-----: |
+| number |  `16`   |
+
+---
+
+### `topDivider`
+
+Add divider at the top of the list item
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  false  |
+
+---
+
+### `ViewComponent`
+
+Container for linear gradient (for non-expo user)
+
+|   Type    | Default |
+| :-------: | :-----: |
+| component |  View   |
+
+---
diff --git a/website/versioned_docs/version-2.0.4/overlay.md b/website/versioned_docs/version-3.0.0/overlay.md
similarity index 100%
rename from website/versioned_docs/version-2.0.4/overlay.md
rename to website/versioned_docs/version-3.0.0/overlay.md
index 318a8d0628..ff94dd3733 100644
--- a/website/versioned_docs/version-2.0.4/overlay.md
+++ b/website/versioned_docs/version-3.0.0/overlay.md
@@ -59,9 +59,9 @@ import Modal from 'modal-react-native-web';
 - [`children`](#children)
 - [`fullScreen`](#fullscreen)
 - [`isVisible`](#isvisible)
+- [`ModalComponent`](#modalcomponent)
 - [`onBackdropPress`](#onbackdroppress)
 - [`overlayStyle`](#overlaystyle)
-- [`ModalComponent`](#modalcomponent)
 
 ---
 
@@ -107,6 +107,16 @@ If true, the overlay is visible
 
 ---
 
+### `ModalComponent`
+
+override React Native `Modal` component (usable for web-platform)
+
+|          Type          | Default |
+| :--------------------: | :-----: |
+| React Native Component |  Modal  |
+
+---
+
 ### `overlayStyle`
 
 style of the actual overlay
@@ -124,13 +134,3 @@ handler for backdrop press (only works when `fullscreen` is false)
 |   Type   | Default |
 | :------: | :-----: |
 | function |  none   |
-
----
-
-### `ModalComponent`
-
-override React Native `Modal` component (usable for web-platform)
-
-|          Type          | Default |
-| :--------------------: | :-----: |
-| React Native Component |  Modal  |
diff --git a/website/versioned_docs/version-2.0.4/overview.md b/website/versioned_docs/version-3.0.0/overview.md
similarity index 100%
rename from website/versioned_docs/version-2.0.4/overview.md
rename to website/versioned_docs/version-3.0.0/overview.md
diff --git a/website/versioned_docs/version-2.0.4/pricing.md b/website/versioned_docs/version-3.0.0/pricing.md
similarity index 100%
rename from website/versioned_docs/version-2.0.4/pricing.md
rename to website/versioned_docs/version-3.0.0/pricing.md
index b760f0b720..5dac02ac92 100644
--- a/website/versioned_docs/version-2.0.4/pricing.md
+++ b/website/versioned_docs/version-3.0.0/pricing.md
@@ -28,80 +28,70 @@ import { PricingCard } from 'react-native-elements';
 
 ## Props
 
-- [`containerStyle`](#containerstyle)
+- [`button`](#button)
 - [`buttonFont`](#buttonfont)
+- [`color`](#color)
+- [`containerStyle`](#containerstyle)
+- [`info`](#info)
 - [`infoFont`](#infofont)
+- [`onButtonPress`](#onbuttonpress)
+- [`price`](#price)
 - [`pricingFont`](#pricingfont)
+- [`title`](#title)
 - [`titleFont`](#titlefont)
 - [`wrapperStyle`](#wrapperstyle)
-- [`price`](#price)
-- [`onButtonPress`](#onbuttonpress)
-- [`button`](#button)
-- [`info`](#info)
-- [`color`](#color)
-- [`title`](#title)
 
 ---
 
 ## Reference
 
-### `containerStyle`
-
-outer component styling (optional)
-
-|      Type      |      Default      |
-| :------------: | :---------------: |
-| object (style) | inherited styling |
-
----
-
-### `infoStyle`
+### `button`
 
-specify pricing information style
+button information (required)
 
-|      Type      | Default |
-| :------------: | :-----: |
-| style (object) |  none   |
+|                              Type                              | Default |
+| :------------------------------------------------------------: | :-----: |
+| {[...Button props](button.md#props)}<br/>**OR**<br/> component |  none   |
 
 ---
 
-### `pricingStyle`
+### `color`
 
-specify pricing text style
+color scheme for button & title
 
-|      Type      | Default |
-| :------------: | :-----: |
-| style (object) |  none   |
+|  Type  | Default |
+| :----: | :-----: |
+| string |  none   |
 
 ---
 
-### `titleStyle`
+### `containerStyle`
 
-specify title text style
+outer component styling (optional)
 
-|      Type      | Default |
-| :------------: | :-----: |
-| style (object) |  none   |
+|      Type      |      Default      |
+| :------------: | :---------------: |
+| object (style) | inherited styling |
 
 ---
 
-### `wrapperStyle`
+### `info`
 
-inner wrapper component styling (optional)
+pricing information (optional)
 
-|      Type      |      Default      |
-| :------------: | :---------------: |
-| object (style) | inherited styling |
+|       Type       | Default |
+| :--------------: | :-----: |
+| array of strings |  none   |
 
 ---
 
-### `price`
+### `infoStyle`
 
-price (required)
+specify pricing information style
 
-|  Type  | Default |
-| :----: | :-----: |
-| string |  none   |
+|      Type      | Default |
+| :------------: | :-----: |
+| style (object) |  none   |
 
 ---
 
@@ -115,29 +105,29 @@ function to be run when button is pressed
 
 ---
 
-### `button`
+### `price`
 
-button information (required)
+price (required)
 
-|                              Type                              | Default |
-| :------------------------------------------------------------: | :-----: |
-| {[...Button props](button.md#props)}<br/>**OR**<br/> component |  none   |
+|  Type  | Default |
+| :----: | :-----: |
+| string |  none   |
 
 ---
 
-### `info`
+### `pricingStyle`
 
-pricing information (optional)
+specify pricing text style
 
-|       Type       | Default |
-| :--------------: | :-----: |
-| array of strings |  none   |
+|      Type      | Default |
+| :------------: | :-----: |
+| style (object) |  none   |
 
 ---
 
-### `color`
+### `title`
 
-color scheme for button & title
+title (required)
 
 |  Type  | Default |
 | :----: | :-----: |
@@ -145,10 +135,20 @@ color scheme for button & title
 
 ---
 
-### `title`
+### `titleStyle`
 
-title (required)
+specify title text style
 
-|  Type  | Default |
-| :----: | :-----: |
-| string |  none   |
+|      Type      | Default |
+| :------------: | :-----: |
+| style (object) |  none   |
+
+---
+
+### `wrapperStyle`
+
+inner wrapper component styling (optional)
+
+|      Type      |      Default      |
+| :------------: | :---------------: |
+| object (style) | inherited styling |
diff --git a/website/versioned_docs/version-2.2.1/rating.md b/website/versioned_docs/version-3.0.0/rating.md
similarity index 100%
rename from website/versioned_docs/version-2.2.1/rating.md
rename to website/versioned_docs/version-3.0.0/rating.md
index 6d7f7e9e95..216fb6ee93 100644
--- a/website/versioned_docs/version-2.2.1/rating.md
+++ b/website/versioned_docs/version-3.0.0/rating.md
@@ -82,34 +82,44 @@ const { rating } = this.props;
 
 ### AirbnbRating
 
+- [`count`](#count)
 - [`defaultRating`](#defaultrating)
+- [`onFinishRating`](#onfinishrating)
 - [`reviews`](#reviews)
-- [`count`](#count)
 - [`showRating`](#showrating)
-- [`onFinishRating`](#onfinishrating)
 
 ## Rating
 
-- [`type`](#type)
-- [`ratingImage`](#ratingimage)
-- [`ratingColor`](#ratingcolor)
+- [`fractions`](#fractions)
+- [`imageSize`](#imagesize)
+- [`minValue`](#minValue)
+- [`onFinishRating`](#onfinishrating)
+- [`onStartRating`](#onstartrating)
 - [`ratingBackgroundColor`](#ratingbackgroundcolor)
+- [`ratingColor`](#ratingcolor)
 - [`ratingCount`](#ratingcount)
+- [`ratingImage`](#ratingimage)
 - [`ratingTextColor`](#ratingtextcolor)
-- [`imageSize`](#imagesize)
-- [`showRating`](#showrating)
 - [`readonly`](#readonly)
+- [`showRating`](#showrating)
 - [`startingValue`](#startingvalue)
-- [`fractions`](#fractions)
-- [`minValue`](#minValue)
 - [`style`](#style)
-- [`onStartRating`](#onstartrating)
-- [`onFinishRating`](#onfinishrating)
+- [`type`](#type)
 
 ---
 
 ## Reference
 
+### `count`
+
+Total number of ratings to display
+
+|  Type  | Default |
+| :----: | :-----: |
+| number |    5    |
+
+---
+
 ### `defaultRating`
 
 Initial value for the rating
@@ -120,34 +130,34 @@ Initial value for the rating
 
 ---
 
-### `reviews`
+### `fractions`
 
-Labels to show when each value is tapped
-e.g. If the first star is tapped, then value in index 0 will be used as the label
+The number of decimal places for the rating value; must be between 0 and 20
+(optional)
 
-|   Type   |                   Default                    |
-| :------: | :------------------------------------------: |
-| string[] | ['Terrible', 'Bad', 'Okay', 'Good', 'Great'] |
+|  Type  |  Default  |
+| :----: | :-------: |
+| number | undefined |
 
 ---
 
-### `count`
+### `imageSize`
 
-Total number of ratings to display
+The size of each rating image (optional)
 
 |  Type  | Default |
 | :----: | :-----: |
-| number |    5    |
+| number |   50    |
 
 ---
 
-### `showRating`
+### `minValue`
 
-Determines if to show the reviews above the rating
+The minimum value the user can select
 
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  true   |
+|  Type  | Default |
+| :----: | :-----: |
+| number |    0    |
 
 ---
 
@@ -172,27 +182,6 @@ Callback method when the user starts the rating. (optional)
 
 ---
 
-### `fractions`
-
-The number of decimal places for the rating value; must be between 0 and 20
-(optional)
-
-|  Type  |  Default  |
-| :----: | :-------: |
-| number | undefined |
-
----
-
-### `imageSize`
-
-The size of each rating image (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |   50    |
-
----
-
 ### `ratingBackgroundColor`
 
 Pass in a custom background-fill-color for the rating icon; use this along with
@@ -256,6 +245,27 @@ Whether the rating can be modified by the user (optional)
 
 ---
 
+### `reviews`
+
+Labels to show when each value is tapped
+e.g. If the first star is tapped, then value in index 0 will be used as the label
+
+|   Type   |                   Default                    |
+| :------: | :------------------------------------------: |
+| string[] | ['Terrible', 'Bad', 'Okay', 'Good', 'Great'] |
+
+---
+
+### `showRating`
+
+Determines if to show the reviews above the rating
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  true   |
+
+---
+
 ### `showRating`
 
 Displays the Built-in Rating UI to show the rating value in real-time (optional)
@@ -276,16 +286,6 @@ The initial rating to render (optional)
 
 ---
 
-### `minValue`
-
-The minimum value the user can select
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |    0    |
-
----
-
 ### `style`
 
 Exposes style prop to add additional styling to the container view (optional)
diff --git a/website/versioned_docs/version-2.0.4/searchbar.md b/website/versioned_docs/version-3.0.0/searchbar.md
similarity index 98%
rename from website/versioned_docs/version-2.0.4/searchbar.md
rename to website/versioned_docs/version-3.0.0/searchbar.md
index 7b6f478f6b..3064e77150 100644
--- a/website/versioned_docs/version-2.0.4/searchbar.md
+++ b/website/versioned_docs/version-3.0.0/searchbar.md
@@ -58,57 +58,111 @@ export default class App extends React.Component {
 > [all native TextInput props that come with a standard React Native TextInput element](https://reactnative.dev/docs/textinput.html),
 > along with the following:
 
-- [`platform`](#platform)
-- [`clearIcon`](#clearicon)
-- [`searchIcon`](#searchicon)
+- [`cancelButtonProps`](#cancelbuttonprops)
+- [`cancelButtonTitle`](#cancelbuttontitle)
 - [`cancelIcon`](#cancelicon-platformandroid-only) (**`platform="android"`
   only**)
+- [`clearIcon`](#clearicon)
 - [`containerStyle`](#containerstyle)
 - [`inputContainerStyle`](#inputcontainerstyle)
 - [`inputStyle`](#inputstyle)
 - [`leftIconContainerStyle`](#lefticoncontainerstyle)
-- [`rightIconContainerStyle`](#righticoncontainerstyle)
 - [`lightTheme`](#lighttheme-platformdefault-only) (**`platform="default"`
   only**)
 - [`loadingProps`](#loadingprops)
+- [`onCancel`](#oncancel)
 - [`onChangeText`](#onchangetext)
 - [`onClear`](#onclear)
 - [`placeholder`](#placeholder)
 - [`placeholderTextColor`](#placeholdertextcolor)
+- [`platform`](#platform)
+- [`rightIconContainerStyle`](#righticoncontainerstyle)
 - [`round`](#round-platformdefault-only) (**`platform="default"` only**)
+- [`searchIcon`](#searchicon)
 - [`showCancel`](#showcancel-platformios-only) (**`platform="ios"` only**)
 - [`showLoading`](#showloading)
 - [`underlineColorAndroid`](#underlinecolorandroid)
-- [`cancelButtonTitle`](#cancelbuttontitle)
-- [`cancelButtonProps`](#cancelbuttonprops)
-- [`onCancel`](#oncancel)
 
 ---
 
 ## Reference
 
-### `platform`
+### `cancelButtonProps`
 
-choose the look and feel of the search bar. One of "default", "ios", "android"
+**(iOS only)** props passed to cancel Button
 
-|  Type  |  Default  |
-| :----: | :-------: |
-| string | "default" |
+> Also receives all
+> [TouchableOpacity](http://reactnative.dev/docs/touchableopacity.html#props)
+> props
+
+- [`buttonStyle`](#buttonstyle)
+- [`buttonTextStyle`](#buttontextstyle)
+- [`color`](#color)
+- [`disabled`](#disabled)
+- [`buttonDisabledStyle`](#buttondisabledstyle)
+- [`buttonDisabledTextStyle`](#buttondisabledtextstyle)
+
+#### `buttonStyle`
+
+cancel Button styling
+
+|      Type      | Default |
+| :------------: | :-----: |
+| object (style) |  none   |
+
+#### `buttonTextStyle`
+
+cancel Button Text styling
+
+|      Type      | Default |
+| :------------: | :-----: |
+| object (style) |  none   |
+
+#### `color`
+
+cancel Button text color
+
+|      Type      | Default |
+| :------------: | :-----: |
+| string (color) | #007aff |
+
+#### `disabled`
+
+Prop to indicate cancel Button is disabled
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  false  |
+
+#### `buttonDisabledStyle`
+
+Disabled cancel Button styling
+
+|      Type      | Default |
+| :------------: | :-----: |
+| object (style) |  none   |
+
+#### `buttonDisabledTextStyle`
+
+Styles for the text when cancel Button is disabled
+
+|      Type      |        Default         |
+| :------------: | :--------------------: |
+| object (style) | `{ color: '#cdcdcd' }` |
 
 ---
 
-### `clearIcon`
+### `cancelButtonTitle`
 
-This props allows to override the `Icon` props or use a custom component. Use
-`null` or `false` to hide the icon.
+**(iOS only)** title of the cancel button on the right side
 
-|                            Type                            | Default |
-| :--------------------------------------------------------: | :-----: |
-| {[...Icon props](icon.md#props)}<br/>**OR**<br/> component |  none   |
+|  Type  | Default  |
+| :----: | :------: |
+| string | "Cancel" |
 
 ---
 
-### `searchIcon`
+### `cancelIcon` (**`platform="android"` only**)
 
 This props allows to override the `Icon` props or use a custom component. Use
 `null` or `false` to hide the icon.
@@ -119,7 +173,7 @@ This props allows to override the `Icon` props or use a custom component. Use
 
 ---
 
-### `cancelIcon` (**`platform="android"` only**)
+### `clearIcon`
 
 This props allows to override the `Icon` props or use a custom component. Use
 `null` or `false` to hide the icon.
@@ -170,16 +224,6 @@ style the icon container on the left side
 
 ---
 
-### `rightIconContainerStyle`
-
-style the icon container on the right side
-
-|      Type      |      Default      |
-| :------------: | :---------------: |
-| object (style) | inherited styling |
-
----
-
 ### `lightTheme` (**`platform="default"` only**)
 
 change theme to light theme
@@ -200,6 +244,16 @@ props passed to ActivityIndicator
 
 ---
 
+### `onCancel`
+
+callback fired when pressing the cancel button (iOS) or the back icon (Android)
+
+|   Type   | Default |
+| :------: | :-----: |
+| function |  null   |
+
+---
+
 ### `onChangeText`
 
 method to fire when text is changed
@@ -240,29 +294,29 @@ set the color of the placeholder text
 
 ---
 
-### `round` (**`platform="default"` only**)
+### `platform`
 
-change TextInput styling to rounded corners
+choose the look and feel of the search bar. One of "default", "ios", "android"
 
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
+|  Type  |  Default  |
+| :----: | :-------: |
+| string | "default" |
 
 ---
 
-### `showCancel` (**`platform="ios"` only**)
+### `rightIconContainerStyle`
 
-When `true` the cancel button will stay visible after blur events.
+style the icon container on the right side
 
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
+|      Type      |      Default      |
+| :------------: | :---------------: |
+| object (style) | inherited styling |
 
 ---
 
-### `showLoading`
+### `round` (**`platform="default"` only**)
 
-show the loading ActivityIndicator effect
+change TextInput styling to rounded corners
 
 |  Type   | Default |
 | :-----: | :-----: |
@@ -270,98 +324,54 @@ show the loading ActivityIndicator effect
 
 ---
 
-### `underlineColorAndroid`
+### `searchIcon`
 
-specify other than the default transparent underline color
+This props allows to override the `Icon` props or use a custom component. Use
+`null` or `false` to hide the icon.
 
-|      Type      |   Default   |
-| :------------: | :---------: |
-| string (color) | transparent |
+|                            Type                            | Default |
+| :--------------------------------------------------------: | :-----: |
+| {[...Icon props](icon.md#props)}<br/>**OR**<br/> component |  none   |
 
 ---
 
-### `cancelButtonTitle`
+### `showCancel` (**`platform="ios"` only**)
 
-**(iOS only)** title of the cancel button on the right side
+When `true` the cancel button will stay visible after blur events.
 
-|  Type  | Default  |
-| :----: | :------: |
-| string | "Cancel" |
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  false  |
 
 ---
 
-### `cancelButtonProps`
-
-**(iOS only)** props passed to cancel Button
-
-> Also receives all
-> [TouchableOpacity](http://reactnative.dev/docs/touchableopacity.html#props)
-> props
-
-- [`buttonStyle`](#buttonstyle)
-- [`buttonTextStyle`](#buttontextstyle)
-- [`color`](#color)
-- [`disabled`](#disabled)
-- [`buttonDisabledStyle`](#buttondisabledstyle)
-- [`buttonDisabledTextStyle`](#buttondisabledtextstyle)
-
-#### `buttonStyle`
-
-cancel Button styling
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
-#### `buttonTextStyle`
-
-cancel Button Text styling
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
-#### `color`
-
-cancel Button text color
-
-|      Type      | Default |
-| :------------: | :-----: |
-| string (color) | #007aff |
-
-#### `disabled`
+### `showLoading`
 
-Prop to indicate cancel Button is disabled
+show the loading ActivityIndicator effect
 
 |  Type   | Default |
 | :-----: | :-----: |
 | boolean |  false  |
 
-#### `buttonDisabledStyle`
-
-Disabled cancel Button styling
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
+---
 
-#### `buttonDisabledTextStyle`
+### `underlineColorAndroid`
 
-Styles for the text when cancel Button is disabled
+specify other than the default transparent underline color
 
-|      Type      |        Default         |
-| :------------: | :--------------------: |
-| object (style) | `{ color: '#cdcdcd' }` |
+|      Type      |   Default   |
+| :------------: | :---------: |
+| string (color) | transparent |
 
 ---
 
-### `onCancel`
+### `value`
 
-callback fired when pressing the cancel button (iOS) or the back icon (Android)
+The value of the search field
 
-|   Type   | Default |
-| :------: | :-----: |
-| function |  null   |
+|  Type  | Default |
+| :----: | :-----: |
+| string |  none   |
 
 ---
 
@@ -378,7 +388,7 @@ callback fired when pressing the cancel button (iOS) or the back icon (Android)
 
 Store a reference to the SearchBar in your component by using the ref prop
 provided by React
-([see docs](https://facebook.github.io/react/docs/refs-and-the-dom.html)):
+([see docs](https://reactjs.org/docs/refs-and-the-dom.html)):
 
 ```js
 <SearchBar
diff --git a/website/versioned_docs/version-2.2.1/slider.md b/website/versioned_docs/version-3.0.0/slider.md
similarity index 100%
rename from website/versioned_docs/version-2.2.1/slider.md
rename to website/versioned_docs/version-3.0.0/slider.md
index b207febe8a..9bd797184b 100644
--- a/website/versioned_docs/version-2.2.1/slider.md
+++ b/website/versioned_docs/version-3.0.0/slider.md
@@ -73,6 +73,7 @@ import { Animated } from 'react-native';
 
 ## Props
 
+- [`allowTouchTrack`](#allowtouchtrack)
 - [`animateTransitions`](#animatetransitions)
 - [`animationConfig`](#animationconfig)
 - [`animationType`](#animationtype)
@@ -82,15 +83,14 @@ import { Animated } from 'react-native';
 - [`maximumValue`](#maximumvalue)
 - [`minimumTrackTintColor`](#minimumtracktintcolor)
 - [`minimumValue`](#minimumvalue)
-- [`allowTouchTrack`](#allowtouchtrack)
 - [`onSlidingComplete`](#onslidingcomplete)
 - [`onSlidingStart`](#onslidingstart)
 - [`onValueChange`](#onvaluechange)
 - [`orientation`](#orientation)
 - [`step`](#step)
 - [`style`](#style)
-- [`thumbStyle`](#thumbstyle)
 - [`thumbProps`](#thumbprops)
+- [`thumbStyle`](#thumbstyle)
 - [`thumbTintColor`](#thumbtintcolor)
 - [`thumbTouchSize`](#thumbtouchsize)
 - [`trackStyle`](#trackstyle)
@@ -100,6 +100,16 @@ import { Animated } from 'react-native';
 
 ## Reference
 
+### `allowTouchTrack`
+
+If true, thumb will respond and jump to any touch along the track.
+
+|  Type   | Default | Optional |
+| :-----: | :-----: | :------: |
+| boolean |  false  |   Yes    |
+
+---
+
 ### `animateTransitions`
 
 Set to true if you want to use the default 'spring' animation
@@ -193,16 +203,6 @@ Initial minimum value of the slider
 
 ---
 
-### `allowTouchTrack`
-
-If true, thumb will respond and jump to any touch along the track.
-
-|  Type   | Default | Optional |
-| :-----: | :-----: | :------: |
-| boolean |  false  |   Yes    |
-
----
-
 ### `onSlidingComplete`
 
 Callback called when the user finishes changing the value (e.g. when the slider
@@ -266,16 +266,6 @@ The style applied to the slider container
 
 ---
 
-### `thumbStyle`
-
-The style applied to the thumb
-
-|                         Type                         | Default | Optional |
-| :--------------------------------------------------: | :-----: | :------: |
-| [style](http://reactnative.dev/docs/view.html#style) |         |   Yes    |
-
----
-
 ### `thumbProps`
 
 The props applied to the thumb. Uses `Component` prop which can accept `Animated` components.
@@ -286,6 +276,16 @@ The props applied to the thumb. Uses `Component` prop which can accept `Animated
 
 ---
 
+### `thumbStyle`
+
+The style applied to the thumb
+
+|                         Type                         | Default | Optional |
+| :--------------------------------------------------: | :-----: | :------: |
+| [style](http://reactnative.dev/docs/view.html#style) |         |   Yes    |
+
+---
+
 ### `thumbTintColor`
 
 The color used for the thumb
diff --git a/website/versioned_docs/version-2.0.4/social_icons.md b/website/versioned_docs/version-3.0.0/social_icons.md
similarity index 100%
rename from website/versioned_docs/version-2.0.4/social_icons.md
rename to website/versioned_docs/version-3.0.0/social_icons.md
diff --git a/website/versioned_docs/version-2.2.1/testing.md b/website/versioned_docs/version-3.0.0/testing.md
similarity index 89%
rename from website/versioned_docs/version-2.2.1/testing.md
rename to website/versioned_docs/version-3.0.0/testing.md
index 93de64342d..7d46b5cb97 100644
--- a/website/versioned_docs/version-2.2.1/testing.md
+++ b/website/versioned_docs/version-3.0.0/testing.md
@@ -27,9 +27,9 @@ yarn test -u
 npm run test -u
 ```
 
-For Snapshot Testing, we use [Jest](https://facebook.github.io/jest/).
+For Snapshot Testing, we use [Jest](https://jestjs.io/).
 
-You can read more about snapshot testing [here](https://facebook.github.io/jest/docs/en/snapshot-testing.html).
+You can read more about snapshot testing [here](https://jestjs.io/docs/en/snapshot-testing.html).
 
 ## Functional Testing
 
diff --git a/website/versioned_docs/version-2.0.4/text.md b/website/versioned_docs/version-3.0.0/text.md
similarity index 100%
rename from website/versioned_docs/version-2.0.4/text.md
rename to website/versioned_docs/version-3.0.0/text.md
diff --git a/website/versioned_docs/version-2.2.1/tile.md b/website/versioned_docs/version-3.0.0/tile.md
similarity index 100%
rename from website/versioned_docs/version-2.2.1/tile.md
rename to website/versioned_docs/version-3.0.0/tile.md
index ead1422411..6280bc55ae 100644
--- a/website/versioned_docs/version-2.2.1/tile.md
+++ b/website/versioned_docs/version-3.0.0/tile.md
@@ -82,6 +82,7 @@ import { Tile } from 'react-native-elements';
 - [`height`](#height)
 - [`icon`](#icon)
 - [`iconContainerStyle`](#iconcontainerstyle)
+- [`ImageComponent`](#imagecomponent)
 - [`imageContainerStyle`](#imagecontainerstyle)
 - [`imageProps`](#imageprops)
 - [`imageSrc`](#imagesrc)
@@ -91,7 +92,6 @@ import { Tile } from 'react-native-elements';
 - [`titleNumberOfLines`](#titlenumberoflines)
 - [`titleStyle`](#titlestyle)
 - [`width`](#width)
-- [`ImageComponent`](#imagecomponent)
 
 ---
 
@@ -187,6 +187,16 @@ Styling for the outer icon container (optional)
 
 ---
 
+### `ImageComponent`
+
+Custom ImageComponent for Tile
+
+|            Type            |     Default     |
+| :------------------------: | :-------------: |
+| React component or element | BackgroundImage |
+
+---
+
 ### `imageContainerStyle`
 
 Styling for the image (optional)
@@ -274,13 +284,3 @@ Width for the tile (optional)
 |  Type  |   Default    |
 | :----: | :----------: |
 | number | Device Width |
-
----
-
-### `ImageComponent`
-
-Custom ImageComponent for Tile
-
-|            Type            |     Default     |
-| :------------------------: | :-------------: |
-| React component or element | BackgroundImage |
diff --git a/website/versioned_docs/version-2.2.1/tooltip.md b/website/versioned_docs/version-3.0.0/tooltip.md
similarity index 92%
rename from website/versioned_docs/version-2.2.1/tooltip.md
rename to website/versioned_docs/version-3.0.0/tooltip.md
index 4d81d3baab..70dab4a23b 100644
--- a/website/versioned_docs/version-2.2.1/tooltip.md
+++ b/website/versioned_docs/version-3.0.0/tooltip.md
@@ -39,21 +39,22 @@ import Modal from 'modal-react-native-web';
 ## Props
 
 - [`backgroundColor`](#backgroundcolor)
+- [`closeOnlyOnBackdropPress`](#closeonlyonbackdroppress)
 - [`containerStyle`](#containerstyle)
 - [`height`](#height)
 - [`highlightColor`](#highlightcolor)
+- [`ModalComponent`](#modalcomponent)
 - [`onClose`](#onclose)
 - [`onOpen`](#onopen)
 - [`overlayColor`](#overlaycolor)
 - [`pointerColor`](#pointercolor)
 - [`popover`](#popover)
+- [`skipAndroidStatusBar`](#skipandroidstatusbar)
+- [`toggleAction`](#toggleaction)
 - [`toggleOnPress`](#toggleonpress)
 - [`width`](#width)
 - [`withOverlay`](#withoverlay)
 - [`withPointer`](#withpointer)
-- [`toggleAction`](#toggleaction)
-- [`skipAndroidStatusBar`](#skipandroidstatusbar)
-- [`ModalComponent`](#modalcomponent)
 
 ---
 
@@ -69,6 +70,18 @@ sets backgroundColor of the tooltip and pointer.
 
 ---
 
+### `closeOnlyOnBackdropPress`
+
+Flag to determine whether to disable auto hiding of tooltip when touching/scrolling anywhere inside the active tooltip popover container.
+
+- When `true`, Tooltip closes only when overlay backdrop is pressed (or) highlighted tooltip button is pressed.
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  false  |
+
+---
+
 ### `containerStyle`
 
 Passes style object to tooltip container
@@ -101,6 +114,46 @@ Color to highlight the item the tooltip is surrounding.
 
 ---
 
+### `ModalComponent`
+
+override React Native `Modal` component (usable for web-platform)
+
+|          Type          | Default |
+| :--------------------: | :-----: |
+| React Native Component |  Modal  |
+
+## Interaction methods
+
+| method        | description                                                    |
+| ------------- | -------------------------------------------------------------- |
+| toggleTooltip | Toggles tooltip manually. ([example](#toggle-tooltip-example)) |
+
+#### `toggleTooltip` example
+
+Store a reference to the Tooltip in your component by using the ref prop
+provided by React ([see docs](https://reactjs.org/docs/refs-and-the-dom.html)):
+
+```js
+const tooltipRef = useRef(null);
+
+...
+
+<Tooltip
+  ref={tooltipRef}
+  ...
+/>
+```
+
+Then you can manually trigger tooltip from anywhere for example when screen loads:
+
+```js
+useEffect(() => {
+  tooltipRef.current.toggleTooltip();
+}, []);
+```
+
+---
+
 ### `onClose`
 
 function which gets called on closing the tooltip.
@@ -152,6 +205,27 @@ Component to be rendered as the display container.
 
 ---
 
+### `skipAndroidStatusBar`
+
+Force skip StatusBar height when calculating element position. Pass `true` if Tooltip used inside react-native Modal component.
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  false  |
+
+---
+
+### `toggleAction`
+
+Define type of action that should trigger tooltip.
+Available options _onPress_, _onLongPress_
+
+|  Type  | Default |
+| :----: | :-----: |
+| string | onPress |
+
+---
+
 ### `toggleOnPress`
 
 Flag to determine to toggle or not the tooltip on press.
@@ -193,62 +267,3 @@ Flag to determine whether or not to display the pointer.
 | boolean |  true   |
 
 ---
-
-### `toggleAction`
-
-Define type of action that should trigger tooltip.
-Available options _onPress_, _onLongPress_
-
-|  Type  | Default |
-| :----: | :-----: |
-| string | onPress |
-
----
-
-### `skipAndroidStatusBar`
-
-Force skip StatusBar height when calculating element position. Pass `true` if Tooltip used inside react-native Modal component.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `ModalComponent`
-
-override React Native `Modal` component (usable for web-platform)
-
-|          Type          | Default |
-| :--------------------: | :-----: |
-| React Native Component |  Modal  |
-
-## Interaction methods
-
-| method        | description                                                    |
-| ------------- | -------------------------------------------------------------- |
-| toggleTooltip | Toggles tooltip manually. ([example](#toggle-tooltip-example)) |
-
-#### `toggleTooltip` example
-
-Store a reference to the Tooltip in your component by using the ref prop
-provided by React ([see docs](https://reactjs.org/docs/refs-and-the-dom.html)):
-
-```js
-const tooltipRef = useRef(null);
-
-...
-
-<Tooltip
-  ref={tooltipRef}
-  ...
-/>
-```
-
-Then you can manually trigger tooltip from anywhere for example when screen loads:
-
-```js
-useEffect(() => {
-  tooltipRef.current.toggleTooltip();
-}, []);
-```
diff --git a/website/versioned_docs/version-2.0.4/troubleshooting.md b/website/versioned_docs/version-3.0.0/troubleshooting.md
similarity index 100%
rename from website/versioned_docs/version-2.0.4/troubleshooting.md
rename to website/versioned_docs/version-3.0.0/troubleshooting.md
diff --git a/website/versioned_docs/version-2.0.4/web_usage.md b/website/versioned_docs/version-3.0.0/web_usage.md
similarity index 100%
rename from website/versioned_docs/version-2.0.4/web_usage.md
rename to website/versioned_docs/version-3.0.0/web_usage.md
diff --git a/website/versioned_sidebars/version-2.0.4-sidebars.json b/website/versioned_sidebars/version-2.0.4-sidebars.json
deleted file mode 100644
index be32904719..0000000000
--- a/website/versioned_sidebars/version-2.0.4-sidebars.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-  "version-2.0.4/docs": {
-    "It Starts Basic": [
-      "version-2.0.4/getting_started",
-      "version-2.0.4/overview",
-      "version-2.0.4/customization",
-      "version-2.0.4/web_usage",
-      "version-2.0.4/troubleshooting"
-    ],
-    "Components": [
-      "version-2.0.4/avatar",
-      "version-2.0.4/badge",
-      "version-2.0.4/button",
-      "version-2.0.4/button_group",
-      "version-2.0.4/card",
-      "version-2.0.4/checkbox",
-      "version-2.0.4/divider",
-      "version-2.0.4/header",
-      "version-2.0.4/icon",
-      "version-2.0.4/image",
-      "version-2.0.4/input",
-      "version-2.0.4/listitem",
-      "version-2.0.4/overlay",
-      "version-2.0.4/pricing",
-      "version-2.0.4/rating",
-      "version-2.0.4/searchbar",
-      "version-2.0.4/slider",
-      "version-2.0.4/social_icon",
-      "version-2.0.4/text",
-      "version-2.0.4/tile",
-      "version-2.0.4/tooltip"
-    ],
-    "Repo": [
-      "version-2.0.4/contributing",
-      "version-2.0.4/testing",
-      "version-2.0.4/labels"
-    ]
-  }
-}
diff --git a/website/versioned_sidebars/version-2.2.1-sidebars.json b/website/versioned_sidebars/version-3.0.0-sidebars.json
similarity index 58%
rename from website/versioned_sidebars/version-2.2.1-sidebars.json
rename to website/versioned_sidebars/version-3.0.0-sidebars.json
index ed85601c6d..ee39d92e45 100644
--- a/website/versioned_sidebars/version-2.2.1-sidebars.json
+++ b/website/versioned_sidebars/version-3.0.0-sidebars.json
@@ -1,5 +1,5 @@
 {
-  "version-2.2.1/docs": [
+  "version-3.0.0/docs": [
     {
       "collapsed": true,
       "type": "category",
@@ -7,23 +7,23 @@
       "items": [
         {
           "type": "doc",
-          "id": "version-2.2.1/getting_started"
+          "id": "version-3.0.0/getting_started"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/overview"
+          "id": "version-3.0.0/overview"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/customization"
+          "id": "version-3.0.0/customization"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/web_usage"
+          "id": "version-3.0.0/web_usage"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/troubleshooting"
+          "id": "version-3.0.0/troubleshooting"
         }
       ]
     },
@@ -34,91 +34,91 @@
       "items": [
         {
           "type": "doc",
-          "id": "version-2.2.1/avatar"
+          "id": "version-3.0.0/avatar"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/badge"
+          "id": "version-3.0.0/badge"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/bottomsheet"
+          "id": "version-3.0.0/bottomsheet"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/button"
+          "id": "version-3.0.0/button"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/button_group"
+          "id": "version-3.0.0/button_group"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/card"
+          "id": "version-3.0.0/card"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/checkbox"
+          "id": "version-3.0.0/checkbox"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/divider"
+          "id": "version-3.0.0/divider"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/header"
+          "id": "version-3.0.0/header"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/icon"
+          "id": "version-3.0.0/icon"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/image"
+          "id": "version-3.0.0/image"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/input"
+          "id": "version-3.0.0/input"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/listitem"
+          "id": "version-3.0.0/listitem"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/overlay"
+          "id": "version-3.0.0/overlay"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/pricing"
+          "id": "version-3.0.0/pricing"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/rating"
+          "id": "version-3.0.0/rating"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/searchbar"
+          "id": "version-3.0.0/searchbar"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/slider"
+          "id": "version-3.0.0/slider"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/social_icon"
+          "id": "version-3.0.0/social_icon"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/text"
+          "id": "version-3.0.0/text"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/tile"
+          "id": "version-3.0.0/tile"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/tooltip"
+          "id": "version-3.0.0/tooltip"
         }
       ]
     },
@@ -129,15 +129,15 @@
       "items": [
         {
           "type": "doc",
-          "id": "version-2.2.1/contributing"
+          "id": "version-3.0.0/contributing"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/testing"
+          "id": "version-3.0.0/testing"
         },
         {
           "type": "doc",
-          "id": "version-2.2.1/labels"
+          "id": "version-3.0.0/labels"
         }
       ]
     }
diff --git a/website/versions.json b/website/versions.json
index 669c9fb4e3..f83cfa81b3 100644
--- a/website/versions.json
+++ b/website/versions.json
@@ -1,6 +1,5 @@
 [
+  "3.0.0",
   "2.3.2",
-  "2.2.1",
-  "2.0.4",
   "1.2.0"
 ]