chore(example-app): ⚡ add CheckboxGroup component screen with examples

Author: Karthik-B-06

example/src/AppRoot.tsx

@@ -6,6 +6,7 @@ import {
   AvatarScreen,
   BadgeScreen,
   ButtonScreen,
+  CheckboxGroupScreen,
   CheckboxScreen,
   CircularProgressScreen,
   InputScreen,
@@ -23,7 +24,7 @@ const Drawer = createDrawerNavigator();
 
 const AppRoot = () => {
   return (
-    <Drawer.Navigator initialRouteName="InputScreen">
+    <Drawer.Navigator initialRouteName="CheckboxGroupScreen">
       <Drawer.Screen
         options={{ title: "Avatar" }}
         name="AvatarScreen"
@@ -99,6 +100,11 @@ const AppRoot = () => {
         name="InputScreen"
         component={InputScreen}
       />
+      <Drawer.Screen
+        options={{ title: "Checkbox Group" }}
+        name="CheckboxGroupScreen"
+        component={CheckboxGroupScreen}
+      />
     </Drawer.Navigator>
   );
 };

example/src/modules/forms/CheckboxGroupScreen.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import {
+  Box,
+  Checkbox,
+  CheckboxGroup,
+  Text,
+  useTheme,
+} from "@adaptui/react-native-tailwind";
+
+export const CheckboxGroupScreen = () => {
+  const tailwind = useTheme();
+  const [value, setValue] = React.useState<string[]>([]);
+  return (
+    <Box style={tailwind.style("flex-1 px-2 justify-center bg-white-900")}>
+      <Text>Pick fruits to eat</Text>
+      <CheckboxGroup value={value} onChange={setValue}>
+        <Checkbox value="apple" label="Apple" />
+        <Checkbox value="orange" label="Orange" />
+        <Checkbox value="watermelon" label="Watermelon" />
+        <Checkbox value="sapota" label="Sapota" />
+        <Checkbox value="cherry" label="Cherry" />
+      </CheckboxGroup>
+      <Box style={tailwind.style("mt-2")}>
+        <Text>Picked fruits</Text>
+        {value.map((item, index) => {
+          return (
+            <Text style={tailwind.style("my-1")} key={index}>
+              - {item}
+            </Text>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+};

example/src/modules/forms/index.ts

@@ -1,3 +1,4 @@
+export * from "./CheckboxGroupScreen";
 export * from "./InputScreen";
 export * from "./RadioScreen";
 export * from "./SliderComponentScreen";