Feat/changelog

docs/changelog.md

@@ -5,28 +5,66 @@ title: Changelog
 
 ## Features
 
-TypeScript enhancement for custom theme tokens and variants - https://github.com/GeekyAnts/NativeBase/pull/4173
+Optimised bundle for tree shaking - [29d6c26](https://github.com/GeekyAnts/NativeBase/commit/29d6c26bf94ef3e610aa19e7289dd904967969aa)
+
+Select component - Added onOpen and onClose props - [3b1722a](https://github.com/GeekyAnts/NativeBase/commit/3b1722a81c78583cf517f4929d76e16f290f01eb)
+
+Updated Skeleton API - [240bec1](https://github.com/GeekyAnts/NativeBase/commit/240bec180fb0890499bfe8f3c4cfe119d3136b77)
+
+Added AspectRatio Component
+
+FlatList component - Added \_contentContainerStyle prop - [f54023a](https://github.com/GeekyAnts/NativeBase/commit/f54023a414a6c46e3612286a37569994177eb02a)
+
+Added support for debug prop in usePropResolution - [6c3ee26](https://github.com/GeekyAnts/NativeBase/commit/6c3ee262334847561b8c86f90e0e4f36697d7ffc)
 
 ## Fixes
 
-Overlay press not closing ActionSheet - https://github.com/GeekyAnts/NativeBase/pull/4112
+Checkbox performance improved - [82286d9](https://github.com/GeekyAnts/NativeBase/commit/82286d992134477a99f320eb067497f89cf633f9)
+
+RadioGroup performance improved - [5915139](https://github.com/GeekyAnts/NativeBase/commit/591513997b45022e96fb2d4c83196f911645b453)
+
+Custom breakpoints not working as expected - [d434219](https://github.com/GeekyAnts/NativeBase/commit/d434219625a724d99b9e60fe800bf7481699b01b)
+
+Input overflow issues fixed - [3294c9f](https://github.com/GeekyAnts/NativeBase/commit/3294c9fc142d1218c95a4ae49a2c4e412ae35601)
+
+Slide performance improved - [08eaabb](https://github.com/GeekyAnts/NativeBase/commit/08eaabb1a21458c7d7b3464b414f5ccf31d0c662)
+
+FormControl disabled on RadioGroup fixed - [5023320](https://github.com/GeekyAnts/NativeBase/commit/5023320d034c835e96753372f45b48b022a5aec7)
+
+Radio disabled issue - [dcad172](https://github.com/GeekyAnts/NativeBase/commit/dcad172ad1413995675c86855a0f365cd5ad91e9)
+
+Exporting unexported types - [2f27a9f](https://github.com/GeekyAnts/NativeBase/commit/2f27a9fc40f3e787b9c033755a12e3689068a3b1)
+
+Input left and right elements in pseudo props - [6ff241f](https://github.com/GeekyAnts/NativeBase/pull/4161)
+
+Memoize Toast - [2833ae9](https://github.com/GeekyAnts/NativeBase/commit/2833ae95ba194fa73b5aabfddc84a0ad57f22e35)
+
+FlatList type issue fixed - [bc275bf](https://github.com/GeekyAnts/NativeBase/commit/bc275bf5a9be81758d4bc5163299f2bb3ab2fc06)
+
+Added none shadow and fixed shadow in advance - [acc9b9f](https://github.com/GeekyAnts/NativeBase/commit/acc9b9fb4fbedaf25ea68a976e20bbf219c0328a)
+
+Fixed Pressable \_disable prop - [9f09be2](https://github.com/GeekyAnts/NativeBase/commit/9f09be2bcc291c4cf833d99e8cba9802870cf1ba)
+
+Fixed duplication for single child - [3fd6974](https://github.com/GeekyAnts/NativeBase/commit/3fd69746f5971e43c781536534e16638d15e6656)
+
+Prop distribution fix - [bfb0872](https://github.com/GeekyAnts/NativeBase/commit/bfb08727a3da06c62b94c6503e5e05d5c3c7e5d3)
 
-Background prop - https://github.com/GeekyAnts/NativeBase/pull/4115
+Fixed useMediaQuery hook - [f9fbca5](https://github.com/GeekyAnts/NativeBase/commit/f9fbca53a9039d470f6d11511a4660a13cc37dbc)
 
-Radio error message when not in Group - https://github.com/GeekyAnts/NativeBase/pull/4117
+Switch toggling issue with value - [e4d5832](https://github.com/GeekyAnts/NativeBase/commit/e4d5832ff553fc41104295e0e7639a184e1c9988)
 
-`theme[\_base.themePropertyMap[property]]` is not a function error - https://github.com/GeekyAnts/NativeBase/pull/4118
+Removed default export - [6d22d79](https://github.com/GeekyAnts/NativeBase/commit/6d22d794a85bfb748cc7fc338e7d09df21dcff59)
 
-Button loading style not working - https://github.com/GeekyAnts/NativeBase/pull/4128
+Added support for textDecorationColor - [c57edfe](https://github.com/GeekyAnts/NativeBase/commit/c57edfee0541beb23febebecdb05e05af5590ae6)
 
-Select component height prop not working - https://github.com/GeekyAnts/NativeBase/pull/4129
+Increased \_loading prop specificity and Button fixes - [4dd3e59](https://github.com/GeekyAnts/NativeBase/commit/4dd3e5973e32f6038002aef85959d4c83a683d1b)
 
-Spinner size prop typings - https://github.com/GeekyAnts/NativeBase/pull/4141
+Fixed internal and state pseudo props resolution - [2dbb886](https://github.com/GeekyAnts/NativeBase/commit/2dbb886191d3f43842c9d028775f79da6f963766)
 
-Replace Clipboard with @react-native-clipboard/clipboard - https://github.com/GeekyAnts/NativeBase/pull/4148
+Fixed images size warnings and zIndex warnings - [159a5eb](https://github.com/GeekyAnts/NativeBase/commit/159a5ebfa6bb2ae90e348998d2b644a495e174dc)
 
-Typing fixes on Stack and Modal - https://github.com/GeekyAnts/NativeBase/pull/4161
+Spinner style props resolution - [bb7db65](https://github.com/GeekyAnts/NativeBase/commit/bb7db6552395adf316a6111965e3a0a05f372967)
 
-Select items appear behind keyboard - https://github.com/GeekyAnts/NativeBase/pull/4163
+Button reacting on \_focusVisible prop - [0ef6fdd](https://github.com/GeekyAnts/NativeBase/commit/0ef6fdd246bf295daef3305526096a8834f32b04)
 
-For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.2.1).
+Added types \_disable, \_loading, \_hover, \_pressed, \_focus, \_spinner - [ae8e095](https://github.com/GeekyAnts/NativeBase/commit/ae8e095808996455cc3f9529c57ecacf3cc19deb)

docs/install-next.mdx

@@ -157,6 +157,7 @@ const withFonts = require('next-fonts');
 const withPlugins = require('next-compose-plugins');
 const withTM = require('next-transpile-modules')([
   'react-native-web',
+  'react-native-svg',
   'native-base',
 ]);
 

docusaurus.config.js

@@ -62,6 +62,7 @@ module.exports = {
     algolia: {
       contextualSearch: true,
       apiKey: '412c1183909b15d3314d018b0b2330ff',
+      indexName: 'nativebase-v3',
       appId: 'QT6M4WLEXP',
     },
     navbar: {

sidebars.js

@@ -52,7 +52,7 @@ module.exports = {
       label: 'Layout',
       collapsed: false,
       items: [
-        // 'aspectRatio',
+        'aspectRatio',
         'box',
         'center',
         'container',

src/css/custom.css

@@ -503,7 +503,8 @@ html[data-theme='dark'] .navbar-small {
 .menu__link[href*='/slider']:after,
 .menu__link[href*='/switch']:after,
 .menu__link[href*='/pressable']:after,
-.menu__link[href*='/checkBox']:after {
+.menu__link[href*='/checkBox']:after,
+.menu__link[href*='/skeleton']:after {
   content: 'Update';
   display: inline-block;
   position: relative;

versioned_docs/version-3.3.0/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=components,composites,Fab,Basic.tsx
+
+```
+
+### Placement
+
+```ComponentSnackPlayer path=components,composites,Fab,Placement.tsx
+
+```
+
+### Custom Position
+
+```ComponentSnackPlayer path=components,composites,Fab,CustomPosition.tsx
+
+```
+
+## Styling
+
+<ComponentTheme name="fab" componentName="FAB" />
+
+## Props
+
+```ComponentPropTable path=composites,Fab,Fab.tsx
+
+```

versioned_docs/version-3.3.0/VStack.md

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

versioned_docs/version-3.3.0/ZStack.md

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

versioned_docs/version-3.3.0/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://react-native-aria.geekyants.com/) 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.

versioned_docs/version-3.3.0/actionSheet.md

@@ -0,0 +1,78 @@
+---
+id: action-sheet
+title: ActionSheet
+---
+
+import { ComponentTheme } from '../../src/components';
+
+An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content.
+
+## Import
+
+NativeBase exports 3 modal-related components:
+
+- **Actionsheet**: Provides the context and state for all components.
+- **Actionsheet.Content**: Component to wrap the list of **Actionsheet.Item** components.
+- **Actionsheet.Item**: A button to wrap the options of the Actionsheet.
+
+```jsx
+import { Actionsheet } from 'native-base';
+```
+
+## Examples
+
+### Usage
+
+```ComponentSnackPlayer path=components,composites,Actionsheet,Usage.tsx
+
+```
+
+### Composition
+
+```ComponentSnackPlayer path=components,composites,Actionsheet,Composition.tsx
+
+```
+
+### DisableOverlay
+
+```ComponentSnackPlayer path=components,composites,Actionsheet,DisableOverlay.tsx
+
+```
+
+### Icons
+
+```ComponentSnackPlayer path=components,composites,Actionsheet,Icon.tsx
+
+```
+
+## Props
+
+### Actionsheet
+
+```ComponentPropTable path=composites,Actionsheet,Actionsheet.tsx
+
+```
+
+### Actionsheet.Content
+
+```ComponentPropTable path=composites,Actionsheet,ActionsheetContent.tsx
+
+```
+
+### Actionsheet.Item
+
+ActionsheetItem implements [Button](button.md#props)
+
+## Styling
+
+<ComponentTheme name="actionsheet" />
+
+## Accessibility
+
+- ActionSheet has `aria-modal` set to true.
+- ActionSheet has `role` set to `dialog`.
+- When the ActionSheet opens, focus is trapped within it.
+- Pressing Esc closes the ActionSheet.
+- When the ActionSheet opens, focus is automatically set to the first enabled element.
+- Clicking on the overlay closes the ActionSheet.
+- Scrolling is blocked on the elements behind the ActionSheet.