From 58dba75b449e540d02df7c7492489320a4f6050d Mon Sep 17 00:00:00 2001
From: madhav23bansal <madhavb230100@gmail.com>
Date: Thu, 9 Sep 2021 18:29:53 +0530
Subject: [PATCH 1/2] Changes to snackplayer and code strict mode

---
 docs/alertDialog.md                           |  6 +-
 docs/appDrawer.md                             |  4 +-
 docs/box.md                                   |  6 +-
 docs/buildingAppBar.md                        |  8 +--
 docs/buildingDrawerNavigation.md              | 66 +++++++++----------
 docs/buildingFooterTabs.md                    | 38 +++++------
 docs/buildingSearchBar.md                     | 28 ++++----
 docs/buildingSwipeList.md                     | 24 +++----
 docs/buildingTabView.md                       | 12 ++--
 docs/builldingCard.md                         | 12 ++--
 docs/container.md                             |  2 +-
 docs/customizingComponents.md                 |  4 +-
 docs/form.md                                  | 14 ++--
 docs/hidden.md                                | 16 ++---
 docs/loginsignupforms.md                      | 20 +++---
 docs/migration/Guide.md                       |  2 +-
 docs/nativebase-factory.md                    |  8 +--
 docs/nativebase-formik-ui.md                  |  2 +-
 docs/overlay.md                               |  4 +-
 docs/pseudoProps.md                           |  2 +-
 docs/reactHooksForms.md                       | 26 ++++----
 docs/responsive.md                            |  6 +-
 docs/setup-provider.md                        |  2 +-
 docs/textField.md                             |  6 +-
 docs/theme.md                                 |  4 +-
 docs/todo-list.md                             | 14 ++--
 docs/transition.md                            | 12 ++--
 docs/useAccessibleColors.md                   |  6 +-
 docs/useBreakPointValue.md                    |  4 +-
 docs/useClipboard.md                          |  8 +--
 docs/useColorMode.md                          |  4 +-
 docs/useColorModeValue.md                     |  4 +-
 docs/useContrastText.md                       |  8 +--
 docs/useDisclosure.md                         |  6 +-
 docs/useMediaQuery.md                         | 10 +--
 docs/usePopOver.md                            |  2 +-
 docs/useToken.md                              |  2 +-
 docs/utilityProps.md                          | 26 ++++----
 .../storybook-example-transformer/index.js    |  2 +-
 sidebars.js                                   |  2 +-
 40 files changed, 216 insertions(+), 216 deletions(-)

diff --git a/docs/alertDialog.md b/docs/alertDialog.md
index 17a9c2fdd..1d0d8e1a2 100644
--- a/docs/alertDialog.md
+++ b/docs/alertDialog.md
@@ -56,7 +56,7 @@ function AlertDialogComponent() {
             <Button ref={cancelRef} onPress={onClose}>
               Cancel
             </Button>
-            <Button colorScheme="red" onPress={onClose} ml={3}>
+            <Button colorScheme="red" onPress={onClose} ml="3">
               Delete
             </Button>
           </AlertDialog.Footer>
@@ -71,7 +71,7 @@ function AlertDialogComponent() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <AlertDialogComponent />
       </Center>
     </NativeBaseProvider>
@@ -122,7 +122,7 @@ function AlertDialogComponent() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <AlertDialogComponent />
       </Center>
     </NativeBaseProvider>
diff --git a/docs/appDrawer.md b/docs/appDrawer.md
index 6890a689e..7e0afecbd 100644
--- a/docs/appDrawer.md
+++ b/docs/appDrawer.md
@@ -34,13 +34,13 @@ function AppDrawer(){
     "forum",
   ];
 
-  return <SimpleGrid columns={5} spacingY={4} spacingX={4}>
+  return <SimpleGrid columns="5" spacingY="4" spacingX="4">
       {icons.map((icon) => (
         <IconButton
           borderRadius="full"
           colorScheme="indigo"
           variant="solid"
-          p={4}
+          p="4"
           icon={<Icon name={icon} as={MaterialIcons} size='sm' />}
         />
       ))}
diff --git a/docs/box.md b/docs/box.md
index 5c884c1ef..e22130f75 100644
--- a/docs/box.md
+++ b/docs/box.md
@@ -41,7 +41,7 @@ export const Example = () => {
           end: [1, 0],
         },
       }}
-      p={12}
+      p="12"
       rounded="lg"
       _text={{
         fontSize: "md",
@@ -63,7 +63,7 @@ const config = {
 export default () => {
   return (
     <NativeBaseProvider config={config}>
-      <Center flex={1}>
+      <Center flex="1">
         <Example />
       </Center>
     </NativeBaseProvider>
@@ -89,7 +89,7 @@ const Example = () => {
           end: [1, 0],
         },
       }}
-      p={12}
+      p="12"
       rounded="lg"
       _text={{ fontSize: 'md', fontWeight: 'bold', color: 'white' }}
     >
diff --git a/docs/buildingAppBar.md b/docs/buildingAppBar.md
index 9f43bfcc8..463c93df3 100644
--- a/docs/buildingAppBar.md
+++ b/docs/buildingAppBar.md
@@ -21,12 +21,12 @@ function AppBar(){
 
         <Box safeAreaTop backgroundColor="#6200ee" />
 
-        <HStack bg='#6200ee' px={1} py={3} justifyContent='space-between' alignItems='center'>
-          <HStack space={4} alignItems='center'>
+        <HStack bg='#6200ee' px="1" py="3" justifyContent='space-between' alignItems='center'>
+          <HStack space="4" alignItems='center'>
             <IconButton icon={<Icon size="sm" as={<MaterialIcons name='menu' />} color="white" />} />
-            <Text color="white" fontSize={20} fontWeight='bold'>Home</Text>
+            <Text color="white" fontSize="20" fontWeight='bold'>Home</Text>
           </HStack>
-          <HStack space={2}>
+          <HStack space="2">
             <IconButton icon={<Icon as={<MaterialIcons name='favorite' />} size='sm' color="white" />} />
             <IconButton icon={<Icon as={<MaterialIcons name='search' />}
             color="white" size='sm'  />} />
diff --git a/docs/buildingDrawerNavigation.md b/docs/buildingDrawerNavigation.md
index 5ee14a952..4e59c8e32 100644
--- a/docs/buildingDrawerNavigation.md
+++ b/docs/buildingDrawerNavigation.md
@@ -36,11 +36,11 @@ import {
 const Drawer = createDrawerNavigator();
 function Component(props) {
   return (
-    <HStack alignItems="center" mt={6}>
-      <Pressable onPress={() => props.navigation.toggleDrawer()} position="absolute" ml={2} zIndex={1}>
-        <HamburgerIcon ml={2} size="sm"/>
+    <HStack alignItems="center" mt="6">
+      <Pressable onPress={() => props.navigation.toggleDrawer()} position="absolute" ml="2" zIndex="1">
+        <HamburgerIcon ml="2" size="sm"/>
       </Pressable>
-      <Center flex={1} >
+      <Center flex="1" >
         <Heading size="md">{props.route.name}</Heading>
       </Center>
     </HStack>
@@ -69,72 +69,72 @@ const getIcon = (screenName) => {
 function CustomDrawerContent(props) {
   return (
     <DrawerContentScrollView {...props} safeArea>
-    <VStack space={6} my={2} mx={1}>
-      <Box px={4}>
+    <VStack space="6" my="2" mx="1">
+      <Box px="4">
         <Text bold color="gray.700">Mail</Text>
-        <Text fontSize={14} mt={1} color="gray.500" fontWeight={500}>john_doe@gmail.com</Text>
+        <Text fontSize="14" mt="1" color="gray.500" fontWeight="500">john_doe@gmail.com</Text>
       </Box>
-    <VStack divider={<Divider />} space={4}>
-      <VStack space={3}>
+    <VStack divider={<Divider />} space="4">
+      <VStack space="3">
         {props.state.routeNames.map((name, index) => (
             <Pressable
-              px={5}
-              py={3}
+              px="5"
+              py="3"
               rounded="md"
               bg={index === props.state.index ? 'rgba(6, 182, 212, 0.1)' : 'transparent'}
               onPress={(event) => {
                 props.navigation.navigate(name);
               }}
               >
-                <HStack space={7} alignItems="center">
+                <HStack space="7" alignItems="center">
                   <Icon
                   color={index === props.state.index ? 'primary.500' : 'gray.500'}
-                  size={5} as={<MaterialCommunityIcons name={getIcon(name)}/>}  />
-                  <Text fontWeight={500} color={index === props.state.index ? 'primary.500' : 'gray.700'}>
+                  size="5" as={<MaterialCommunityIcons name={getIcon(name)}/>}  />
+                  <Text fontWeight="500" color={index === props.state.index ? 'primary.500' : 'gray.700'}>
                   {name}
                   </Text>
                 </HStack>
               </Pressable>
             ))}
           </VStack>
-          <VStack space={5}>
-            <Text fontWeight={500} fontSize={14} px={5} color="gray.500">Labels</Text>
-            <VStack space={3}>
+          <VStack space="5">
+            <Text fontWeight="500" fontSize="14" px="5" color="gray.500">Labels</Text>
+            <VStack space="3">
               <Pressable
-                px={5}
-                py={3}
+                px="5"
+                py="3"
               >
-                <HStack space={7} alignItems="center">
+                <HStack space="7" alignItems="center">
                   <Icon
                   color='gray.500'
-                  size={5} as={<MaterialCommunityIcons name='bookmark'/>}  />
-                  <Text color='gray.700' fontWeight={500}>
+                  size="5" as={<MaterialCommunityIcons name='bookmark'/>}  />
+                  <Text color='gray.700' fontWeight="500">
                     Family
                   </Text>
                 </HStack>
               </Pressable>
                <Pressable
-                px={5}
-                py={2}
+                px="5"
+                py="2"
                >
-                <HStack space={7} alignItems="center">
+                <HStack space="7" alignItems="center">
                   <Icon
                   color='gray.500'
-                  size={5} as={<MaterialCommunityIcons name='bookmark'/>}  />
-                  <Text color='gray.700'  fontWeight={500}>
+                  size="5" as={<MaterialCommunityIcons name='bookmark'/>}  />
+                  <Text color='gray.700'  fontWeight="500">
                     Friends
                   </Text>
                 </HStack>
               </Pressable>
               <Pressable
-                px={5}
-                py={3}
+                px="5"
+                py="3"
               >
-                <HStack space={7} alignItems="center">
+                <HStack space="7" alignItems="center">
                   <Icon
                   color='gray.500'
-                  size={5} as={<MaterialCommunityIcons name='bookmark'/>}  />
-                  <Text  fontWeight={500} color='gray.700'>
+                  size="5" as={<MaterialCommunityIcons name='bookmark'/>}  />
+                  <Text  fontWeight="500" color='gray.700'>
                     Work
                   </Text>
                 </HStack>
@@ -148,7 +148,7 @@ function CustomDrawerContent(props) {
 }
 function MyDrawer() {
   return (
-    <Box safeArea flex={1} >
+    <Box safeArea flex="1" >
     <Drawer.Navigator
       drawerContent={(props) => <CustomDrawerContent {...props} />}
     >
diff --git a/docs/buildingFooterTabs.md b/docs/buildingFooterTabs.md
index f2d847ae0..b696cf4a0 100644
--- a/docs/buildingFooterTabs.md
+++ b/docs/buildingFooterTabs.md
@@ -31,79 +31,79 @@ export default function App() {
   const [selected, setSelected] = React.useState(1);
   return (
     <NativeBaseProvider>
-       <Box flex={1} bg="white" safeAreaTop>
-        <Center flex={1}>
+       <Box flex="1" bg="white" safeAreaTop>
+        <Center flex="1">
         </Center>
-        <HStack bg="primary.500" alignItems="center" safeAreaBottom shadow={6}>
+        <HStack bg="primary.500" alignItems="center" safeAreaBottom shadow="6">
           <Pressable
             cursor="pointer"
             opacity={selected === 0 ? 1 : 0.5}
-            py={2}
-            flex={1}
+            py="2"
+            flex="1"
             onPress={() => setSelected(0)}
           >
             <Center>
               <Icon
-                mb={1}
+                mb="1"
                 as={<MaterialCommunityIcons name="heart" />}
                 color="white"
                 size="xs"
               />
 
-              <Text color="white" fontSize={14}>Favorites</Text>
+              <Text color="white" fontSize="14">Favorites</Text>
             </Center>
           </Pressable>
           <Pressable
             cursor="pointer"
             opacity={selected === 1 ? 1 : 0.5}
-            py={2}
-            flex={1}
+            py="2"
+            flex="1"
             onPress={() => setSelected(1)}
           >
             <Center>
               <Icon
-                mb={1}
+                mb="1"
                 as={<MaterialCommunityIcons name="music-note" />}
                 color="white"
                 size="xs"
               />
 
-              <Text color="white" fontSize={14}>Music</Text>
+              <Text color="white" fontSize="14">Music</Text>
             </Center>
           </Pressable>
           <Pressable
             cursor="pointer"
             opacity={selected === 2 ? 1 : 0.6}
-            py={2}
-            flex={1}
+            py="2"
+            flex="1"
             onPress={() => setSelected(2)}
           >
             <Center>
               <Icon
-                mb={1}
+                mb="1"
                 as={<MaterialIcons name="location-pin" />}
                 color="white"
                 size="xs"
               />
 
-              <Text color="white" fontSize={14}>Places</Text>
+              <Text color="white" fontSize="14">Places</Text>
             </Center>
           </Pressable>
           <Pressable
             cursor="pointer"
             opacity={selected === 3 ? 1 : 0.5}
-            py={2}
-            flex={1}
+            py="2"
+            flex="1"
             onPress={() => setSelected(3)}
           >
             <Center>
               <Icon
-                mb={1}
+                mb="1"
                 as={<MaterialCommunityIcons name="newspaper" />}
                 color="white"
                 size="xs"
               />
-              <Text color="white" fontSize={14}>News</Text>
+              <Text color="white" fontSize="14">News</Text>
             </Center>
           </Pressable>
         </HStack>
diff --git a/docs/buildingSearchBar.md b/docs/buildingSearchBar.md
index be697f529..3949946af 100644
--- a/docs/buildingSearchBar.md
+++ b/docs/buildingSearchBar.md
@@ -21,39 +21,39 @@ import { FontAwesome5 } from '@expo/vector-icons';
 
 function SearchBar(){
   return (
-    <VStack space={8} width="100%">
-      <VStack width="100%" space={2}>
+    <VStack space="8" width="100%">
+      <VStack width="100%" space="2">
         <Box>Cupertino</Box>
         <Input
           placeholder="Search"
           variant="filled"
           width="100%"
           bg="gray.200"
-          borderRadius={10}
-          py={1}
-          px={2}
+          borderRadius="10"
+          py="1"
+          px="2"
           _web={{
             _focus: { borderColor: 'muted.300', style: { boxShadow: 'none' } },
             }}
-          InputLeftElement={<Icon size='sm' ml={2} size={5} color="gray.400" as={<Ionicons name="ios-search" />} />}
+          InputLeftElement={<Icon size='sm' ml="2" size="5" color="gray.400" as={<Ionicons name="ios-search" />} />}
         />
       </VStack>
 
-      <VStack width="100%" space={2}>
+      <VStack width="100%" space="2">
         <Box>Material</Box>
         <Input
           placeholder="Search People & Places"
           bg="#fff"
           width="100%"
-          borderRadius={4}
-          py={3}
-          px={1}
-          fontSize={14}
+          borderRadius="4"
+          py="3"
+          px="1"
+          fontSize="14"
            _web={{
             _focus: { borderColor: 'muted.300', style: { boxShadow: 'none' } },
             }}
-          InputLeftElement={<Icon size='sm' m={2} size={6} color="gray.400" as={<MaterialIcons name="search" />} />}
-          InputRightElement={<Icon size='sm' m={2} size={6} color="gray.400" as={<MaterialIcons name="mic" />} />}
+          InputLeftElement={<Icon size='sm' m="2" size="6" color="gray.400" as={<MaterialIcons name="search" />} />}
+          InputRightElement={<Icon size='sm' m="2" size="6" color="gray.400" as={<MaterialIcons name="mic" />} />}
         />
         </VStack>
       </VStack>
@@ -63,7 +63,7 @@ function SearchBar(){
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1} px={2}>
+      <Center flex="1" px="2">
         <SearchBar/>
       </Center>
     </NativeBaseProvider>
diff --git a/docs/buildingSwipeList.md b/docs/buildingSwipeList.md
index e40c81eba..130e14ed4 100644
--- a/docs/buildingSwipeList.md
+++ b/docs/buildingSwipeList.md
@@ -27,8 +27,8 @@ export default function App() {
 
     return (
       <NativeBaseProvider >
-        <Box textAlign="center" bg= 'white' flex= {1} safeAreaTop>
-          <Heading my={6} textAlign="center" size="lg">Swipe list Example</Heading>
+        <Box textAlign="center" bg="white" flex= "1" safeAreaTop>
+          <Heading my="6" textAlign="center" size="lg">Swipe list Example</Heading>
             <Basic />
         </Box>
         </NativeBaseProvider>
@@ -68,9 +68,9 @@ function Basic() {
                 alignItems= 'center'
                 bg="white"
                 borderBottomColor= 'trueGray.200'
-                borderBottomWidth= {1}
+                borderBottomWidth= "1"
                 justifyContent= 'center'
-                height= {50}
+                height= "50"
                 underlayColor={'#AAA'}
                 _pressed={{
                   bg:'trueGray.200'
@@ -78,9 +78,9 @@ function Basic() {
                 py={8}
             >
 
-                  <HStack width="100%" px={4}>
-                    <HStack space={2} alignItems="center">
-                      <Avatar color="white" bg={"secondary.700"}>
+                  <HStack width="100%" px="4">
+                    <HStack space="2" alignItems="center">
+                      <Avatar color="white" bg="secondary.700">
                         {index}
                       </Avatar>
                       <Text>
@@ -94,11 +94,11 @@ function Basic() {
 
     const renderHiddenItem = (data, rowMap) => (
         <HStack
-        flex= {1}
-        pl={2}
+        flex= "1"
+        pl="2"
         >
             <Pressable
-             px={4}
+             px="4"
               ml='auto'
               cursor="pointer"
               bg="dark.500"
@@ -111,7 +111,7 @@ function Basic() {
                 <Icon as={<Ionicons name="close"  />} color='white'/>
             </Pressable>
             <Pressable
-              px={4}
+              px="4"
               cursor="pointer"
               bg="red.500"
               justifyContent="center"
@@ -127,7 +127,7 @@ function Basic() {
 
     return (
         <Box  bg= 'white' safeArea
-        flex= {1}>
+        flex= "1">
             <SwipeListView
                 data={listData}
                 renderItem={renderItem}
diff --git a/docs/buildingTabView.md b/docs/buildingTabView.md
index 5b44cc656..e8b473e59 100644
--- a/docs/buildingTabView.md
+++ b/docs/buildingTabView.md
@@ -18,15 +18,15 @@ import {NativeBaseProvider,Box, Text} from 'native-base';
 import Constants from 'expo-constants';
 
 const FirstRoute = () => (
-  <Box flex={1} bg="pink.400" />
+  <Box flex="1" bg="pink.400" />
 );
 
 const SecondRoute = () => (
-  <Box flex={1} bg="violet.400"  />
+  <Box flex="1" bg="violet.400"  />
 );
 
 const ThirdRoute = () => (
-  <Box flex={1} bg="red.400"  />
+  <Box flex="1" bg="red.400"  />
 );
 
 const initialLayout = { width: Dimensions.get('window').width };
@@ -63,9 +63,9 @@ export default function TabViewExample() {
 
           return (
             <Box
-             flex = {1}
-              alignItems= 'center'
-              p= {2}
+              flex="1"
+              alignItems='center'
+              p="2"
               cursor="pointer"
              >
             <Pressable
diff --git a/docs/builldingCard.md b/docs/builldingCard.md
index 514b14c30..70518b9d6 100644
--- a/docs/builldingCard.md
+++ b/docs/builldingCard.md
@@ -22,17 +22,17 @@ function CardComponent(){
  return(
     <Box
       bg="white"
-      shadow={2}
+      shadow="2"
       rounded="lg"
       maxWidth="90%"
     >
-      <Image source={{uri: "https://sample-example.nativebase.io/static/media/dawki-river.ebbf5434.png"}} alt="image base" resizeMode="cover" height={150} roundedTop="md" />
-      <Text bold position="absolute" color="white" top={0} m={[4, 4, 8]}>
+      <Image source={{uri: "https://sample-example.nativebase.io/static/media/dawki-river.ebbf5434.png"}} alt="image base" resizeMode="cover" height="150" roundedTop="md" />
+      <Text bold position="absolute" color="white" top="0" m={[4, 4, 8]}>
         NEWS
       </Text>
-      <Stack space={4} p={[4, 4, 8]}>
+      <Stack space="4" p={[4, 4, 8]}>
         <Text color="gray.400">June 22, 2021</Text>
-        <Heading size={["md", "lg", "md"]} noOfLines={2}>
+        <Heading size={["md", "lg", "md"]} noOfLines="2">
           The Stunning Dawki River in Meghalaya is So Clear That Boats Appear
           Floating in Air
         </Heading>
@@ -49,7 +49,7 @@ function CardComponent(){
 export default function () {
   return (
   <NativeBaseProvider>
-    <Center flex={1}>
+    <Center flex="1">
       <CardComponent/>
     </Center>
   </NativeBaseProvider>
diff --git a/docs/container.md b/docs/container.md
index 5b34afdc3..a09ac47e5 100644
--- a/docs/container.md
+++ b/docs/container.md
@@ -38,7 +38,7 @@ function ContainerComponent() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <ContainerComponent />
       </Center>
     </NativeBaseProvider>
diff --git a/docs/customizingComponents.md b/docs/customizingComponents.md
index def40ff7a..05cde5265 100644
--- a/docs/customizingComponents.md
+++ b/docs/customizingComponents.md
@@ -100,7 +100,7 @@ export default function () {
   });
   return (
     <NativeBaseProvider theme={theme}>
-      <Center flex={1}>
+      <Center flex="1">
         <Text>NativeBase</Text>
       </Center>
     </NativeBaseProvider>
@@ -141,7 +141,7 @@ export default function () {
 
   return (
     <NativeBaseProvider theme={theme}>
-      <Center flex={1}>
+      <Center flex="1">
         <VStack space={2}>
           <Button colorScheme="emerald">Default Button</Button>
           <Button colorScheme="emerald" variant="rounded">
diff --git a/docs/form.md b/docs/form.md
index c2b6ca94d..ee421eb0d 100644
--- a/docs/form.md
+++ b/docs/form.md
@@ -33,7 +33,7 @@ function BuildingAFormExample() {
   const [formData, setData] = React.useState({});
 
   return (
-    <VStack width="90%" mx={3}>
+    <VStack width="90%" mx="3">
       <FormControl isRequired>
         <FormControl.Label _text={{bold: true}}>Name</FormControl.Label>
         <Input
@@ -51,7 +51,7 @@ function BuildingAFormExample() {
 export default function () {
   return (
     <NativeBaseProvider>
-    <Center flex={1}>
+    <Center flex="1">
       <BuildingAFormExample />
       </Center>
     </NativeBaseProvider>
@@ -95,7 +95,7 @@ function  BuildingAFormExample() {
   };
 
   return (
-    <VStack width="90%" mx={3}>
+    <VStack width="90%" mx="3">
       <FormControl isRequired>
         <FormControl.Label _text={{bold: true}}>Name</FormControl.Label>
         <Input
@@ -113,7 +113,7 @@ function  BuildingAFormExample() {
 export default function () {
   return (
     <NativeBaseProvider>
-    <Center flex={1}>
+    <Center flex="1">
       <BuildingAFormExample />
       </Center>
     </NativeBaseProvider>
@@ -161,7 +161,7 @@ function BuildingAFormExample() {
   };
 
   return (
-    <VStack width="90%" mx={3}>
+    <VStack width="90%" mx="3">
       <FormControl isRequired isInvalid={'name' in errors}>
         <FormControl.Label _text={{bold: true}}>Name</FormControl.Label>
         <Input
@@ -177,7 +177,7 @@ function BuildingAFormExample() {
         </FormControl.HelperText>
         }
       </FormControl>
-    <Button onPress={onSubmit} mt={5} colorScheme="cyan">
+    <Button onPress={onSubmit} mt="5" colorScheme="cyan">
       Submit
     </Button>
     </VStack>
@@ -186,7 +186,7 @@ function BuildingAFormExample() {
 export default function () {
   return (
     <NativeBaseProvider>
-    <Center flex={1}>
+    <Center flex="1">
       <BuildingAFormExample />
       </Center>
     </NativeBaseProvider>
diff --git a/docs/hidden.md b/docs/hidden.md
index df7ecb077..aa6d0ad9e 100644
--- a/docs/hidden.md
+++ b/docs/hidden.md
@@ -19,7 +19,7 @@ import { Hidden } from 'native-base';
 
 ```jsx
 <Hidden>
-  <Box bg="red.400" p={2}>
+  <Box bg="red.400" p="2">
     <Text>This text will be always hidden.</Text>
   </Box>
 </Hidden>
@@ -30,12 +30,12 @@ import { Hidden } from 'native-base';
 ```jsx
 <>
   <Hidden from="sm" till="lg">
-    <Box bg="red.400" p={2}>
+    <Box bg="red.400" p="2">
       <Text>This text will be hidden from sm to lg screens.</Text>
     </Box>
   </Hidden>
   <Hidden only={['sm', 'lg']}>
-    <Box bg="red.400" p={2}>
+    <Box bg="red.400" p="2">
       <Text>This text will be hidden on sm and lg screens only.</Text>
     </Box>
   </Hidden>
@@ -69,14 +69,14 @@ function ColorModeExample () {
       >
         Change mode
       </Button>
-      <VStack space={2} mt={3}>
+      <VStack space="2" mt="3">
         <Hidden colorMode="light">
-          <Box bg="yellow.400" p={2}>
+          <Box bg="yellow.400" p="2">
             <Text>This text will be hidden on light mode</Text>
           </Box>
         </Hidden>
         <Hidden colorMode="dark">
-          <Box bg="green.400" p={2}>
+          <Box bg="green.400" p="2">
             <Text>This text will be hidden on dark mode</Text>
           </Box>
         </Hidden>
@@ -89,7 +89,7 @@ const LocalWrapper = ({ children }) => {
   const bg = useColorModeValue('gray.200', 'gray.800')
   return (
     <Center
-      flex={1}
+      flex="1"
       bg={bg}
     >
       {children}
@@ -112,7 +112,7 @@ export default function () {
 
 ```jsx
 <Hidden platform={['android', 'web']}>
-  <Box bg="red.400" p={2}>
+  <Box bg="red.400" p="2">
     <Text>This text will be hidden on android and web.</Text>
   </Box>
 </Hidden>
diff --git a/docs/loginsignupforms.md b/docs/loginsignupforms.md
index 8890642a2..75b491f6d 100644
--- a/docs/loginsignupforms.md
+++ b/docs/loginsignupforms.md
@@ -32,8 +32,8 @@ export default function App() {
       <NativeBaseProvider>
       <Box
         safeArea
-        flex={1}
-        p={2}
+        flex="1"
+        p="2"
         w="90%"
         mx='auto'
       >
@@ -44,14 +44,14 @@ export default function App() {
           Sign in to continue!
         </Heading>
 
-        <VStack space={2} mt={5}>
+        <VStack space="2" mt="5">
           <FormControl>
             <FormControl.Label _text={{color: 'muted.700', fontSize: 'sm', fontWeight: 600}}>
                 Email ID
             </FormControl.Label>
             <Input />
           </FormControl>
-          <FormControl mb={5}>
+          <FormControl mb="5">
             <FormControl.Label  _text={{color: 'muted.700', fontSize: 'sm', fontWeight: 600}}>
                 Password
             </FormControl.Label>
@@ -59,12 +59,12 @@ export default function App() {
             <Link
               _text={{ fontSize: 'xs', fontWeight: '700', color:'cyan.500' }}
               alignSelf="flex-end"
-              mt={1}
+              mt="1"
             >
               Forget Password?
             </Link>
           </FormControl>
-          <VStack  space={2}>
+          <VStack  space="2">
           <Button colorScheme="cyan" _text={{color: 'white' }}>
               Login
           </Button>
@@ -142,8 +142,8 @@ export default function App() {
       <NativeBaseProvider>
       <Box
         safeArea
-        flex={1}
-        p={2}
+        flex="1"
+        p="2"
         w="90%"
         mx='auto'
       >
@@ -154,7 +154,7 @@ export default function App() {
           Sign up to continue!
         </Heading>
 
-        <VStack space={2} mt={5}>
+        <VStack space="2" mt="5">
           <FormControl>
             <FormControl.Label _text={{color: 'muted.700', fontSize: 'sm', fontWeight: 600}}>
                 Email
@@ -173,7 +173,7 @@ export default function App() {
             </FormControl.Label>
             <Input type="password" />
           </FormControl>
-          <VStack  space={2}  mt={5}>
+          <VStack  space="2"  mt="5">
           <Button colorScheme="cyan" _text={{color: 'white' }}>
               SignUp
           </Button>
diff --git a/docs/migration/Guide.md b/docs/migration/Guide.md
index 2b3095055..782ee3850 100644
--- a/docs/migration/Guide.md
+++ b/docs/migration/Guide.md
@@ -1,5 +1,5 @@
 ---
-id: Guide
+id: guide
 title: Guide to v3
 ---
 
diff --git a/docs/nativebase-factory.md b/docs/nativebase-factory.md
index 69ed5628f..56c3a0ed7 100644
--- a/docs/nativebase-factory.md
+++ b/docs/nativebase-factory.md
@@ -27,7 +27,7 @@ function FactoryViewExample () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <FactoryViewExample />
       </Center>
     </NativeBaseProvider>
@@ -56,7 +56,7 @@ function FactoryViewExample () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <FactoryViewExample />
       </Center>
     </NativeBaseProvider>
@@ -87,7 +87,7 @@ function FactoryViewModeExample () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <FactoryViewModeExample />
       </Center>
     </NativeBaseProvider>
@@ -130,7 +130,7 @@ function FactoryViewRefExample () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <FactoryViewRefExample />
       </Center>
     </NativeBaseProvider>
diff --git a/docs/nativebase-formik-ui.md b/docs/nativebase-formik-ui.md
index e1b73f8e8..28e5dee4a 100644
--- a/docs/nativebase-formik-ui.md
+++ b/docs/nativebase-formik-ui.md
@@ -36,7 +36,7 @@ function FormikExample() {
   return (
  <Formik initialValues={{ firstName: '', lastName: '' }} onSubmit={onSubmit} validate={validate}>
       {({ handleChange, handleBlur, handleSubmit, values, errors }) => (
-        <VStack width="80%" space={4}>
+        <VStack width="80%" space="4">
           <FormControl isRequired isInvalid={'firstName' in errors}>
             <FormControl.Label>First Name</FormControl.Label>
             {console.log("errors" , errors)}
diff --git a/docs/overlay.md b/docs/overlay.md
index 4dbcbad8c..f18adee91 100644
--- a/docs/overlay.md
+++ b/docs/overlay.md
@@ -35,7 +35,7 @@ function OverlayComponent () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <OverlayComponent />
       </Center>
     </NativeBaseProvider>
@@ -79,7 +79,7 @@ function OverlayComponent () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <OverlayComponent />
       </Center>
     </NativeBaseProvider>
diff --git a/docs/pseudoProps.md b/docs/pseudoProps.md
index 5142576f8..6891dfa7a 100644
--- a/docs/pseudoProps.md
+++ b/docs/pseudoProps.md
@@ -77,7 +77,7 @@ function Component() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <Component />
       </Center>
     </NativeBaseProvider>
diff --git a/docs/reactHooksForms.md b/docs/reactHooksForms.md
index f4efec13c..0063ec32e 100644
--- a/docs/reactHooksForms.md
+++ b/docs/reactHooksForms.md
@@ -24,7 +24,7 @@ function FormHookExample() {
     console.log('submiting with ', data);
   };
   return (
-    <VStack width="80%" space={4}>
+    <VStack width="80%" space="4">
       <FormControl isRequired isInvalid={'firstName' in errors}>
         <FormControl.Label>First Name</FormControl.Label>
         <Controller
@@ -123,7 +123,7 @@ function FormHookCheckboxExample() {
     console.log('submiting with ', data);
   };
   return (
-    <VStack width="80%" space={4}>
+    <VStack width="80%" space="4">
       <FormControl isRequired isInvalid={'hobbies' in errors}>
         <FormControl.Label>Hobbies</FormControl.Label>
         <Controller
@@ -140,21 +140,21 @@ function FormHookCheckboxExample() {
                 colorScheme="orange"
                 icon={<Icon name="bullseye" type="MaterialCommunityIcons" />}
               >
-                <Text mx={2}>Darts</Text>
+                <Text mx="2">Darts</Text>
               </Checkbox>
               <Checkbox
                 value="movie"
                 colorScheme="dark"
                 icon={<Icon name="bat" type="MaterialCommunityIcons" />}
               >
-                <Text mx={2}>Movie</Text>
+                <Text mx="2">Movie</Text>
               </Checkbox>
               <Checkbox
                 colorScheme="red"
                 value="camping"
                 icon={<Icon name="campfire" type="MaterialCommunityIcons" />}
               >
-                <Text mx={2}>Camping</Text>
+                <Text mx="2">Camping</Text>
               </Checkbox>
               <Checkbox
                 value="chess"
@@ -163,7 +163,7 @@ function FormHookCheckboxExample() {
                   <Icon name="chess-knight" type="MaterialCommunityIcons" />
                 }
               >
-                <Text mx={2}>Chess</Text>
+                <Text mx="2">Chess</Text>
               </Checkbox>
             </Checkbox.Group>
           )}
@@ -186,10 +186,10 @@ function FormHookCheckboxExample() {
               onChange={(val) => onChange(val)}
             >
               <Radio value="male" colorScheme="blue">
-                <Text mx={2}>Male</Text>
+                <Text mx="2">Male</Text>
               </Radio>
               <Radio value="female" colorScheme="pink">
-                <Text mx={2}>Female</Text>
+                <Text mx="2">Female</Text>
               </Radio>
             </Radio.Group>
           )}
@@ -235,7 +235,7 @@ function FormHookSelectExample() {
     console.log('submiting with ', data);
   };
   return (
-    <VStack width="80%" space={4}>
+    <VStack width="80%" space="4">
       <FormControl isRequired isInvalid={'language' in errors}>
         <FormControl.Label>Fav language:</FormControl.Label>
         <Controller
@@ -244,7 +244,7 @@ function FormHookSelectExample() {
             <Select
               placeholder="Pick language"
               selectedValue={value}
-              width={150}
+              width="150"
               onValueChange={(itemValue: string) => {
                 onChange(itemValue);
               }}
@@ -303,7 +303,7 @@ function FormHookSliderExample() {
     console.log('submiting with ', data);
   };
   return (
-    <VStack width="80%" space={4}>
+    <VStack width="80%" space="4">
       <FormControl isRequired isInvalid={'like' in errors}>
         <FormControl.Label>Amount you like NativeBase</FormControl.Label>
         <Controller
@@ -358,7 +358,7 @@ function FormHookTextareaExample() {
     console.log('submiting with ', data);
   };
   return (
-    <VStack width="80%" space={4}>
+    <VStack width="80%" space="4">
       <FormControl isRequired isInvalid={'thought' in errors}>
         <FormControl.Label>What do you think?</FormControl.Label>
         <Controller
@@ -412,7 +412,7 @@ function FormHookSwitchExample() {
     console.log('submiting with ', data);
   };
   return (
-    <VStack width="80%" space={4}>
+    <VStack width="80%" space="4">
       <FormControl isInvalid={'rememberMe' in errors}>
         <FormControl.Label>Remenber me:</FormControl.Label>
         <Controller
diff --git a/docs/responsive.md b/docs/responsive.md
index ef41962d7..cfcc1a6be 100644
--- a/docs/responsive.md
+++ b/docs/responsive.md
@@ -40,7 +40,7 @@ function BreakpointExample () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <BreakpointExample />
        </Center>
     </NativeBaseProvider>
@@ -69,7 +69,7 @@ function BreakpointExample () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <BreakpointExample />
       </Center>
     </NativeBaseProvider>
@@ -126,7 +126,7 @@ function BreakpointExample () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <BreakpointExample />
       </Center>
     </NativeBaseProvider>
diff --git a/docs/setup-provider.md b/docs/setup-provider.md
index 91ab8c8b7..6f548dfcd 100644
--- a/docs/setup-provider.md
+++ b/docs/setup-provider.md
@@ -111,7 +111,7 @@ const config = {
 export default () => {
   return (
     <NativeBaseProvider config={config}>
-      <Center flex={1}>
+      <Center flex="1">
         <Example />
       </Center>
     </NativeBaseProvider>
diff --git a/docs/textField.md b/docs/textField.md
index 0c98d5b26..c5ef290be 100644
--- a/docs/textField.md
+++ b/docs/textField.md
@@ -30,7 +30,7 @@ function TextFieldComponent () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <TextFieldComponent />
       </Center>
     </NativeBaseProvider>
@@ -63,7 +63,7 @@ function TextFieldComponent () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <TextFieldComponent />
         </Center>
     </NativeBaseProvider>
@@ -110,7 +110,7 @@ function TextFieldComponent () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <TextFieldComponent />
       </Center>
     </NativeBaseProvider>
diff --git a/docs/theme.md b/docs/theme.md
index 2432b5f4a..0a7501159 100644
--- a/docs/theme.md
+++ b/docs/theme.md
@@ -67,7 +67,7 @@ function Tokens() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <Tokens />
       </Center>
     </NativeBaseProvider>
@@ -106,7 +106,7 @@ function UseContrastingTextHook () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <UseContrastingTextHook />
       </Center>
     </NativeBaseProvider>
diff --git a/docs/todo-list.md b/docs/todo-list.md
index 452dedb23..3db6402e6 100644
--- a/docs/todo-list.md
+++ b/docs/todo-list.md
@@ -56,23 +56,23 @@ export default function () {
   };
   return (
     <NativeBaseProvider>
-    <Center flex={1}>
-    <VStack space={4} flex={1} w="90%" mt={4}>
+    <Center flex="1">
+    <VStack space="4" flex="1" w="90%" mt="4">
       <Heading color="emerald.400">Todo App</Heading>
       <Input
         variant="filled"
         
         InputRightElement={
           <IconButton
-            icon={<Icon as={FontAwesome5} name="plus" size={4} />}
+            icon={<Icon as={FontAwesome5} name="plus" size="4" />}
            colorScheme="emerald"
-            ml={1}
+            ml="1"
             onPress={() => {
               addItem(inputValue);
               setInputValue("");
             }}
 
-            mr={1}/>
+            mr="1"/>
 
         }
         onChangeText={(v) => setInputValue(v)}
@@ -93,13 +93,13 @@ export default function () {
               onChange={() => handleStatusChange(itemI)}
               value={item.title}
             >
-              <Text mx={2} strikeThrough={item.isCompleted}>
+              <Text mx="2" strikeThrough={item.isCompleted}>
                 {item.title}
               </Text>
             </Checkbox>
             <IconButton
               colorScheme="emerald"
-              icon={<Icon as={FontAwesome5} name="trash" size={5} />}
+              icon={<Icon as={FontAwesome5} name="trash" size="5" />}
               onPress={() => handleDelete(itemI)}
             />
           </HStack>
diff --git a/docs/transition.md b/docs/transition.md
index 21c5ba47b..6988f86b7 100644
--- a/docs/transition.md
+++ b/docs/transition.md
@@ -52,7 +52,7 @@ function FadeExample () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <FadeExample />
       </Center>
     </NativeBaseProvider>
@@ -84,7 +84,7 @@ function ScaleFadeExample () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <ScaleFadeExample />
       </Center>
     </NativeBaseProvider>
@@ -116,7 +116,7 @@ function SlideExample () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <SlideExample />
       </Center>
     </NativeBaseProvider>
@@ -164,7 +164,7 @@ function SlideExample () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <SlideExample />
       </Center>
     </NativeBaseProvider>
@@ -214,7 +214,7 @@ function SlideExample () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <SlideExample />
       </Center>
     </NativeBaseProvider>
@@ -246,7 +246,7 @@ function SlideFadeExample () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <SlideFadeExample />
       </Center>
     </NativeBaseProvider>
diff --git a/docs/useAccessibleColors.md b/docs/useAccessibleColors.md
index edba126e7..28bb181a1 100644
--- a/docs/useAccessibleColors.md
+++ b/docs/useAccessibleColors.md
@@ -29,13 +29,13 @@ function UseContrastingTextHook () {
             key={`teal.${key}`}
             bg={`teal.${key}`}
             _text={{ color: colorContrast }}
-            mb={1}
+            mb="1"
           >
             NativeBase
           </Button>
         );
       })}
-      <Button mt={2} onPress={toggleAccessibleColors} bg={'indigo.600'}>
+      <Button mt="2" onPress={toggleAccessibleColors} bg='indigo.600'>
         Toggle Accessible Colors
       </Button>
     </>
@@ -45,7 +45,7 @@ function UseContrastingTextHook () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <UseContrastingTextHook />
       </Center>
     </NativeBaseProvider>
diff --git a/docs/useBreakPointValue.md b/docs/useBreakPointValue.md
index 3e41f90ec..525e7ce96 100644
--- a/docs/useBreakPointValue.md
+++ b/docs/useBreakPointValue.md
@@ -27,7 +27,7 @@ function UseBreakpointValueExample () {
     md: 'blue.200',
   });
   return (
-    <Box bg={color} w={'100px'}>
+    <Box bg={color} w='100px'>
       This is a box
     </Box>
   );
@@ -35,7 +35,7 @@ function UseBreakpointValueExample () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <UseBreakpointValueExample />
       </Center>
     </NativeBaseProvider>
diff --git a/docs/useClipboard.md b/docs/useClipboard.md
index 9aa820956..bcbe6c6bd 100644
--- a/docs/useClipboard.md
+++ b/docs/useClipboard.md
@@ -39,8 +39,8 @@ function UseClipboardExample() {
   const [pasteText, setPasteText] = React.useState("");
   const { value, onCopy, hasCopied } = useClipboard();
   return (
-    <VStack space={2} mx={2}>
-      <HStack space={3}>
+    <VStack space="2" mx="2">
+      <HStack space="3">
         <Input
           w="60%"
           placeholder="Copy From"
@@ -49,7 +49,7 @@ function UseClipboardExample() {
         />
         <Button onPress={() => onCopy(copyText)}>Copy</Button>
       </HStack>
-      <HStack space={3}>
+      <HStack space="3">
         <Text>{hasCopied ? "Copied" : "Press here"}</Text>
         <Input
           w="60%"
@@ -65,7 +65,7 @@ function UseClipboardExample() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <UseClipboardExample />
       </Center>
     </NativeBaseProvider>
diff --git a/docs/useColorMode.md b/docs/useColorMode.md
index 1dc09548d..5aff666af 100644
--- a/docs/useColorMode.md
+++ b/docs/useColorMode.md
@@ -27,11 +27,11 @@ import {
 function UseColorMode() {
   const { colorMode, toggleColorMode } = useColorMode();
   return (
-    <Center flex={1} bg={colorMode === 'dark' ? 'black' : 'white'}>
+    <Center flex="1" bg={colorMode === 'dark' ? 'black' : 'white'}>
       <Text fontSize="lg" display="flex">
         The active color mode is <Text bold>{colorMode}</Text>
       </Text>
-      <Button m={2} onPress={toggleColorMode}>Toggle</Button>
+      <Button m="2" onPress={toggleColorMode}>Toggle</Button>
     </Center>
   );
 }
diff --git a/docs/useColorModeValue.md b/docs/useColorModeValue.md
index 734fb9fc1..2ce63428c 100644
--- a/docs/useColorModeValue.md
+++ b/docs/useColorModeValue.md
@@ -27,12 +27,12 @@ import {
 function UseColorMode() {
   const { colorMode, toggleColorMode } = useColorMode();
   return (
-    <Center flex={1} bg={useColorModeValue('white', 'black')}>
+    <Center flex="1" bg={useColorModeValue('white', 'black')}>
       <Text fontSize="lg" display="flex">
         The active color mode is
         <Text bold>{useColorModeValue('Light', 'Dark')}</Text>
       </Text>
-      <Button m={2} onPress={toggleColorMode}>Toggle</Button>
+      <Button m="2" onPress={toggleColorMode}>Toggle</Button>
     </Center>
   );
 }
diff --git a/docs/useContrastText.md b/docs/useContrastText.md
index 73b9bca1a..da3131fe7 100644
--- a/docs/useContrastText.md
+++ b/docs/useContrastText.md
@@ -40,7 +40,7 @@ function UseContrastingTextHook () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <UseContrastingTextHook />
       </Center>
     </NativeBaseProvider>
@@ -68,13 +68,13 @@ function UseContrastingTextHook () {
             key={`teal.${key}`}
             bg={`teal.${key}`}
             _text={{ color: colorContrast }}
-            mb={1}
+            mb="1"
           >
             NativeBase
           </Button>
         );
       })}
-      <Button mt={2} onPress={toggleAccessibleColors} bg={'indigo.600'}>
+      <Button mt="2" onPress={toggleAccessibleColors} bg='indigo.600'>
         Toggle Accessible Colors
       </Button>
     </>
@@ -84,7 +84,7 @@ function UseContrastingTextHook () {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <UseContrastingTextHook />
       </Center>
     </NativeBaseProvider>
diff --git a/docs/useDisclosure.md b/docs/useDisclosure.md
index 3abc6c3f4..70a9e2f16 100644
--- a/docs/useDisclosure.md
+++ b/docs/useDisclosure.md
@@ -39,10 +39,10 @@ function UseDiscloseExample() {
             cupiditate expedita, ipsa corporis officia totam similique delectus!
             Debitis esse, ea blanditiis iste enim iure at odit fugiat autem.
             Accusamus?
-            <Input mt={4} placeholder="Lorem ipsum dolor sit" />
+            <Input mt="4" placeholder="Lorem ipsum dolor sit" />
           </Modal.Body>
           <Modal.Footer>
-            <Button colorScheme="blue" mr={1}>
+            <Button colorScheme="blue" mr="1">
               Save
             </Button>
             <Button onPress={onClose}>Close</Button>
@@ -56,7 +56,7 @@ function UseDiscloseExample() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <UseDiscloseExample />
       </Center>
     </NativeBaseProvider>
diff --git a/docs/useMediaQuery.md b/docs/useMediaQuery.md
index 6d184579f..b74c32483 100644
--- a/docs/useMediaQuery.md
+++ b/docs/useMediaQuery.md
@@ -20,7 +20,7 @@ import React from "react";
 import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base";
 
 function UseMediaQueryExample() {
-  const [isSmaller] = useMediaQuery({ maxHeight: 512 });
+  const [isSmaller] = useMediaQuery({ maxHeight: '512' });
   return (
     <Text>
       {isSmaller ? "Height smaller than 512" : "Height larger than 512"}
@@ -30,7 +30,7 @@ function UseMediaQueryExample() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <UseMediaQueryExample />
       </Center>
     </NativeBaseProvider>
@@ -45,7 +45,7 @@ import React from "react";
 import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base";
 
 function UseMediaQueryExample() {
-  const [isLargerThan512] = useMediaQuery({ minWidth: 512 });
+  const [isLargerThan512] = useMediaQuery({ minWidth: '512' });
   return (
     <Text>
       {isLargerThan512 ? "Width larger than 512" : "Width smaller than 512"}
@@ -55,7 +55,7 @@ function UseMediaQueryExample() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <UseMediaQueryExample />
       </Center>
     </NativeBaseProvider>
@@ -84,7 +84,7 @@ function UseMediaQueryExample() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <UseMediaQueryExample />
       </Center>
     </NativeBaseProvider>
diff --git a/docs/usePopOver.md b/docs/usePopOver.md
index 35bdb98a6..af604254e 100644
--- a/docs/usePopOver.md
+++ b/docs/usePopOver.md
@@ -42,7 +42,7 @@ function UsePopoverExample() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <UsePopoverExample />
       </Center>
     </NativeBaseProvider>
diff --git a/docs/useToken.md b/docs/useToken.md
index ec7c572da..06ff1d0ff 100644
--- a/docs/useToken.md
+++ b/docs/useToken.md
@@ -35,7 +35,7 @@ function UseTokenHookExample() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <UseTokenHookExample />
       </Center>
     </NativeBaseProvider>
diff --git a/docs/utilityProps.md b/docs/utilityProps.md
index bab667a34..da84424a5 100644
--- a/docs/utilityProps.md
+++ b/docs/utilityProps.md
@@ -34,7 +34,7 @@ function Component() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <Component />
       </Center>
     </NativeBaseProvider>
@@ -92,7 +92,7 @@ function Component() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <Component />
       </Center>
     </NativeBaseProvider>
@@ -156,7 +156,7 @@ export function Example() {
 export default () => {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <Example />
       </Center>
     </NativeBaseProvider>
@@ -193,7 +193,7 @@ function Component() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <Component />
       </Center>
     </NativeBaseProvider>
@@ -247,7 +247,7 @@ function Component() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <Component />
       </Center>
     </NativeBaseProvider>
@@ -303,7 +303,7 @@ function Component() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <Component />
       </Center>
     </NativeBaseProvider>
@@ -352,7 +352,7 @@ function Component() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <Component />
       </Center>
     </NativeBaseProvider>
@@ -413,7 +413,7 @@ function Component() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <Component />
       </Center>
     </NativeBaseProvider>
@@ -458,7 +458,7 @@ function Component() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <Component />
       </Center>
     </NativeBaseProvider>
@@ -503,7 +503,7 @@ function Component() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <Component />
       </Center>
     </NativeBaseProvider>
@@ -546,7 +546,7 @@ function Example() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <Example />
       </Center>
     </NativeBaseProvider>
@@ -589,7 +589,7 @@ function Example() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <Example />
       </Center>
     </NativeBaseProvider>
@@ -636,7 +636,7 @@ function Example() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <Example />
       </Center>
     </NativeBaseProvider>
diff --git a/nb-plugins/storybook-example-transformer/index.js b/nb-plugins/storybook-example-transformer/index.js
index 514aec533..dca63fada 100644
--- a/nb-plugins/storybook-example-transformer/index.js
+++ b/nb-plugins/storybook-example-transformer/index.js
@@ -61,7 +61,7 @@ const endingTemplate = `
 export default () => {
     return (
       <NativeBaseProvider>
-        <Center flex={1} px={3}>
+        <Center flex="1" px="3">
             <Example />
         </Center>
       </NativeBaseProvider>
diff --git a/sidebars.js b/sidebars.js
index dc34c8182..3073344a0 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -250,7 +250,7 @@ module.exports = {
       label: 'Migration',
       collapsed: false,
       items: [
-        'migration/Guide',
+        'migration/guide',
         'migration/v3.1.0-to-3.2.0',
         {
           'Components Migration': [

From a5f47037c9e39a1016ace09a1a9822e347aeb786 Mon Sep 17 00:00:00 2001
From: madhav23bansal <madhavb230100@gmail.com>
Date: Mon, 13 Sep 2021 12:05:22 +0530
Subject: [PATCH 2/2] v31tov32 slug changed

---
 docs/migration/v31tov32.md | 2 +-
 sidebars.js                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/migration/v31tov32.md b/docs/migration/v31tov32.md
index efa3ee6c6..2c27097b3 100644
--- a/docs/migration/v31tov32.md
+++ b/docs/migration/v31tov32.md
@@ -1,5 +1,5 @@
 ---
-id: v3.1.0-to-3.2.0
+id: migration-guide
 title: Upgrading to 3.2.0
 ---
 
diff --git a/sidebars.js b/sidebars.js
index 3073344a0..ef44a2a4a 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -251,7 +251,7 @@ module.exports = {
       collapsed: false,
       items: [
         'migration/guide',
-        'migration/v3.1.0-to-3.2.0',
+        'migration/migration-guide',
         {
           'Components Migration': [
             // 'migration/Accordion',