chore(example-app): 🎨 add full-width controllable for button component render

Author: Karthik-B-06

example/src/modules/primitives/ButtonScreen.tsx

@@ -25,11 +25,19 @@ export const ButtonScreen = () => {
   const [hasPrefix, setHasPrefix] = useState<boolean>(false);
   const [hasSuffix, setHasSuffix] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [fullWidth, setFullWidth] = useState<boolean>(false);
+
   const { bottom } = useSafeAreaInsets();
 
   return (
     <Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
-      <Box style={tailwind.style("flex-1 px-2 justify-center bg-white-900")}>
+      <Box
+        style={tailwind.style(
+          `flex-1 px-2 justify-center bg-white-900 ${
+            fullWidth ? "" : "items-center"
+          }`,
+        )}
+      >
         <Button
           variant={selectedVariant}
           themeColor={selectedTheme}
@@ -118,6 +126,15 @@ export const ButtonScreen = () => {
             style={tailwind.style("mt-2 ml-1")}
             label="Loading"
           />
+          <Switch
+            state={fullWidth}
+            onStateChange={(value: SetStateAction<boolean>) =>
+              setFullWidth(value)
+            }
+            size="md"
+            style={tailwind.style("mt-2 ml-1")}
+            label="Full Width"
+          />
         </Box>
       </Box>
     </Box>