add convex

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}}
   );
 }