Version 3.2.2

docs/FAB.md

@@ -17,19 +17,19 @@ import { Fab } from 'native-base';
 
 ### Basic
 
-```ComponentSnackPlayer path=composites,Fab,Basic.tsx
+```ComponentSnackPlayer path=components,composites,Fab,Basic.tsx
 
 ```
 
 ### Placement
 
-```ComponentSnackPlayer path=composites,Fab,Placement.tsx
+```ComponentSnackPlayer path=components,composites,Fab,Placement.tsx
 
 ```
 
 ### Custom Position
 
-```ComponentSnackPlayer path=composites,Fab,CustomPosition.tsx
+```ComponentSnackPlayer path=components,composites,Fab,CustomPosition.tsx
 
 ```
 

docs/VStack.md

@@ -13,7 +13,7 @@ import { VStack } from 'native-base';
 
 ## Usage
 
-```ComponentSnackPlayer path=primitives,VStack,basic.tsx
+```ComponentSnackPlayer path=components,primitives,VStack,basic.tsx
 
 ```
 

docs/ZStack.md

@@ -9,15 +9,15 @@ title: ZStack
 
 ### Basic
 
-```ComponentSnackPlayer path=primitives,ZStack,example.tsx
+```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=primitives,ZStack,CenterStack.tsx
+```ComponentSnackPlayer path=components,primitives,ZStack,CenterStack.tsx
 
 ```
 

docs/actionSheet.md

@@ -23,25 +23,25 @@ import { Actionsheet } from 'native-base';
 
 ### Usage
 
-```ComponentSnackPlayer path=composites,Actionsheet,Usage.tsx
+```ComponentSnackPlayer path=components,composites,Actionsheet,Usage.tsx
 
 ```
 
 ### Composition
 
-```ComponentSnackPlayer path=composites,Actionsheet,Composition.tsx
+```ComponentSnackPlayer path=components,composites,Actionsheet,Composition.tsx
 
 ```
 
 ### DisableOverlay
 
-```ComponentSnackPlayer path=composites,Actionsheet,DisableOverlay.tsx
+```ComponentSnackPlayer path=components,composites,Actionsheet,DisableOverlay.tsx
 
 ```
 
 ### Icons
 
-```ComponentSnackPlayer path=composites,Actionsheet,Icon.tsx
+```ComponentSnackPlayer path=components,composites,Actionsheet,Icon.tsx
 
 ```
 

docs/alert.md

@@ -13,8 +13,8 @@ NativeBase exports 5 Alert related components:
 
 - `Alert`: The wrapper for alert components.
 - `Alert.Icon`: The visual icon for the alert that changes based on the `status` prop.
-<!-- - `Alert.Title`: The title of the alert to be announced by screen readers. -->
-<!-- - `Alert.Description`: The description of the alert to be announced by screen readers. -->
+  <!-- - `Alert.Title`: The title of the alert to be announced by screen readers. -->
+  <!-- - `Alert.Description`: The description of the alert to be announced by screen readers. -->
 
 ```jsx
 import { Alert } from 'native-base';
@@ -24,31 +24,31 @@ import { Alert } from 'native-base';
 
 ### Basic
 
-```ComponentSnackPlayer path=composites,Alert,usage.tsx
+```ComponentSnackPlayer path=components,composites,Alert,usage.tsx
 
 ```
 
 ### Status
 
-```ComponentSnackPlayer path=composites,Alert,status.tsx
+```ComponentSnackPlayer path=components,composites,Alert,status.tsx
 
 ```
 
 ### Variant
 
-```ComponentSnackPlayer path=composites,Alert,variant.tsx
+```ComponentSnackPlayer path=components,composites,Alert,variant.tsx
 
 ```
 
 ### Composition
 
-```ComponentSnackPlayer path=composites,Alert,composition.tsx
+```ComponentSnackPlayer path=components,composites,Alert,composition.tsx
 
 ```
 
 ### Action
 
-```ComponentSnackPlayer path=composites,Alert,action.tsx
+```ComponentSnackPlayer path=components,composites,Alert,action.tsx
 
 ```
 

docs/alertDialog.md

@@ -24,7 +24,7 @@ import { AlertDialog } from 'native-base';
 
 ### Basic
 
-```ComponentSnackPlayer path=composites,AlertDialog,Basic.tsx
+```ComponentSnackPlayer path=components,composites,AlertDialog,Basic.tsx
 
 ```
 
@@ -40,7 +40,6 @@ AlertDialog and its components compose the **[Modal](modal.md)** component, so a
 | ------------------- | --------- | -------------------------------------------------------------- | ------- |
 | leastDestructiveRef | React.Ref | The least destructive action to get focus when dialog is open. | -       |
 
-
 ## Accessibility
 
 Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog)
@@ -54,5 +53,3 @@ Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.
 | Tab         | Moves focus to the next focusable element.                |
 | Shift + Tab | Moves focus to the previous focusable element.            |
 | Esc         | Closes the dialog and moves focus to AlertDialog.Trigger. |
-
-

docs/appDrawer.md

@@ -3,13 +3,13 @@ id: app-drawer
 title: App drawer
 ---
 
-Creating an app drawer like layout is very common and with NativeBase's SimpleGrid make this extremely simple while still keeping it extremely customisable. Here is an example to illustrate it.
+Creating an app drawer like layout is very common using FlatList. Here is an example to illustrate it.
 
 ```SnackPlayer name=AppDrawer
 import React from 'react';
 import {
   IconButton,
-  SimpleGrid,
+  FlatList,
   Icon,
   NativeBaseProvider,
   Box,
@@ -41,19 +41,22 @@ function AppDrawer() {
   ];
 
   return (
-    <SimpleGrid columns={4} spacingY={8} spacingX={4}>
-      {icons.map((icon) => (
-        <IconButton
-          borderRadius="full"
-          bg={icon.bg}
-          variant="solid"
-          p="3"
-          icon={
-            <Icon color="white" name={icon.name} as={MaterialIcons} size="sm" />
-          }
-        />
-      ))}
-    </SimpleGrid>
+   <FlatList numColumns={4} m={"-8px"}
+      data={icons}
+      renderItem={({item}) => {
+        return (
+          <IconButton
+            m={'8px'}
+            borderRadius="full"
+            bg={item.bg}
+            variant="solid"
+            p="3"
+            icon={
+              <Icon color="white" name={item.name} as={MaterialIcons} size="sm" />
+            }
+          />
+        )
+    }} />
   );
 }
 

docs/avatar.md

@@ -23,31 +23,31 @@ import { Avatar } from 'native-base';
 
 ### Basic
 
-```ComponentSnackPlayer path=composites,Avatar,usage.tsx
+```ComponentSnackPlayer path=components,composites,Avatar,usage.tsx
 
 ```
 
 ### Sizes
 
-```ComponentSnackPlayer path=composites,Avatar,size.tsx
+```ComponentSnackPlayer path=components,composites,Avatar,size.tsx
 
 ```
 
 ### Fallbacks
 
-```ComponentSnackPlayer path=composites,Avatar,Fallback.tsx
+```ComponentSnackPlayer path=components,composites,Avatar,Fallback.tsx
 
 ```
 
 ### Avatar Badge
 
-```ComponentSnackPlayer path=composites,Avatar,AvatarBadge.tsx
+```ComponentSnackPlayer path=components,composites,Avatar,AvatarBadge.tsx
 
 ```
 
 ### Avatar Group
 
-```ComponentSnackPlayer path=composites,Avatar,AvatarGroup.tsx
+```ComponentSnackPlayer path=components,composites,Avatar,AvatarGroup.tsx
 
 ```
 

docs/badge.md

@@ -17,25 +17,25 @@ import { Badge } from 'native-base';
 
 ### Basic
 
-```ComponentSnackPlayer path=composites,Badge,usage.tsx
+```ComponentSnackPlayer path=components,composites,Badge,usage.tsx
 
 ```
 
 ### Color Scheme
 
-```ComponentSnackPlayer path=composites,Badge,color.tsx
+```ComponentSnackPlayer path=components,composites,Badge,color.tsx
 
 ```
 
 ### Variants
 
-```ComponentSnackPlayer path=composites,Badge,variants.tsx
+```ComponentSnackPlayer path=components,composites,Badge,variants.tsx
 
 ```
 
 ### Composition
 
-```ComponentSnackPlayer path=composites,Badge,composition.tsx
+```ComponentSnackPlayer path=components,composites,Badge,composition.tsx
 
 ```
 

docs/box.md

@@ -9,15 +9,15 @@ This is a generic component for low level layout needs. It is similar to a [`div
 
 ### Basic
 
-```ComponentSnackPlayer path=primitives,Box,basic.tsx
+```ComponentSnackPlayer path=components,primitives,Box,basic.tsx
 
 ```
 
 <br/>
 
 ### Composition
 
-```ComponentSnackPlayer path=primitives,Box,composition.tsx
+```ComponentSnackPlayer path=components,primitives,Box,composition.tsx
 
 ```
 
@@ -118,7 +118,7 @@ export default () => {
 
 ### Basic (With Ref)
 
-```ComponentSnackPlayer path=primitives,Box,WithRef.tsx
+```ComponentSnackPlayer path=components,primitives,Box,WithRef.tsx
 
 ```