Merge pull request #325 from GeekyAnts/staging

Staging

Author: rayan1810

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",

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.

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
 

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';

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}

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"

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.

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
 

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).

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