From d440fd2dba8f6e74587189afa1321e5831406875 Mon Sep 17 00:00:00 2001
From: Rohit Singh <rohit99.ind@gmail.com>
Date: Fri, 22 Oct 2021 15:06:08 +0530
Subject: [PATCH 1/2] fix: broken examples in docs

---
 docs/theme.md        |  2 +-
 docs/utilityProps.md | 41 +++++++++++++++++++----------------------
 2 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/docs/theme.md b/docs/theme.md
index 0f660da4a..45d079afd 100644
--- a/docs/theme.md
+++ b/docs/theme.md
@@ -95,7 +95,7 @@ import {
   Center,
 } from 'native-base';
 function UseContrastingTextHook() {
-  const bgDark = 'primary.700';
+  const bgDark = 'primary.600';
   const bgLight = 'primary.200';
   const colorContrastDark = useContrastText(bgDark);
   const colorContrastLight = useContrastText(bgLight);
diff --git a/docs/utilityProps.md b/docs/utilityProps.md
index cd460c337..89d927218 100644
--- a/docs/utilityProps.md
+++ b/docs/utilityProps.md
@@ -129,38 +129,37 @@ import React from "react"
 import { HStack, Stack, Center, NativeBaseProvider } from "native-base"
 export function Example() {
   return (
-    <Stack space="2" alignItems="center">
-      <HStack space="2" alignItems="center">
+    <Stack space={2} alignItems="center">
+      <HStack space={2} alignItems="center">
         <Center
-          size="16"
+          size={16}
           bg="primary.400:alpha.30"
           rounded="md"
           _text={{
             color: "white",
           }}
-          shadow="3"
+
         >
           Box 1
         </Center>
         <Center
-          size="16"
+          size={16}
           bg="primary.400:alpha.70"
           rounded="md"
           _text={{
             color: "white",
           }}
-          shadow="3"
         >
           Box 2
         </Center>
         <Center
           bg="primary.400"
-          size="16"
+          size={16}
           rounded="md"
           _text={{
             color: "white",
           }}
-          shadow="3"
+          shadow={1}
         >
           Box 3
         </Center>
@@ -200,7 +199,7 @@ function Component() {
       <Text textDecoration='underline'>Merci Beaucoup</Text>
       { /* font-size `'2em'` */ }
       { /* font-weight of `theme.fontWeights.semibold i.e. 600` */ }
-      <Text fontWeight='semibold'>Danke sehr </Text>
+      <Text fontWeight='bold'>Danke sehr </Text>
       { /* letter-spacing `0.1 em` */ }
       <Text letterSpacing="2xl" >Arigatou </Text>
     </>
@@ -353,15 +352,15 @@ import React from 'react';
 import { Box as NBBox, NativeBaseProvider, Center } from 'native-base';
 
 const Box = (props) => {
-  return <NBBox p="5" m="2" borderRadius="md" bg="primary.200" {...props} />;
+  return <NBBox p={5} m={2} borderRadius="md" bg="primary.200" {...props} />;
 };
 
 function Component() {
   return (
     <>
-      <Box border="1" borderColor="cyan.500" />
-      <Box borderWidth="2" borderColor="cyan.500" />
-      <Box border="2" borderColor="cyan.500" borderTopWidth="7" />
+      <Box borderWidth={1} borderColor="cyan.500" />
+      <Box borderWidth={2} borderColor="cyan.500" />
+      <Box borderColor="cyan.500" borderTopWidth={7} />
     </>
   );
 }
@@ -375,7 +374,6 @@ export default function () {
   );
 }
 
-
 ```
 
 <br />
@@ -459,16 +457,16 @@ import React from 'react';
 import { Box as NBBox, NativeBaseProvider, Center } from 'native-base';
 
 const Box = (props) => {
-  return <NBBox p="5" m="2" borderRadius="md" bg="primary.400" {...props} />
-}
+  return <NBBox p={5} borderRadius="md" bg="primary.400" {...props} />;
+};
 
 function Component() {
   return (
-    <>
-      <Box position="absolute" left="32" p="7" />
-      <Box bgColor="yellow.400"  zIndex="2" position="relative" />
-      <Box backgroundColor="emerald.400" position="absolute" right="32" p="7" />
-    </>
+    <NBBox justifyContent="center" alignItems="center" flexDirection="row">
+      <Box position="relative" p={7} />
+      <Box bg="yellow.400" zIndex={2} position="absolute" />
+      <Box bg="emerald.400" position="relative" p={7} />
+    </NBBox>
   );
 }
 export default function () {
@@ -480,7 +478,6 @@ export default function () {
     </NativeBaseProvider>
   );
 }
-
 ```
 
 <br />

From adbec93bdf725cccfb43ea40e93c1bb67cf252ec Mon Sep 17 00:00:00 2001
From: Rohit Singh <rohit99.ind@gmail.com>
Date: Fri, 22 Oct 2021 15:28:22 +0530
Subject: [PATCH 2/2] fix: broken examples in docs

---
 docs/utilityProps.md | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/docs/utilityProps.md b/docs/utilityProps.md
index 89d927218..adefc73eb 100644
--- a/docs/utilityProps.md
+++ b/docs/utilityProps.md
@@ -129,10 +129,10 @@ import React from "react"
 import { HStack, Stack, Center, NativeBaseProvider } from "native-base"
 export function Example() {
   return (
-    <Stack space={2} alignItems="center">
-      <HStack space={2} alignItems="center">
+    <Stack space="2" alignItems="center">
+      <HStack space="2" alignItems="center">
         <Center
-          size={16}
+          size="16"
           bg="primary.400:alpha.30"
           rounded="md"
           _text={{
@@ -143,7 +143,7 @@ export function Example() {
           Box 1
         </Center>
         <Center
-          size={16}
+          size="16"
           bg="primary.400:alpha.70"
           rounded="md"
           _text={{
@@ -154,12 +154,12 @@ export function Example() {
         </Center>
         <Center
           bg="primary.400"
-          size={16}
+          size="16"
           rounded="md"
           _text={{
             color: "white",
           }}
-          shadow={1}
+          shadow="1"
         >
           Box 3
         </Center>
@@ -352,15 +352,15 @@ import React from 'react';
 import { Box as NBBox, NativeBaseProvider, Center } from 'native-base';
 
 const Box = (props) => {
-  return <NBBox p={5} m={2} borderRadius="md" bg="primary.200" {...props} />;
+  return <NBBox p="5" m="2" borderRadius="md" bg="primary.200" {...props} />;
 };
 
 function Component() {
   return (
     <>
-      <Box borderWidth={1} borderColor="cyan.500" />
-      <Box borderWidth={2} borderColor="cyan.500" />
-      <Box borderColor="cyan.500" borderTopWidth={7} />
+      <Box borderWidth="1" borderColor="cyan.500" />
+      <Box borderWidth="2" borderColor="cyan.500" />
+      <Box borderColor="cyan.500" borderTopWidth="7" />
     </>
   );
 }
@@ -457,15 +457,15 @@ import React from 'react';
 import { Box as NBBox, NativeBaseProvider, Center } from 'native-base';
 
 const Box = (props) => {
-  return <NBBox p={5} borderRadius="md" bg="primary.400" {...props} />;
+  return <NBBox p="5" borderRadius="md" bg="primary.400" {...props} />;
 };
 
 function Component() {
   return (
     <NBBox justifyContent="center" alignItems="center" flexDirection="row">
-      <Box position="relative" p={7} />
+      <Box position="relative" p="7" />
       <Box bg="yellow.400" zIndex={2} position="absolute" />
-      <Box bg="emerald.400" position="relative" p={7} />
+      <Box bg="emerald.400" position="relative" p="7" />
     </NBBox>
   );
 }