create-better-t-stack 3.2.22 → 3.2.23-canary.2b547ed5

package/templates/frontend/native/bare/app/(drawer)/index.tsx.hbs

@@ -0,0 +1,234 @@
+import { View, Text, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import { Container } from "@/components/container";
+import { useColorScheme } from "@/lib/use-color-scheme";
+import { NAV_THEME } from "@/lib/constants";
+{{#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 (and (eq backend "convex") (eq auth "clerk"))}}
+import { Link } from "expo-router";
+import { Authenticated, AuthLoading, Unauthenticated, useQuery } from "convex/react";
+import { api } from "@{{ projectName }}/backend/convex/_generated/api";
+import { useUser } from "@clerk/clerk-expo";
+import { SignOutButton } from "@/components/sign-out-button";
+{{else if (and (eq backend "convex") (eq auth "better-auth"))}}
+import { useConvexAuth, useQuery } from "convex/react";
+import { api } from "@{{ projectName }}/backend/convex/_generated/api";
+import { authClient } from "@/lib/auth-client";
+import { SignIn } from "@/components/sign-in";
+import { SignUp } from "@/components/sign-up";
+{{else if (eq backend "convex")}}
+import { useQuery } from "convex/react";
+import { api } from "@{{ projectName }}/backend/convex/_generated/api";
+{{/if}}
+
+export default function Home() {
+const { colorScheme } = useColorScheme();
+const theme = colorScheme === "dark" ? NAV_THEME.dark : NAV_THEME.light;
+{{#if (eq api "orpc")}}
+const healthCheck = useQuery(orpc.healthCheck.queryOptions());
+{{/if}}
+{{#if (eq api "trpc")}}
+const healthCheck = useQuery(trpc.healthCheck.queryOptions());
+{{/if}}
+{{#if (and (eq backend "convex") (eq auth "clerk"))}}
+const { user } = useUser();
+const healthCheck = useQuery(api.healthCheck.get);
+const privateData = useQuery(api.privateData.get);
+{{else if (and (eq backend "convex") (eq auth "better-auth"))}}
+const healthCheck = useQuery(api.healthCheck.get);
+const { isAuthenticated } = useConvexAuth();
+const user = useQuery(api.auth.getCurrentUser, isAuthenticated ? {} : "skip");
+{{else if (eq backend "convex")}}
+const healthCheck = useQuery(api.healthCheck.get);
+{{/if}}
+
+return (
+<Container>
+  <ScrollView style={styles.scrollView}>
+    <View style={styles.content}>
+      <Text style={[styles.title, { color: theme.text }]}>
+        BETTER T STACK
+      </Text>
+
+      {{#unless (and (eq backend "convex") (eq auth "better-auth"))}}
+      <View style={[styles.card, { backgroundColor: theme.card, borderColor: theme.border }]}>
+        {{#if (eq backend "convex")}}
+        <View style={styles.statusRow}>
+          <View style={[styles.statusIndicator, { backgroundColor: healthCheck ? "#10b981" : "#f59e0b" }]} />
+          <View style={styles.statusContent}>
+            <Text style={[styles.statusTitle, { color: theme.text }]}>
+              Convex
+            </Text>
+            <Text style={[styles.statusText, { color: theme.text, opacity: 0.7 }]}>
+              {healthCheck === undefined
+              ? "Checking..."
+              : healthCheck === "OK"
+              ? "Connected to API"
+              : "API Disconnected"}
+            </Text>
+          </View>
+        </View>
+        {{else}}
+        {{#unless (eq api "none")}}
+        <View style={styles.statusRow}>
+          <View style={[styles.statusIndicator, { backgroundColor: healthCheck.data ? "#10b981" : "#f59e0b" }]} />
+          <View style={styles.statusContent}>
+            <Text style={[styles.statusTitle, { color: theme.text }]}>
+              {{#if (eq api "orpc")}}ORPC{{else}}TRPC{{/if}}
+            </Text>
+            <Text style={[styles.statusText, { color: theme.text, opacity: 0.7 }]}>
+              {healthCheck.isLoading
+              ? "Checking connection..."
+              : healthCheck.data
+              ? "All systems operational"
+              : "Service unavailable"}
+            </Text>
+          </View>
+        </View>
+        {{/unless}}
+        {{/if}}
+      </View>
+      {{/unless}}
+
+      {{#if (and (eq backend "convex") (eq auth "clerk"))}}
+      <Authenticated>
+        <Text style=\{{ color: theme.text }}>Hello {user?.emailAddresses[0].emailAddress}</Text>
+        <Text style=\{{ color: theme.text }}>Private Data: {privateData?.message}</Text>
+        <SignOutButton />
+      </Authenticated>
+      <Unauthenticated>
+        <Link href="/(auth)/sign-in">
+        <Text style=\{{ color: theme.primary }}>Sign in</Text>
+        </Link>
+        <Link href="/(auth)/sign-up">
+        <Text style=\{{ color: theme.primary }}>Sign up</Text>
+        </Link>
+      </Unauthenticated>
+      <AuthLoading>
+        <Text style=\{{ color: theme.text }}>Loading...</Text>
+      </AuthLoading>
+      {{/if}}
+
+      {{#if (and (eq backend "convex") (eq auth "better-auth"))}}
+      {user ? (
+      <View style={[styles.userCard, { backgroundColor: theme.card, borderColor: theme.border }]}>
+        <View style={styles.userHeader}>
+          <Text style={[styles.userText, { color: theme.text }]}>
+            Welcome, <Text style={styles.userName}>{user.name}</Text>
+          </Text>
+        </View>
+        <Text style={[styles.userEmail, { color: theme.text, opacity: 0.7 }]}>
+          {user.email}
+        </Text>
+        <TouchableOpacity style={[styles.signOutButton, { backgroundColor: theme.notification }]} onPress={()=> {
+          authClient.signOut();
+          }}
+          >
+          <Text style={styles.signOutText}>Sign Out</Text>
+        </TouchableOpacity>
+      </View>
+      ) : null}
+      <View style={[styles.statusCard, { backgroundColor: theme.card, borderColor: theme.border }]}>
+        <Text style={[styles.statusCardTitle, { color: theme.text }]}>
+          API Status
+        </Text>
+        <View style={styles.statusRow}>
+          <View style={[styles.statusIndicator, { backgroundColor: healthCheck ? "#10b981" : "#ef4444" }]} />
+          <Text style={[styles.statusText, { color: theme.text, opacity: 0.7 }]}>
+            {healthCheck === undefined
+            ? "Checking..."
+            : healthCheck === "OK"
+            ? "Connected to API"
+            : "API Disconnected"}
+          </Text>
+        </View>
+      </View>
+      {!user && (
+      <>
+        <SignIn />
+        <SignUp />
+      </>
+      )}
+      {{/if}}
+    </View>
+  </ScrollView>
+</Container>
+);
+}
+
+const styles = StyleSheet.create({
+scrollView: {
+flex: 1,
+},
+content: {
+padding: 16,
+},
+title: {
+fontSize: 24,
+fontWeight: "bold",
+marginBottom: 16,
+},
+card: {
+padding: 16,
+marginBottom: 16,
+borderWidth: 1,
+},
+statusRow: {
+flexDirection: "row",
+alignItems: "center",
+gap: 8,
+},
+statusIndicator: {
+height: 8,
+width: 8,
+},
+statusContent: {
+flex: 1,
+},
+statusTitle: {
+fontSize: 14,
+fontWeight: "bold",
+},
+statusText: {
+fontSize: 12,
+},
+userCard: {
+marginBottom: 16,
+padding: 16,
+borderWidth: 1,
+},
+userHeader: {
+marginBottom: 8,
+},
+userText: {
+fontSize: 16,
+},
+userName: {
+fontWeight: "bold",
+},
+userEmail: {
+fontSize: 14,
+marginBottom: 12,
+},
+signOutButton: {
+padding: 12,
+},
+signOutText: {
+color: "#ffffff",
+},
+statusCard: {
+marginBottom: 16,
+padding: 16,
+borderWidth: 1,
+},
+statusCardTitle: {
+marginBottom: 8,
+fontWeight: "bold",
+},
+});

package/templates/frontend/native/bare/app/+not-found.tsx.hbs

@@ -0,0 +1,65 @@
+import { Container } from "@/components/container";
+import { Link, Stack } from "expo-router";
+import { Text, View, StyleSheet } from "react-native";
+import { useColorScheme } from "@/lib/use-color-scheme";
+import { NAV_THEME } from "@/lib/constants";
+
+export default function NotFoundScreen() {
+  const { colorScheme } = useColorScheme();
+  const theme = colorScheme === "dark" ? NAV_THEME.dark : NAV_THEME.light;
+
+  return (
+    <>
+      <Stack.Screen options=\{{ title: "Oops!" }} />
+      <Container>
+        <View style={styles.container}>
+          <View style={styles.content}>
+            <Text style={styles.emoji}>🤔</Text>
+            <Text style={[styles.title, { color: theme.text }]}>
+              Page Not Found
+            </Text>
+            <Text style={[styles.subtitle, { color: theme.text, opacity: 0.7 }]}>
+              Sorry, the page you're looking for doesn't exist.
+            </Text>
+            <Link href="/" asChild>
+              <Text style={[styles.link, { color: theme.primary, backgroundColor: `${theme.primary}1a` }]}>
+                Go to Home
+              </Text>
+            </Link>
+          </View>
+        </View>
+      </Container>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 16,
+  },
+  content: {
+    alignItems: "center",
+  },
+  emoji: {
+    fontSize: 48,
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+    marginBottom: 8,
+    textAlign: "center",
+  },
+  subtitle: {
+    fontSize: 14,
+    textAlign: "center",
+    marginBottom: 24,
+  },
+  link: {
+    padding: 12,
+  },
+});
+

package/templates/frontend/native/bare/app/_layout.tsx.hbs

@@ -0,0 +1,163 @@
+{{#if (includes examples "ai")}}
+import "@/polyfills";
+{{/if}}
+
+{{#if (eq backend "convex")}}
+  {{#if (eq auth "better-auth")}}
+    import { ConvexReactClient } from "convex/react";
+    import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react";
+    import { authClient } from "@/lib/auth-client";
+  {{else}}
+    import { ConvexProvider, ConvexReactClient } from "convex/react";
+  {{/if}}
+  {{#if (eq auth "clerk")}}
+    import { ClerkProvider, useAuth } from "@clerk/clerk-expo";
+    import { ConvexProviderWithClerk } from "convex/react-clerk";
+    import { tokenCache } from "@clerk/clerk-expo/token-cache";
+  {{/if}}
+{{else}}
+  {{#unless (eq api "none")}}
+    import { QueryClientProvider } from "@tanstack/react-query";
+  {{/unless}}
+{{/if}}
+
+import { Stack } from "expo-router";
+import {
+  DarkTheme,
+  DefaultTheme,
+  type Theme,
+  ThemeProvider,
+} from "@react-navigation/native";
+import { StatusBar } from "expo-status-bar";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+{{#if (eq api "trpc")}}
+import { queryClient } from "@/utils/trpc";
+{{/if}}
+{{#if (eq api "orpc")}}
+import { queryClient } from "@/utils/orpc";
+{{/if}}
+import { NAV_THEME } from "@/lib/constants";
+import React, { useRef } from "react";
+import { useColorScheme } from "@/lib/use-color-scheme";
+import { Platform, StyleSheet } from "react-native";
+import { setAndroidNavigationBar } from "@/lib/android-navigation-bar";
+
+const LIGHT_THEME: Theme = {
+  ...DefaultTheme,
+  colors: NAV_THEME.light,
+};
+const DARK_THEME: Theme = {
+  ...DarkTheme,
+  colors: NAV_THEME.dark,
+};
+
+export const unstable_settings = {
+  initialRouteName: "(drawer)",
+};
+
+{{#if (eq backend "convex")}}
+const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL!, {
+  unsavedChangesWarning: false,
+});
+{{/if}}
+
+const useIsomorphicLayoutEffect =
+  Platform.OS === "web" && typeof window === "undefined"
+    ? React.useEffect
+    : React.useLayoutEffect;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default function RootLayout() {
+  const hasMounted = useRef(false);
+  const { colorScheme, isDarkColorScheme } = useColorScheme();
+  const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);
+
+  useIsomorphicLayoutEffect(() => {
+    if (hasMounted.current) {
+      return;
+    }
+    setAndroidNavigationBar(colorScheme);
+    setIsColorSchemeLoaded(true);
+    hasMounted.current = true;
+  }, []);
+
+  if (!isColorSchemeLoaded) {
+    return null;
+  }
+
+  return (
+    <>
+      {{#if (eq backend "convex")}}
+        {{#if (eq auth "clerk")}}
+          <ClerkProvider tokenCache={tokenCache} publishableKey={process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}>
+            <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
+              <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
+                <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
+                <GestureHandlerRootView style={styles.container}>
+                  <Stack>
+                    <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
+                    <Stack.Screen name="(auth)" options=\{{ headerShown: false }} />
+                    <Stack.Screen name="modal" options=\{{ title: "Modal", presentation: "modal" }} />
+                  </Stack>
+                </GestureHandlerRootView>
+              </ThemeProvider>
+            </ConvexProviderWithClerk>
+          </ClerkProvider>
+        {{else if (eq auth "better-auth")}}
+          <ConvexBetterAuthProvider client={convex} authClient={authClient}>
+            <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
+              <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
+              <GestureHandlerRootView style={styles.container}>
+                <Stack>
+                  <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
+                  <Stack.Screen name="modal" options=\{{ title: "Modal", presentation: "modal" }} />
+                </Stack>
+              </GestureHandlerRootView>
+            </ThemeProvider>
+          </ConvexBetterAuthProvider>
+        {{else}}
+          <ConvexProvider client={convex}>
+            <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
+              <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
+              <GestureHandlerRootView style={styles.container}>
+                <Stack>
+                  <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
+                  <Stack.Screen name="modal" options=\{{ title: "Modal", presentation: "modal" }} />
+                </Stack>
+              </GestureHandlerRootView>
+            </ThemeProvider>
+          </ConvexProvider>
+        {{/if}}
+      {{else}}
+        {{#unless (eq api "none")}}
+          <QueryClientProvider client={queryClient}>
+            <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
+              <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
+              <GestureHandlerRootView style={styles.container}>
+                <Stack>
+                  <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
+                  <Stack.Screen name="modal" options=\{{ title: "Modal", presentation: "modal" }} />
+                </Stack>
+              </GestureHandlerRootView>
+            </ThemeProvider>
+          </QueryClientProvider>
+        {{else}}
+          <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
+            <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
+            <GestureHandlerRootView style={styles.container}>
+              <Stack>
+                <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
+                <Stack.Screen name="modal" options=\{{ title: "Modal", presentation: "modal" }} />
+              </Stack>
+            </GestureHandlerRootView>
+          </ThemeProvider>
+        {{/unless}}
+      {{/if}}
+    </>
+  );
+}

package/templates/frontend/native/bare/app/modal.tsx.hbs

@@ -0,0 +1,34 @@
+import { Container } from "@/components/container";
+import { Text, View, StyleSheet } from "react-native";
+import { useColorScheme } from "@/lib/use-color-scheme";
+import { NAV_THEME } from "@/lib/constants";
+
+export default function Modal() {
+  const { colorScheme } = useColorScheme();
+  const theme = colorScheme === "dark" ? NAV_THEME.dark : NAV_THEME.light;
+
+  return (
+    <Container>
+      <View style={styles.container}>
+        <View style={styles.header}>
+          <Text style={[styles.title, { color: theme.text }]}>Modal</Text>
+        </View>
+      </View>
+    </Container>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+  },
+  header: {
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+  },
+});
+

package/templates/frontend/native/{nativewind → bare}/app.json.hbs

@@ -47,3 +47,4 @@
 		}
 	}
 }
+

package/templates/frontend/native/bare/components/container.tsx.hbs

@@ -0,0 +1,25 @@
+import React from "react";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useColorScheme } from "@/lib/use-color-scheme";
+import { NAV_THEME } from "@/lib/constants";
+import { StyleSheet } from "react-native";
+
+export function Container({ children }: { children: React.ReactNode }) {
+  const { colorScheme } = useColorScheme();
+  const backgroundColor = colorScheme === "dark" 
+    ? NAV_THEME.dark.background 
+    : NAV_THEME.light.background;
+
+  return (
+    <SafeAreaView style={[styles.container, { backgroundColor }]}>
+      {children}
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+

package/templates/frontend/native/bare/components/header-button.tsx.hbs

@@ -0,0 +1,47 @@
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import { forwardRef } from "react";
+import { Pressable, StyleSheet } from "react-native";
+import { useColorScheme } from "@/lib/use-color-scheme";
+import { NAV_THEME } from "@/lib/constants";
+
+export const HeaderButton = forwardRef<
+  typeof Pressable,
+  { onPress?: () => void }
+>(({ onPress }, ref) => {
+  const { colorScheme } = useColorScheme();
+  const theme = colorScheme === "dark" ? NAV_THEME.dark : NAV_THEME.light;
+
+  return (
+    <Pressable
+      ref={ref}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.button,
+        {
+          backgroundColor: pressed 
+            ? theme.secondary 
+            : theme.card,
+        },
+      ]}
+    >
+      {({ pressed }) => (
+        <FontAwesome
+          name="info-circle"
+          size={20}
+          color={theme.text}
+          style=\{{
+            opacity: pressed ? 0.7 : 1,
+          }}
+        />
+      )}
+    </Pressable>
+  );
+});
+
+const styles = StyleSheet.create({
+  button: {
+    padding: 8,
+    marginRight: 8,
+  },
+});
+

package/templates/frontend/native/{nativewind → bare}/components/tabbar-icon.tsx.hbs

@@ -6,3 +6,4 @@ export const TabBarIcon = (props: {
 }) => {
   return <FontAwesome size={24} style=\{{ marginBottom: -3 }} {...props} />;
 };
+

package/templates/frontend/native/{nativewind → bare}/lib/android-navigation-bar.tsx.hbs

@@ -9,3 +9,4 @@ export async function setAndroidNavigationBar(theme: "light" | "dark") {
     theme === "dark" ? NAV_THEME.dark.background : NAV_THEME.light.background,
   );
 }
+

package/templates/frontend/native/{nativewind → bare}/lib/constants.ts.hbs

@@ -16,3 +16,4 @@ export const NAV_THEME = {
     text: "hsl(210 40% 98%)",
   },
 };
+

package/templates/frontend/native/bare/lib/use-color-scheme.ts.hbs

@@ -0,0 +1,20 @@
+import { useColorScheme as useRNColorScheme } from "react-native";
+
+export function useColorScheme() {
+  const systemColorScheme = useRNColorScheme();
+  const colorScheme = systemColorScheme ?? "light";
+  
+  return {
+    colorScheme: colorScheme as "light" | "dark",
+    isDarkColorScheme: colorScheme === "dark",
+    setColorScheme: () => {
+      // Color scheme is managed by the system in bare mode
+      console.warn("setColorScheme is not available in bare mode. Color scheme is managed by the system.");
+    },
+    toggleColorScheme: () => {
+      // Color scheme is managed by the system in bare mode
+      console.warn("toggleColorScheme is not available in bare mode. Color scheme is managed by the system.");
+    },
+  };
+}
+

package/templates/frontend/native/bare/metro.config.js.hbs

@@ -0,0 +1,9 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require("expo/metro-config");
+
+const config = getDefaultConfig(__dirname);
+
+config.resolver.unstable_enablePackageExports = true;
+
+module.exports = config;
+

package/templates/frontend/native/{nativewind → bare}/package.json.hbs

@@ -31,7 +31,6 @@
     "expo-status-bar": "~3.0.7",
     "expo-system-ui": "~6.0.7",
     "expo-web-browser": "~15.0.6",
-    "nativewind": "^4.1.23",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.4",
@@ -45,8 +44,8 @@
   "devDependencies": {
     "@babel/core": "^7.26.10",
     "@types/react": "~19.1.10",
-    "tailwindcss": "^3.4.17",
     "typescript": "~5.8.2"
   },
   "private": true
 }
+

package/templates/frontend/native/bare/tsconfig.json.hbs

@@ -0,0 +1,11 @@
+{
+	"extends": "expo/tsconfig.base",
+	"compilerOptions": {
+		"strict": true,
+		"paths": {
+			"@/*": ["./*"]
+		}
+	},
+	"include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
+}
+

package/templates/frontend/native/{nativewind → uniwind}/_gitignore

@@ -9,17 +9,13 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
-# expo router
-expo-env.d.ts
-
-.env
-.cache
-
-ios
-android
 
 # macOS
 .DS_Store
 
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
+
+# UniWind generated types
+uniwind-types.d.ts
+