Latest version docs built

Author: Ajamuar

versioned_docs/version-3.0.4/FAB.md

@@ -0,0 +1,44 @@
+---
+id: FAB
+title: FAB
+---
+
+import { ComponentTheme } from '../../src/components';
+
+A floating action button is a circular icon button that hovers over content to promote a primary action in the application.
+
+## Import
+
+```jsx
+import { Fab } from 'native-base';
+```
+
+## Example
+
+### Basic
+
+```ComponentSnackPlayer path=composites,Fab,Basic.tsx
+
+```
+
+### Placement
+
+```ComponentSnackPlayer path=composites,Fab,Placement.tsx
+
+```
+
+### Custom Position
+
+```ComponentSnackPlayer path=composites,Fab,CustomPosition.tsx
+
+```
+
+## Styling
+
+<ComponentTheme name="fab" componentName="FAB" />
+
+## Props
+
+```ComponentPropTable path=composites,Fab,Fab.tsx
+
+```

versioned_docs/version-3.0.4/Kbd.md

@@ -0,0 +1,54 @@
+---
+id: Kbd
+title: KBD
+---
+
+The keyboard key component exists to show which key or combination of keys performs a given action.
+
+## Implements
+
+- [`Box`](box.md)
+
+## Examples
+
+### Basic
+
+```SnackPlayer name=KBD%20Example
+import React from 'react';
+import { VStack, HStack, Kbd, Text, NativeBaseProvider, Center } from 'native-base';
+
+function KbdComponent () {
+  return (
+    <VStack space={8}>
+      <HStack>
+        <Kbd>shift</Kbd>
+        <Text> + </Text>
+        <Kbd>C</Kbd>
+      </HStack>
+      <HStack>
+        <Kbd>shift</Kbd>
+        <Text> then </Text>
+        <Kbd>H</Kbd>
+      </HStack>
+      <HStack>
+        <Kbd>alt</Kbd>
+        <Text> or </Text>
+        <Kbd>option</Kbd>
+      </HStack>
+    </VStack>
+  );
+}
+export default function () {
+  return (
+    <NativeBaseProvider>
+      <Center flex={1}>
+        <KbdComponent />
+      </Center>
+    </NativeBaseProvider>
+  );
+}
+```
+
+## Props
+
+`Kbd` implements **[Box](box.md)**, so all the Box Props can be passed to it.

versioned_docs/version-3.0.4/VStack.md

@@ -0,0 +1,24 @@
+---
+id: VStack
+title: VStack / Column
+---
+
+`VStack` aligns items vertically.`Column` is also an alias for `VStack`.
+
+## Import
+
+```jsx
+import { VStack } from 'native-base';
+```
+
+## Usage
+
+```ComponentSnackPlayer path=primitives,VStack,basic.tsx
+
+```
+
+## Props
+
+```ComponentPropTable path=primitives,Stack,VStack.tsx
+
+```

versioned_docs/version-3.0.4/ZStack.md

@@ -0,0 +1,23 @@
+`ZStack` aligns items absolutely in the z-axis.
+
+## Examples
+
+### Basic
+
+```ComponentSnackPlayer path=primitives,ZStack,example.tsx
+
+```
+
+### Items Centered
+
+You can pass `alignItems="center"` `justifyContent="center"` to vertically and horizontally center the children.
+
+```ComponentSnackPlayer path=primitives,ZStack,CenterStack.tsx
+
+```
+
+## Props
+
+```ComponentPropTable path=primitives,ZStack,index.tsx
+
+```

versioned_docs/version-3.0.4/accessibility.md

@@ -0,0 +1,24 @@
+---
+id: accessibility
+title: Accessibility
+---
+
+NativeBase comes with the latest accessibility standards out of the box including aria and role attributes, focus management, and keyboard navigation.
+
+## 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.
+
+## 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/).
+
+## 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.