add ai and todo example templates for native frontends (#293)

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

@@ -1,27 +1,44 @@
+import { TabBarIcon } from "@/components/tabbar-icon";
+import { useColorScheme } from "@/lib/use-color-scheme";
 import { Tabs } from "expo-router";
 
-import { TabBarIcon } from "@/components/tabbar-icon";
-
 export default function TabLayout() {
+  const { isDarkColorScheme } = useColorScheme();
+
   return (
     <Tabs
       screenOptions={{
         headerShown: false,
-        tabBarActiveTintColor: "black",
+        tabBarActiveTintColor: isDarkColorScheme
+          ? "hsl(217.2 91.2% 59.8%)"
+          : "hsl(221.2 83.2% 53.3%)",
+        tabBarInactiveTintColor: isDarkColorScheme
+          ? "hsl(215 20.2% 65.1%)"
+          : "hsl(215.4 16.3% 46.9%)",
+        tabBarStyle: {
+          backgroundColor: isDarkColorScheme
+            ? "hsl(222.2 84% 4.9%)"
+            : "hsl(0 0% 100%)",
+          borderTopColor: isDarkColorScheme
+            ? "hsl(217.2 32.6% 17.5%)"
+            : "hsl(214.3 31.8% 91.4%)",
+        },
       }}
     >
       <Tabs.Screen
         name="index"
         options={{
-          title: "Tab One",
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          title: "Home",
+          tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
         }}
       />
       <Tabs.Screen
         name="two"
         options={{
-          title: "Tab Two",
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          title: "Explore",
+          tabBarIcon: ({ color }) => (
+            <TabBarIcon name="compass" color={color} />
+          ),
         }}
       />
     </Tabs>

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

@@ -1,17 +1,19 @@
 import { Container } from "@/components/container";
-import { Text, View } from "react-native";
+import { ScrollView, 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>
-	);
+  return (
+    <Container>
+      <ScrollView className="flex-1 p-6">
+        <View className="py-8">
+          <Text className="text-3xl font-bold text-foreground mb-2">
+            Tab One
+          </Text>
+          <Text className="text-lg text-muted-foreground">
+            Explore the first section of your app
+          </Text>
+        </View>
+      </ScrollView>
+    </Container>
+  );
 }

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

@@ -1,17 +1,19 @@
 import { Container } from "@/components/container";
-import { Text, View } from "react-native";
+import { ScrollView, 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>
-	);
+  return (
+    <Container>
+      <ScrollView className="flex-1 p-6">
+        <View className="py-8">
+          <Text className="text-3xl font-bold text-foreground mb-2">
+            Tab Two
+          </Text>
+          <Text className="text-lg text-muted-foreground">
+            Discover more features and content
+          </Text>
+        </View>
+      </ScrollView>
+    </Container>
+  );
 }

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

@@ -17,18 +17,6 @@ const DrawerLayout = () => {
           ),
         }}
       />
-      {{#if (includes examples "todo")}}
-      <Drawer.Screen
-        name="todos"
-        options=\{{
-          headerTitle: "Todos",
-          drawerLabel: "Todos",
-          drawerIcon: ({ size, color }) => (
-            <Ionicons name="checkbox-outline" size={size} color={color} />
-          ),
-        }}
-      />
-      {{/if}}
       <Drawer.Screen
         name="(tabs)"
         options=\{{
@@ -44,6 +32,34 @@ const DrawerLayout = () => {
           ),
         }}
       />
+      {{#if (includes examples "todo")}}
+      <Drawer.Screen
+        name="todos"
+        options=\{{
+          headerTitle: "Todos",
+          drawerLabel: "Todos",
+          drawerIcon: ({ size, color }) => (
+            <Ionicons name="checkbox-outline" size={size} color={color} />
+          ),
+        }}
+      />
+      {{/if}}
+      {{#if (includes examples "ai")}}
+      <Drawer.Screen
+        name="ai"
+        options=\{{
+          headerTitle: "AI",
+          drawerLabel: "AI",
+          drawerIcon: ({ size, color }) => (
+            <Ionicons
+              name="chatbubble-ellipses-outline"
+              size={size}
+              color={color}
+            />
+          ),
+        }}
+      />
+      {{/if}}
     </Drawer>
   );
 };

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

@@ -26,52 +26,65 @@ export default function Home() {
 
   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>
+      <ScrollView showsVerticalScrollIndicator={false} className="flex-1">
+        <Text className="font-mono text-foreground text-3xl font-bold mb-4">
+			BETTER T STACK
+		</Text>
+        <View className="bg-card border border-border rounded-xl p-6 mb-6 shadow-sm">
           {{#if (eq backend "convex")}}
-          <View className="flex-row items-center gap-2">
+          <View className="flex-row items-center gap-3">
             <View
-              className={`h-2.5 w-2.5 rounded-full ${
-                  healthCheck ? "bg-green-500" : "bg-red-500"
+              className={`h-3 w-3 rounded-full ${
+                  healthCheck ? "bg-green-500" : "bg-orange-500"
               }`}
             />
-            <Text className="text-sm text-foreground">
+            <View className="flex-1">
+              <Text className="text-sm font-medium text-card-foreground">
+                Convex
+              </Text>
+              <Text className="text-xs text-muted-foreground">
                 {healthCheck === undefined
-                  ? "Checking..."
+                  ? "Checking connection..."
                   : healthCheck === "OK"
-                    ? "Connected"
-                    : "Error"}
-            </Text>
+                    ? "All systems operational"
+                    : "Service unavailable"}
+              </Text>
+            </View>
           </View>
           {{else}}
             {{#unless (eq api "none")}}
-            <View className="flex-row items-center gap-2">
+            <View className="flex-row items-center gap-3">
               <View
-                className={`h-2.5 w-2.5 rounded-full ${
-                    healthCheck.data ? "bg-green-500" : "bg-red-500"
+                className={`h-3 w-3 rounded-full ${
+                    healthCheck.data ? "bg-green-500" : "bg-orange-500"
                 }`}
               />
-              <Text className="text-sm text-foreground">
-                {{#if (eq api "orpc")}}
+              <View className="flex-1">
+                <Text className="text-sm font-medium text-card-foreground">
+                  {{#if (eq api "orpc")}}
+                  ORPC
+                  {{/if}}
+                  {{#if (eq api "trpc")}}
+                  TRPC
+                  {{/if}}
+                </Text>
+                <Text className="text-xs text-muted-foreground">
+                  {{#if (eq api "orpc")}}
                   {healthCheck.isLoading
-                    ? "Checking..."
+                    ? "Checking connection..."
                     : healthCheck.data
-                      ? "Connected"
-                      : "Disconnected"}
-                {{/if}}
-                {{#if (eq api "trpc")}}
+                      ? "All systems operational"
+                      : "Service unavailable"}
+                  {{/if}}
+                  {{#if (eq api "trpc")}}
                   {healthCheck.isLoading
-                    ? "Checking..."
+                    ? "Checking connection..."
                     : healthCheck.data
-                      ? "Connected"
-                      : "Disconnected"}
-                {{/if}}
-              </Text>
+                      ? "All systems operational"
+                      : "Service unavailable"}
+                  {{/if}}
+                </Text>
+              </View>
             </View>
             {{/unless}}
           {{/if}}

apps/cli/templates/frontend/native/nativewind/app/+not-found.tsx

@@ -1,17 +1,28 @@
-import { Link, Stack } from 'expo-router';
-import { Text } from 'react-native';
-
-import { Container } from '@/components/container';
+import { Container } from "@/components/container";
+import { Link, Stack } from "expo-router";
+import { Text, View } from "react-native";
 
 export default function NotFoundScreen() {
   return (
     <>
-      <Stack.Screen options={{ title: 'Oops!' }} />
+      <Stack.Screen options={{ title: "Oops!" }} />
       <Container>
-        <Text className="text-xl font-bold">This screen doesn't exist.</Text>
-        <Link href="/" className="mt-4 pt-4">
-          <Text className="text-base text-[#2e78b7]">Go to home screen!</Text>
-        </Link>
+        <View className="flex-1 justify-center items-center p-6">
+          <View className="items-center">
+            <Text className="text-6xl mb-4">🤔</Text>
+            <Text className="text-2xl font-bold text-foreground mb-2 text-center">
+              Page Not Found
+            </Text>
+            <Text className="text-muted-foreground text-center mb-8 max-w-sm">
+              Sorry, the page you're looking for doesn't exist.
+            </Text>
+            <Link href="/" asChild>
+              <Text className="text-primary font-medium bg-primary/10 px-6 py-3 rounded-lg">
+                Go to Home
+              </Text>
+            </Link>
+          </View>
+        </View>
       </Container>
     </>
   );

apps/cli/templates/frontend/native/nativewind/app/_layout.tsx.hbs

@@ -1,3 +1,6 @@
+{{#if (includes examples "ai")}}
+import "@/polyfills";
+{{/if}}
 {{#if (eq backend "convex")}}
 import { ConvexProvider, ConvexReactClient } from "convex/react";
 {{else}}

apps/cli/templates/frontend/native/nativewind/app/modal.tsx

@@ -2,11 +2,13 @@ import { Container } from "@/components/container";
 import { Text, View } from "react-native";
 
 export default function Modal() {
-	return (
-		<Container>
-			<View className="flex-1 justify-center items-center">
-				<Text className="text-xl font-bold text-foreground">Modal View</Text>
-			</View>
-		</Container>
-	);
+  return (
+    <Container>
+      <View className="flex-1 p-6">
+        <View className="flex-row items-center justify-between mb-8">
+          <Text className="text-2xl font-bold text-foreground">Modal</Text>
+        </View>
+      </View>
+    </Container>
+  );
 }