Merge pull request #32 from GeekyAnts/releases/3.0.7

Releases/3.0.7

Author: Ajamuar

docs/form.md

@@ -125,7 +125,7 @@ export default function () {
 
 Create a button to validate and submit the form.
 
-```SnackPlayer name=Form%20Example(Validate and Submit)
+```SnackPlayer name=Form%20Example(Validate%20and%20Submit)
 import React from 'react';
 import {
   VStack,
@@ -196,4 +196,4 @@ export default function () {
 
 ## Community Integration
 
-NativeBase can be used with other popular Form libraries like [`Formik`](nativebase-formik-ui.md) and [`React Hook Forms`](reactHooksForm.md) as well. For more details checkout Community Integration section of the docs.
+NativeBase can be used with other popular Form libraries like [`Formik`](nativebase-formik-ui.md) and [`React Hook Forms`](reactHooksForms.md) as well. For more details checkout Community Integration section of the docs.

docs/install-cra.mdx

@@ -57,19 +57,22 @@ cd my-app
   ]}>
 
   <TabItem value="yarn">
+<div style={{maxWidth:"750px"}}>
 
 ```bash
 yarn add react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context
 ```
-
+</div>
   </TabItem>
 
   <TabItem value="npm">
+<div style={{maxWidth:"750px"}}>
 
 ```bash
 npm install react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context
 ```
 
+</div>
   </TabItem>
 
   </Tabs>

docs/loginsignupforms.md

@@ -31,6 +31,7 @@ export default function App() {
  return (
       <NativeBaseProvider>
       <Box
+        safeArea
         flex={1}
         p={2}
         w="90%"
@@ -140,6 +141,7 @@ export default function App() {
  return (
       <NativeBaseProvider>
       <Box
+        safeArea
         flex={1}
         p={2}
         w="90%"

nb-plugins/component-snackplayer/index.js

@@ -18,7 +18,7 @@ const processNode = (node, parent) => {
   return new Promise(async (resolve, reject) => {
     try {
       const params = parseParams(node.meta);
-      const NBversion = '3.0.6';
+      const NBversion = '3.0.7';
       // Gather necessary Params
       let name = params.name ? decodeURIComponent(params.name) : 'Example';
       const description = params.description
@@ -52,7 +52,6 @@ const processNode = (node, parent) => {
             data-snack-preview="${preview}"
             data-snack-loading="${loading}"
             data-snack-dependencies="${dependencies}"
-            data-snack-sdkversion="40.0.0"
           ></div>
           `,
       });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docs-v-2",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -35,7 +35,7 @@
     "clsx": "^1.1.1",
     "dedent": "^0.7.0",
     "docusaurus-tailwindcss-loader": "file:plugins/docusaurus-tailwindcss-loader",
-    "native-base": "^3.0.6",
+    "native-base": "^3.0.7",
     "object.fromentries": "^2.0.3",
     "patch-package": "^6.4.7",
     "postcss": "^7.0.34",

remark-snackplayer/index.js

@@ -32,7 +32,7 @@ const processNode = (node, parent) => {
     try {
       const params = parseParams(node.meta);
       const simplifedMeta = simplifyMeta(node.meta);
-      const NBversion = '3.0.6';
+      const NBversion = '3.0.7';
       // Gather necessary Params
       let name = simplifedMeta.name
         ? decodeURIComponent(simplifedMeta.name)
@@ -51,7 +51,7 @@ const processNode = (node, parent) => {
       // Generate Node for SnackPlayer
       let dependencies = `react-is,expo-font,native-base@${NBversion},styled-system,expo-constants,react-native-web,react-native-safe-area-context,react-native-svg,styled-components,@expo/vector-icons,expo-linear-gradient`;
       dependencies = `${dependencies},${
-        simplifedMeta.dependencies ? simplifedMeta.dependencies : ''
+        simplifedMeta.dependencies ? simplifedMeta.dependencies : null
       }`;
 
       if (name.split(' ')[0] === 'Formik') {

docs/Kbd.md unreleased-docs/Kbd.md

@@ -78,12 +78,12 @@ export default function () {
 
 ### AppBar.Left
 
-Implements [`HStack`](hStack.md), all the props of HStack can be passed.
+Implements [`HStack`](hStack.md) , all the props of HStack can be passed.
 
 ### AppBar.Content
 
-Implements [`HStack`](hStack.md), all the props of HStack can be passed.
+Implements [`HStack`](hStack.md) , all the props of HStack can be passed.
 
 ### AppBar.Right
 
-Implements [`HStack`](hStack.md), all the props of HStack can be passed.
+Implements [`HStack`](hStack.md) , all the props of HStack can be passed.

docs/accordion.md unreleased-docs/accordion.md

@@ -45,7 +45,7 @@ function Component() {
       <Image
         resizeMode="cover"
         source={{
-          uri: "https://nativebase.io/img/icon.png",
+          uri: "https://alpha.nativebase.io/img/icon.png",
         }}
       />
     </AspectRatio>

docs/appBar.md unreleased-docs/appBar.md

@@ -37,7 +37,7 @@ function BreadcrumbComponent () {
           <Breadcrumb.Link>Home (This is currently active)</Breadcrumb.Link>
         </Breadcrumb.Item>
         <Breadcrumb.Item>
-          <Breadcrumb.Link href="https://nativebase.io/" isExternal>
+          <Breadcrumb.Link href="https://alpha.nativebase.io/" isExternal>
             Docs
           </Breadcrumb.Link>
         </Breadcrumb.Item>
@@ -90,7 +90,7 @@ function BreadcrumbComponent () {
           <Breadcrumb.Link>Home (This is currently active)</Breadcrumb.Link>
         </Breadcrumb.Item>
         <Breadcrumb.Item>
-          <Breadcrumb.Link href="https://nativebase.io/" isExternal>
+          <Breadcrumb.Link href="https://alpha.nativebase.io/" isExternal>
             Docs
           </Breadcrumb.Link>
         </Breadcrumb.Item>
@@ -138,7 +138,7 @@ function BreadcrumbComponent () {
           <Breadcrumb.Link>Home (This is currently active)</Breadcrumb.Link>
         </Breadcrumb.Item>
         <Breadcrumb.Item>
-          <Breadcrumb.Link href="https://nativebase.io/" isExternal>
+          <Breadcrumb.Link href="https://alpha.nativebase.io/" isExternal>
             Docs
           </Breadcrumb.Link>
         </Breadcrumb.Item>
@@ -186,7 +186,7 @@ function BreadcrumbComponent () {
           </Breadcrumb.Link>
         </Breadcrumb.Item>
         <Breadcrumb.Item>
-          <Breadcrumb.Link href="https://nativebase.io/" isExternal>
+          <Breadcrumb.Link href="https://alpha.nativebase.io/" isExternal>
             <HStack>
               <Icon name="file-document" type="MaterialCommunityIcons" mr={1} />
               <Text>Docs</Text>

docs/aspectRatio.md unreleased-docs/aspectRatio.md

@@ -0,0 +1,4 @@
+---
+id: interaction-styles
+title: Adding pressed, hover and focus styles
+---

docs/breadCrumb.md unreleased-docs/breadCrumb.md

@@ -0,0 +1,54 @@
+---
+id: view
+title: View
+---
+
+A generic [`View`](https://reactnative.dev/docs/view) from [React Native](https://reactnative.dev/docs/view)
+
+## Implements
+
+- [`View`](https://reactnative.dev/docs/view) from [`React Native`](https://reactnative.dev)
+- [`color`](https://styled-system.com/api/#color), [`space`](https://styled-system.com/api/#space), [`layout`](https://styled-system.com/api/#layout), [`flexbox`](https://styled-system.com/api/#flexbox), [`position`](https://styled-system.com/api/#flexbox) & [`border`](https://styled-system.com/api/#border) from [`style-system`](https://styled-system.com/)
+
+## Example
+
+### Basic
+
+```SnackPlayer name=View%20Example
+import React from "react";
+import { Text, VStack, NativeBaseProvider, View, Center } from "native-base";
+
+function ViewComponent() {
+  return (
+    <View
+      size={48}
+      bg="emerald.400"
+      justifyContent="center"
+      alignItems="center"
+      rounded="md"
+    >
+      <Text color="white">This is a View</Text>
+    </View>
+  );
+}
+
+// Example template which wraps component with NativeBaseProvider
+export default function () {
+  return (
+    <NativeBaseProvider>
+      <Center flex={1}>
+        <ViewComponent />
+      </Center>
+    </NativeBaseProvider>
+  );
+}
+```
+
+## Props
+
+| Name          | Type                                     | Description                                                                           | Default |
+| ------------- | ---------------------------------------- | ------------------------------------------------------------------------------------- | ------- |
+| shadow        | number                                   | Applies box shadow and accepts a number from 0 to 9                                   | -       |
+| style         | stylesheet                               | Applies user-defined styles and accepts a stylesheet.                                 | -       |
+| children      | JSX.Element                              | Renders components as Box children. Accepts a JSX.Element or an array of JSX.Element. | -       |
+| SafeAreaProps | [SafeAreaProps](safe-area-view-props.md) | Renders components as Box children. Accepts a JSX.Element or an array of JSX.Element. | -       |

docs/cascader.md unreleased-docs/cascader.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
+
+```

docs/circularProgress.md unreleased-docs/circularProgress.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
+
+```

docs/closeButton.md unreleased-docs/closeButton.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
+
+```

docs/code.md unreleased-docs/code.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.