add unistyles

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

@@ -0,0 +1,29 @@
+import { Tabs } from "expo-router";
+
+import { TabBarIcon } from "@/components/tabbar-icon";
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: "black",
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Tab One",
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="two"
+        options={{
+          title: "Tab Two",
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}

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

@@ -0,0 +1,17 @@
+import { Container } from "@/components/container";
+import { 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>
+	);
+}

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

@@ -0,0 +1,17 @@
+import { Container } from "@/components/container";
+import { 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>
+	);
+}

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

@@ -0,0 +1,39 @@
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import { Link } from "expo-router";
+import { Drawer } from "expo-router/drawer";
+
+import { HeaderButton } from "@/components/header-button";
+
+const DrawerLayout = () => {
+  return (
+    <Drawer>
+      <Drawer.Screen
+        name="index"
+        options={{
+          headerTitle: "Home",
+          drawerLabel: "Home",
+          drawerIcon: ({ size, color }) => (
+            <Ionicons name="home-outline" size={size} color={color} />
+          ),
+        }}
+      />
+      <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>
+          ),
+        }}
+      />
+    </Drawer>
+  );
+};
+
+export default DrawerLayout;

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

@@ -0,0 +1,74 @@
+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")}}
+  const healthCheck = useQuery(orpc.healthCheck.queryOptions());
+  {{/if}}
+  {{#if (eq api "trpc")}}
+  const healthCheck = useQuery(trpc.healthCheck.queryOptions());
+  {{/if}}
+  {{#if (eq backend "convex")}}
+  const healthCheck = useQuery(api.healthCheck.get);
+  {{/if}}
+
+  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>
+          <View className="flex-row items-center gap-2">
+            <View
+              className={`h-2.5 w-2.5 rounded-full ${
+                {{#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">
+              {{#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>
+      </ScrollView>
+    </Container>
+  );
+}

apps/cli/templates/frontend/native/nativewind/app/+html.tsx

@@ -0,0 +1,47 @@
+import { ScrollViewStyleReset } from 'expo-router/html';
+import { ReactNode } from 'react';
+
+// This file is web-only and used to configure the root HTML for every
+// web page during static rendering.
+// The contents of this function only run in Node.js environments and
+// do not have access to the DOM or browser APIs.
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta content="IE=edge" httpEquiv="X-UA-Compatible" />
+
+        {/*
+          This viewport disables scaling which makes the mobile website act more like a native app.
+          However this does reduce built-in accessibility. If you want to enable scaling, use this instead:
+            <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+        */}
+        <meta
+          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover"
+          name="viewport"
+        />
+        {/*
+          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
+          However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
+        */}
+        <ScrollViewStyleReset />
+
+        {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
+        <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
+        {/* Add any additional <head> elements that you want globally available on web... */}
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+
+const responsiveBackground = `
+body {
+  background-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+}`;

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

@@ -0,0 +1,18 @@
+import { Link, Stack } from 'expo-router';
+import { Text } from 'react-native';
+
+import { Container } from '@/components/container';
+
+export default function NotFoundScreen() {
+  return (
+    <>
+      <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>
+      </Container>
+    </>
+  );
+}

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

@@ -0,0 +1,106 @@
+{{#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,
+  DefaultTheme,
+  type Theme,
+  ThemeProvider,
+} from "@react-navigation/native";
+import { StatusBar } from "expo-status-bar";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import "../global.css";
+{{#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 } 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}}
+
+export default function RootLayout() {
+  const hasMounted = useRef(false);
+  const { colorScheme, isDarkColorScheme } = useColorScheme();
+  const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);
+
+  useIsomorphicLayoutEffect(() => {
+    if (hasMounted.current) {
+      return;
+    }
+
+    if (Platform.OS === "web") {
+      document.documentElement.classList.add("bg-background");
+    }
+    setAndroidNavigationBar(colorScheme);
+    setIsColorSchemeLoaded(true);
+    hasMounted.current = true;
+  }, []);
+
+  if (!isColorSchemeLoaded) {
+    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"} />
+        <GestureHandlerRootView style=\{{ flex: 1 }}>
+          <Stack>
+            <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
+            <Stack.Screen
+              name="modal"
+              options=\{{ title: "Modal", presentation: "modal" }}
+            />
+          </Stack>
+        </GestureHandlerRootView>
+      </ThemeProvider>
+    </QueryClientProvider>
+    {{/if}}
+  );
+}
+
+const useIsomorphicLayoutEffect =
+  Platform.OS === "web" && typeof window === "undefined"
+    ? React.useEffect
+    : React.useLayoutEffect;

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

@@ -0,0 +1,12 @@
+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>
+	);
+}