From 6a50969cd964a91d0f8276931b0cd52b23ddb3b5 Mon Sep 17 00:00:00 2001
From: Sankalp Nihal Pandey
 <sankalpnihalpandey@Sankalp-nihal-Pandey-MacBook-Air.local>
Date: Tue, 2 Aug 2022 18:35:38 +0530
Subject: [PATCH 01/12]  redirects added

---
 redirects.json | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/redirects.json b/redirects.json
index 1a66d0c28..8ee0c099c 100644
--- a/redirects.json
+++ b/redirects.json
@@ -14178,5 +14178,26 @@
     "source": "/migration/nb-icons",
     "destination": "/nb-icons",
     "permanent": true
-  }
+  },
+  {
+    "source": "/3.4.x/flex",
+    "destination": "/3.4.x/box",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/utility-first",
+    "destination": "/3.4.x/hstack",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/v3xtov32",
+    "destination": "/3.4.x/icon",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/use-accessible-colors",
+    "destination": "/3.4.x/setup-provider",
+    "permanent": true
+  },
+  {}
 ]

From 3faa2e436f1dcaebf6a51ca03505853a606e0712 Mon Sep 17 00:00:00 2001
From: Sankalp Nihal Pandey
 <sankalpnihalpandey@Sankalp-nihal-Pandey-MacBook-Air.local>
Date: Wed, 3 Aug 2022 16:56:00 +0530
Subject: [PATCH 02/12] added redirects

---
 redirects.json | 636 ++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 635 insertions(+), 1 deletion(-)

diff --git a/redirects.json b/redirects.json
index 8ee0c099c..f1fdde471 100644
--- a/redirects.json
+++ b/redirects.json
@@ -14199,5 +14199,639 @@
     "destination": "/3.4.x/setup-provider",
     "permanent": true
   },
-  {}
+  {
+    "source": "/3.4.x/migration/alert",
+    "destination": "/3.4.x/alert",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/alert-dialog",
+    "destination": "/3.4.x/alert-dialog",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/aspect-ratio",
+    "destination": "/3.4.x/aspect-ratio",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/avatar",
+    "destination": "/3.4.x/avatar",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/box",
+    "destination": "/3.4.x/box",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/breakpoints",
+    "destination": "/3.4.x/breakpoints",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/building-app-bar",
+    "destination": "/3.4.x/building-app-bar",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/building-app-drawer",
+    "destination": "/3.4.x/building-app-drawer",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/building-card",
+    "destination": "/3.4.x/building-card",
+    "permanent": true
+  },
+  {
+    "source": "3.4.x/migration/building-drawer-navigation",
+    "destination": "3.4.x/building-drawer-navigation",
+    "permanent": true
+  },
+  {
+    "source": "3.1.x/migration/contribution",
+    "destination": "3.1.x/contribution",
+    "permanent": true
+  },
+  {
+    "source": "3.2.x/migration/contribution",
+    "destination": "3.2.x/contribution",
+    "permanent": true
+  },
+  {
+    "source": "/3.3.x/migration/contribution",
+    "destination": "/3.3.x/contribution",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/accessibility",
+    "destination": "/3.4.x/accessibility",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/building-footer-tabs",
+    "destination": "/3.4.x/building-footer-tabs",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/building-search-bar",
+    "destination": "/3.4.x/building-search-bar",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/building-swipe-list",
+    "destination": "/3.4.x/building-swipe-list",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/building-tab-view",
+    "destination": "/3.4.x/building-tab-view",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/center",
+    "destination": "/3.4.x/center",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/changelog",
+    "destination": "/3.4.x/changelog",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/color-mode",
+    "destination": "/3.4.x/color-mode",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/container",
+    "destination": "/3.4.x/container",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/contribution",
+    "destination": "/3.4.x/contribution",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/customizing-components",
+    "destination": "/3.4.x/customizing-components",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/customizing-fonts",
+    "destination": "/3.4.x/customizing-fonts",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/customizing-theme",
+    "destination": "/3.4.x/customizing-theme",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/dark-mode",
+    "destination": "/3.4.x/dark-mode",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/default-theme",
+    "destination": "/3.4.x/default-theme",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/design-tokens",
+    "destination": "/3.4.x/design-tokens",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/divider",
+    "destination": "/3.4.x/divider",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/faq",
+    "destination": "/3.4.x/faq",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/flat-list",
+    "destination": "/3.4.x/flat-list",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/flex",
+    "destination": "/3.4.x/flex",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/form-control",
+    "destination": "/3.4.x/form-control",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/getting-started",
+    "destination": "/3.4.x/getting-started",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/heading",
+    "destination": "/3.4.x/heading",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/hidden",
+    "destination": "/3.4.x/hidden",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/hstack",
+    "destination": "/3.4.x/hstack",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/icon-button",
+    "destination": "/3.4.x/icon-button",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/zstack",
+    "destination": "/3.4.x/zstack",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/vstack",
+    "destination": "/3.4.x/vstack",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/view",
+    "destination": "/3.4.x/view",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/image",
+    "destination": "/3.4.x/image",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/input",
+    "destination": "/3.4.x/input",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/installation",
+    "destination": "/3.4.x/installation",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/internal-pseudo-props",
+    "destination": "/3.4.x/internal-pseudo-props",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/keyboard-avoiding-view",
+    "destination": "/3.4.x/keyboard-avoiding-view",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/kitchen-sink",
+    "destination": "/3.4.x/kitchen-sink",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/link",
+    "destination": "/3.4.x/link",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/login-signup-forms",
+    "destination": "/3.4.x/login-signup-forms",
+    "permanent": true
+  },
+  {
+    "source": "3.4.x/migration/menu",
+    "destination": "3.4.x/menu",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/action-sheet",
+    "destination": "/3.4.x/migration/action-sheet",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/badge",
+    "destination": "/3.4.x/migration/badge",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/button",
+    "destination": "/3.4.x/migration/button",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/card",
+    "destination": "/3.4.x/migration/card",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/checkbox",
+    "destination": "/3.4.x/migration/checkbox",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/date-picker",
+    "destination": "/3.4.x/migration/date-picker",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/deck-swiper",
+    "destination": "/3.4.x/migration/deck-swiper",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/drawer",
+    "destination": "/3.4.x/migration/drawer",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/fab",
+    "destination": "/3.4.x/migration/fab",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/footer-tab",
+    "destination": "/3.4.x/migration/footer-tab",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/form",
+    "destination": "/3.4.x/migration/form",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/header",
+    "destination": "/3.4.x/migration/header",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/icon",
+    "destination": "/3.4.x/migration/icon",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/layout",
+    "destination": "/3.4.x/migration/layout",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/picker",
+    "destination": "/3.4.x/migration/picker",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/radio-button",
+    "destination": "/3.4.x/migration/radio-button",
+    "permanent": true
+  },
+  {
+    "source": "3.4.x/migration/migration/search-bar",
+    "destination": "3.4.x/migration/search-bar",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/segment",
+    "destination": "/3.4.x/migration/segment",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/spinner",
+    "destination": "/3.4.x/migration/spinner",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/swipe-list",
+    "destination": "/3.4.x/migration/swipe-list",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/tabs",
+    "destination": "/3.4.x/migration/tabs",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/thumbnail",
+    "destination": "/3.4.x/migration/thumbnail",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/toast",
+    "destination": "/3.4.x/migration/toast",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/typography",
+    "destination": "/3.4.x/migration/typography",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/v3",
+    "destination": "/3.4.x/migration/v3",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/v33xtov34x",
+    "destination": "/3.4.x/migration/v33xtov34x",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/migration/v3xtov32",
+    "destination": "/3.4.x/migration/v3xtov32",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/modal",
+    "destination": "/3.4.x/modal",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/more-props",
+    "destination": "/3.4.x/more-props",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/nativebase-factory",
+    "destination": "/3.4.x/nativebase-factory",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/popover",
+    "destination": "/3.4.x/popover",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/presence-transition",
+    "destination": "/3.4.x/presence-transition",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/pressable",
+    "destination": "/3.4.x/pressable",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/progress",
+    "destination": "/3.4.x/progress",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/pseudo-props",
+    "destination": "/3.4.x/pseudo-props",
+    "permanent": true
+  },
+  {
+    "source": "3.4.x/migration/pseudo-props-101",
+    "destination": "3.4.x/pseudo-props-101",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/radio",
+    "destination": "/3.4.x/radio",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/responsive",
+    "destination": "/3.4.x/responsive",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/safe-area-view-props",
+    "destination": "/3.4.x/safe-area-view-props",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/scrollview",
+    "destination": "/3.4.x/scrollview",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/section-list",
+    "destination": "/3.4.x/section-list",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/select",
+    "destination": "/3.4.x/select",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/setup-provider",
+    "destination": "/3.4.x/setup-provider",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/skeleton",
+    "destination": "/3.4.x/skeleton",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/slide",
+    "destination": "/3.4.x/slide",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/slider",
+    "destination": "/3.4.x/slider",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/solito",
+    "destination": "/3.4.x/solito",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/stack",
+    "destination": "/3.4.x/stack",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/stagger",
+    "destination": "/3.4.x/stagger",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/status-bar",
+    "destination": "/3.4.x/status-bar",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/strict-mode",
+    "destination": "/3.4.x/strict-mode",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/switch",
+    "destination": "/3.4.x/switch",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/testing",
+    "destination": "/3.4.x/testing",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/text",
+    "destination": "/3.4.x/text",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/textarea",
+    "destination": "/3.4.x/textarea",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/theme",
+    "destination": "/3.4.x/theme",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/todo-list",
+    "destination": "/3.4.x/todo-list",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/tooltip",
+    "destination": "/3.4.x/tooltip",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/typescript",
+    "destination": "/3.4.x/typescript",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/use-accessible-colors",
+    "destination": "/3.4.x/use-accessible-colors",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/use-breakpoint-value",
+    "destination": "/3.4.x/use-breakpoint-value",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/use-clipboard",
+    "destination": "/3.4.x/use-clipboard",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/use-color-mode",
+    "destination": "/3.4.x/use-color-mode",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/use-color-mode-value",
+    "destination": "/3.4.x/use-color-mode-value",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/use-contrast-text",
+    "destination": "/3.4.x/use-contrast-text",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/use-disclose",
+    "destination": "/3.4.x/use-disclose",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/use-media-query",
+    "destination": "/3.4.x/use-media-query",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/use-theme",
+    "destination": "/3.4.x/use-theme",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/use-token",
+    "destination": "/3.4.x/use-token",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/utility-first",
+    "destination": "/3.4.x/utility-first",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/utility-props",
+    "destination": "/3.4.x/utility-props",
+    "permanent": true
+  },
+  {
+    "source": "/3.4.x/migration/utility-props-specificity",
+    "destination": "/3.4.x/utility-props-specificity",
+    "permanent": true
+  },
+  {
+    "source": "/next/migration/contribution",
+    "destination": "/next/contribution",
+    "permanent": true
+  },
+  {
+    "source": "/next/migration/internal-pseudo-props",
+    "destination": "/next/internal-pseudo-props",
+    "permanent": true
+  },
+  {
+    "source": "/next/migration/migration/v33xtov34x",
+    "destination": "/next/migration/v33xtov34x",
+    "permanent": true
+  },
+  {
+    "source": "/next/migration/solito",
+    "destination": "/next/solito",
+    "permanent": true
+  }
 ]

From 69efed4f226894b6e0b281a5b2d9e758b1dbf8a7 Mon Sep 17 00:00:00 2001
From: Sankalp Nihal Pandey
 <sankalpnihalpandey@Sankalp-nihal-Pandey-MacBook-Air.local>
Date: Wed, 3 Aug 2022 17:49:48 +0530
Subject: [PATCH 03/12]  removed unwanted redirects

---
 redirects.json | 22 +---------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/redirects.json b/redirects.json
index f1fdde471..3fd2d0d42 100644
--- a/redirects.json
+++ b/redirects.json
@@ -14179,26 +14179,6 @@
     "destination": "/nb-icons",
     "permanent": true
   },
-  {
-    "source": "/3.4.x/flex",
-    "destination": "/3.4.x/box",
-    "permanent": true
-  },
-  {
-    "source": "/3.4.x/utility-first",
-    "destination": "/3.4.x/hstack",
-    "permanent": true
-  },
-  {
-    "source": "/3.4.x/migration/v3xtov32",
-    "destination": "/3.4.x/icon",
-    "permanent": true
-  },
-  {
-    "source": "/3.4.x/use-accessible-colors",
-    "destination": "/3.4.x/setup-provider",
-    "permanent": true
-  },
   {
     "source": "/3.4.x/migration/alert",
     "destination": "/3.4.x/alert",
@@ -14435,7 +14415,7 @@
     "permanent": true
   },
   {
-    "source": "/3.4.x/migration/kitchen-sink",
+    "source": "/fix/redirect",
     "destination": "/3.4.x/kitchen-sink",
     "permanent": true
   },

From a671b150ffb43ab6e053674159e16c481253377a Mon Sep 17 00:00:00 2001
From: Sankalp Nihal Pandey
 <sankalpnihalpandey@Sankalp-nihal-Pandey-MacBook-Air.local>
Date: Wed, 3 Aug 2022 17:51:40 +0530
Subject: [PATCH 04/12]  minor fixes

---
 redirects.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/redirects.json b/redirects.json
index 3fd2d0d42..17eb4adc3 100644
--- a/redirects.json
+++ b/redirects.json
@@ -14415,7 +14415,7 @@
     "permanent": true
   },
   {
-    "source": "/fix/redirect",
+    "source": "/3.4.x/migration/kitchen-sink",
     "destination": "/3.4.x/kitchen-sink",
     "permanent": true
   },

From 6b8712e32ca9211f44952483a63e21c3d96059a6 Mon Sep 17 00:00:00 2001
From: Rohit Singh <rohit99.ind@gmail.com>
Date: Tue, 9 Aug 2022 15:58:14 +0530
Subject: [PATCH 05/12] fix: source dst broken links

---
 redirects.json | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/redirects.json b/redirects.json
index 6ea627b8d..d7d729817 100644
--- a/redirects.json
+++ b/redirects.json
@@ -14245,18 +14245,18 @@
     "permanent": true
   },
   {
-    "source": "3.4.x/migration/building-drawer-navigation",
-    "destination": "3.4.x/building-drawer-navigation",
+    "source": "/3.4.x/migration/building-drawer-navigation",
+    "destination": "/3.4.x/building-drawer-navigation",
     "permanent": true
   },
   {
-    "source": "3.1.x/migration/contribution",
-    "destination": "3.1.x/contribution",
+    "source": "/3.1.x/migration/contribution",
+    "destination": "/3.1.x/contribution",
     "permanent": true
   },
   {
-    "source": "3.2.x/migration/contribution",
-    "destination": "3.2.x/contribution",
+    "source": "/3.2.x/migration/contribution",
+    "destination": "/3.2.x/contribution",
     "permanent": true
   },
   {
@@ -14450,8 +14450,8 @@
     "permanent": true
   },
   {
-    "source": "3.4.x/migration/menu",
-    "destination": "3.4.x/menu",
+    "source": "/3.4.x/migration/menu",
+    "destination": "/3.4.x/menu",
     "permanent": true
   },
   {
@@ -14535,8 +14535,8 @@
     "permanent": true
   },
   {
-    "source": "3.4.x/migration/migration/search-bar",
-    "destination": "3.4.x/migration/search-bar",
+    "source": "/3.4.x/migration/migration/search-bar",
+    "destination": "/3.4.x/migration/search-bar",
     "permanent": true
   },
   {
@@ -14630,8 +14630,8 @@
     "permanent": true
   },
   {
-    "source": "3.4.x/migration/pseudo-props-101",
-    "destination": "3.4.x/pseudo-props-101",
+    "source": "/3.4.x/migration/pseudo-props-101",
+    "destination": "/3.4.x/pseudo-props-101",
     "permanent": true
   },
   {

From 60615dcf7054f8714150fbd451bc2d3a7105702e Mon Sep 17 00:00:00 2001
From: amars29 <amars@geekyants>
Date: Wed, 17 Aug 2022 18:44:38 +0530
Subject: [PATCH 06/12] text styles update in KitchenSink page

---
 docs/3.0.x/kitchen-sink.mdx | 19 ++++++++++++++++---
 docs/3.1.x/kitchen-sink.mdx | 19 ++++++++++++++++---
 docs/3.2.x/kitchen-sink.mdx | 19 ++++++++++++++++---
 docs/3.3.x/kitchen-sink.mdx | 19 ++++++++++++++++---
 docs/3.4.x/kitchen-sink.mdx | 19 ++++++++++++++++---
 docs/next/kitchen-sink.mdx  | 19 ++++++++++++++++---
 6 files changed, 96 insertions(+), 18 deletions(-)

diff --git a/docs/3.0.x/kitchen-sink.mdx b/docs/3.0.x/kitchen-sink.mdx
index 1396d3917..ecca7b82c 100644
--- a/docs/3.0.x/kitchen-sink.mdx
+++ b/docs/3.0.x/kitchen-sink.mdx
@@ -8,7 +8,11 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components";
 <Box>
   <Box m="0">
     <Box p="0" mb="12">
-      <Box>
+      <Box
+        _text={{ fontSize: "md" }}
+        _dark={{ _text: { color: "coolGray.400" } }}
+        _light={{ _text: { color: "coolGray.700" } }}
+      >
         Kitchen Sink is a comprehensive demo app showcasing all the NativeBase
         components in action. It includes buttons, forms, icons and much more!
       </Box>
@@ -20,9 +24,18 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components";
         direction={{ base: "column", md: "row" }}
       >
         <Box w={{ base: "100%", md: "75%" }}>
-          <Text>
+          <Text
+            fontSize="md"
+            _dark={{ color: "coolGray.400" }}
+            _light={{ color: "coolGray.700" }}
+          >
             <Text>Scan with the </Text>
-            <Image alt="expo icon" mb="-1" size="5" source={{ uri: "/img/expo-icon.svg" }} />
+            <Image
+              alt="expo icon"
+              mb="-1"
+              size="5"
+              source={{ uri: "/img/expo-icon.svg" }}
+            />
             <Text>
               {" "}
               Expo app on your Android device to see the special dish we cooked for
diff --git a/docs/3.1.x/kitchen-sink.mdx b/docs/3.1.x/kitchen-sink.mdx
index 1396d3917..ecca7b82c 100644
--- a/docs/3.1.x/kitchen-sink.mdx
+++ b/docs/3.1.x/kitchen-sink.mdx
@@ -8,7 +8,11 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components";
 <Box>
   <Box m="0">
     <Box p="0" mb="12">
-      <Box>
+      <Box
+        _text={{ fontSize: "md" }}
+        _dark={{ _text: { color: "coolGray.400" } }}
+        _light={{ _text: { color: "coolGray.700" } }}
+      >
         Kitchen Sink is a comprehensive demo app showcasing all the NativeBase
         components in action. It includes buttons, forms, icons and much more!
       </Box>
@@ -20,9 +24,18 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components";
         direction={{ base: "column", md: "row" }}
       >
         <Box w={{ base: "100%", md: "75%" }}>
-          <Text>
+          <Text
+            fontSize="md"
+            _dark={{ color: "coolGray.400" }}
+            _light={{ color: "coolGray.700" }}
+          >
             <Text>Scan with the </Text>
-            <Image alt="expo icon" mb="-1" size="5" source={{ uri: "/img/expo-icon.svg" }} />
+            <Image
+              alt="expo icon"
+              mb="-1"
+              size="5"
+              source={{ uri: "/img/expo-icon.svg" }}
+            />
             <Text>
               {" "}
               Expo app on your Android device to see the special dish we cooked for
diff --git a/docs/3.2.x/kitchen-sink.mdx b/docs/3.2.x/kitchen-sink.mdx
index 1396d3917..ecca7b82c 100644
--- a/docs/3.2.x/kitchen-sink.mdx
+++ b/docs/3.2.x/kitchen-sink.mdx
@@ -8,7 +8,11 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components";
 <Box>
   <Box m="0">
     <Box p="0" mb="12">
-      <Box>
+      <Box
+        _text={{ fontSize: "md" }}
+        _dark={{ _text: { color: "coolGray.400" } }}
+        _light={{ _text: { color: "coolGray.700" } }}
+      >
         Kitchen Sink is a comprehensive demo app showcasing all the NativeBase
         components in action. It includes buttons, forms, icons and much more!
       </Box>
@@ -20,9 +24,18 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components";
         direction={{ base: "column", md: "row" }}
       >
         <Box w={{ base: "100%", md: "75%" }}>
-          <Text>
+          <Text
+            fontSize="md"
+            _dark={{ color: "coolGray.400" }}
+            _light={{ color: "coolGray.700" }}
+          >
             <Text>Scan with the </Text>
-            <Image alt="expo icon" mb="-1" size="5" source={{ uri: "/img/expo-icon.svg" }} />
+            <Image
+              alt="expo icon"
+              mb="-1"
+              size="5"
+              source={{ uri: "/img/expo-icon.svg" }}
+            />
             <Text>
               {" "}
               Expo app on your Android device to see the special dish we cooked for
diff --git a/docs/3.3.x/kitchen-sink.mdx b/docs/3.3.x/kitchen-sink.mdx
index 1396d3917..ecca7b82c 100644
--- a/docs/3.3.x/kitchen-sink.mdx
+++ b/docs/3.3.x/kitchen-sink.mdx
@@ -8,7 +8,11 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components";
 <Box>
   <Box m="0">
     <Box p="0" mb="12">
-      <Box>
+      <Box
+        _text={{ fontSize: "md" }}
+        _dark={{ _text: { color: "coolGray.400" } }}
+        _light={{ _text: { color: "coolGray.700" } }}
+      >
         Kitchen Sink is a comprehensive demo app showcasing all the NativeBase
         components in action. It includes buttons, forms, icons and much more!
       </Box>
@@ -20,9 +24,18 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components";
         direction={{ base: "column", md: "row" }}
       >
         <Box w={{ base: "100%", md: "75%" }}>
-          <Text>
+          <Text
+            fontSize="md"
+            _dark={{ color: "coolGray.400" }}
+            _light={{ color: "coolGray.700" }}
+          >
             <Text>Scan with the </Text>
-            <Image alt="expo icon" mb="-1" size="5" source={{ uri: "/img/expo-icon.svg" }} />
+            <Image
+              alt="expo icon"
+              mb="-1"
+              size="5"
+              source={{ uri: "/img/expo-icon.svg" }}
+            />
             <Text>
               {" "}
               Expo app on your Android device to see the special dish we cooked for
diff --git a/docs/3.4.x/kitchen-sink.mdx b/docs/3.4.x/kitchen-sink.mdx
index 39c084203..b7650d782 100644
--- a/docs/3.4.x/kitchen-sink.mdx
+++ b/docs/3.4.x/kitchen-sink.mdx
@@ -6,7 +6,11 @@ title: Kitchen Sink
 <Box>
   <Box m="0">
     <Box p="0" mb="12">
-      <Box>
+      <Box
+        _text={{ fontSize: "md" }}
+        _dark={{ _text: { color: "coolGray.400" } }}
+        _light={{ _text: { color: "coolGray.700" } }}
+      >
         Kitchen Sink is a comprehensive demo app showcasing all the NativeBase
         components in action. It includes buttons, forms, icons and much more!
       </Box>
@@ -18,9 +22,18 @@ title: Kitchen Sink
         direction={{ base: "column", md: "row" }}
       >
         <Box w={{ base: "100%", md: "75%" }}>
-          <Text>
+          <Text
+            fontSize="md"
+            _dark={{ color: "coolGray.400" }}
+            _light={{ color: "coolGray.700" }}
+          >
             <Text>Scan with the </Text>
-            <Image alt="expo icon" mb="-1" size="5" source={{ uri: "/img/expo-icon.svg" }} />
+            <Image
+              alt="expo icon"
+              mb="-1"
+              size="5"
+              source={{ uri: "/img/expo-icon.svg" }}
+            />
             <Text>
               {" "}
               Expo app on your Android device to see the special dish we cooked for
diff --git a/docs/next/kitchen-sink.mdx b/docs/next/kitchen-sink.mdx
index 39c084203..b7650d782 100644
--- a/docs/next/kitchen-sink.mdx
+++ b/docs/next/kitchen-sink.mdx
@@ -6,7 +6,11 @@ title: Kitchen Sink
 <Box>
   <Box m="0">
     <Box p="0" mb="12">
-      <Box>
+      <Box
+        _text={{ fontSize: "md" }}
+        _dark={{ _text: { color: "coolGray.400" } }}
+        _light={{ _text: { color: "coolGray.700" } }}
+      >
         Kitchen Sink is a comprehensive demo app showcasing all the NativeBase
         components in action. It includes buttons, forms, icons and much more!
       </Box>
@@ -18,9 +22,18 @@ title: Kitchen Sink
         direction={{ base: "column", md: "row" }}
       >
         <Box w={{ base: "100%", md: "75%" }}>
-          <Text>
+          <Text
+            fontSize="md"
+            _dark={{ color: "coolGray.400" }}
+            _light={{ color: "coolGray.700" }}
+          >
             <Text>Scan with the </Text>
-            <Image alt="expo icon" mb="-1" size="5" source={{ uri: "/img/expo-icon.svg" }} />
+            <Image
+              alt="expo icon"
+              mb="-1"
+              size="5"
+              source={{ uri: "/img/expo-icon.svg" }}
+            />
             <Text>
               {" "}
               Expo app on your Android device to see the special dish we cooked for

From 6a43b667e87ab6d552ef826c34e8f30f17c1c971 Mon Sep 17 00:00:00 2001
From: amars29 <amars@geekyants>
Date: Wed, 17 Aug 2022 19:52:24 +0530
Subject: [PATCH 07/12] fix: actionsheet migration: removed repeated word

---
 docs/3.0.x/migration/action-sheet.md | 14 +++++++-------
 docs/3.1.x/migration/action-sheet.md | 14 +++++++-------
 docs/3.2.x/migration/action-sheet.md | 14 +++++++-------
 docs/3.3.x/migration/action-sheet.md | 14 +++++++-------
 docs/3.4.x/migration/action-sheet.md | 14 +++++++-------
 docs/next/migration/action-sheet.md  | 14 +++++++-------
 6 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/docs/3.0.x/migration/action-sheet.md b/docs/3.0.x/migration/action-sheet.md
index 86d49e720..d20c28299 100644
--- a/docs/3.0.x/migration/action-sheet.md
+++ b/docs/3.0.x/migration/action-sheet.md
@@ -10,7 +10,7 @@ We have sliced [`Actionsheet`](/action-sheet) into multiple smaller component wh
 Migrating Checkbox components can broadly described in these points:
 
 - **options** (prop) → `Actionsheet.Item` (component).
-- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need.
+- Props like **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need.
 - **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title.
 - Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`.
 
@@ -25,7 +25,7 @@ values={[
 <DocTabItem value="v2">
 
 ```tsx
-import React, { Component } from 'react';
+import React, { Component } from "react";
 import {
   Container,
   Header,
@@ -33,8 +33,8 @@ import {
   Content,
   ActionSheet,
   Text,
-} from 'native-base';
-var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel'];
+} from "native-base";
+var BUTTONS = ["Option 1", "Option 2", "Option 3", "Delete", "Cancel"];
 var DESTRUCTIVE_INDEX = 3;
 var CANCEL_INDEX = 4;
 export default class ActionSheetExample extends Component {
@@ -53,7 +53,7 @@ export default class ActionSheetExample extends Component {
                   options: BUTTONS,
                   cancelButtonIndex: CANCEL_INDEX,
                   destructiveButtonIndex: DESTRUCTIVE_INDEX,
-                  title: 'Header',
+                  title: "Header",
                 },
                 (buttonIndex) => {
                   this.setState({ clicked: BUTTONS[buttonIndex] });
@@ -74,8 +74,8 @@ export default class ActionSheetExample extends Component {
 <DocTabItem value="v3">
 
 ```tsx
-import React from 'react';
-import { Button, Actionsheet, useDisclose } from 'native-base';
+import React from "react";
+import { Button, Actionsheet, useDisclose } from "native-base";
 
 export default function () {
   const { isOpen, onOpen, onClose } = useDisclose();
diff --git a/docs/3.1.x/migration/action-sheet.md b/docs/3.1.x/migration/action-sheet.md
index 86d49e720..d20c28299 100644
--- a/docs/3.1.x/migration/action-sheet.md
+++ b/docs/3.1.x/migration/action-sheet.md
@@ -10,7 +10,7 @@ We have sliced [`Actionsheet`](/action-sheet) into multiple smaller component wh
 Migrating Checkbox components can broadly described in these points:
 
 - **options** (prop) → `Actionsheet.Item` (component).
-- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need.
+- Props like **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need.
 - **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title.
 - Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`.
 
@@ -25,7 +25,7 @@ values={[
 <DocTabItem value="v2">
 
 ```tsx
-import React, { Component } from 'react';
+import React, { Component } from "react";
 import {
   Container,
   Header,
@@ -33,8 +33,8 @@ import {
   Content,
   ActionSheet,
   Text,
-} from 'native-base';
-var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel'];
+} from "native-base";
+var BUTTONS = ["Option 1", "Option 2", "Option 3", "Delete", "Cancel"];
 var DESTRUCTIVE_INDEX = 3;
 var CANCEL_INDEX = 4;
 export default class ActionSheetExample extends Component {
@@ -53,7 +53,7 @@ export default class ActionSheetExample extends Component {
                   options: BUTTONS,
                   cancelButtonIndex: CANCEL_INDEX,
                   destructiveButtonIndex: DESTRUCTIVE_INDEX,
-                  title: 'Header',
+                  title: "Header",
                 },
                 (buttonIndex) => {
                   this.setState({ clicked: BUTTONS[buttonIndex] });
@@ -74,8 +74,8 @@ export default class ActionSheetExample extends Component {
 <DocTabItem value="v3">
 
 ```tsx
-import React from 'react';
-import { Button, Actionsheet, useDisclose } from 'native-base';
+import React from "react";
+import { Button, Actionsheet, useDisclose } from "native-base";
 
 export default function () {
   const { isOpen, onOpen, onClose } = useDisclose();
diff --git a/docs/3.2.x/migration/action-sheet.md b/docs/3.2.x/migration/action-sheet.md
index 86d49e720..d20c28299 100644
--- a/docs/3.2.x/migration/action-sheet.md
+++ b/docs/3.2.x/migration/action-sheet.md
@@ -10,7 +10,7 @@ We have sliced [`Actionsheet`](/action-sheet) into multiple smaller component wh
 Migrating Checkbox components can broadly described in these points:
 
 - **options** (prop) → `Actionsheet.Item` (component).
-- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need.
+- Props like **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need.
 - **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title.
 - Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`.
 
@@ -25,7 +25,7 @@ values={[
 <DocTabItem value="v2">
 
 ```tsx
-import React, { Component } from 'react';
+import React, { Component } from "react";
 import {
   Container,
   Header,
@@ -33,8 +33,8 @@ import {
   Content,
   ActionSheet,
   Text,
-} from 'native-base';
-var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel'];
+} from "native-base";
+var BUTTONS = ["Option 1", "Option 2", "Option 3", "Delete", "Cancel"];
 var DESTRUCTIVE_INDEX = 3;
 var CANCEL_INDEX = 4;
 export default class ActionSheetExample extends Component {
@@ -53,7 +53,7 @@ export default class ActionSheetExample extends Component {
                   options: BUTTONS,
                   cancelButtonIndex: CANCEL_INDEX,
                   destructiveButtonIndex: DESTRUCTIVE_INDEX,
-                  title: 'Header',
+                  title: "Header",
                 },
                 (buttonIndex) => {
                   this.setState({ clicked: BUTTONS[buttonIndex] });
@@ -74,8 +74,8 @@ export default class ActionSheetExample extends Component {
 <DocTabItem value="v3">
 
 ```tsx
-import React from 'react';
-import { Button, Actionsheet, useDisclose } from 'native-base';
+import React from "react";
+import { Button, Actionsheet, useDisclose } from "native-base";
 
 export default function () {
   const { isOpen, onOpen, onClose } = useDisclose();
diff --git a/docs/3.3.x/migration/action-sheet.md b/docs/3.3.x/migration/action-sheet.md
index 86d49e720..d20c28299 100644
--- a/docs/3.3.x/migration/action-sheet.md
+++ b/docs/3.3.x/migration/action-sheet.md
@@ -10,7 +10,7 @@ We have sliced [`Actionsheet`](/action-sheet) into multiple smaller component wh
 Migrating Checkbox components can broadly described in these points:
 
 - **options** (prop) → `Actionsheet.Item` (component).
-- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need.
+- Props like **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need.
 - **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title.
 - Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`.
 
@@ -25,7 +25,7 @@ values={[
 <DocTabItem value="v2">
 
 ```tsx
-import React, { Component } from 'react';
+import React, { Component } from "react";
 import {
   Container,
   Header,
@@ -33,8 +33,8 @@ import {
   Content,
   ActionSheet,
   Text,
-} from 'native-base';
-var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel'];
+} from "native-base";
+var BUTTONS = ["Option 1", "Option 2", "Option 3", "Delete", "Cancel"];
 var DESTRUCTIVE_INDEX = 3;
 var CANCEL_INDEX = 4;
 export default class ActionSheetExample extends Component {
@@ -53,7 +53,7 @@ export default class ActionSheetExample extends Component {
                   options: BUTTONS,
                   cancelButtonIndex: CANCEL_INDEX,
                   destructiveButtonIndex: DESTRUCTIVE_INDEX,
-                  title: 'Header',
+                  title: "Header",
                 },
                 (buttonIndex) => {
                   this.setState({ clicked: BUTTONS[buttonIndex] });
@@ -74,8 +74,8 @@ export default class ActionSheetExample extends Component {
 <DocTabItem value="v3">
 
 ```tsx
-import React from 'react';
-import { Button, Actionsheet, useDisclose } from 'native-base';
+import React from "react";
+import { Button, Actionsheet, useDisclose } from "native-base";
 
 export default function () {
   const { isOpen, onOpen, onClose } = useDisclose();
diff --git a/docs/3.4.x/migration/action-sheet.md b/docs/3.4.x/migration/action-sheet.md
index 86d49e720..d20c28299 100644
--- a/docs/3.4.x/migration/action-sheet.md
+++ b/docs/3.4.x/migration/action-sheet.md
@@ -10,7 +10,7 @@ We have sliced [`Actionsheet`](/action-sheet) into multiple smaller component wh
 Migrating Checkbox components can broadly described in these points:
 
 - **options** (prop) → `Actionsheet.Item` (component).
-- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need.
+- Props like **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need.
 - **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title.
 - Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`.
 
@@ -25,7 +25,7 @@ values={[
 <DocTabItem value="v2">
 
 ```tsx
-import React, { Component } from 'react';
+import React, { Component } from "react";
 import {
   Container,
   Header,
@@ -33,8 +33,8 @@ import {
   Content,
   ActionSheet,
   Text,
-} from 'native-base';
-var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel'];
+} from "native-base";
+var BUTTONS = ["Option 1", "Option 2", "Option 3", "Delete", "Cancel"];
 var DESTRUCTIVE_INDEX = 3;
 var CANCEL_INDEX = 4;
 export default class ActionSheetExample extends Component {
@@ -53,7 +53,7 @@ export default class ActionSheetExample extends Component {
                   options: BUTTONS,
                   cancelButtonIndex: CANCEL_INDEX,
                   destructiveButtonIndex: DESTRUCTIVE_INDEX,
-                  title: 'Header',
+                  title: "Header",
                 },
                 (buttonIndex) => {
                   this.setState({ clicked: BUTTONS[buttonIndex] });
@@ -74,8 +74,8 @@ export default class ActionSheetExample extends Component {
 <DocTabItem value="v3">
 
 ```tsx
-import React from 'react';
-import { Button, Actionsheet, useDisclose } from 'native-base';
+import React from "react";
+import { Button, Actionsheet, useDisclose } from "native-base";
 
 export default function () {
   const { isOpen, onOpen, onClose } = useDisclose();
diff --git a/docs/next/migration/action-sheet.md b/docs/next/migration/action-sheet.md
index 86d49e720..d20c28299 100644
--- a/docs/next/migration/action-sheet.md
+++ b/docs/next/migration/action-sheet.md
@@ -10,7 +10,7 @@ We have sliced [`Actionsheet`](/action-sheet) into multiple smaller component wh
 Migrating Checkbox components can broadly described in these points:
 
 - **options** (prop) → `Actionsheet.Item` (component).
-- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need.
+- Props like **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need.
 - **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title.
 - Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`.
 
@@ -25,7 +25,7 @@ values={[
 <DocTabItem value="v2">
 
 ```tsx
-import React, { Component } from 'react';
+import React, { Component } from "react";
 import {
   Container,
   Header,
@@ -33,8 +33,8 @@ import {
   Content,
   ActionSheet,
   Text,
-} from 'native-base';
-var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel'];
+} from "native-base";
+var BUTTONS = ["Option 1", "Option 2", "Option 3", "Delete", "Cancel"];
 var DESTRUCTIVE_INDEX = 3;
 var CANCEL_INDEX = 4;
 export default class ActionSheetExample extends Component {
@@ -53,7 +53,7 @@ export default class ActionSheetExample extends Component {
                   options: BUTTONS,
                   cancelButtonIndex: CANCEL_INDEX,
                   destructiveButtonIndex: DESTRUCTIVE_INDEX,
-                  title: 'Header',
+                  title: "Header",
                 },
                 (buttonIndex) => {
                   this.setState({ clicked: BUTTONS[buttonIndex] });
@@ -74,8 +74,8 @@ export default class ActionSheetExample extends Component {
 <DocTabItem value="v3">
 
 ```tsx
-import React from 'react';
-import { Button, Actionsheet, useDisclose } from 'native-base';
+import React from "react";
+import { Button, Actionsheet, useDisclose } from "native-base";
 
 export default function () {
   const { isOpen, onOpen, onClose } = useDisclose();

From 753cb1d7311106f194440db66132b194f07d730e Mon Sep 17 00:00:00 2001
From: amars29 <amars@geekyants>
Date: Thu, 18 Aug 2022 10:30:41 +0530
Subject: [PATCH 08/12] update: content changes in migration button

---
 docs/3.0.x/migration/button.md | 2 +-
 docs/3.1.x/migration/button.md | 2 +-
 docs/3.2.x/migration/button.md | 2 +-
 docs/3.3.x/migration/button.md | 2 +-
 docs/3.4.x/migration/button.md | 2 +-
 docs/next/migration/button.md  | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/3.0.x/migration/button.md b/docs/3.0.x/migration/button.md
index 7214bbc66..e09244c3c 100644
--- a/docs/3.0.x/migration/button.md
+++ b/docs/3.0.x/migration/button.md
@@ -16,7 +16,7 @@ Migrating Button components can broadly described in these points:
 - Colors of the Buttons:
   In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props.
 - Design of the Button:
-  With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation.
+  With v3 we're providing some most frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation.
 - Sizes of the Button:
   In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values.
 
diff --git a/docs/3.1.x/migration/button.md b/docs/3.1.x/migration/button.md
index 7214bbc66..e09244c3c 100644
--- a/docs/3.1.x/migration/button.md
+++ b/docs/3.1.x/migration/button.md
@@ -16,7 +16,7 @@ Migrating Button components can broadly described in these points:
 - Colors of the Buttons:
   In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props.
 - Design of the Button:
-  With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation.
+  With v3 we're providing some most frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation.
 - Sizes of the Button:
   In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values.
 
diff --git a/docs/3.2.x/migration/button.md b/docs/3.2.x/migration/button.md
index 7214bbc66..e09244c3c 100644
--- a/docs/3.2.x/migration/button.md
+++ b/docs/3.2.x/migration/button.md
@@ -16,7 +16,7 @@ Migrating Button components can broadly described in these points:
 - Colors of the Buttons:
   In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props.
 - Design of the Button:
-  With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation.
+  With v3 we're providing some most frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation.
 - Sizes of the Button:
   In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values.
 
diff --git a/docs/3.3.x/migration/button.md b/docs/3.3.x/migration/button.md
index 7214bbc66..e09244c3c 100644
--- a/docs/3.3.x/migration/button.md
+++ b/docs/3.3.x/migration/button.md
@@ -16,7 +16,7 @@ Migrating Button components can broadly described in these points:
 - Colors of the Buttons:
   In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props.
 - Design of the Button:
-  With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation.
+  With v3 we're providing some most frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation.
 - Sizes of the Button:
   In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values.
 
diff --git a/docs/3.4.x/migration/button.md b/docs/3.4.x/migration/button.md
index 7214bbc66..e09244c3c 100644
--- a/docs/3.4.x/migration/button.md
+++ b/docs/3.4.x/migration/button.md
@@ -16,7 +16,7 @@ Migrating Button components can broadly described in these points:
 - Colors of the Buttons:
   In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props.
 - Design of the Button:
-  With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation.
+  With v3 we're providing some most frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation.
 - Sizes of the Button:
   In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values.
 
diff --git a/docs/next/migration/button.md b/docs/next/migration/button.md
index 7214bbc66..e09244c3c 100644
--- a/docs/next/migration/button.md
+++ b/docs/next/migration/button.md
@@ -16,7 +16,7 @@ Migrating Button components can broadly described in these points:
 - Colors of the Buttons:
   In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props.
 - Design of the Button:
-  With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation.
+  With v3 we're providing some most frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation.
 - Sizes of the Button:
   In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values.
 

From 3a41064b04c508d791ba9a580b2662a120ad6b80 Mon Sep 17 00:00:00 2001
From: amars29 <amars@geekyants>
Date: Thu, 18 Aug 2022 10:46:48 +0530
Subject: [PATCH 09/12] content update in migation fab

---
 docs/3.0.x/migration/fab.md | 12 ++++++------
 docs/3.1.x/migration/fab.md | 12 ++++++------
 docs/3.2.x/migration/fab.md | 12 ++++++------
 docs/3.3.x/migration/fab.md | 12 ++++++------
 docs/3.4.x/migration/fab.md | 12 ++++++------
 docs/next/migration/fab.md  | 12 ++++++------
 6 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/docs/3.0.x/migration/fab.md b/docs/3.0.x/migration/fab.md
index 183cc1b57..3d4f698f6 100644
--- a/docs/3.0.x/migration/fab.md
+++ b/docs/3.0.x/migration/fab.md
@@ -2,7 +2,7 @@ Migrating [`FAB`](/fab) to v3 will provide a lot more **design**, **size**, **co
 
 ## Overview
 
-Migrating Badge components can broadly described in these points:
+Migrating Fab components can broadly described in these points:
 
 - Instead of Passing Icon as child, use `icon` prop.
 
@@ -17,8 +17,8 @@ values={[
 <DocTabItem value="v2">
 
 ```tsx
-import React, { Component } from 'react';
-import { Container, Header, View, Icon, Fab } from 'native-base';
+import React, { Component } from "react";
+import { Container, Header, View, Icon, Fab } from "native-base";
 export default function () {
   return (
     <Container>
@@ -26,7 +26,7 @@ export default function () {
       <View style={{ flex: 1 }}>
         <Fab
           direction="up"
-          style={{ backgroundColor: '#5067FF' }}
+          style={{ backgroundColor: "#5067FF" }}
           position="bottomRight"
         >
           <Icon name="share" />
@@ -41,8 +41,8 @@ export default function () {
 <DocTabItem value="v3">
 
 ```tsx
-import React from 'react';
-import { Fab, Icon } from 'native-base';
+import React from "react";
+import { Fab, Icon } from "native-base";
 
 export default function () {
   return (
diff --git a/docs/3.1.x/migration/fab.md b/docs/3.1.x/migration/fab.md
index 183cc1b57..3d4f698f6 100644
--- a/docs/3.1.x/migration/fab.md
+++ b/docs/3.1.x/migration/fab.md
@@ -2,7 +2,7 @@ Migrating [`FAB`](/fab) to v3 will provide a lot more **design**, **size**, **co
 
 ## Overview
 
-Migrating Badge components can broadly described in these points:
+Migrating Fab components can broadly described in these points:
 
 - Instead of Passing Icon as child, use `icon` prop.
 
@@ -17,8 +17,8 @@ values={[
 <DocTabItem value="v2">
 
 ```tsx
-import React, { Component } from 'react';
-import { Container, Header, View, Icon, Fab } from 'native-base';
+import React, { Component } from "react";
+import { Container, Header, View, Icon, Fab } from "native-base";
 export default function () {
   return (
     <Container>
@@ -26,7 +26,7 @@ export default function () {
       <View style={{ flex: 1 }}>
         <Fab
           direction="up"
-          style={{ backgroundColor: '#5067FF' }}
+          style={{ backgroundColor: "#5067FF" }}
           position="bottomRight"
         >
           <Icon name="share" />
@@ -41,8 +41,8 @@ export default function () {
 <DocTabItem value="v3">
 
 ```tsx
-import React from 'react';
-import { Fab, Icon } from 'native-base';
+import React from "react";
+import { Fab, Icon } from "native-base";
 
 export default function () {
   return (
diff --git a/docs/3.2.x/migration/fab.md b/docs/3.2.x/migration/fab.md
index 183cc1b57..3d4f698f6 100644
--- a/docs/3.2.x/migration/fab.md
+++ b/docs/3.2.x/migration/fab.md
@@ -2,7 +2,7 @@ Migrating [`FAB`](/fab) to v3 will provide a lot more **design**, **size**, **co
 
 ## Overview
 
-Migrating Badge components can broadly described in these points:
+Migrating Fab components can broadly described in these points:
 
 - Instead of Passing Icon as child, use `icon` prop.
 
@@ -17,8 +17,8 @@ values={[
 <DocTabItem value="v2">
 
 ```tsx
-import React, { Component } from 'react';
-import { Container, Header, View, Icon, Fab } from 'native-base';
+import React, { Component } from "react";
+import { Container, Header, View, Icon, Fab } from "native-base";
 export default function () {
   return (
     <Container>
@@ -26,7 +26,7 @@ export default function () {
       <View style={{ flex: 1 }}>
         <Fab
           direction="up"
-          style={{ backgroundColor: '#5067FF' }}
+          style={{ backgroundColor: "#5067FF" }}
           position="bottomRight"
         >
           <Icon name="share" />
@@ -41,8 +41,8 @@ export default function () {
 <DocTabItem value="v3">
 
 ```tsx
-import React from 'react';
-import { Fab, Icon } from 'native-base';
+import React from "react";
+import { Fab, Icon } from "native-base";
 
 export default function () {
   return (
diff --git a/docs/3.3.x/migration/fab.md b/docs/3.3.x/migration/fab.md
index 183cc1b57..3d4f698f6 100644
--- a/docs/3.3.x/migration/fab.md
+++ b/docs/3.3.x/migration/fab.md
@@ -2,7 +2,7 @@ Migrating [`FAB`](/fab) to v3 will provide a lot more **design**, **size**, **co
 
 ## Overview
 
-Migrating Badge components can broadly described in these points:
+Migrating Fab components can broadly described in these points:
 
 - Instead of Passing Icon as child, use `icon` prop.
 
@@ -17,8 +17,8 @@ values={[
 <DocTabItem value="v2">
 
 ```tsx
-import React, { Component } from 'react';
-import { Container, Header, View, Icon, Fab } from 'native-base';
+import React, { Component } from "react";
+import { Container, Header, View, Icon, Fab } from "native-base";
 export default function () {
   return (
     <Container>
@@ -26,7 +26,7 @@ export default function () {
       <View style={{ flex: 1 }}>
         <Fab
           direction="up"
-          style={{ backgroundColor: '#5067FF' }}
+          style={{ backgroundColor: "#5067FF" }}
           position="bottomRight"
         >
           <Icon name="share" />
@@ -41,8 +41,8 @@ export default function () {
 <DocTabItem value="v3">
 
 ```tsx
-import React from 'react';
-import { Fab, Icon } from 'native-base';
+import React from "react";
+import { Fab, Icon } from "native-base";
 
 export default function () {
   return (
diff --git a/docs/3.4.x/migration/fab.md b/docs/3.4.x/migration/fab.md
index 183cc1b57..3d4f698f6 100644
--- a/docs/3.4.x/migration/fab.md
+++ b/docs/3.4.x/migration/fab.md
@@ -2,7 +2,7 @@ Migrating [`FAB`](/fab) to v3 will provide a lot more **design**, **size**, **co
 
 ## Overview
 
-Migrating Badge components can broadly described in these points:
+Migrating Fab components can broadly described in these points:
 
 - Instead of Passing Icon as child, use `icon` prop.
 
@@ -17,8 +17,8 @@ values={[
 <DocTabItem value="v2">
 
 ```tsx
-import React, { Component } from 'react';
-import { Container, Header, View, Icon, Fab } from 'native-base';
+import React, { Component } from "react";
+import { Container, Header, View, Icon, Fab } from "native-base";
 export default function () {
   return (
     <Container>
@@ -26,7 +26,7 @@ export default function () {
       <View style={{ flex: 1 }}>
         <Fab
           direction="up"
-          style={{ backgroundColor: '#5067FF' }}
+          style={{ backgroundColor: "#5067FF" }}
           position="bottomRight"
         >
           <Icon name="share" />
@@ -41,8 +41,8 @@ export default function () {
 <DocTabItem value="v3">
 
 ```tsx
-import React from 'react';
-import { Fab, Icon } from 'native-base';
+import React from "react";
+import { Fab, Icon } from "native-base";
 
 export default function () {
   return (
diff --git a/docs/next/migration/fab.md b/docs/next/migration/fab.md
index 183cc1b57..3d4f698f6 100644
--- a/docs/next/migration/fab.md
+++ b/docs/next/migration/fab.md
@@ -2,7 +2,7 @@ Migrating [`FAB`](/fab) to v3 will provide a lot more **design**, **size**, **co
 
 ## Overview
 
-Migrating Badge components can broadly described in these points:
+Migrating Fab components can broadly described in these points:
 
 - Instead of Passing Icon as child, use `icon` prop.
 
@@ -17,8 +17,8 @@ values={[
 <DocTabItem value="v2">
 
 ```tsx
-import React, { Component } from 'react';
-import { Container, Header, View, Icon, Fab } from 'native-base';
+import React, { Component } from "react";
+import { Container, Header, View, Icon, Fab } from "native-base";
 export default function () {
   return (
     <Container>
@@ -26,7 +26,7 @@ export default function () {
       <View style={{ flex: 1 }}>
         <Fab
           direction="up"
-          style={{ backgroundColor: '#5067FF' }}
+          style={{ backgroundColor: "#5067FF" }}
           position="bottomRight"
         >
           <Icon name="share" />
@@ -41,8 +41,8 @@ export default function () {
 <DocTabItem value="v3">
 
 ```tsx
-import React from 'react';
-import { Fab, Icon } from 'native-base';
+import React from "react";
+import { Fab, Icon } from "native-base";
 
 export default function () {
   return (

From aecd94c681052a96f26be1caccbf4f13acacd936 Mon Sep 17 00:00:00 2001
From: amars29 <amars@geekyants>
Date: Thu, 18 Aug 2022 12:00:30 +0530
Subject: [PATCH 10/12] updated colors for DocTabs label in light mode

---
 src/components/Tabs/Tabs.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index 34e1fa907..51ae424ed 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Pressable, Text } from "native-base";
+import { Box, Pressable, Text, useColorModeValue } from "native-base";
 import { DocTabContext } from "./TabContext";
 
 export const DocTabs = ({ children, values, defaultValue }: any) => {
@@ -10,6 +10,7 @@ export const DocTabs = ({ children, values, defaultValue }: any) => {
   React.useEffect(() => {
     setSelected(defaultValue);
   }, []);
+  const textColor = useColorModeValue("black", "white");
   return (
     // @ts-ignore
     <DocTabContext.Provider value={{ selected, setSelected }}>
@@ -18,7 +19,10 @@ export const DocTabs = ({ children, values, defaultValue }: any) => {
           return (
             <Pressable
               key={"Tab-" + index}
-              _hover={{ bg: "coolGray.700:alpha.40" }}
+              _hover={{
+                _light: { bg: "coolGray.400:alpha.40" },
+                _dark: { bg: "coolGray.700:alpha.40" },
+              }}
               onPress={() => onPressHandler(index)}
               justifyContent={"center"}
               alignItems="center"
@@ -35,7 +39,7 @@ export const DocTabs = ({ children, values, defaultValue }: any) => {
               <Text
                 color={
                   selected !== values[index].value
-                    ? "white"
+                    ? textColor
                     : "SelectedTabTextColor"
                 }
               >

From 324683ee4eddfb0e4f6722fa30ba1eb81bc3db53 Mon Sep 17 00:00:00 2001
From: amars29 <amars@geekyants>
Date: Thu, 18 Aug 2022 14:04:41 +0530
Subject: [PATCH 11/12] fix: searchbar example

---
 docs/3.2.x/building-search-bar.md | 15 +++++++--------
 docs/3.3.x/building-search-bar.md |  9 ++++-----
 docs/3.4.x/building-app-bar.md    | 10 +++++-----
 docs/3.4.x/building-search-bar.md |  9 ++++-----
 docs/next/building-search-bar.md  |  9 ++++-----
 5 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/docs/3.2.x/building-search-bar.md b/docs/3.2.x/building-search-bar.md
index b01c8f850..bbcaf7672 100644
--- a/docs/3.2.x/building-search-bar.md
+++ b/docs/3.2.x/building-search-bar.md
@@ -13,7 +13,7 @@ Here are some examples to show how easily and quickly we can create so many type
 ![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4c4662d-8a9c-48a2-817d-000ff8f5f6b6/Screenshot_2021-01-18_at_7.51.08_PM.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4c4662d-8a9c-48a2-817d-000ff8f5f6b6/Screenshot_2021-01-18_at_7.51.08_PM.png) -->
 
 ```jsx isLive
-import React from 'react';
+import React from "react";
 import {
   VStack,
   Input,
@@ -26,9 +26,9 @@ import {
   Box,
   Divider,
   Heading,
-} from 'native-base';
-import { Ionicons, MaterialIcons } from '@expo/vector-icons';
-import { FontAwesome5 } from '@expo/vector-icons';
+} from "native-base";
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import { FontAwesome5 } from "@expo/vector-icons";
 
 function SearchBar() {
   return (
@@ -52,10 +52,9 @@ function SearchBar() {
           py="1"
           px="2"
           placeholderTextColor="gray.500"
-          _hover={{ bg: 'gray.200', borderWidth: 0 }}
-          borderWidth="0"
+          _hover={{ bg: "gray.200", borderWidth: 0 }}
           _web={{
-            _focus: { style: { boxShadow: 'none' } },
+            _focus: { style: { boxShadow: "none" } },
           }}
           InputLeftElement={
             <Icon
@@ -79,7 +78,7 @@ function SearchBar() {
           px="1"
           fontSize="14"
           _web={{
-            _focus: { borderColor: 'muted.300', style: { boxShadow: 'none' } },
+            _focus: { borderColor: "muted.300", style: { boxShadow: "none" } },
           }}
           InputLeftElement={
             <Icon
diff --git a/docs/3.3.x/building-search-bar.md b/docs/3.3.x/building-search-bar.md
index 5167b1387..1f3e0732c 100644
--- a/docs/3.3.x/building-search-bar.md
+++ b/docs/3.3.x/building-search-bar.md
@@ -13,7 +13,7 @@ Here are some examples to show how easily and quickly we can create so many type
 ![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4c4662d-8a9c-48a2-817d-000ff8f5f6b6/Screenshot_2021-01-18_at_7.51.08_PM.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4c4662d-8a9c-48a2-817d-000ff8f5f6b6/Screenshot_2021-01-18_at_7.51.08_PM.png) -->
 
 ```jsx isLive=true
-import React from 'react';
+import React from "react";
 import {
   VStack,
   Input,
@@ -26,9 +26,9 @@ import {
   Box,
   Divider,
   Heading,
-} from 'native-base';
-import { Ionicons, MaterialIcons } from '@expo/vector-icons';
-import { FontAwesome5 } from '@expo/vector-icons';
+} from "native-base";
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import { FontAwesome5 } from "@expo/vector-icons";
 
 function SearchBar() {
   return (
@@ -52,7 +52,6 @@ function SearchBar() {
           borderRadius="10"
           py="1"
           px="2"
-          borderWidth="0"
           InputLeftElement={
             <Icon
               ml="2"
diff --git a/docs/3.4.x/building-app-bar.md b/docs/3.4.x/building-app-bar.md
index 619b618ab..b3e13bd5d 100644
--- a/docs/3.4.x/building-app-bar.md
+++ b/docs/3.4.x/building-app-bar.md
@@ -10,7 +10,7 @@ The top app bar provides content and actions related to the current screen. It
 We can easily create it using basic layout components from NativeBase.
 
 ```jsx isLive=true
-import React from 'react';
+import React from "react";
 import {
   VStack,
   HStack,
@@ -22,16 +22,16 @@ import {
   Center,
   Box,
   StatusBar,
-} from 'native-base';
-import { MaterialIcons } from '@expo/vector-icons';
+} from "native-base";
+import { MaterialIcons } from "@expo/vector-icons";
 
 function AppBar() {
   return (
     <>
       <StatusBar bg="#3700B3" barStyle="light-content" />
-      <Box safeAreaTop bg="#6200ee" />
+      <Box safeAreaTop bg="violet.600" />
       <HStack
-        bg="#6200ee"
+        bg="violet.800"
         px="1"
         py="3"
         justifyContent="space-between"
diff --git a/docs/3.4.x/building-search-bar.md b/docs/3.4.x/building-search-bar.md
index 5167b1387..1f3e0732c 100644
--- a/docs/3.4.x/building-search-bar.md
+++ b/docs/3.4.x/building-search-bar.md
@@ -13,7 +13,7 @@ Here are some examples to show how easily and quickly we can create so many type
 ![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4c4662d-8a9c-48a2-817d-000ff8f5f6b6/Screenshot_2021-01-18_at_7.51.08_PM.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4c4662d-8a9c-48a2-817d-000ff8f5f6b6/Screenshot_2021-01-18_at_7.51.08_PM.png) -->
 
 ```jsx isLive=true
-import React from 'react';
+import React from "react";
 import {
   VStack,
   Input,
@@ -26,9 +26,9 @@ import {
   Box,
   Divider,
   Heading,
-} from 'native-base';
-import { Ionicons, MaterialIcons } from '@expo/vector-icons';
-import { FontAwesome5 } from '@expo/vector-icons';
+} from "native-base";
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import { FontAwesome5 } from "@expo/vector-icons";
 
 function SearchBar() {
   return (
@@ -52,7 +52,6 @@ function SearchBar() {
           borderRadius="10"
           py="1"
           px="2"
-          borderWidth="0"
           InputLeftElement={
             <Icon
               ml="2"
diff --git a/docs/next/building-search-bar.md b/docs/next/building-search-bar.md
index 5167b1387..1f3e0732c 100644
--- a/docs/next/building-search-bar.md
+++ b/docs/next/building-search-bar.md
@@ -13,7 +13,7 @@ Here are some examples to show how easily and quickly we can create so many type
 ![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4c4662d-8a9c-48a2-817d-000ff8f5f6b6/Screenshot_2021-01-18_at_7.51.08_PM.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4c4662d-8a9c-48a2-817d-000ff8f5f6b6/Screenshot_2021-01-18_at_7.51.08_PM.png) -->
 
 ```jsx isLive=true
-import React from 'react';
+import React from "react";
 import {
   VStack,
   Input,
@@ -26,9 +26,9 @@ import {
   Box,
   Divider,
   Heading,
-} from 'native-base';
-import { Ionicons, MaterialIcons } from '@expo/vector-icons';
-import { FontAwesome5 } from '@expo/vector-icons';
+} from "native-base";
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import { FontAwesome5 } from "@expo/vector-icons";
 
 function SearchBar() {
   return (
@@ -52,7 +52,6 @@ function SearchBar() {
           borderRadius="10"
           py="1"
           px="2"
-          borderWidth="0"
           InputLeftElement={
             <Icon
               ml="2"

From d32906ffef5444a3047a5af7ddae443d6234b9f9 Mon Sep 17 00:00:00 2001
From: Rohit Singh <rohit99.ind@gmail.com>
Date: Mon, 22 Aug 2022 16:09:05 +0530
Subject: [PATCH 12/12] fix: background color

---
 docs/next/building-app-bar.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/next/building-app-bar.md b/docs/next/building-app-bar.md
index 619b618ab..0787f0fad 100644
--- a/docs/next/building-app-bar.md
+++ b/docs/next/building-app-bar.md
@@ -10,7 +10,7 @@ The top app bar provides content and actions related to the current screen. It
 We can easily create it using basic layout components from NativeBase.
 
 ```jsx isLive=true
-import React from 'react';
+import React from "react";
 import {
   VStack,
   HStack,
@@ -22,16 +22,16 @@ import {
   Center,
   Box,
   StatusBar,
-} from 'native-base';
-import { MaterialIcons } from '@expo/vector-icons';
+} from "native-base";
+import { MaterialIcons } from "@expo/vector-icons";
 
 function AppBar() {
   return (
     <>
       <StatusBar bg="#3700B3" barStyle="light-content" />
-      <Box safeAreaTop bg="#6200ee" />
+      <Box safeAreaTop bg="violet.600" />
       <HStack
-        bg="#6200ee"
+        bg="violet.600"
         px="1"
         py="3"
         justifyContent="space-between"