create-better-t-stack 2.14.4 → 2.15.0

package/templates/examples/todo/native/unistyles/app/(drawer)/todos.tsx.hbs

@@ -0,0 +1,340 @@
+import { useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  ScrollView,
+  ActivityIndicator,
+  Alert,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+{{#if (eq backend "convex")}}
+import { useMutation, useQuery } from "convex/react";
+import { api } from "@{{projectName}}/backend/convex/_generated/api";
+import type { Id } from "@{{projectName}}/backend/convex/_generated/dataModel";
+{{else}}
+import { useMutation, useQuery } from "@tanstack/react-query";
+{{/if}}
+
+import { Container } from "@/components/container";
+{{#unless (eq backend "convex")}}
+{{#if (eq api "orpc")}}
+import { orpc } from "@/utils/orpc";
+{{/if}}
+{{#if (eq api "trpc")}}
+import { trpc } from "@/utils/trpc";
+{{/if}}
+{{/unless}}
+
+export default function TodosScreen() {
+  const [newTodoText, setNewTodoText] = useState("");
+  const { theme } = useUnistyles();
+
+  {{#if (eq backend "convex")}}
+  const todos = useQuery(api.todos.getAll);
+  const createTodoMutation = useMutation(api.todos.create);
+  const toggleTodoMutation = useMutation(api.todos.toggle);
+  const deleteTodoMutation = useMutation(api.todos.deleteTodo);
+
+  const handleAddTodo = async () => {
+    const text = newTodoText.trim();
+    if (!text) return;
+    await createTodoMutation({ text });
+    setNewTodoText("");
+  };
+
+  const handleToggleTodo = (id: Id<"todos">, currentCompleted: boolean) => {
+    toggleTodoMutation({ id, completed: !currentCompleted });
+  };
+
+  const handleDeleteTodo = (id: Id<"todos">) => {
+    Alert.alert("Delete Todo", "Are you sure you want to delete this todo?", [
+      { text: "Cancel", style: "cancel" },
+      {
+        text: "Delete",
+        style: "destructive",
+        onPress: () => deleteTodoMutation({ id }),
+      },
+    ]);
+  };
+  {{else}}
+    {{#if (eq api "orpc")}}
+    const todos = useQuery(orpc.todo.getAll.queryOptions());
+    const createMutation = useMutation(
+      orpc.todo.create.mutationOptions({
+        onSuccess: () => {
+          todos.refetch();
+          setNewTodoText("");
+        },
+      })
+    );
+    const toggleMutation = useMutation(
+      orpc.todo.toggle.mutationOptions({
+        onSuccess: () => todos.refetch(),
+      })
+    );
+    const deleteMutation = useMutation(
+      orpc.todo.delete.mutationOptions({
+        onSuccess: () => todos.refetch(),
+      })
+    );
+    {{/if}}
+    {{#if (eq api "trpc")}}
+    const todos = useQuery(trpc.todo.getAll.queryOptions());
+    const createMutation = useMutation(
+      trpc.todo.create.mutationOptions({
+        onSuccess: () => {
+          todos.refetch();
+          setNewTodoText("");
+        },
+      })
+    );
+    const toggleMutation = useMutation(
+      trpc.todo.toggle.mutationOptions({
+        onSuccess: () => todos.refetch(),
+      })
+    );
+    const deleteMutation = useMutation(
+      trpc.todo.delete.mutationOptions({
+        onSuccess: () => todos.refetch(),
+      })
+    );
+    {{/if}}
+
+  const handleAddTodo = () => {
+    if (newTodoText.trim()) {
+      createMutation.mutate({ text: newTodoText });
+    }
+  };
+
+  const handleToggleTodo = (id: number, completed: boolean) => {
+    toggleMutation.mutate({ id, completed: !completed });
+  };
+
+  const handleDeleteTodo = (id: number) => {
+    Alert.alert("Delete Todo", "Are you sure you want to delete this todo?", [
+      { text: "Cancel", style: "cancel" },
+      {
+        text: "Delete",
+        style: "destructive",
+        onPress: () => deleteMutation.mutate({ id }),
+      },
+    ]);
+  };
+  {{/if}}
+
+  const isLoading = {{#if (eq backend "convex")}}!todos{{else}}todos.isLoading{{/if}};
+  const isCreating = {{#if (eq backend "convex")}}false{{else}}createMutation.isPending{{/if}};
+  const primaryButtonTextColor = theme.colors.background;
+
+  return (
+    <Container>
+      <ScrollView style={styles.scrollView}>
+        <View style={styles.headerContainer}>
+          <Text style={styles.headerTitle}>Todo List</Text>
+          <Text style={styles.headerSubtitle}>
+            Manage your tasks efficiently
+          </Text>
+
+          <View style={styles.inputContainer}>
+            <TextInput
+              value={newTodoText}
+              onChangeText={setNewTodoText}
+              placeholder="Add a new task..."
+              placeholderTextColor={theme.colors.border}
+              editable={!isCreating}
+              style={styles.textInput}
+              onSubmitEditing={handleAddTodo}
+              returnKeyType="done"
+            />
+            <TouchableOpacity
+              onPress={handleAddTodo}
+              disabled={isCreating || !newTodoText.trim()}
+              style={[
+                styles.addButton,
+                (isCreating || !newTodoText.trim()) && styles.addButtonDisabled,
+              ]}
+            >
+              {isCreating ? (
+                <ActivityIndicator size="small" color={primaryButtonTextColor} />
+              ) : (
+                <Ionicons
+                  name="add"
+                  size={24}
+                  color={primaryButtonTextColor}
+                />
+              )}
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        {isLoading && (
+          <View style={styles.loadingContainer}>
+            <ActivityIndicator size="large" color={theme.colors.primary} />
+            <Text style={styles.loadingText}>Loading todos...</Text>
+          </View>
+        )}
+
+        {{#if (eq backend "convex")}}
+          {todos && todos.length === 0 && !isLoading && (
+            <Text style={styles.emptyText}>No todos yet. Add one!</Text>
+          )}
+          {todos?.map((todo) => (
+            <View key={todo._id} style={styles.todoItem}>
+              <TouchableOpacity
+                onPress={() => handleToggleTodo(todo._id, todo.completed)}
+                style={styles.todoContent}
+              >
+                <Ionicons
+                  name={todo.completed ? "checkbox" : "square-outline"}
+                  size={24}
+                  color={todo.completed ? theme.colors.primary : theme.colors.typography}
+                  style={styles.checkbox}
+                />
+                <Text
+                  style={[
+                    styles.todoText,
+                    todo.completed && styles.todoTextCompleted,
+                  ]}
+                >
+                  {todo.text}
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity onPress={() => handleDeleteTodo(todo._id)}>
+                <Ionicons name="trash-outline" size={24} color={theme.colors.destructive} />
+              </TouchableOpacity>
+            </View>
+          ))}
+        {{else}}
+          {todos.data && todos.data.length === 0 && !isLoading && (
+             <Text style={styles.emptyText}>No todos yet. Add one!</Text>
+          )}
+          {todos.data?.map((todo: { id: number; text: string; completed: boolean }) => (
+            <View key={todo.id} style={styles.todoItem}>
+              <TouchableOpacity
+                onPress={() => handleToggleTodo(todo.id, todo.completed)}
+                style={styles.todoContent}
+              >
+                <Ionicons
+                  name={todo.completed ? "checkbox" : "square-outline"}
+                  size={24}
+                  color={todo.completed ? theme.colors.primary : theme.colors.typography}
+                  style={styles.checkbox}
+                />
+                <Text
+                  style={[
+                    styles.todoText,
+                    todo.completed && styles.todoTextCompleted,
+                  ]}
+                >
+                  {todo.text}
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity onPress={() => handleDeleteTodo(todo.id)}>
+                <Ionicons name="trash-outline" size={24} color={theme.colors.destructive} />
+              </TouchableOpacity>
+            </View>
+          ))}
+        {{/if}}
+      </ScrollView>
+    </Container>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  scrollView: {
+    flex: 1,
+  },
+  headerContainer: {
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: theme.spacing.lg,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+    backgroundColor: theme.colors.background,
+  },
+  headerTitle: {
+    fontSize: 28,
+    fontWeight: "bold",
+    color: theme.colors.typography,
+    marginBottom: theme.spacing.sm,
+  },
+  headerSubtitle: {
+    fontSize: 16,
+    color: theme.colors.typography,
+    marginBottom: theme.spacing.md,
+  },
+  inputContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: theme.spacing.md,
+  },
+  textInput: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    borderRadius: 8,
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: theme.spacing.sm,
+    color: theme.colors.typography,
+    backgroundColor: theme.colors.background,
+    marginRight: theme.spacing.sm,
+    fontSize: 16,
+  },
+  addButton: {
+    backgroundColor: theme.colors.primary,
+    padding: theme.spacing.sm,
+    borderRadius: 8,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  addButtonDisabled: {
+    backgroundColor: theme.colors.border,
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: theme.spacing.lg,
+  },
+  loadingText: {
+    marginTop: theme.spacing.sm,
+    fontSize: 16,
+    color: theme.colors.typography,
+  },
+  emptyText: {
+    textAlign: "center",
+    marginTop: theme.spacing.xl,
+    fontSize: 16,
+    color: theme.colors.typography,
+  },
+  todoItem: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: theme.spacing.md,
+    paddingHorizontal: theme.spacing.md,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+    backgroundColor: theme.colors.background,
+  },
+  todoContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+  },
+  checkbox: {
+    marginRight: theme.spacing.md,
+  },
+  todoText: {
+    fontSize: 16,
+    color: theme.colors.typography,
+    flex: 1,
+  },
+  todoTextCompleted: {
+    textDecorationLine: "line-through",
+    color: theme.colors.border,
+  },
+})); 

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

@@ -1,27 +1,44 @@
-import { Tabs } from "expo-router";
-
 import { TabBarIcon } from "@/components/tabbar-icon";
+import { useColorScheme } from "@/lib/use-color-scheme";
+import { Tabs } from "expo-router";
 
 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>

package/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>
+  );
 }

package/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>
+  );
 }

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

@@ -17,6 +17,21 @@ const DrawerLayout = () => {
           ),
         }}
       />
+      <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>
+          ),
+        }}
+      />
       {{#if (includes examples "todo")}}
       <Drawer.Screen
         name="todos"
@@ -29,21 +44,22 @@ const DrawerLayout = () => {
         }}
       />
       {{/if}}
+      {{#if (includes examples "ai")}}
       <Drawer.Screen
-        name="(tabs)"
+        name="ai"
         options=\{{
-          headerTitle: "Tabs",
-          drawerLabel: "Tabs",
+          headerTitle: "AI",
+          drawerLabel: "AI",
           drawerIcon: ({ size, color }) => (
-            <MaterialIcons name="border-bottom" size={size} color={color} />
-          ),
-          headerRight: () => (
-            <Link href="/modal" asChild>
-              <HeaderButton />
-            </Link>
+            <Ionicons
+              name="chatbubble-ellipses-outline"
+              size={size}
+              color={color}
+            />
           ),
         }}
       />
+      {{/if}}
     </Drawer>
   );
 };

package/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}}

package/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>
     </>
   );

package/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}}

package/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>
+  );
 }