From 5887efc3dd119c41fbec9afea001fefe94c0eb1e Mon Sep 17 00:00:00 2001
From: kaykdm <kay.kodama43@gmail.com>
Date: Sun, 16 Jan 2022 17:50:40 +0900
Subject: [PATCH 1/6] fix: infinite loop in Image component

---
 .../storybook/stories/components/primitives/Image/Sizes.tsx  | 1 +
 src/components/primitives/Image/index.tsx                    | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/example/storybook/stories/components/primitives/Image/Sizes.tsx b/example/storybook/stories/components/primitives/Image/Sizes.tsx
index a92f92767..457d378d9 100644
--- a/example/storybook/stories/components/primitives/Image/Sizes.tsx
+++ b/example/storybook/stories/components/primitives/Image/Sizes.tsx
@@ -8,6 +8,7 @@ export function Example() {
         <VStack space={2} alignItems="center" safeAreaTop my={6}>
           {['xs', 'sm', 'md', 'lg', 'xl', '2xl'].map((size) => (
             <Image
+              key={size}
               size={size}
               resizeMode="cover"
               source={{
diff --git a/src/components/primitives/Image/index.tsx b/src/components/primitives/Image/index.tsx
index 048bc1c43..3d6d69f83 100644
--- a/src/components/primitives/Image/index.tsx
+++ b/src/components/primitives/Image/index.tsx
@@ -28,7 +28,8 @@ const Image = (props: IImageProps, ref: any) => {
       finalSource.current = { uri: src };
     }
     return finalSource.current;
-  }, [source, src]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [source?.uri, src]);
 
   const [renderedSource, setSource] = useState(getSource());
   const [alternate, setAlternate] = useState(false);
@@ -39,7 +40,7 @@ const Image = (props: IImageProps, ref: any) => {
     return () => {
       finalSource.current = null;
     };
-  }, [source, src, getSource]);
+  }, [source?.uri, src, getSource]);
 
   const onImageLoadError = useCallback(
     (event: any) => {

From 0dbe757b68f315a66911b58898c2829dff3111d1 Mon Sep 17 00:00:00 2001
From: ankitt <ankitt@geekyants.com>
Date: Thu, 20 Jan 2022 13:23:55 +0530
Subject: [PATCH 2/6] feat: add typings for header, footer

---
 src/components/composites/Actionsheet/types.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/composites/Actionsheet/types.tsx b/src/components/composites/Actionsheet/types.tsx
index 2fac2c5e8..29b15396f 100644
--- a/src/components/composites/Actionsheet/types.tsx
+++ b/src/components/composites/Actionsheet/types.tsx
@@ -48,4 +48,14 @@ export type IActionsheetComponentType = ((
       props: IActionsheetItemProps & { ref?: MutableRefObject<any> }
     ) => JSX.Element
   >;
+  Header: React.MemoExoticComponent<
+    (
+      props: IActionsheetHeaderProps & { ref?: MutableRefObject<any> }
+    ) => JSX.Element
+  >;
+  Footer: React.MemoExoticComponent<
+    (
+      props: IActionsheetFooterProps & { ref?: MutableRefObject<any> }
+    ) => JSX.Element
+  >;
 };

From d101a429d7014d3e3bf676f3f77cdd0dc85bdf91 Mon Sep 17 00:00:00 2001
From: ankitt <ankitt@geekyants.com>
Date: Thu, 20 Jan 2022 13:25:38 +0530
Subject: [PATCH 3/6] fix: add ActionsheetHeaderProps, ActionsheetFooterProps

---
 src/components/composites/Actionsheet/index.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/composites/Actionsheet/index.tsx b/src/components/composites/Actionsheet/index.tsx
index 448d95c30..7683792ac 100644
--- a/src/components/composites/Actionsheet/index.tsx
+++ b/src/components/composites/Actionsheet/index.tsx
@@ -1,11 +1,15 @@
 import ActionsheetMain from './Actionsheet';
 import ActionsheetItem from './ActionsheetItem';
+import ActionsheetHeader from './ActionsheetHeader';
+import ActionsheetFooter from './ActionsheetFooter';
 import ActionsheetContent from './ActionsheetContent';
 import type { IActionsheetComponentType } from './types';
 
 const ActionsheetTemp: any = ActionsheetMain;
 ActionsheetTemp.Content = ActionsheetContent;
 ActionsheetTemp.Item = ActionsheetItem;
+ActionsheetTemp.Header = ActionsheetHeader;
+ActionsheetTemp.Footer = ActionsheetFooter;
 
 // To add typings
 const Actionsheet = ActionsheetTemp as IActionsheetComponentType;
@@ -16,4 +20,6 @@ export type {
   IActionsheetProps,
   IActionsheetContentProps,
   IActionsheetItemProps,
+  IActionsheetHeaderProps,
+  IActionsheetFooterProps,
 } from './types';

From 6bc5a5f70fa89981ec0733c5dcb87de4478f3f07 Mon Sep 17 00:00:00 2001
From: ankitt <ankitt@geekyants.com>
Date: Thu, 20 Jan 2022 15:55:23 +0530
Subject: [PATCH 4/6] fix: remove heading fontfamily

---
 src/theme/components/heading.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/theme/components/heading.ts b/src/theme/components/heading.ts
index a6d7c752f..02beb2d06 100644
--- a/src/theme/components/heading.ts
+++ b/src/theme/components/heading.ts
@@ -4,7 +4,6 @@ const baseStyle = (props: Record<string, any>) => {
   return {
     color: mode('muted.700', 'white')(props),
     fontWeight: 'bold',
-    fontFamily: 'heading',
     lineHeight: 'sm',
   };
 };

From e5f97ec86478da04cf5336a071b7da61173871e6 Mon Sep 17 00:00:00 2001
From: Rohit Singh <rohit99.ind@gmail.com>
Date: Fri, 21 Jan 2022 10:54:46 +0530
Subject: [PATCH 5/6] fix: examples

---
 .../components/basic/FlatList/Basic.tsx       |   9 +-
 .../basic/KeyboardAvoidingView/Basic.tsx      |  38 ++----
 .../components/basic/ScrollView/Basic.tsx     |  92 +++++++------
 .../components/basic/SectionList/Basic.tsx    |  40 +++---
 .../composites/Transitions/Fade.tsx           |   4 +-
 .../composites/Transitions/ScaleFade.tsx      |   4 +-
 .../composites/Transitions/Slide.tsx          |  65 ++-------
 .../Transitions/SlideComposition.tsx          |  81 ++++++-----
 .../composites/Transitions/SlideWrapped.tsx   | 128 +++++++++---------
 .../composites/Transitions/Stagger.tsx        |   5 +-
 .../primitives/Hidden/hiddenOnColorModes.tsx  |  43 ++++--
 .../components/primitives/Icon/AllIcons.tsx   |   2 +-
 .../components/primitives/Icon/CustomIcon.tsx |  34 ++---
 .../components/primitives/Icon/Sizes.tsx      |  16 +--
 .../components/primitives/Image/Basic.tsx     |  18 +--
 .../primitives/Image/BorderRadius.tsx         |  22 +--
 .../primitives/Image/FallbackElement.tsx      |  26 ++--
 .../primitives/Image/FallbackSupport.tsx      |  26 ++--
 .../components/primitives/Image/Sizes.tsx     |   2 +-
 .../components/primitives/Image/WithRef.tsx   |  20 +--
 .../stories/hooks/useDisclose/Usage.tsx       |   2 +-
 21 files changed, 331 insertions(+), 346 deletions(-)

diff --git a/example/storybook/stories/components/basic/FlatList/Basic.tsx b/example/storybook/stories/components/basic/FlatList/Basic.tsx
index f08f586e4..a8077a425 100644
--- a/example/storybook/stories/components/basic/FlatList/Basic.tsx
+++ b/example/storybook/stories/components/basic/FlatList/Basic.tsx
@@ -9,7 +9,6 @@ import {
   Text,
   Spacer,
 } from 'native-base';
-
 export const Example = () => {
   const data = [
     {
@@ -52,14 +51,8 @@ export const Example = () => {
         'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU',
     },
   ];
-
   return (
-    <Box
-      w={{
-        base: '100%',
-        md: '25%',
-      }}
-    >
+    <Box>
       <Heading fontSize="xl" p="4" pb="3">
         Inbox
       </Heading>
diff --git a/example/storybook/stories/components/basic/KeyboardAvoidingView/Basic.tsx b/example/storybook/stories/components/basic/KeyboardAvoidingView/Basic.tsx
index 9db972f89..2cfc9b7f9 100644
--- a/example/storybook/stories/components/basic/KeyboardAvoidingView/Basic.tsx
+++ b/example/storybook/stories/components/basic/KeyboardAvoidingView/Basic.tsx
@@ -6,38 +6,30 @@ import {
   Button,
   VStack,
   Heading,
-  useBreakpointValue,
+  Center,
 } from 'native-base';
 import { Platform } from 'react-native';
 
 export const Example = () => {
-  const isLargeScreen = useBreakpointValue({
-    base: false,
-    sm: false,
-    md: false,
-    lg: true,
-  });
   return (
     <KeyboardAvoidingView
-      h={{ base: '400px', lg: 'auto' }}
+      h={{
+        base: '400px',
+        lg: 'auto',
+      }}
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
     >
-      <VStack p="6" flex="1" justifyContent="flex-end">
-        <Heading fontSize={36} mb="3">
-          Forgot Password
-        </Heading>
-        <Text>
-          Not to worry! Enter email address associated with your account and
-          we’ll send a link to reset your password.
-        </Text>
-        <Input placeholder="Email Address" mt="10" mb="4" />
-        <Button mb="4">Proceed</Button>
-        {isLargeScreen ? (
-          <Text>
-            Please see the example in your mobile to observe the effect.
+      <Center>
+        <VStack flex="1" justifyContent="flex-end" w="100%" maxW="300">
+          <Heading mb="3">Forgot Password</Heading>
+          <Text color="muted.400">
+            Not to worry! Enter email address associated with your account and
+            we’ll send a link to reset your password.
           </Text>
-        ) : null}
-      </VStack>
+          <Input placeholder="Email Address" mt="10" mb="4" />
+          <Button mb="4">Proceed</Button>
+        </VStack>
+      </Center>
     </KeyboardAvoidingView>
   );
 };
diff --git a/example/storybook/stories/components/basic/ScrollView/Basic.tsx b/example/storybook/stories/components/basic/ScrollView/Basic.tsx
index c23817710..cf12dff64 100644
--- a/example/storybook/stories/components/basic/ScrollView/Basic.tsx
+++ b/example/storybook/stories/components/basic/ScrollView/Basic.tsx
@@ -3,46 +3,56 @@ import { ScrollView, VStack, Center, useTheme, Heading } from 'native-base';
 export const Example = () => {
   const { colors } = useTheme();
   return (
-    <ScrollView _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>
+    </Center>
   );
 };
diff --git a/example/storybook/stories/components/basic/SectionList/Basic.tsx b/example/storybook/stories/components/basic/SectionList/Basic.tsx
index c7697f86d..cc972d2e9 100644
--- a/example/storybook/stories/components/basic/SectionList/Basic.tsx
+++ b/example/storybook/stories/components/basic/SectionList/Basic.tsx
@@ -27,25 +27,27 @@ export const Example = () => {
       ],
     },
   ];
-
   return (
-    <SectionList
-      px="12"
-      mb="4"
-      sections={data}
-      keyExtractor={(item, index) => item + index}
-      renderItem={({ item }) => (
-        <Center py="4" minW="64" bg={item}>
-          {item.split('.')[1]}
-        </Center>
-      )}
-      renderSectionHeader={({ section: { title } }) => (
-        <Center>
-          <Heading fontSize="xl" mt="8" pb="4">
-            {title}
-          </Heading>
-        </Center>
-      )}
-    />
+    <Center h="80">
+      <SectionList
+        maxW="300"
+        w="100%"
+        mb="4"
+        sections={data}
+        keyExtractor={(item, index) => item + index}
+        renderItem={({ item }) => (
+          <Center py="4" bg={item}>
+            {item.split('.')[1]}
+          </Center>
+        )}
+        renderSectionHeader={({ section: { title } }) => (
+          <Center>
+            <Heading fontSize="xl" mt="8" pb="4">
+              {title}
+            </Heading>
+          </Center>
+        )}
+      />
+    </Center>
   );
 };
diff --git a/example/storybook/stories/components/composites/Transitions/Fade.tsx b/example/storybook/stories/components/composites/Transitions/Fade.tsx
index 39f21848a..03fc8e250 100644
--- a/example/storybook/stories/components/composites/Transitions/Fade.tsx
+++ b/example/storybook/stories/components/composites/Transitions/Fade.tsx
@@ -5,7 +5,7 @@ export const Example = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   return (
-    <>
+    <Center>
       <Button onPress={() => setIsOpen(!isOpen)}>
         {isOpen ? 'Hide' : 'Show'}
       </Button>
@@ -25,6 +25,6 @@ export const Example = () => {
           Fade
         </Center>
       </PresenceTransition>
-    </>
+    </Center>
   );
 };
diff --git a/example/storybook/stories/components/composites/Transitions/ScaleFade.tsx b/example/storybook/stories/components/composites/Transitions/ScaleFade.tsx
index 310586c86..003dc1450 100644
--- a/example/storybook/stories/components/composites/Transitions/ScaleFade.tsx
+++ b/example/storybook/stories/components/composites/Transitions/ScaleFade.tsx
@@ -4,7 +4,7 @@ export const Example = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   return (
-    <>
+    <Center>
       <Button onPress={() => setIsOpen(!isOpen)}>
         {isOpen ? 'Hide' : 'Show'}
       </Button>
@@ -17,6 +17,6 @@ export const Example = () => {
           ScaleFade
         </Center>
       </PresenceTransition>
-    </>
+    </Center>
   );
 };
diff --git a/example/storybook/stories/components/composites/Transitions/Slide.tsx b/example/storybook/stories/components/composites/Transitions/Slide.tsx
index f869df779..30123459d 100644
--- a/example/storybook/stories/components/composites/Transitions/Slide.tsx
+++ b/example/storybook/stories/components/composites/Transitions/Slide.tsx
@@ -1,65 +1,26 @@
 import React from 'react';
-import {
-  Slide,
-  Button,
-  Alert,
-  VStack,
-  Heading,
-  Divider,
-  Center,
-  Text,
-} from 'native-base';
+import { Slide, Button, Alert, Text, Box } from 'native-base';
 export const Example = () => {
-  const [isOpenBottom, setIsOpenBottom] = React.useState(false);
   const [isOpenTop, setIsOpenTop] = React.useState(false);
-
-  const str1 = `${isOpenTop ? 'Hide' : 'Show'}`;
-  const str2 = `${isOpenBottom ? 'Hide' : 'Show'}`;
+  const str = `${isOpenTop ? 'Hide' : 'Check Internet Connection'}`;
   return (
-    <>
-      <Slide in={isOpenBottom} placement="bottom">
-        <Alert justifyContent="center" mx="4" mt="auto" mb="4" status="success">
-          <Alert.Icon />
-          <Text
-            // _light={{ color: 'success.600' }}
-            // _dark={{ color: 'success.100' }}
-            color="success.600"
-            fontWeight="medium"
-          >
-            Order placed successfully!
-          </Text>
-        </Alert>
-      </Slide>
+    <Box h="32" w="300">
       <Slide in={isOpenTop} placement="top">
-        <Alert justifyContent="center" mx="4" mt="4" status="error">
+        <Alert justifyContent="center" status="error">
           <Alert.Icon />
-
           <Text color="error.600" fontWeight="medium">
             No Internet Connection
           </Text>
         </Alert>
       </Slide>
-
-      <VStack space={2.5} w={{ base: '50%', md: '25%' }} alignItems="center">
-        <Center w="100%">
-          <Heading textAlign="center" size="md" mb={4}>
-            Top
-          </Heading>
-          <Button w="100" onPress={() => setIsOpenTop(!isOpenTop)} mb={5}>
-            {str1}
-          </Button>
-          <Divider />
-        </Center>
-        <Center w="100%">
-          <Heading textAlign="center" size="md" mb={4}>
-            Bottom
-          </Heading>
-          <Button w="100" onPress={() => setIsOpenBottom(!isOpenBottom)}>
-            {str2}
-            {/* Click Me to {isOpenBottom ? "hide" : "show"} Bottom Slider */}
-          </Button>
-        </Center>
-      </VStack>
-    </>
+      <Button
+        mt="auto"
+        onPress={() => setIsOpenTop(!isOpenTop)}
+        variant="unstyled"
+        bg="coolGray.700:alpha.30"
+      >
+        {str}
+      </Button>
+    </Box>
   );
 };
diff --git a/example/storybook/stories/components/composites/Transitions/SlideComposition.tsx b/example/storybook/stories/components/composites/Transitions/SlideComposition.tsx
index df41f873a..84b7da705 100644
--- a/example/storybook/stories/components/composites/Transitions/SlideComposition.tsx
+++ b/example/storybook/stories/components/composites/Transitions/SlideComposition.tsx
@@ -10,48 +10,57 @@ import {
   Spacer,
   WarningIcon,
   Input,
+  Center,
 } from 'native-base';
 export const Example = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   return (
-    <>
-      <Slide in={isOpen} placement="top">
-        <Box p="2" _text={{ color: 'orange.600' }} bg="orange.200">
-          Due to government restrictions around COVID- 19, you may experience a
-          delay in your delivery.
-        </Box>
-      </Slide>
-      <Box width="100%" alignItems="flex-start" justifyContent="center">
-        <VStack space={3} w="100%">
-          <HStack alignItems="flex-end">
-            <Heading>Order</Heading>
-            <Spacer />
-            <WarningIcon color="orange.600" size="xs" mb="1.5" />
-          </HStack>
-          <HStack alignItems="center" justifyContent="space-between">
-            <Text fontWeight="medium">Sub Total</Text>
-            <Text color="blueGray.400">$298.77</Text>
-          </HStack>
-          <HStack alignItems="center" justifyContent="space-between">
-            <Text fontWeight="medium">Tax</Text>
-            <Text color="blueGray.400">$38.84</Text>
-          </HStack>
-          <HStack alignItems="center" justifyContent="space-between">
-            <Text fontWeight="medium">Total Amount</Text>
-            <Text color="green.500">$337.61</Text>
-          </HStack>
-          <VStack space={2} mt="2">
-            <Text bold>Promo Code</Text>
-            <HStack space={3}>
-              <Input flex="1" />
-              <Button variant="outline">Apply</Button>
+    <Center>
+      <Box w="300">
+        <Box w="100%" alignItems="flex-start" justifyContent="center">
+          <VStack space={3} w="100%">
+            <HStack alignItems="flex-end">
+              <Heading>Order</Heading>
+              <Spacer />
+              <WarningIcon color="orange.600" size="xs" mb="1.5" />
+            </HStack>
+            <HStack alignItems="center" justifyContent="space-between">
+              <Text fontWeight="medium">Sub Total</Text>
+              <Text color="blueGray.400">$298.77</Text>
+            </HStack>
+            <HStack alignItems="center" justifyContent="space-between">
+              <Text fontWeight="medium">Tax</Text>
+              <Text color="blueGray.400">$38.84</Text>
             </HStack>
+            <HStack alignItems="center" justifyContent="space-between">
+              <Text fontWeight="medium">Total Amount</Text>
+              <Text color="green.500">$337.61</Text>
+            </HStack>
+            <VStack space={2} mt="2">
+              <Text bold>Promo Code</Text>
+              <HStack space={3}>
+                <Input flex="1" />
+                <Button variant="outline">Apply</Button>
+              </HStack>
+            </VStack>
+            <Button my="2" onPress={() => setIsOpen(!isOpen)}>
+              Place Order
+            </Button>
           </VStack>
-          <Button my="2" onPress={() => setIsOpen(!isOpen)}>
-            Place Order
-          </Button>
-        </VStack>
+        </Box>
+        <Slide in={isOpen} placement="top">
+          <Box
+            p="2"
+            _text={{
+              color: 'orange.600',
+            }}
+            bg="orange.200"
+          >
+            Due to government restrictions around COVID- 19, you may experience
+            a delay in your delivery.
+          </Box>
+        </Slide>
       </Box>
-    </>
+    </Center>
   );
 };
diff --git a/example/storybook/stories/components/composites/Transitions/SlideWrapped.tsx b/example/storybook/stories/components/composites/Transitions/SlideWrapped.tsx
index 110bd50c8..b81c6d061 100644
--- a/example/storybook/stories/components/composites/Transitions/SlideWrapped.tsx
+++ b/example/storybook/stories/components/composites/Transitions/SlideWrapped.tsx
@@ -9,75 +9,77 @@ import {
   HStack,
   Text,
   CheckIcon,
+  Center,
 } from 'native-base';
 
 export const Example = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   return (
-    <Box
-      width={{ base: '75%', md: '50%' }}
-      h="100%"
-      // alignItems="flex-start"
-      justifyContent="center"
-    >
-      <VStack space={3} w="100%">
-        <HStack alignItems="flex-end">
-          <Heading>Order</Heading>
-        </HStack>
-        <HStack alignItems="center" justifyContent="space-between">
-          <Text fontWeight="medium">Sub Total</Text>
-          <Text color="blueGray.400">$298.77</Text>
-        </HStack>
-        <HStack alignItems="center" justifyContent="space-between">
-          <Text fontWeight="medium">Tax</Text>
-          <Text color="blueGray.400">$38.84</Text>
-        </HStack>
-        <HStack alignItems="center" justifyContent="space-between">
-          <Text fontWeight="medium">Total Amount</Text>
-          <Text color="emerald.600">$337.61</Text>
-        </HStack>
-        <VStack space={2} mt="2">
-          <Text bold>Promo Code</Text>
-          <HStack space={3}>
-            <Input flex="1" />
-            <Button variant="outline">Apply</Button>
+    <Center>
+      <Box w="300" justifyContent="center">
+        <VStack space={3}>
+          <HStack alignItems="flex-end">
+            <Heading>Order</Heading>
           </HStack>
-        </VStack>
-        <Button my="2" onPress={() => setIsOpen(!isOpen)}>
-          Place Order
-        </Button>
-      </VStack>
-      <Slide in={isOpen} placement="bottom">
-        <Box
-          w="100%"
-          position="absolute"
-          bottom="2"
-          p="2"
-          mx={-3}
-          borderRadius="xs"
-          bg="emerald.100"
-          alignItems="center"
-          justifyContent="center"
-          _dark={{ bg: 'emerald.200' }}
-        >
-          <HStack space={2}>
-            <CheckIcon
-              size="4"
-              color="emerald.600"
-              mt="1"
-              _dark={{ color: 'emerald.700' }}
-            />
-            <Text
-              color="emerald.600"
-              textAlign="center"
-              _dark={{ color: 'emerald.700' }}
-              fontWeight="medium"
-            >
-              Order Placed Successfully.
-            </Text>
+          <HStack alignItems="center" justifyContent="space-between">
+            <Text fontWeight="medium">Sub Total</Text>
+            <Text color="blueGray.400">$298.77</Text>
+          </HStack>
+          <HStack alignItems="center" justifyContent="space-between">
+            <Text fontWeight="medium">Tax</Text>
+            <Text color="blueGray.400">$38.84</Text>
           </HStack>
-        </Box>
-      </Slide>
-    </Box>
+          <HStack alignItems="center" justifyContent="space-between">
+            <Text fontWeight="medium">Total Amount</Text>
+            <Text color="emerald.600">$337.61</Text>
+          </HStack>
+          <VStack space={2} mt="2">
+            <Text bold>Promo Code</Text>
+            <HStack space={3}>
+              <Input flex="1" />
+              <Button variant="outline">Apply</Button>
+            </HStack>
+          </VStack>
+          <Button my="2" onPress={() => setIsOpen(!isOpen)}>
+            Place Order
+          </Button>
+        </VStack>
+        <Slide in={isOpen} placement="top">
+          <Box
+            w="100%"
+            position="absolute"
+            p="2"
+            borderRadius="xs"
+            bg="emerald.100"
+            alignItems="center"
+            justifyContent="center"
+            _dark={{
+              bg: 'emerald.200',
+            }}
+          >
+            <HStack space={2}>
+              <CheckIcon
+                size="4"
+                color="emerald.600"
+                mt="1"
+                _dark={{
+                  color: 'emerald.700',
+                }}
+              />
+              <Text
+                color="emerald.600"
+                textAlign="center"
+                _dark={{
+                  color: 'emerald.700',
+                }}
+                fontWeight="medium"
+              >
+                Order Placed Successfully.
+              </Text>
+            </HStack>
+          </Box>
+        </Slide>
+      </Box>
+    </Center>
   );
 };
diff --git a/example/storybook/stories/components/composites/Transitions/Stagger.tsx b/example/storybook/stories/components/composites/Transitions/Stagger.tsx
index df9b5178d..07d348270 100644
--- a/example/storybook/stories/components/composites/Transitions/Stagger.tsx
+++ b/example/storybook/stories/components/composites/Transitions/Stagger.tsx
@@ -6,13 +6,14 @@ import {
   Stagger,
   HStack,
   Icon,
+  Center,
 } from 'native-base';
 import { MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
 
 export const Example = () => {
   const { isOpen, onToggle } = useDisclose();
   return (
-    <Box>
+    <Center>
       <Box alignItems="center" minH="220">
         <Stagger
           visible={isOpen}
@@ -131,6 +132,6 @@ export const Example = () => {
           }
         />
       </HStack>
-    </Box>
+    </Center>
   );
 };
diff --git a/example/storybook/stories/components/primitives/Hidden/hiddenOnColorModes.tsx b/example/storybook/stories/components/primitives/Hidden/hiddenOnColorModes.tsx
index 0f0b2bba7..6ac573230 100644
--- a/example/storybook/stories/components/primitives/Hidden/hiddenOnColorModes.tsx
+++ b/example/storybook/stories/components/primitives/Hidden/hiddenOnColorModes.tsx
@@ -1,28 +1,45 @@
 import React from 'react';
-import { Hidden, Text, Button, Box, useColorMode } from 'native-base';
+import { Hidden, Button, Image, useColorMode, Center } from 'native-base';
 
 export const Example = () => {
-  const { colorMode, toggleColorMode } = useColorMode();
+  const { toggleColorMode } = useColorMode();
   return (
-    <>
+    <Center>
       <Button
-        colorScheme={colorMode === 'light' ? 'blue' : 'red'}
+        colorScheme="coolGray"
+        _light={{ _text: { color: 'white' } }}
         onPress={() => {
           toggleColorMode();
         }}
       >
         Change mode
       </Button>
-      <Hidden colorMode="light">
-        <Box bg="yellow.400" p="2" mt="5">
-          <Text>This text will be hidden on light mode</Text>
-        </Box>
-      </Hidden>
       <Hidden colorMode="dark">
-        <Box bg="green.400" p="2" mt="5">
-          <Text>This text will be hidden on dark mode</Text>
-        </Box>
+        <Center mt="5">
+          <Image
+            w="150"
+            h="150"
+            source={{
+              uri:
+                'https://images.unsplash.com/photo-1561566482-5fa7e82d88b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80',
+            }}
+            alt="image"
+          />
+        </Center>
+      </Hidden>
+      <Hidden colorMode="light">
+        <Center mt="5">
+          <Image
+            w="150"
+            h="150"
+            source={{
+              uri:
+                'https://images.unsplash.com/photo-1590083948603-b270aff24cc1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80',
+            }}
+            alt="image"
+          />
+        </Center>
       </Hidden>
-    </>
+    </Center>
   );
 };
diff --git a/example/storybook/stories/components/primitives/Icon/AllIcons.tsx b/example/storybook/stories/components/primitives/Icon/AllIcons.tsx
index 13131d0a0..de04218a1 100644
--- a/example/storybook/stories/components/primitives/Icon/AllIcons.tsx
+++ b/example/storybook/stories/components/primitives/Icon/AllIcons.tsx
@@ -34,7 +34,7 @@ export const Example = () => {
   const cols = useBreakpointValue({
     base: 3,
     sm: 4,
-    md: 12,
+    md: 8,
   });
   const icons = [
     {
diff --git a/example/storybook/stories/components/primitives/Icon/CustomIcon.tsx b/example/storybook/stories/components/primitives/Icon/CustomIcon.tsx
index db51a6d28..4e5d63000 100644
--- a/example/storybook/stories/components/primitives/Icon/CustomIcon.tsx
+++ b/example/storybook/stories/components/primitives/Icon/CustomIcon.tsx
@@ -1,25 +1,27 @@
 import React from 'react';
-import { Icon } from 'native-base';
+import { Icon, Center } from 'native-base';
 import { Path, G } from 'react-native-svg';
 export const Example = () => {
   return (
-    <Icon viewBox="0 0 870 873">
-      <G fillRule="nonzero" stroke="none" strokeWidth={1} fill="none">
-        <Path
-          d="M435 .1C194.8.1.1 194.8.1 435c0 187.3 118.4 346.9 284.4 408.1 3.3-29.9 15-57.2 32.7-79.6 12.1-15.4 26.9-28.5 43.9-38.4 2.1-5 4.6-10.6 7.1-16.6-50.3-26-84.7-78.1-84.7-138.6 0-51.7 25.3-97.7 64-125.9-10.9-20.6-21.3-40.2-31.8-58.2-18.1-31.5-46.7-59.7-68.4-78.9-21 11.9-47.8 4.7-59.7-16.3-11.9-21-4.7-47.8 16.3-59.7 21-11.9 47.4-4.7 59.7 15.9v.4c7.2 12.7 7.2 27.5 1.8 39.8 22.8 19.5 56.8 52.5 77.8 89 9.8 17 19.5 34.7 29.3 53.5 20.3-9.4 42.7-14.8 66.2-14.8 21.3 0 41.6 4.3 60.1 11.9 9.8-18.5 19.5-36.2 28.9-52.8 21-36.2 54.6-68.7 77.4-88.3-5.4-12.3-5.4-26.8 1.8-39.4v-.4c12.3-20.6 38.7-27.9 59.3-15.9 21 11.9 28.2 38.7 16.3 59.3-11.9 21-38.4 28.2-59.3 16.3-21.7 18.8-49.9 47.4-68 78.5-10.1 17.4-20.3 36.5-30.8 56.4 42 27.9 69.8 75.3 69.8 129.5 0 63-36.9 116.9-90.4 141.5.9 2.7 2 4.9 3 7.2 47 22.3 81.1 67.4 87.9 121.1C755.9 776 869.9 618.8 869.9 435 869.9 194.8 675.2.1 435 .1z"
-          fill="#CA0000"
-        />
-        <Path
-          d="M284.8 843.3h.1-.1zM284.8 843.3c-.1 0-.3-.1-.4-.1.2 0 .3 0 .4.1z"
-          fill="#FFF"
-        />
-        <G fill="#FFF" stroke="#FFF" strokeWidth={5}>
+    <Center>
+      <Icon viewBox="0 0 870 873">
+        <G fillRule="nonzero" stroke="none" strokeWidth={1} fill="none">
           <Path
-            d="M485.2 5.8c-20.6-11.9-47-4.7-59.3 15.9v.4c-7.2 12.7-7.2 27.1-1.8 39.4-22.8 19.5-56.4 52.1-77.4 88.3-9.4 16.6-19.2 34.4-28.9 52.8-18.5-7.6-38.7-11.9-60.1-11.9-23.5 0-45.9 5.4-66.2 14.8-9.8-18.8-19.5-36.5-29.3-53.5-21-36.5-55-69.5-77.8-89 5.4-12.3 5.4-27.1-1.8-39.8v-.4C70.3 2.2 43.9-5.1 22.9 6.9 1.9 18.8-5.3 45.6 6.6 66.6c11.9 21 38.7 28.2 59.7 16.3 21.7 19.2 50.3 47.4 68.4 78.9 10.5 18.1 21 37.6 31.8 58.2-38.7 28.2-64 74.2-64 125.9 0 60.4 34.4 112.5 84.7 138.6-2.5 6.2-5.1 11.9-7.2 17-41.6 24.4-70.8 67.4-76.4 117.6 46.9 17.3 97.6 26.8 150.6 26.8 56.2 0 109.9-10.7 159.2-30.1-7.1-52.8-40.5-97.3-86.8-119.8-1.1-2.9-2.5-5.4-3.6-8.7 53.5-24.6 90.4-78.5 90.4-141.5 0-54.3-27.9-101.7-69.8-129.5 10.5-19.9 20.6-39.1 30.8-56.4 18.1-31.1 46.3-59.7 68-78.5 21 11.9 47.4 4.7 59.3-16.3 11.7-20.5 4.5-47.3-16.5-59.3z"
-            transform="translate(181 224)"
+            d="M435 .1C194.8.1.1 194.8.1 435c0 187.3 118.4 346.9 284.4 408.1 3.3-29.9 15-57.2 32.7-79.6 12.1-15.4 26.9-28.5 43.9-38.4 2.1-5 4.6-10.6 7.1-16.6-50.3-26-84.7-78.1-84.7-138.6 0-51.7 25.3-97.7 64-125.9-10.9-20.6-21.3-40.2-31.8-58.2-18.1-31.5-46.7-59.7-68.4-78.9-21 11.9-47.8 4.7-59.7-16.3-11.9-21-4.7-47.8 16.3-59.7 21-11.9 47.4-4.7 59.7 15.9v.4c7.2 12.7 7.2 27.5 1.8 39.8 22.8 19.5 56.8 52.5 77.8 89 9.8 17 19.5 34.7 29.3 53.5 20.3-9.4 42.7-14.8 66.2-14.8 21.3 0 41.6 4.3 60.1 11.9 9.8-18.5 19.5-36.2 28.9-52.8 21-36.2 54.6-68.7 77.4-88.3-5.4-12.3-5.4-26.8 1.8-39.4v-.4c12.3-20.6 38.7-27.9 59.3-15.9 21 11.9 28.2 38.7 16.3 59.3-11.9 21-38.4 28.2-59.3 16.3-21.7 18.8-49.9 47.4-68 78.5-10.1 17.4-20.3 36.5-30.8 56.4 42 27.9 69.8 75.3 69.8 129.5 0 63-36.9 116.9-90.4 141.5.9 2.7 2 4.9 3 7.2 47 22.3 81.1 67.4 87.9 121.1C755.9 776 869.9 618.8 869.9 435 869.9 194.8 675.2.1 435 .1z"
+            fill="#CA0000"
           />
+          <Path
+            d="M284.8 843.3h.1-.1zM284.8 843.3c-.1 0-.3-.1-.4-.1.2 0 .3 0 .4.1z"
+            fill="#FFF"
+          />
+          <G fill="#FFF" stroke="#FFF" strokeWidth={5}>
+            <Path
+              d="M485.2 5.8c-20.6-11.9-47-4.7-59.3 15.9v.4c-7.2 12.7-7.2 27.1-1.8 39.4-22.8 19.5-56.4 52.1-77.4 88.3-9.4 16.6-19.2 34.4-28.9 52.8-18.5-7.6-38.7-11.9-60.1-11.9-23.5 0-45.9 5.4-66.2 14.8-9.8-18.8-19.5-36.5-29.3-53.5-21-36.5-55-69.5-77.8-89 5.4-12.3 5.4-27.1-1.8-39.8v-.4C70.3 2.2 43.9-5.1 22.9 6.9 1.9 18.8-5.3 45.6 6.6 66.6c11.9 21 38.7 28.2 59.7 16.3 21.7 19.2 50.3 47.4 68.4 78.9 10.5 18.1 21 37.6 31.8 58.2-38.7 28.2-64 74.2-64 125.9 0 60.4 34.4 112.5 84.7 138.6-2.5 6.2-5.1 11.9-7.2 17-41.6 24.4-70.8 67.4-76.4 117.6 46.9 17.3 97.6 26.8 150.6 26.8 56.2 0 109.9-10.7 159.2-30.1-7.1-52.8-40.5-97.3-86.8-119.8-1.1-2.9-2.5-5.4-3.6-8.7 53.5-24.6 90.4-78.5 90.4-141.5 0-54.3-27.9-101.7-69.8-129.5 10.5-19.9 20.6-39.1 30.8-56.4 18.1-31.1 46.3-59.7 68-78.5 21 11.9 47.4 4.7 59.3-16.3 11.7-20.5 4.5-47.3-16.5-59.3z"
+              transform="translate(181 224)"
+            />
+          </G>
         </G>
-      </G>
-    </Icon>
+      </Icon>
+    </Center>
   );
 };
diff --git a/example/storybook/stories/components/primitives/Icon/Sizes.tsx b/example/storybook/stories/components/primitives/Icon/Sizes.tsx
index 5154efd8a..53fc67153 100644
--- a/example/storybook/stories/components/primitives/Icon/Sizes.tsx
+++ b/example/storybook/stories/components/primitives/Icon/Sizes.tsx
@@ -3,21 +3,7 @@ import { Icon, Heading, Center, VStack } from 'native-base';
 import { Ionicons } from '@expo/vector-icons';
 
 export const Example = () => {
-  const sizes = [
-    '10',
-    '50px',
-    '2xl',
-    // 'xs',
-    // 'sm',
-    // 'md',
-    // 'lg',
-    // 'xl',
-    // '2xl',
-    // '3xl',
-    // '4xl',
-    // '5xl',
-    // '6xl',
-  ];
+  const sizes = ['10', '50px', '2xl'];
   return (
     <Center>
       <Heading mb="10">Sizes</Heading>
diff --git a/example/storybook/stories/components/primitives/Image/Basic.tsx b/example/storybook/stories/components/primitives/Image/Basic.tsx
index 4d3a8b000..802c826db 100644
--- a/example/storybook/stories/components/primitives/Image/Basic.tsx
+++ b/example/storybook/stories/components/primitives/Image/Basic.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
-import { Image } from 'native-base';
+import { Center, Image } from 'native-base';
 export function Example() {
   return (
-    <Image
-      source={{
-        uri: 'https://wallpaperaccess.com/full/317501.jpg',
-      }}
-      alt="Alternate Text"
-      size="xl"
-    />
+    <Center>
+      <Image
+        source={{
+          uri: 'https://wallpaperaccess.com/full/317501.jpg',
+        }}
+        alt="Alternate Text"
+        size="xl"
+      />
+    </Center>
   );
 }
diff --git a/example/storybook/stories/components/primitives/Image/BorderRadius.tsx b/example/storybook/stories/components/primitives/Image/BorderRadius.tsx
index a479d77da..c6624e164 100644
--- a/example/storybook/stories/components/primitives/Image/BorderRadius.tsx
+++ b/example/storybook/stories/components/primitives/Image/BorderRadius.tsx
@@ -1,15 +1,17 @@
 import React from 'react';
-import { Image } from 'native-base';
+import { Image, Center } from 'native-base';
 export function Example() {
   return (
-    <Image
-      size={150}
-      resizeMode={'contain'}
-      borderRadius={100}
-      source={{
-        uri: 'https://wallpaperaccess.com/full/317501.jpg',
-      }}
-      alt="Alternate Text"
-    />
+    <Center>
+      <Image
+        size={150}
+        resizeMode={'contain'}
+        borderRadius={100}
+        source={{
+          uri: 'https://wallpaperaccess.com/full/317501.jpg',
+        }}
+        alt="Alternate Text"
+      />
+    </Center>
   );
 }
diff --git a/example/storybook/stories/components/primitives/Image/FallbackElement.tsx b/example/storybook/stories/components/primitives/Image/FallbackElement.tsx
index 0a46c30ec..8b2423d7c 100644
--- a/example/storybook/stories/components/primitives/Image/FallbackElement.tsx
+++ b/example/storybook/stories/components/primitives/Image/FallbackElement.tsx
@@ -1,17 +1,19 @@
 import React from 'react';
-import { Image, Box } from 'native-base';
+import { Image, Box, Center } from 'native-base';
 export function Example() {
   return (
-    <Image
-      size={150}
-      alt="fallback text"
-      borderRadius={2}
-      src="https://cdn.pixaba.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg"
-      fallbackElement={
-        <Box boxSize={20} bg="red.100">
-          This is a box
-        </Box>
-      }
-    />
+    <Center>
+      <Image
+        size={150}
+        alt="fallback text"
+        borderRadius={2}
+        src="https://cdn.pixaba.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg"
+        fallbackElement={
+          <Box boxSize={20} bg="red.100">
+            This is a box
+          </Box>
+        }
+      />
+    </Center>
   );
 }
diff --git a/example/storybook/stories/components/primitives/Image/FallbackSupport.tsx b/example/storybook/stories/components/primitives/Image/FallbackSupport.tsx
index 5bba0fdba..79fc1f9cb 100644
--- a/example/storybook/stories/components/primitives/Image/FallbackSupport.tsx
+++ b/example/storybook/stories/components/primitives/Image/FallbackSupport.tsx
@@ -1,17 +1,19 @@
 import React from 'react';
-import { Image } from 'native-base';
+import { Image, Center } from 'native-base';
 export function Example() {
   return (
-    <Image
-      size={150}
-      alt="fallback text"
-      borderRadius={100}
-      source={{
-        uri: 'https://-page-icon.png',
-      }}
-      fallbackSource={{
-        uri: 'https://www.w3schools.com/css/img_lights.jpg',
-      }}
-    />
+    <Center>
+      <Image
+        size={150}
+        alt="fallback text"
+        borderRadius={100}
+        source={{
+          uri: 'https://-page-icon.png',
+        }}
+        fallbackSource={{
+          uri: 'https://www.w3schools.com/css/img_lights.jpg',
+        }}
+      />
+    </Center>
   );
 }
diff --git a/example/storybook/stories/components/primitives/Image/Sizes.tsx b/example/storybook/stories/components/primitives/Image/Sizes.tsx
index a92f92767..788cb7790 100644
--- a/example/storybook/stories/components/primitives/Image/Sizes.tsx
+++ b/example/storybook/stories/components/primitives/Image/Sizes.tsx
@@ -3,7 +3,7 @@ import { VStack, Image, ScrollView, Heading, Center } from 'native-base';
 export function Example() {
   return (
     <ScrollView px="20">
-      <Center mt="3">
+      <Center mt="3" h="80">
         <Heading mb="10">Image Sizes</Heading>
         <VStack space={2} alignItems="center" safeAreaTop my={6}>
           {['xs', 'sm', 'md', 'lg', 'xl', '2xl'].map((size) => (
diff --git a/example/storybook/stories/components/primitives/Image/WithRef.tsx b/example/storybook/stories/components/primitives/Image/WithRef.tsx
index 41e2eed7c..a4a72a732 100644
--- a/example/storybook/stories/components/primitives/Image/WithRef.tsx
+++ b/example/storybook/stories/components/primitives/Image/WithRef.tsx
@@ -1,6 +1,6 @@
 //@ts-nocheck
 import React from 'react';
-import { Image } from 'native-base';
+import { Center, Image } from 'native-base';
 
 export function Example() {
   const myRef = React.useRef(null);
@@ -11,13 +11,15 @@ export function Example() {
   }, [myRef]);
 
   return (
-    <Image
-      ref={myRef}
-      source={{
-        uri: 'https://wallpaperaccess.com/full/317501.jpg',
-      }}
-      alt="Alternate Text"
-      size="xl"
-    />
+    <Center>
+      <Image
+        ref={myRef}
+        source={{
+          uri: 'https://wallpaperaccess.com/full/317501.jpg',
+        }}
+        alt="Alternate Text"
+        size="xl"
+      />
+    </Center>
   );
 }
diff --git a/example/storybook/stories/hooks/useDisclose/Usage.tsx b/example/storybook/stories/hooks/useDisclose/Usage.tsx
index 5b4460270..395b3c399 100644
--- a/example/storybook/stories/hooks/useDisclose/Usage.tsx
+++ b/example/storybook/stories/hooks/useDisclose/Usage.tsx
@@ -16,7 +16,7 @@ export const Example = () => {
             reversed. Deleted data can not be recovered.
           </Modal.Body>
           <Modal.Footer>
-            <Button variant="unstyled" mr="1">
+            <Button variant="unstyled" mr="1" onPress={onClose}>
               Cancel
             </Button>
             <Button colorScheme="error" onPress={onClose}>

From a442c7c27281d1539670fb7d61b8558a822f83be Mon Sep 17 00:00:00 2001
From: Suraj Ahmed <suraj@geekyants.com>
Date: Fri, 21 Jan 2022 13:19:26 +0530
Subject: [PATCH 6/6] v3.3.4-rc.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 60509ba49..a8dfe35b6 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.3.3",
+  "version": "3.3.4-rc.0",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",