add convex

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

@@ -1,12 +1,17 @@
-import { useQuery } from "@tanstack/react-query";
 import { View, Text, ScrollView } from "react-native";
 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")}}
@@ -15,6 +20,9 @@ export default function Home() {
   {{#if (eq api "trpc")}}
   const healthCheck = useQuery(trpc.healthCheck.queryOptions());
   {{/if}}
+  {{#if (eq backend "convex")}}
+  const healthCheck = useQuery(api.healthCheck.get);
+  {{/if}}
 
   return (
     <Container>
@@ -28,15 +36,35 @@ export default function Home() {
           <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"
+                {{#if (or (eq api "orpc") (eq api "trpc"))}}
+                  healthCheck.data ? "bg-green-500" : "bg-red-500"
+                {{else}}
+                  healthCheck ? "bg-green-500" : "bg-red-500"
+                {{/if}}
               }`}
             />
             <Text className="text-sm text-foreground">
-              {healthCheck.isLoading
-                ? "Checking..."
-                : healthCheck.data
-                  ? "Connected"
-                  : "Disconnected"}
+              {{#if (eq api "orpc")}}
+                {healthCheck.isLoading
+                  ? "Checking..."
+                  : healthCheck.data
+                    ? "Connected"
+                    : "Disconnected"}
+              {{/if}}
+              {{#if (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>

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

@@ -1,4 +1,8 @@
+{{#if (eq backend "convex")}}
+import { ConvexProvider, ConvexReactClient } from "convex/react";
+{{else}}
 import { QueryClientProvider } from "@tanstack/react-query";
+{{/if}}
 import { Stack } from "expo-router";
 import {
   DarkTheme,
@@ -35,6 +39,12 @@ export const unstable_settings = {
   initialRouteName: "(drawer)",
 };
 
+{{#if (eq backend "convex")}}
+const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL!, {
+  unsavedChangesWarning: false,
+});
+{{/if}}
+
 export default function RootLayout() {
   const hasMounted = useRef(false);
   const { colorScheme, isDarkColorScheme } = useColorScheme();
@@ -58,6 +68,22 @@ export default function RootLayout() {
     return null;
   }
   return (
+    {{#if (eq backend "convex")}}
+    <ConvexProvider client={convex}>
+      <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
+        <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
+        <GestureHandlerRootView style=\{{ flex: 1 }}>
+          <Stack>
+            <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
+            <Stack.Screen
+              name="modal"
+              options=\{{ title: "Modal", presentation: "modal" }}
+            />
+          </Stack>
+        </GestureHandlerRootView>
+      </ThemeProvider>
+    </ConvexProvider>
+    {{else}}
     <QueryClientProvider client={queryClient}>
       <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
         <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
@@ -72,6 +98,7 @@ export default function RootLayout() {
         </GestureHandlerRootView>
       </ThemeProvider>
     </QueryClientProvider>
+    {{/if}}
   );
 }