add orpc

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

@@ -0,0 +1,29 @@
+import { Tabs } from "expo-router";
+
+import { TabBarIcon } from "@/components/tabbar-icon";
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: "black",
+      }}
+    >
+      <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/app/(drawer)/(tabs)/index.tsx

@@ -0,0 +1,17 @@
+import { Container } from "@/components/container";
+import { Text, View } from "react-native";
+
+export default function TabOne() {
+	return (
+		<Container>
+			<View className="p-6 flex-1 justify-center">
+				<Text className="text-2xl font-bold text-foreground text-center mb-4">
+					Tab One
+				</Text>
+				<Text className="text-foreground text-center">
+					This is the first tab of the application.
+				</Text>
+			</View>
+		</Container>
+	);
+}

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

@@ -0,0 +1,17 @@
+import { Container } from "@/components/container";
+import { Text, View } from "react-native";
+
+export default function TabTwo() {
+	return (
+		<Container>
+			<View className="p-6 flex-1 justify-center">
+				<Text className="text-2xl font-bold text-foreground text-center mb-4">
+					Tab Two
+				</Text>
+				<Text className="text-foreground text-center">
+					This is the second tab of the application.
+				</Text>
+			</View>
+		</Container>
+	);
+}

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

@@ -0,0 +1,39 @@
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import { Link } from "expo-router";
+import { Drawer } from "expo-router/drawer";
+
+import { HeaderButton } from "@/components/header-button";
+
+const DrawerLayout = () => {
+  return (
+    <Drawer>
+      <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/app/(drawer)/index.tsx

@@ -0,0 +1,36 @@
+import { useQuery } from "@tanstack/react-query";
+import { View, Text, ScrollView } from "react-native";
+import { Container } from "@/components/container";
+import { trpc } from "@/utils/trpc";
+
+export default function Home() {
+  const healthCheck = useQuery(trpc.healthCheck.queryOptions());
+
+  return (
+    <Container>
+      <ScrollView className="py-4 flex-1">
+        <Text className="font-mono text-foreground text-2xl font-bold mb-6">
+          BETTER T STACK
+        </Text>
+
+        <View className="rounded-lg border border-foreground p-4">
+          <Text className="mb-2 font-medium text-foreground">API Status</Text>
+          <View className="flex-row items-center gap-2">
+            <View
+              className={`h-2.5 w-2.5 rounded-full ${
+                healthCheck.data ? "bg-green-500" : "bg-red-500"
+              }`}
+            />
+            <Text className="text-sm text-foreground">
+              {healthCheck.isLoading
+                ? "Checking..."
+                : healthCheck.data
+                  ? "Connected"
+                  : "Disconnected"}
+            </Text>
+          </View>
+        </View>
+      </ScrollView>
+    </Container>
+  );
+}