chore(example-app): ✨ add Switch Component Screen with examples

example/src/AppRoot.tsx

@@ -10,6 +10,7 @@ import {
   MeterComponentScreen,
   ProgressScreen,
   SpinnerScreen,
+  SwitchComponentScreen,
   TagScreen,
   TooltipScreen,
 } from "./modules";
@@ -18,7 +19,7 @@ const Drawer = createDrawerNavigator();
 
 const AppRoot = () => {
   return (
-    <Drawer.Navigator initialRouteName="TooltipScreen">
+    <Drawer.Navigator initialRouteName="SwitchComponentScreen">
       <Drawer.Screen
         options={{ title: "Avatar" }}
         name="AvatarScreen"
@@ -50,7 +51,7 @@ const AppRoot = () => {
         component={SpinnerScreen}
       />
       <Drawer.Screen
-        options={{ title: "MeterComponent" }}
+        options={{ title: "Meter" }}
         name="MeterComponentScreen"
         component={MeterComponentScreen}
       />
@@ -60,15 +61,20 @@ const AppRoot = () => {
         component={TooltipScreen}
       />
       <Drawer.Screen
-        options={{ title: "TagScreen" }}
+        options={{ title: "Tag " }}
         name="TagScreen"
         component={TagScreen}
       />
       <Drawer.Screen
-        options={{ title: "ProgressScreen" }}
+        options={{ title: "Progress " }}
         name="ProgressScreen"
         component={ProgressScreen}
       />
+      <Drawer.Screen
+        options={{ title: "Switch" }}
+        name="SwitchComponentScreen"
+        component={SwitchComponentScreen}
+      />
     </Drawer.Navigator>
   );
 };

example/src/modules/forms/SwitchComponentScreen.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Box, Switch, useTheme } from "@adaptui/react-native-tailwind";
+
+export const SwitchComponentScreen = () => {
+  const tailwind = useTheme();
+  return (
+    <Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
+      <Box style={tailwind.style("my-2 items-center")}>
+        <Switch />
+      </Box>
+      <Box style={tailwind.style("my-2")}>
+        <Switch style={tailwind.style("mx-2 justify-between")} label="Wifi" />
+      </Box>
+      <Box style={tailwind.style("my-2 items-center")}>
+        <Switch disabled label="Disabled-Off" />
+      </Box>
+      <Box style={tailwind.style("my-2 items-center")}>
+        <Switch defaultState={true} disabled label="Disabled-On" />
+      </Box>
+      <Box style={tailwind.style("my-2 mx-4")}>
+        <Switch
+          label="Isolation"
+          description="Utilities for controlling whether an element should explicitly create a new stacking context."
+        />
+      </Box>
+      <Box style={tailwind.style("my-2 items-center")}>
+        <Switch themeColor="primary" />
+      </Box>
+      <Box style={tailwind.style("my-2 items-center")}>
+        <Switch themeColor="primary" label="Wifi" />
+      </Box>
+      <Box style={tailwind.style("my-2 items-center")}>
+        <Switch themeColor="primary" disabled label="Disabled-Off" />
+      </Box>
+      <Box style={tailwind.style("my-2 items-center")}>
+        <Switch
+          themeColor="primary"
+          defaultState={true}
+          disabled
+          label="Disabled-On"
+        />
+      </Box>
+      <Box style={tailwind.style("my-2 mx-4")}>
+        <Switch
+          themeColor="primary"
+          label="Isolation"
+          description="Utilities for controlling whether an element should explicitly create a new stacking context."
+        />
+      </Box>
+    </Box>
+  );
+};

example/src/modules/forms/index.ts

@@ -0,0 +1 @@
+export * from "./SwitchComponentScreen";

example/src/modules/index.ts

@@ -1,3 +1,4 @@
 export * from "./feedback";
+export * from "./forms";
 export * from "./popups";
 export * from "./primitives";