GeekyAnts · rayan1810 · Oct 27, 2022 · Sep 2, 2022 · Sep 2, 2022 · Sep 9, 2022
diff --git a/docs.config.js b/docs.config.js
@@ -10,7 +10,7 @@ module.exports = {
     "3.1.x": "3.1.0",
     "3.2.x": "3.2.2",
     "3.3.x": "3.3.10",
-    "3.4.x": "3.4.11",
+    "3.4.x": "3.4.19",
   },
   componentOfTheWeek: {
     switch: "https://www.youtube.com/embed/VGUhi8IQHDw",

diff --git a/docs/3.0.x/accessibility.md b/docs/3.0.x/accessibility.md
@@ -7,18 +7,18 @@ NativeBase comes with the latest accessibility standards out of the box includin
 
 ## Accessible Roles
 
-NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implements [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform.
+NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implement [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform.
 
 ## Accessible Labels
 
 When a view is marked as accessible, it is a good practice to set an `accessibilityLabel` on the view, so that people who use voice-over know what element they have selected. Voice-over will read this string when a user selects the associated element. NativeBase with the use of [React Native ARIA](https://www.notion.so/Accessibility-83852d7c4b094e69a3e4f1047994bd1c) does this for you out of the box.
 
 ## Keyboard Navigation
 
-Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/).
+Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/).
 
 ## Focus Management
 
 Proper keyboard navigation and good labelling often go hand-in-hand with managing focus. When a user interacts with a component and something changes as a result, it's often helpful to move focus with the interaction. And for screen reader users, moving focus often results in an announcement to convey the new context, which relies on proper labelling.
 
-In many NativeBase Components, we move focus based on the interactions a user normally takes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt.
+In many NativeBase Components, we move focus based on the interactions a user normally makes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt.
diff --git a/docs/3.0.x/alert-dialog.md b/docs/3.0.x/alert-dialog.md
@@ -9,10 +9,10 @@ import { ComponentTheme } from '../../src/components';
 
 ## Import
 
-- `AlertDialog`: provides context and state for the dialog.
-- `AlertDialog.Header`: contains the title announced by screen readers.
-- `AlertDialog.Body`: contains the description announced by screen readers.
-- `AlertDialog.Footer`: contains the actions of the dialog.
+- `AlertDialog`: Provides context and state for the dialog.
+- `AlertDialog.Header`: Contains the title announced by screen readers.
+- `AlertDialog.Body`: Contains the description announced by screen readers.
+- `AlertDialog.Footer`: Contains the actions of the dialog.
 - `AlertDialog.Content`: The wrapper for the alert dialog's content.
 - `AlertDialog.CloseButton`: The button that closes the dialog.
 
@@ -135,7 +135,7 @@ AlertDialog and its components compose the **[Modal](/modal)** component, so all
 
 ## Accessibility
 
-Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog)
+Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#alertdialog)
 
 ### Keyboard Interactions
 

diff --git a/docs/3.0.x/box.md b/docs/3.0.x/box.md
@@ -25,7 +25,7 @@ This is a generic component for low level layout needs. It is similar to a [`div
 
 ### With Linear gradient
 
-If you're using [Expo](https://docs.expo.io/) managed or bare workflow, you can install [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) and configure it in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below.
+If you're using [Expo](https://docs.expo.dev/index.html) managed or bare workflow, you can install [expo-linear-gradient](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) and configure it in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below.
 
 ```jsx isLive=true
 import React from 'react';

diff --git a/docs/3.0.x/building-drawer-navigation.md b/docs/3.0.x/building-drawer-navigation.md
@@ -10,13 +10,13 @@ Common pattern in navigation is to use drawer from left (sometimes right) side f
 Here is an example to show how easily and quickly we can use React Native's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB.
 
 ```jsx isSnackPlayer name="Building Drawer Navigation"
-import * as React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
+import * as React from "react";
+import { NavigationContainer } from "@react-navigation/native";
 import {
   createDrawerNavigator,
   DrawerContentScrollView,
-} from '@react-navigation/drawer';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
+} from "@react-navigation/drawer";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import {
   NativeBaseProvider,
   Button,
@@ -30,7 +30,8 @@ import {
   HStack,
   Divider,
   Icon,
-} from 'native-base';
+} from "native-base";
+global.__reanimatedWorkletInit = () => {};
 const Drawer = createDrawerNavigator();
 function Component(props) {
   return (
@@ -52,18 +53,18 @@ function Component(props) {
 
 const getIcon = (screenName) => {
   switch (screenName) {
-    case 'Inbox':
-      return 'email';
-    case 'Outbox':
-      return 'send';
-    case 'Favorites':
-      return 'heart';
-    case 'Archive':
-      return 'archive';
-    case 'Trash':
-      return 'trash-can';
-    case 'Spam':
-      return 'alert-circle';
+    case "Inbox":
+      return "email";
+    case "Outbox":
+      return "send";
+    case "Favorites":
+      return "heart";
+    case "Archive":
+      return "archive";
+    case "Trash":
+      return "trash-can";
+    case "Spam":
+      return "alert-circle";
     default:
       return undefined;
   }
@@ -90,8 +91,8 @@ function CustomDrawerContent(props) {
                 rounded="md"
                 bg={
                   index === props.state.index
-                    ? 'rgba(6, 182, 212, 0.1)'
-                    : 'transparent'
+                    ? "rgba(6, 182, 212, 0.1)"
+                    : "transparent"
                 }
                 onPress={(event) => {
                   props.navigation.navigate(name);
@@ -100,15 +101,15 @@ function CustomDrawerContent(props) {
                 <HStack space={7} alignItems="center">
                   <Icon
                     color={
-                      index === props.state.index ? 'primary.500' : 'gray.500'
+                      index === props.state.index ? "primary.500" : "gray.500"
                     }
                     size={5}
                     as={<MaterialCommunityIcons name={getIcon(name)} />}
                   />
                   <Text
                     fontWeight={500}
                     color={
-                      index === props.state.index ? 'primary.500' : 'gray.700'
+                      index === props.state.index ? "primary.500" : "gray.700"
                     }
                   >
                     {name}

diff --git a/docs/3.0.x/building-footer-tabs.md b/docs/3.0.x/building-footer-tabs.md
@@ -32,7 +32,7 @@ export function Example() {
   return (
     <NativeBaseProvider>
       <Box flex={1} bg="white" safeAreaTop>
-        <Center flex={1}></Center>
+           
         <HStack bg="primary.500" alignItems="center" safeAreaBottom shadow={6}>
           <Pressable
             cursor="pointer"

diff --git a/docs/3.0.x/button.mdx b/docs/3.0.x/button.mdx
@@ -80,5 +80,5 @@ import { Button, ButtonGroup } from 'native-base';
 
 ## Accessibility
 
-- Button has `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button).
+- Button has `role` set to [button](https://www.w3.org/WAI/ARIA/apg/#button).
 - When Button has focus, Space or Enter activates it.
diff --git a/docs/3.0.x/center.md b/docs/3.0.x/center.md
@@ -35,7 +35,7 @@ Center can be used to nicely position icons in the center and add frames around
 
 ### Square and Circle
 
-Square and Circle automatically centers their children.
+Square and Circle automatically center their children.
 
 ```ComponentSnackPlayer path=composites,Center,SquareCircle.tsx
 

diff --git a/docs/3.0.x/changelog.md b/docs/3.0.x/changelog.md
@@ -33,23 +33,23 @@ title: Changelog
 
 - Fixed Radio Size issue on happening on iOS and Android. [#3913](https://github.com/GeekyAnts/NativeBase/pull/3913)
 
-For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.7).
+For more details, visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.7).
 
 ## V3.0.6
 
 ## Minor fix
 
 - Spinner visibility issue fixed
 
-For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.6).
+For more details, visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.6).
 
 ## V3.0.5
 
 ## Minor fix
 
 - Fixed bold and italics issue in typography
 
-For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.5).
+For more details, visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.5).
 
 ## V3.0.4
 
@@ -75,7 +75,7 @@ For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/relea
 
 - Fix custom fonts not working on android for some cases [#3821](https://github.com/GeekyAnts/NativeBase/pull/3821)
 
-For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.4).
+For more details, visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.4).
 
 ## V3.0.3
 
@@ -105,23 +105,23 @@ For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/relea
 
 - Button type fixes
 
-For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.3).
+For more details, visit[releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.3).
 
 ## V3.0.2
 
 ## Version bump
 
 - Version bumped from v3.0.1 to v3.0.2
 
-For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.2).
+For more details, visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.2).
 
 ## V3.0.1
 
 ## Image link fixes in README.md
 
 - Images are working in NPM
 
-For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.1).
+For more details, visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.1).
 
 ## V3.0.0
 
@@ -137,4 +137,4 @@ For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/relea
 
 - Fixed Text component to accept strikeThrough and underline
 
-For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.0).
+For more details, visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.0).
diff --git a/docs/3.0.x/checkbox.md b/docs/3.0.x/checkbox.md
@@ -95,7 +95,7 @@ The `Checkbox` component is used in forms when a user needs to select multiple v
 
 ## Accessibility
 
-Uses React Native ARIA [@react-native-aria/checkbox](https://react-native-aria.geekyants.com/docs/useCheckbox) which follows the [Checkbox WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#checkbox).
+Uses React Native ARIA [@react-native-aria/checkbox](https://react-native-aria.geekyants.com/docs/useCheckbox) which follows the [Checkbox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/#checkbox).
 
 ### Keyboard Interactions
 

diff --git a/docs/3.0.x/contribution.md b/docs/3.0.x/contribution.md
@@ -15,7 +15,7 @@ All work on NativeBase happens directly on [GitHub](https://github.com/GeekyAnt
 
 ### Branch Organization
 
-According to our [release schedule](https://github.com/GeekyAnts/NativeBase/releases), we maintain a `canary` branch for all the external PR's which is like a development branch with latest changes. If you send a pull request, please do it against the this `canary` branch. Once a release candidate is ready, `canary` branch will be released as a rc release package and once a stable release test is done it will be released to `native-base` package.
+According to our [release schedule](https://github.com/GeekyAnts/NativeBase/releases), we maintain `canary` branch for all the external PR's which is like a development branch with latest changes. If you send a pull request, please do it against the this `canary` branch. Once a release candidate is ready, `canary` branch will be released as a rc release package and once a stable release test is done it will be released to `native-base` package.
 
 ![Screenshot 2022-02-07 at 1 27 46 PM](https://user-images.githubusercontent.com/62810976/161559404-c2e9064c-ae62-4395-92d9-9ddba2781d7a.png)
 

diff --git a/docs/3.0.x/customizing-components.md b/docs/3.0.x/customizing-components.md
@@ -46,7 +46,7 @@ export default function () {
 
 As shown above, we can customize components by passing the **components** object with the **key** being the **name** of the **component**. Whereas you set `defaultProps` or `baseStyle` to customize the components.
 
-### Difference between baseStyle and defaultProps?
+### Difference between baseStyle and defaultProps
 
 #### Base Style
 
@@ -58,7 +58,7 @@ Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3
 #### Default Props
 
 - Default props can be used to initialize props of a component.
-- For e.g. You have a Button component and it has 2 variants. i.e. outline, solid. You can use it like.
+- For e.g. You have a Button component and it has 2 variants. i.e. outline, solid. 
 
 Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3-pre-beta/src/theme/components/button.ts#L201)
 

diff --git a/docs/3.0.x/customizing-fonts.md b/docs/3.0.x/customizing-fonts.md
@@ -9,7 +9,7 @@ Follow 3 simple steps to add a custom font family.
 
 [Refer this guide if you're using Expo](https://docs.expo.io/guides/using-custom-fonts/)
 
-[Refer this guide if you're using React Native init](https://medium.com/@aravindmnair/add-custom-fonts-to-react-native-0-60-easily-in-3-steps-fcd71459f4c9)
+[Refer this guide if you're using React Native init](https://aravindmnair.medium.com/add-custom-fonts-to-react-native-0-60-easily-in-3-steps-fcd71459f4c9)
 
 ### Extend NativeBase theme object.
 

diff --git a/docs/3.0.x/customizing-theme.md b/docs/3.0.x/customizing-theme.md
@@ -5,7 +5,7 @@ title: Customising Theme
 
 import { NativeBaseProvider, Box } from 'native-base';
 
-Theme is one core elements of NativeBase. You can customize NativeBase's theme as per your liking. NativeBase theme is complex object which looks like
+The Theme is one of the core elements of NativeBase. You can customize NativeBase's theme as per your liking. NativeBase theme is a complex object. Here is what it looks like.
 
 ```tsx
 // theme
@@ -20,7 +20,7 @@ Theme is one core elements of NativeBase. You can customize NativeBase's theme a
 }
 ```
 
-It has many [other properties](default-theme) but in this recipe, we'll only update few of them (namely colors, fonts, and config) using NativeBase's `extendTheme` function.
+It has many [other properties](default-theme) but in this recipe, we will update only a few of them (namely colors, fonts, and config) using NativeBase's `extendTheme` function.
 
 ```tsx
 import React from 'react';
@@ -65,9 +65,9 @@ export default function () {
 In the above example, the following changes have been made:
 
 - Added a new color named **primary**.
-- Updated one of the shade of **amber** color.
+- Updated one of the shades of **amber** color.
 - Updated the initial color mode to **dark**. Default is **light**.
-- Finally passed the new **theme** object to the **NativeBaseProvider**.
+- Passed the new **theme** object to the **NativeBaseProvider**.
 
 ### Using the new tokens in components
 

diff --git a/docs/3.0.x/dark-mode.md b/docs/3.0.x/dark-mode.md
@@ -1,9 +1,9 @@
 ---
 id: darkMode
-title: Making components dark mode compatible
+title: Making Components Dark Mode Compatible
 ---
 
-By default, most of NativeBase's components are dark mode compatible. In some scenario, you might need to make your component respond to color mode. There are 2 way to achieve this:
+By default, most of NativeBase's components are dark mode compatible. In some scenario, you might need to make your component respond to color mode. There are 2 ways to achieve this:
 
 1. By updating component's theme
 2. By using useColorModeValue

diff --git a/docs/3.0.x/default-theme.md b/docs/3.0.x/default-theme.md
@@ -11,7 +11,7 @@ Theming in NativeBase is based on the **[Styled System Theme Specification](htt
 
 ## Colors
 
-You can add a `theme.colors` object to provide colors for your project. By default these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc.. props.
+You can add a `theme.colors` object to provide colors for your project. By default, these colors can be referenced by the  `color`, `borderColor`, `backgroundColor`, etc. props.
 
 We recommend adding a palette that ranges from `50` to `900`. Tools like **[Smart Swatch](https://smart-swatch.netlify.app/)**, **[Palx](https://palx.jxnblk.com/)** are available to generate these palettes.
 

diff --git a/docs/3.0.x/design-tokens.md b/docs/3.0.x/design-tokens.md
@@ -5,7 +5,7 @@ title: Design tokens
 
 Design tokens are the values or constants needed to construct a design system. These values can represent spacing, color, typography etc. Design tokens help to achieve consistency in building user interfaces across all platforms.
 
-Let's take an example by defining a space and color design tokens.
+Let's take an example by defining a space and color design token.
 
 ```jsx title="colors"
 const colors = {
@@ -64,6 +64,6 @@ The above Box will be translated to
 <View style={{ marginTop: 16, backgroundColor: 'cyan.500' }} />
 ```
 
-With NativeBase, you can create your own design system. NativeBase follows [styled-system's specification](https://styled-system.com/theme-specification/) to construct design system.
+With NativeBase, you can create your own design system. NativeBase follows the [styled-system's specification](https://styled-system.com/theme-specification/) to construct design systems.
 
 Checkout the **[default NativeBase theme](default-theme)** and how to customize it **[here](customizingTheme)**.
diff --git a/docs/3.0.x/divider.md b/docs/3.0.x/divider.md
@@ -27,7 +27,7 @@ The Divider displays a thin horizontal or vertical line.
 
 Pass the `orientation` prop and set it to either `horizontal` or `vertical`.
 
-> **Note:** If the horizontal orientation is used, make sure that the parent element is assigned a width and If the vertical orientation is used, make sure that the parent element is assigned a height.
+> **Note:** If the horizontal orientation is used, make sure that the parent element is assigned a width. If the vertical orientation is used, make sure that the parent element is assigned a height.
 
 ```ComponentSnackPlayer path=composites,Divider,Orientation.tsx
 

diff --git a/docs/3.0.x/flex.md b/docs/3.0.x/flex.md
@@ -16,7 +16,7 @@ import { Flex, Spacer } from 'native-base';
 
 ## Usage
 
-Flex components comes with some helpful shorthand props:
+Flex components come with some helpful shorthand props:
 
 - `flexDirection` is `direction`
 - `flexWrap` is `wrap`

diff --git a/docs/3.0.x/icon-button.md b/docs/3.0.x/icon-button.md
@@ -5,7 +5,7 @@ title: IconButton
 
 import { ComponentTheme } from '../../src/components';
 
-`IconButton` composes the `Button` component. It is generally used to make an Icon pressable.
+`IconButton` consists of the `Button` component. It is generally used to make an Icon pressable.
 
 ## Examples
 
@@ -40,4 +40,4 @@ import { ComponentTheme } from '../../src/components';
 ## Accessibility
 
 - Use accessibilityLabel for labelling icon buttons to make sure it's announced by screen reader devices.
-- IconButton has a `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button).
+- IconButton has a `role` set to [button](https://www.w3.org/WAI/ARIA/apg/#button).