add unistyles

apps/cli/templates/frontend/native/unistyles/app/(drawer)/(tabs)/_layout.tsx

@@ -0,0 +1,34 @@
+import { Tabs } from "expo-router";
+import { useUnistyles } from "react-native-unistyles";
+
+import { TabBarIcon } from "@/components/tabbar-icon";
+
+export default function TabLayout() {
+  const { theme } = useUnistyles();
+
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarStyle: {
+          backgroundColor: theme.colors.background,
+        },
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Tab One",
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="two"
+        options={{
+          title: "Tab Two",
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}

apps/cli/templates/frontend/native/unistyles/app/(drawer)/(tabs)/index.tsx

@@ -0,0 +1,29 @@
+import { Stack } from "expo-router";
+import { StyleSheet } from "react-native-unistyles";
+import { Container } from "@/components/container";
+import { Text, View } from "react-native";
+
+export default function Home() {
+  return (
+    <>
+      <Stack.Screen options={{ title: "Tab One" }} />
+      <Container>
+        <View style={styles.container}>
+          <Text style={styles.text}>Tab One</Text>
+        </View>
+      </Container>
+    </>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  text: {
+    color: theme.colors.typography,
+  },
+  container: {
+    flex: 1,
+    paddingBottom: 100,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+}));

apps/cli/templates/frontend/native/unistyles/app/(drawer)/(tabs)/two.tsx

@@ -0,0 +1,29 @@
+import { Stack } from "expo-router";
+import { StyleSheet } from "react-native-unistyles";
+import { Container } from "@/components/container";
+import { Text, View } from "react-native";
+
+export default function Home() {
+  return (
+    <>
+      <Stack.Screen options={{ title: "Tab Two" }} />
+      <Container>
+        <View style={styles.container}>
+          <Text style={styles.text}>Tab Two</Text>
+        </View>
+      </Container>
+    </>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  text: {
+    color: theme.colors.typography,
+  },
+  container: {
+    flex: 1,
+    paddingBottom: 100,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+}));