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",
+  },
+}));

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

@@ -0,0 +1,59 @@
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import { Link } from "expo-router";
+import { Drawer } from "expo-router/drawer";
+import { useUnistyles } from "react-native-unistyles";
+
+import { HeaderButton } from "../../components/header-button";
+
+const DrawerLayout = () => {
+  const { theme } = useUnistyles();
+
+  return (
+    <Drawer
+      screenOptions={{
+        headerStyle: {
+          backgroundColor: theme.colors.background,
+        },
+        headerTitleStyle: {
+          color: theme.colors.typography,
+        },
+        headerTintColor: theme.colors.typography,
+        drawerStyle: {
+          backgroundColor: theme.colors.background,
+        },
+        drawerLabelStyle: {
+          color: theme.colors.typography,
+        },
+        drawerInactiveTintColor: theme.colors.typography,
+      }}
+    >
+      <Drawer.Screen
+        name="index"
+        options={{
+          headerTitle: "Home",
+          drawerLabel: "Home",
+          drawerIcon: ({ size, color }) => (
+            <Ionicons name="home-outline" size={size} color={color} />
+          ),
+        }}
+      />
+      <Drawer.Screen
+        name="(tabs)"
+        options={{
+          headerTitle: "Tabs",
+          drawerLabel: "Tabs",
+          drawerIcon: ({ size, color }) => (
+            <MaterialIcons name="border-bottom" size={size} color={color} />
+          ),
+          headerRight: () => (
+            <Link href="/modal" asChild>
+              <HeaderButton />
+            </Link>
+          ),
+        }}
+      />
+    </Drawer>
+  );
+};
+
+export default DrawerLayout;

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

@@ -0,0 +1,115 @@
+import { ScrollView, Text, View } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+import { Container } from "@/components/container";
+
+{{#if (eq api "orpc")}}
+import { useQuery } from "@tanstack/react-query";
+import { orpc } from "@/utils/orpc";
+{{/if}}
+{{#if (eq api "trpc")}}
+import { useQuery } from "@tanstack/react-query";
+import { trpc } from "@/utils/trpc";
+{{/if}}
+{{#if (eq backend "convex")}}
+import { useQuery } from "convex/react";
+import { api } from "@{{ projectName }}/backend/convex/_generated/api.js";
+{{/if}}
+
+export default function Home() {
+  {{#if (eq api "orpc")}}
+  const healthCheck = useQuery(orpc.healthCheck.queryOptions());
+  {{/if}}
+  {{#if (eq api "trpc")}}
+  const healthCheck = useQuery(trpc.healthCheck.queryOptions());
+  {{/if}}
+  {{#if (eq backend "convex")}}
+  const healthCheck = useQuery(api.healthCheck.get);
+  {{/if}}
+
+  return (
+    <Container>
+      <ScrollView contentContainerStyle={styles.pageContainer}>
+        <Text style={styles.headerTitle}>BETTER T STACK</Text>
+
+        <View style={styles.apiStatusCard}>
+          <Text style={styles.cardTitle}>API Status</Text>
+          <View style={styles.apiStatusRow}>
+            <View
+              style={[
+                styles.statusIndicatorDot,
+                {{#if (or (eq api "orpc") (eq api "trpc"))}}
+                healthCheck.data
+                  ? styles.statusIndicatorGreen
+                  : styles.statusIndicatorRed,
+                {{else}}
+                healthCheck === "OK"
+                  ? styles.statusIndicatorGreen
+                  : styles.statusIndicatorRed,
+                {{/if}}
+              ]}
+            />
+            <Text style={styles.statusText}>
+              {{#if (or (eq api "orpc") (eq api "trpc"))}}
+              {healthCheck.isLoading
+                ? "Checking..."
+                : healthCheck.data
+                  ? "Connected"
+                  : "Disconnected"}
+              {{/if}}
+              {{#if (eq backend "convex")}}
+              {healthCheck === undefined
+                ? "Checking..."
+                : healthCheck === "OK"
+                  ? "Connected"
+                  : "Error"}
+              {{/if}}
+            </Text>
+          </View>
+        </View>
+      </ScrollView>
+    </Container>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  pageContainer: {
+    paddingHorizontal: 8,
+  },
+  headerTitle: {
+    color: theme?.colors?.typography,
+    fontSize: 30,
+    fontWeight: "bold",
+    marginBottom: 16,
+  },
+  apiStatusCard: {
+    marginBottom: 24,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: theme?.colors?.border,
+    padding: 16,
+  },
+  cardTitle: {
+    marginBottom: 12,
+    fontWeight: "500",
+    color: theme?.colors?.typography,
+  },
+  apiStatusRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  statusIndicatorDot: {
+    height: 12,
+    width: 12,
+    borderRadius: 9999,
+  },
+  statusIndicatorGreen: {
+    backgroundColor: theme.colors.success,
+  },
+  statusIndicatorRed: {
+    backgroundColor: theme.colors.destructive,
+  },
+  statusText: {
+    color: theme?.colors?.typography,
+  },
+}));