From b3ec8fa95e50440c07592a816851359ed6263f3a Mon Sep 17 00:00:00 2001
From: amars29 <amars@geekyants>
Date: Mon, 11 Apr 2022 18:15:29 +0530
Subject: [PATCH] updated storybook examples

---
 package.json                                  |   2 +-
 src/nb/NativeBase                             |   2 +-
 src/nb/components/Wrapper.tsx                 |  35 ++++++
 src/nb/components/basic/FlatList/Basic.tsx    |   4 +-
 src/nb/components/basic/ScrollView/Basic.tsx  | 100 +++++++++---------
 .../composites/Actionsheet/Icon.tsx           |  50 +--------
 .../composites/Actionsheet/Usage.tsx          |   2 +-
 src/nb/components/composites/Alert/action.tsx |   3 +-
 src/nb/components/composites/Alert/basic.tsx  |   3 +-
 .../composites/Alert/colorScheme.tsx          |   3 +-
 .../composites/Alert/composition.tsx          |   3 +-
 .../composites/Alert/knobEnabled.tsx          |   6 +-
 src/nb/components/composites/Alert/status.tsx |   3 +-
 src/nb/components/composites/Alert/usage.tsx  |   3 +-
 .../components/composites/Divider/Basic.tsx   |   6 +-
 .../composites/Divider/Orientation.tsx        |  13 ++-
 src/nb/components/composites/Menu/Basic.tsx   |   2 +-
 src/nb/components/composites/Menu/Group.tsx   |   2 +-
 .../composites/Menu/MenuOptionsGroup.tsx      |   2 +-
 .../components/composites/Popover/Basic.tsx   |   2 +-
 .../composites/Popover/PopoverPositions.tsx   |   2 +-
 .../components/composites/Popover/RefEg.tsx   |   2 +-
 src/nb/components/primitives/Input/Basic.tsx  |   2 +-
 .../primitives/Input/Controlled.tsx           |   3 +-
 src/nb/components/primitives/Input/Masked.tsx |   3 +-
 src/nb/components/primitives/Input/Size.tsx   |  20 ++--
 .../components/primitives/Input/Variant.tsx   |   4 +-
 .../components/primitives/Pressable/Basic.tsx |  22 ++--
 .../primitives/Pressable/Events.tsx           |  15 +--
 yarn.lock                                     |  12 +--
 30 files changed, 171 insertions(+), 160 deletions(-)

diff --git a/package.json b/package.json
index 1a7f229..711289b 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
 		"expo-status-bar": "~1.0.4",
 		"expo-updates": "~0.5.4",
 		"fs-extra": "^10.0.0",
-		"native-base": "3.4.0-rc.1",
+		"native-base": "3.4.0-rc.12",
 		"react": "16.13.1",
 		"react-dom": "16.13.1",
 		"react-native": "0.63.4",
diff --git a/src/nb/NativeBase b/src/nb/NativeBase
index 2c0275e..4da5260 160000
--- a/src/nb/NativeBase
+++ b/src/nb/NativeBase
@@ -1 +1 @@
-Subproject commit 2c0275e7caa7dea2503e176340d2a961898df1d3
+Subproject commit 4da5260364f1923c89f9f86326bdfaf85e28623b
diff --git a/src/nb/components/Wrapper.tsx b/src/nb/components/Wrapper.tsx
index ddc43bc..bc318ce 100644
--- a/src/nb/components/Wrapper.tsx
+++ b/src/nb/components/Wrapper.tsx
@@ -11,6 +11,7 @@ import {
   SunIcon,
   extendTheme,
   Button,
+  Input,
 } from 'native-base';
 import type { StorageManager } from 'native-base';
 import AsyncStorage from '@react-native-async-storage/async-storage';
@@ -21,6 +22,11 @@ const myTheme = extendTheme({
   space: {
     mySpace: '29px',
   },
+  colors: {
+    blue1: {
+      '100': 'blue',
+    },
+  },
 
   components: {
     Link: {
@@ -38,6 +44,12 @@ const myTheme = extendTheme({
             padding: myPaddingX,
           };
         },
+
+        myNewButton1: (props: any) => {
+          return {
+            padding: props.padding,
+          };
+        },
       },
       sizes: {
         newsize: ({ mySize }: { mySize: number }) => {
@@ -48,6 +60,27 @@ const myTheme = extendTheme({
       },
     },
 
+    Input: {
+      variants: {
+        newsize: ({ mySize }: { mySize: number }) => {
+          return {
+            padding: mySize,
+          };
+        },
+
+        newsize1: (props: any) => {
+          return {
+            padding: props.padding,
+          };
+        },
+      },
+      sizes: {
+        'my-size': {
+          padding: 2,
+        },
+      },
+    },
+
     Checkbox: {
       sizes: {
         myBtn: {
@@ -115,7 +148,9 @@ export function RenderTestButton() {
   const [state, setState] = React.useState(1);
   return (
     <Box style={{ position: 'absolute', top: 10, left: 20 }} m={2} bg="red.100">
+      <Input m={2} size="my-size" />
       <Button
+        size=""
         variant={'myNewButton'}
         // title={state.toString()}
         onPress={() => setState(state + 1)}
diff --git a/src/nb/components/basic/FlatList/Basic.tsx b/src/nb/components/basic/FlatList/Basic.tsx
index a8077a4..f85eca2 100644
--- a/src/nb/components/basic/FlatList/Basic.tsx
+++ b/src/nb/components/basic/FlatList/Basic.tsx
@@ -62,9 +62,9 @@ export const Example = () => {
           <Box
             borderBottomWidth="1"
             _dark={{
-              borderColor: 'gray.600',
+              borderColor: 'muted.50',
             }}
-            borderColor="coolGray.200"
+            borderColor="muted.800"
             pl="4"
             pr="5"
             py="2"
diff --git a/src/nb/components/basic/ScrollView/Basic.tsx b/src/nb/components/basic/ScrollView/Basic.tsx
index cf12dff..fea0b09 100644
--- a/src/nb/components/basic/ScrollView/Basic.tsx
+++ b/src/nb/components/basic/ScrollView/Basic.tsx
@@ -3,56 +3,54 @@ import { ScrollView, VStack, Center, useTheme, Heading } from 'native-base';
 export const Example = () => {
   const { colors } = useTheme();
   return (
-    <Center>
-      <ScrollView
-        maxW="300"
-        h="80"
-        _contentContainerStyle={{
-          px: '20px',
-          mb: '4',
-          minW: '72',
-        }}
-      >
-        <Center mt="3" mb="4">
-          <Heading fontSize="xl">Cyan</Heading>
-        </Center>
-        <VStack flex="1">
-          {Object.keys(colors.cyan).map((key, index) => {
-            if (index >= 1 && index <= 5)
-              return (
-                <Center py="4" bg={`cyan.${key}`}>
-                  {key}
-                </Center>
-              );
-          })}
-        </VStack>
-        <Center mt="8" mb="4">
-          <Heading fontSize="xl">Yellow</Heading>
-        </Center>
-        <VStack flex="1">
-          {Object.keys(colors.cyan).map((key, index) => {
-            if (index >= 1 && index <= 5)
-              return (
-                <Center py="4" bg={`yellow.${key}`}>
-                  {key}
-                </Center>
-              );
-          })}
-        </VStack>
-        <Center mt="8" mb="4">
-          <Heading fontSize="xl"> Violet</Heading>
-        </Center>
-        <VStack flex="1">
-          {Object.keys(colors.violet).map((key, index) => {
-            if (index >= 1 && index <= 5)
-              return (
-                <Center py="4" bg={`violet.${key}`}>
-                  {key}
-                </Center>
-              );
-          })}
-        </VStack>
-      </ScrollView>
-    </Center>
+    <ScrollView
+      maxW="300"
+      h="80"
+      _contentContainerStyle={{
+        px: '20px',
+        mb: '4',
+        minW: '72',
+      }}
+    >
+      <Center mt="3" mb="4">
+        <Heading fontSize="xl">Cyan</Heading>
+      </Center>
+      <VStack flex="1">
+        {Object.keys(colors.cyan).map((key, index) => {
+          if (index >= 1 && index <= 5)
+            return (
+              <Center py="4" bg={`cyan.${key}`}>
+                {key}
+              </Center>
+            );
+        })}
+      </VStack>
+      <Center mt="8" mb="4">
+        <Heading fontSize="xl">Yellow</Heading>
+      </Center>
+      <VStack flex="1">
+        {Object.keys(colors.cyan).map((key, index) => {
+          if (index >= 1 && index <= 5)
+            return (
+              <Center py="4" bg={`yellow.${key}`}>
+                {key}
+              </Center>
+            );
+        })}
+      </VStack>
+      <Center mt="8" mb="4">
+        <Heading fontSize="xl"> Violet</Heading>
+      </Center>
+      <VStack flex="1">
+        {Object.keys(colors.violet).map((key, index) => {
+          if (index >= 1 && index <= 5)
+            return (
+              <Center py="4" bg={`violet.${key}`}>
+                {key}
+              </Center>
+            );
+        })}
+      </VStack>
+    </ScrollView>
   );
 };
diff --git a/src/nb/components/composites/Actionsheet/Icon.tsx b/src/nb/components/composites/Actionsheet/Icon.tsx
index 7ede85c..ce14505 100644
--- a/src/nb/components/composites/Actionsheet/Icon.tsx
+++ b/src/nb/components/composites/Actionsheet/Icon.tsx
@@ -24,68 +24,28 @@ export function Example() {
             </Text>
           </Box>
           <Actionsheet.Item
-            startIcon={
-              <Icon
-                as={MaterialIcons}
-                color="trueGray.400"
-                mr="1"
-                size="6"
-                name="delete"
-              />
-            }
+            startIcon={<Icon as={MaterialIcons} size="6" name="delete" />}
           >
             Delete
           </Actionsheet.Item>
           <Actionsheet.Item
-            startIcon={
-              <Icon
-                as={MaterialIcons}
-                name="share"
-                color="trueGray.400"
-                mr="1"
-                size="6"
-              />
-            }
+            startIcon={<Icon as={MaterialIcons} name="share" size="6" />}
           >
             Share
           </Actionsheet.Item>
           <Actionsheet.Item
-            startIcon={
-              <Icon
-                as={Ionicons}
-                name="play-circle"
-                color="trueGray.400"
-                mr="1"
-                size="6"
-              />
-            }
+            startIcon={<Icon as={Ionicons} name="play-circle" size="6" />}
           >
             Play
           </Actionsheet.Item>
           <Actionsheet.Item
-            startIcon={
-              <Icon
-                as={MaterialIcons}
-                color="trueGray.400"
-                mr="1"
-                size="6"
-                name="favorite"
-              />
-            }
+            startIcon={<Icon as={MaterialIcons} size="6" name="favorite" />}
           >
             Favourite
           </Actionsheet.Item>
           <Actionsheet.Item
-            p={3}
             startIcon={
-              <Icon
-                color="trueGray.400"
-                mr="1"
-                h="24"
-                w="24"
-                viewBox="0 0 24 24"
-                fill="none"
-              >
+              <Icon viewBox="0 0 24 24" size="6" fill="none">
                 <Path d="M12.0007 10.5862L16.9507 5.63623L18.3647 7.05023L13.4147 12.0002L18.3647 16.9502L16.9507 18.3642L12.0007 13.4142L7.05072 18.3642L5.63672 16.9502L10.5867 12.0002L5.63672 7.05023L7.05072 5.63623L12.0007 10.5862Z" />
               </Icon>
             }
diff --git a/src/nb/components/composites/Actionsheet/Usage.tsx b/src/nb/components/composites/Actionsheet/Usage.tsx
index cef1750..8c85ab5 100644
--- a/src/nb/components/composites/Actionsheet/Usage.tsx
+++ b/src/nb/components/composites/Actionsheet/Usage.tsx
@@ -21,7 +21,7 @@ export function Example() {
             </Text>
           </Box>
           <Actionsheet.Item>Delete</Actionsheet.Item>
-          <Actionsheet.Item>Share</Actionsheet.Item>
+          <Actionsheet.Item isDisabled>Share</Actionsheet.Item>
           <Actionsheet.Item>Play</Actionsheet.Item>
           <Actionsheet.Item>Favourite</Actionsheet.Item>
           <Actionsheet.Item>Cancel</Actionsheet.Item>
diff --git a/src/nb/components/composites/Alert/action.tsx b/src/nb/components/composites/Alert/action.tsx
index 94f9824..c22b7ac 100644
--- a/src/nb/components/composites/Alert/action.tsx
+++ b/src/nb/components/composites/Alert/action.tsx
@@ -37,7 +37,8 @@ export function Example() {
               <IconButton
                 variant="unstyled"
                 _focus={{ borderWidth: 0 }}
-                icon={<CloseIcon size="3" color="coolGray.600" />}
+                icon={<CloseIcon size="3" />}
+                _icon={{ color: 'coolGray.600' }}
                 onPress={() => setShow(false)}
               />
             </HStack>
diff --git a/src/nb/components/composites/Alert/basic.tsx b/src/nb/components/composites/Alert/basic.tsx
index 4214301..ef7b044 100644
--- a/src/nb/components/composites/Alert/basic.tsx
+++ b/src/nb/components/composites/Alert/basic.tsx
@@ -30,7 +30,8 @@ export const Example = () => {
             <IconButton
               variant="unstyled"
               _focus={{ borderWidth: 0 }}
-              icon={<CloseIcon size="3" color="coolGray.600" />}
+              icon={<CloseIcon size="3" />}
+              _icon={{ color: 'coolGray.600' }}
             />
           </HStack>
           <Box pl="6" _text={{ color: 'coolGray.600' }}>
diff --git a/src/nb/components/composites/Alert/colorScheme.tsx b/src/nb/components/composites/Alert/colorScheme.tsx
index ec142bb..82dbb49 100644
--- a/src/nb/components/composites/Alert/colorScheme.tsx
+++ b/src/nb/components/composites/Alert/colorScheme.tsx
@@ -31,7 +31,8 @@ export function Example() {
               <IconButton
                 variant="unstyled"
                 _focus={{ borderWidth: 0 }}
-                icon={<CloseIcon size="3" color="coolGray.600" />}
+                icon={<CloseIcon size="3" />}
+                _icon={{ color: 'coolGray.600' }}
               />
             </HStack>
             <Box pl="6" _text={{ color: 'coolGray.600' }}>
diff --git a/src/nb/components/composites/Alert/composition.tsx b/src/nb/components/composites/Alert/composition.tsx
index 54821f9..57ec780 100644
--- a/src/nb/components/composites/Alert/composition.tsx
+++ b/src/nb/components/composites/Alert/composition.tsx
@@ -35,7 +35,8 @@ export function Example() {
               <IconButton
                 variant="unstyled"
                 _focus={{ borderWidth: 0 }}
-                icon={<CloseIcon size="3" color="coolGray.600" />}
+                icon={<CloseIcon size="3" />}
+                _icon={{ color: 'coolGray.600' }}
               />
             </HStack>
             <Box pl="6" _dark={{ _text: { color: 'coolGray.600' } }}>
diff --git a/src/nb/components/composites/Alert/knobEnabled.tsx b/src/nb/components/composites/Alert/knobEnabled.tsx
index 9e7409b..ec96e36 100644
--- a/src/nb/components/composites/Alert/knobEnabled.tsx
+++ b/src/nb/components/composites/Alert/knobEnabled.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, Box, CloseIcon, IconButton } from 'native-base';
+import { Alert, Box, CloseIcon, IconButton, Text } from 'native-base';
 import { select } from '@storybook/addon-knobs';
 
 export const Example = () => {
@@ -21,8 +21,8 @@ export const Example = () => {
         actionProps={{ alignSelf: 'center' }}
       >
         <Alert.Icon />
-        <Alert.Title>Error Alert</Alert.Title>
-        <Alert.Description>Description </Alert.Description>
+        <Text>Error Alert</Text>
+        <Text>Description </Text>
       </Alert>
     </Box>
   );
diff --git a/src/nb/components/composites/Alert/status.tsx b/src/nb/components/composites/Alert/status.tsx
index 960e76c..95e7fb5 100644
--- a/src/nb/components/composites/Alert/status.tsx
+++ b/src/nb/components/composites/Alert/status.tsx
@@ -46,7 +46,8 @@ export function Example() {
                   <IconButton
                     variant="unstyled"
                     _focus={{ borderWidth: 0 }}
-                    icon={<CloseIcon size="3" color="coolGray.600" />}
+                    icon={<CloseIcon size="3" />}
+                    _icon={{ color: 'coolGray.600' }}
                   />
                 </HStack>
               </VStack>
diff --git a/src/nb/components/composites/Alert/usage.tsx b/src/nb/components/composites/Alert/usage.tsx
index 22ac553..e071377 100644
--- a/src/nb/components/composites/Alert/usage.tsx
+++ b/src/nb/components/composites/Alert/usage.tsx
@@ -29,7 +29,8 @@ export function Example() {
             <IconButton
               variant="unstyled"
               _focus={{ borderWidth: 0 }}
-              icon={<CloseIcon size="3" color="coolGray.600" />}
+              icon={<CloseIcon size="3" />}
+              _icon={{ color: 'coolGray.600' }}
             />
           </HStack>
           <Box pl="6" _text={{ color: 'coolGray.600' }}>
diff --git a/src/nb/components/composites/Divider/Basic.tsx b/src/nb/components/composites/Divider/Basic.tsx
index ed480e5..b62a564 100644
--- a/src/nb/components/composites/Divider/Basic.tsx
+++ b/src/nb/components/composites/Divider/Basic.tsx
@@ -8,7 +8,11 @@ export const Example = () => {
         <Heading mx="3" alignItems="center" flexDirection="row">
           Chrome
         </Heading>
-        <Divider my="2" />
+        <Divider
+          my="2"
+          _light={{ bg: 'muted.800' }}
+          _dark={{ bg: 'muted.50' }}
+        />
         <Heading mx="3" alignItems="center" flexDirection="row">
           Firefox
         </Heading>
diff --git a/src/nb/components/composites/Divider/Orientation.tsx b/src/nb/components/composites/Divider/Orientation.tsx
index c682bbf..4f487b0 100644
--- a/src/nb/components/composites/Divider/Orientation.tsx
+++ b/src/nb/components/composites/Divider/Orientation.tsx
@@ -6,10 +6,19 @@ export const Example = () => {
     <Box alignItems="center">
       <Box w="160">
         <Heading mx="auto">Shoes</Heading>
-        <Divider my="2" />
+        <Divider
+          my="2"
+          _light={{ bg: 'muted.800' }}
+          _dark={{ bg: 'muted.50' }}
+        />
         <Flex mx="3" direction="row" justify="space-evenly" h="60">
           <Heading py="2">Girls</Heading>
-          <Divider orientation="vertical" mx="3" />
+          <Divider
+            orientation="vertical"
+            mx="3"
+            _light={{ bg: 'muted.800' }}
+            _dark={{ bg: 'muted.50' }}
+          />
           <Heading py="2">Boys</Heading>
         </Flex>
       </Box>
diff --git a/src/nb/components/composites/Menu/Basic.tsx b/src/nb/components/composites/Menu/Basic.tsx
index 73f5943..1b7006a 100644
--- a/src/nb/components/composites/Menu/Basic.tsx
+++ b/src/nb/components/composites/Menu/Basic.tsx
@@ -3,7 +3,7 @@ import { Menu, HamburgerIcon, Box, Pressable } from 'native-base';
 
 export function Example() {
   return (
-    <Box h="80%" w="90%" alignItems="flex-start">
+    <Box w="90%" alignItems="center">
       <Menu
         w="190"
         trigger={(triggerProps) => {
diff --git a/src/nb/components/composites/Menu/Group.tsx b/src/nb/components/composites/Menu/Group.tsx
index 10dc154..7c6ec83 100644
--- a/src/nb/components/composites/Menu/Group.tsx
+++ b/src/nb/components/composites/Menu/Group.tsx
@@ -3,7 +3,7 @@ import { Menu, Divider, HamburgerIcon, Box, Pressable } from 'native-base';
 
 export function Example() {
   return (
-    <Box h="80%" w="90%" alignItems="flex-start">
+    <Box w="90%" alignItems="center">
       <Menu
         w="190"
         trigger={(triggerProps) => {
diff --git a/src/nb/components/composites/Menu/MenuOptionsGroup.tsx b/src/nb/components/composites/Menu/MenuOptionsGroup.tsx
index 5266671..c788d80 100644
--- a/src/nb/components/composites/Menu/MenuOptionsGroup.tsx
+++ b/src/nb/components/composites/Menu/MenuOptionsGroup.tsx
@@ -3,7 +3,7 @@ import { Menu, Divider, HamburgerIcon, Box, Pressable } from 'native-base';
 
 export function Example() {
   return (
-    <Box h="80%" w="90%" alignItems="flex-start">
+    <Box w="90%" alignItems="center">
       <Menu
         closeOnSelect={false}
         w="190"
diff --git a/src/nb/components/composites/Popover/Basic.tsx b/src/nb/components/composites/Popover/Basic.tsx
index 7be9023..364c809 100644
--- a/src/nb/components/composites/Popover/Basic.tsx
+++ b/src/nb/components/composites/Popover/Basic.tsx
@@ -3,7 +3,7 @@ import { Popover, Button, Box } from 'native-base';
 
 export function Example() {
   return (
-    <Box h="60%" w="100%" alignItems="center">
+    <Box w="100%" alignItems="center">
       <Popover
         trigger={(triggerProps) => {
           return (
diff --git a/src/nb/components/composites/Popover/PopoverPositions.tsx b/src/nb/components/composites/Popover/PopoverPositions.tsx
index af25f93..55fc4f6 100644
--- a/src/nb/components/composites/Popover/PopoverPositions.tsx
+++ b/src/nb/components/composites/Popover/PopoverPositions.tsx
@@ -6,7 +6,7 @@ export function Example() {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <Box h="60%" w="100%" alignItems="center">
+    <Box w="100%" alignItems="center">
       <VStack space={6} alignSelf="flex-start" w="100%">
         <Popover
           // @ts-ignore
diff --git a/src/nb/components/composites/Popover/RefEg.tsx b/src/nb/components/composites/Popover/RefEg.tsx
index 77365d5..48ff5ed 100644
--- a/src/nb/components/composites/Popover/RefEg.tsx
+++ b/src/nb/components/composites/Popover/RefEg.tsx
@@ -4,7 +4,7 @@ import { Popover, Button, Input, FormControl, Box } from 'native-base';
 export function Example() {
   const initialFocusRef = React.useRef(null);
   return (
-    <Box h="60%" w="100%" alignItems="center">
+    <Box w="100%" alignItems="center">
       <Popover
         initialFocusRef={initialFocusRef}
         trigger={(triggerProps) => {
diff --git a/src/nb/components/primitives/Input/Basic.tsx b/src/nb/components/primitives/Input/Basic.tsx
index cdad32c..60ee221 100644
--- a/src/nb/components/primitives/Input/Basic.tsx
+++ b/src/nb/components/primitives/Input/Basic.tsx
@@ -4,7 +4,7 @@ import { Input, Box } from 'native-base';
 export const Example = () => {
   return (
     <Box alignItems="center">
-      <Input mx="3" placeholder="Input" w="75%" maxWidth="300px" />
+      <Input mx="3" placeholder="Input" w="100%" />
     </Box>
   );
 };
diff --git a/src/nb/components/primitives/Input/Controlled.tsx b/src/nb/components/primitives/Input/Controlled.tsx
index b6a6d54..cfec1b1 100644
--- a/src/nb/components/primitives/Input/Controlled.tsx
+++ b/src/nb/components/primitives/Input/Controlled.tsx
@@ -8,8 +8,7 @@ export const Example = () => {
     <Box alignItems="center">
       <Input
         value={value}
-        w="75%"
-        maxW="300px"
+        w="100%"
         onChangeText={handleChange}
         placeholder="Value Controlled Input"
       />
diff --git a/src/nb/components/primitives/Input/Masked.tsx b/src/nb/components/primitives/Input/Masked.tsx
index 691ab38..aa6c0fe 100644
--- a/src/nb/components/primitives/Input/Masked.tsx
+++ b/src/nb/components/primitives/Input/Masked.tsx
@@ -9,8 +9,7 @@ export const Example = () => {
     <Box alignItems="center">
       <Input
         type={show ? 'text' : 'password'}
-        w="75%"
-        maxW="300px"
+        w="100%"
         py="0"
         InputRightElement={
           <Button
diff --git a/src/nb/components/primitives/Input/Size.tsx b/src/nb/components/primitives/Input/Size.tsx
index 9b2e382..8e26e95 100644
--- a/src/nb/components/primitives/Input/Size.tsx
+++ b/src/nb/components/primitives/Input/Size.tsx
@@ -1,17 +1,15 @@
 import React from 'react';
-import { Input, Stack, Center } from 'native-base';
+import { Input, Stack } from 'native-base';
 
 export const Example = () => {
   return (
-    <Center>
-      <Stack mt={3} space={4} w="75%" maxW="300px">
-        <Input size="xs" placeholder="xs Input" />
-        <Input size="sm" placeholder="sm Input" />
-        <Input size="md" placeholder="md Input" />
-        <Input size="lg" placeholder="lg Input" />
-        <Input size="xl" placeholder="xl Input" />
-        <Input size="2xl" placeholder="2xl Input" />
-      </Stack>
-    </Center>
+    <Stack space={4} w="75%" maxW="300px">
+      <Input size="xs" placeholder="xs Input" />
+      <Input size="sm" placeholder="sm Input" />
+      <Input size="md" placeholder="md Input" />
+      <Input size="lg" placeholder="lg Input" />
+      <Input size="xl" placeholder="xl Input" />
+      <Input size="2xl" placeholder="2xl Input" />
+    </Stack>
   );
 };
diff --git a/src/nb/components/primitives/Input/Variant.tsx b/src/nb/components/primitives/Input/Variant.tsx
index f4cf92e..94a0ee3 100644
--- a/src/nb/components/primitives/Input/Variant.tsx
+++ b/src/nb/components/primitives/Input/Variant.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { Input, Stack, Center } from 'native-base';
+import { Input, Stack } from 'native-base';
 export const Example = () => {
   return (
-    <Stack space={4} w="75%">
+    <Stack space={4} w="75%" maxW="300px">
       <Input variant="outline" placeholder="Outline" />
       <Input variant="filled" placeholder="Filled" />
       <Input variant="underlined" placeholder="Underlined" />
diff --git a/src/nb/components/primitives/Pressable/Basic.tsx b/src/nb/components/primitives/Pressable/Basic.tsx
index 2aec6aa..44cd53d 100644
--- a/src/nb/components/primitives/Pressable/Basic.tsx
+++ b/src/nb/components/primitives/Pressable/Basic.tsx
@@ -4,16 +4,18 @@ import { Pressable, Text, Box, HStack, Spacer, Flex, Badge } from 'native-base';
 export function Example() {
   return (
     <Box alignItems="center">
-      <Pressable onPress={() => console.log("I'm Pressed")}>
-        <Box
-          maxW="96"
-          borderWidth="1"
-          borderColor="coolGray.300"
-          shadow="3"
-          bg="coolGray.100"
-          p="5"
-          rounded="8"
-        >
+      <Pressable
+        onPress={() => console.log("I'm Pressed")}
+        rounded="8"
+        overflow="hidden"
+        borderWidth="1"
+        borderColor="coolGray.300"
+        maxW="96"
+        shadow="3"
+        bg="coolGray.100"
+        p="5"
+      >
+        <Box>
           <HStack alignItems="center">
             <Badge
               colorScheme="darkBlue"
diff --git a/src/nb/components/primitives/Pressable/Events.tsx b/src/nb/components/primitives/Pressable/Events.tsx
index d218bc9..8fdb884 100644
--- a/src/nb/components/primitives/Pressable/Events.tsx
+++ b/src/nb/components/primitives/Pressable/Events.tsx
@@ -4,14 +4,17 @@ import { Pressable, Text, Box, HStack, Spacer, Flex, Badge } from 'native-base';
 export function Example() {
   return (
     <Box alignItems="center">
-      <Pressable>
+      <Pressable
+        maxW="96"
+        borderWidth="1"
+        borderColor="coolGray.300"
+        shadow="3"
+        rounded="8"
+        p="5"
+      >
         {({ isHovered, isFocused, isPressed }) => {
           return (
             <Box
-              maxW="96"
-              borderWidth="1"
-              borderColor="coolGray.300"
-              shadow="3"
               bg={
                 isPressed
                   ? 'coolGray.200'
@@ -19,8 +22,6 @@ export function Example() {
                   ? 'coolGray.200'
                   : 'coolGray.100'
               }
-              p="5"
-              rounded="8"
               style={{
                 transform: [
                   {
diff --git a/yarn.lock b/yarn.lock
index 9121b2b..710f329 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2873,7 +2873,7 @@
     "@react-aria/utils" "^3.6.0"
     "@react-native-aria/utils" "^0.2.6"
 
-"@react-native-aria/listbox@0.2.4-alpha.3":
+"@react-native-aria/listbox@^0.2.4-alpha.3":
   version "0.2.4-alpha.3"
   resolved "https://registry.yarnpkg.com/@react-native-aria/listbox/-/listbox-0.2.4-alpha.3.tgz#1a8df0de6c932c8143ea73e43713a5d37070203c"
   integrity sha512-e/y+Wdoyy/PbpFj4DVYDYMsKI+uUqnZ/0yLByqHQvzs8Ys8o69CQkyEYzHhxvFT5lCLegkLbuQN2cJd8bYNQsA==
@@ -8039,10 +8039,10 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-native-base@3.4.0-rc.1:
-  version "3.4.0-rc.1"
-  resolved "https://registry.yarnpkg.com/native-base/-/native-base-3.4.0-rc.1.tgz#d648349ec4b92d25ca05cac6b609bf2b45027fda"
-  integrity sha512-rVqGto6zODClYKYPfQztwDF0ojF8ksQ7/CvCOe7QbjcrElt/lSDE3j+tn1U4keGvaj8jzgNd7vc9BB2pIYeVZA==
+native-base@3.4.0-rc.12:
+  version "3.4.0-rc.12"
+  resolved "https://registry.yarnpkg.com/native-base/-/native-base-3.4.0-rc.12.tgz#49f305a8d7aed9e571f6abb3c3b4f076015e6213"
+  integrity sha512-EG3wQx45/0Dront01c4DeSAREbJtgWnLRhq/cQg1OTZi1QcjZXmv7hI55uheJaN/jNm0DDQFfakvuetE4jM1SA==
   dependencies:
     "@react-aria/focus" "^3.2.3"
     "@react-aria/utils" "^3.6.0"
@@ -8052,7 +8052,7 @@ native-base@3.4.0-rc.1:
     "@react-native-aria/combobox" "^0.2.4-alpha.0"
     "@react-native-aria/focus" "^0.2.4"
     "@react-native-aria/interactions" "^0.2.2"
-    "@react-native-aria/listbox" "0.2.4-alpha.3"
+    "@react-native-aria/listbox" "^0.2.4-alpha.3"
     "@react-native-aria/overlays" "0.3.3-rc.0"
     "@react-native-aria/radio" "^0.2.4"
     "@react-native-aria/slider" "^0.2.5-alpha.1"