create-better-t-stack 2.14.4 → 2.15.0

package/templates/frontend/native/nativewind/components/container.tsx

@@ -1,9 +1,8 @@
+import React from "react";
 import { SafeAreaView } from "react-native";
 
 export const Container = ({ children }: { children: React.ReactNode }) => {
   return (
-    <SafeAreaView className="flex flex-1 p-4 bg-background">
-      {children}
-    </SafeAreaView>
+    <SafeAreaView className="flex-1 bg-background">{children}</SafeAreaView>
   );
 };

package/templates/frontend/native/nativewind/components/header-button.tsx

@@ -1,31 +1,26 @@
-import FontAwesome from '@expo/vector-icons/FontAwesome';
-import { forwardRef } from 'react';
-import { Pressable, StyleSheet } from 'react-native';
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import { forwardRef } from "react";
+import { Pressable } from "react-native";
 
-export const HeaderButton = forwardRef<typeof Pressable, { onPress?: () => void }>(
-  ({ onPress }, ref) => {
-    return (
-      <Pressable onPress={onPress}>
-        {({ pressed }) => (
-          <FontAwesome
-            name="info-circle"
-            size={25}
-            color="gray"
-            style={[
-              styles.headerRight,
-              {
-                opacity: pressed ? 0.5 : 1,
-              },
-            ]}
-          />
-        )}
-      </Pressable>
-    );
-  }
-);
-
-export const styles = StyleSheet.create({
-  headerRight: {
-    marginRight: 15,
-  },
+export const HeaderButton = forwardRef<
+  typeof Pressable,
+  { onPress?: () => void }
+>(({ onPress }, ref) => {
+  return (
+    <Pressable
+      onPress={onPress}
+      className="p-2 mr-2 rounded-lg bg-secondary/50 active:bg-secondary"
+    >
+      {({ pressed }) => (
+        <FontAwesome
+          name="info-circle"
+          size={20}
+          className="text-secondary-foreground"
+          style={{
+            opacity: pressed ? 0.7 : 1,
+          }}
+        />
+      )}
+    </Pressable>
+  );
 });

package/templates/frontend/native/nativewind/components/tabbar-icon.tsx

@@ -1,15 +1,8 @@
-import FontAwesome from '@expo/vector-icons/FontAwesome';
-import { StyleSheet } from 'react-native';
+import FontAwesome from "@expo/vector-icons/FontAwesome";
 
 export const TabBarIcon = (props: {
-  name: React.ComponentProps<typeof FontAwesome>['name'];
+  name: React.ComponentProps<typeof FontAwesome>["name"];
   color: string;
 }) => {
-  return <FontAwesome size={28} style={styles.tabBarIcon} {...props} />;
+  return <FontAwesome size={24} style={{ marginBottom: -3 }} {...props} />;
 };
-
-export const styles = StyleSheet.create({
-  tabBarIcon: {
-    marginBottom: -3,
-  },
-});

package/templates/frontend/native/nativewind/global.css

@@ -5,21 +5,46 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 40%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 84% 4.9%;
     --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 8px;
   }
 
   .dark:root {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 84% 4.9%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 70%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
     --destructive: 0 72% 51%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 94.1%;
   }
 }

package/templates/frontend/native/nativewind/lib/constants.ts

@@ -1,18 +1,18 @@
 export const NAV_THEME = {
   light: {
     background: "hsl(0 0% 100%)",
-    border: "hsl(240 5.9% 90%)",
+    border: "hsl(220 13% 91%)",
     card: "hsl(0 0% 100%)",
     notification: "hsl(0 84.2% 60.2%)",
-    primary: "hsl(240 5.9% 10%)",
-    text: "hsl(240 10% 3.9%)",
+    primary: "hsl(221.2 83.2% 53.3%)",
+    text: "hsl(222.2 84% 4.9%)",
   },
   dark: {
-    background: "hsl(240 10% 3.9%)",
-    border: "hsl(240 3.7% 15.9%)",
-    card: "hsl(240 10% 3.9%)",
+    background: "hsl(222.2 84% 4.9%)",
+    border: "hsl(217.2 32.6% 17.5%)",
+    card: "hsl(222.2 84% 4.9%)",
     notification: "hsl(0 72% 51%)",
-    primary: "hsl(0 0% 98%)",
-    text: "hsl(0 0% 98%)",
+    primary: "hsl(217.2 91.2% 59.8%)",
+    text: "hsl(210 40% 98%)",
   },
 };

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

@@ -16,6 +16,10 @@
     "@react-navigation/native": "^7.0.14",
     "@tanstack/react-form": "^1.0.5",
     "@tanstack/react-query": "^5.69.2",
+    {{#if (includes examples "ai")}}
+    "@stardazed/streams-text-encoding": "^1.0.2",
+    "@ungap/structured-clone": "^1.3.0",
+    {{/if}}
     "expo": "^53.0.4",
     "expo-constants": "~17.1.4",
     "expo-linking": "~7.1.4",

package/templates/frontend/native/nativewind/tailwind.config.js

@@ -11,6 +11,14 @@ module.exports = {
       colors: {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
         primary: {
           DEFAULT: "hsl(var(--primary))",
           foreground: "hsl(var(--primary-foreground))",
@@ -19,9 +27,28 @@ module.exports = {
           DEFAULT: "hsl(var(--secondary))",
           foreground: "hsl(var(--secondary-foreground))",
         },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
         destructive: {
           DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
         },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        radius: "var(--radius)",
+      },
+      borderRadius: {
+        xl: "calc(var(--radius) + 4px)",
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
       },
       borderWidth: {
         hairline: hairlineWidth(),

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

@@ -10,23 +10,28 @@ export default function TabLayout() {
     <Tabs
       screenOptions={{
         headerShown: false,
+        tabBarActiveTintColor: theme.colors.primary,
+        tabBarInactiveTintColor: theme.colors.mutedForeground,
         tabBarStyle: {
           backgroundColor: theme.colors.background,
+          borderTopColor: theme.colors.border,
         },
       }}
     >
       <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/unistyles/app/(drawer)/(tabs)/index.tsx

@@ -1,29 +1,37 @@
-import { Stack } from "expo-router";
-import { StyleSheet } from "react-native-unistyles";
 import { Container } from "@/components/container";
-import { Text, View } from "react-native";
+import { ScrollView, Text, View } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
 
 export default function Home() {
   return (
-    <>
-      <Stack.Screen options={{ title: "Tab One" }} />
-      <Container>
-        <View style={styles.container}>
-          <Text style={styles.text}>Tab One</Text>
+    <Container>
+      <ScrollView contentContainerStyle={styles.container}>
+        <View style={styles.headerSection}>
+          <Text style={styles.title}>Tab One</Text>
+          <Text style={styles.subtitle}>
+            Explore the first section of your app
+          </Text>
         </View>
-      </Container>
-    </>
+      </ScrollView>
+    </Container>
   );
 }
 
 const styles = StyleSheet.create((theme) => ({
-  text: {
-    color: theme.colors.typography,
-  },
   container: {
-    flex: 1,
-    paddingBottom: 100,
-    justifyContent: "center",
-    alignItems: "center",
+    padding: theme.spacing.lg,
+  },
+  headerSection: {
+    paddingVertical: theme.spacing.xl,
+  },
+  title: {
+    fontSize: theme.fontSize["3xl"],
+    fontWeight: "bold",
+    color: theme.colors.foreground,
+    marginBottom: theme.spacing.sm,
+  },
+  subtitle: {
+    fontSize: theme.fontSize.lg,
+    color: theme.colors.mutedForeground,
   },
 }));

package/templates/frontend/native/unistyles/app/(drawer)/(tabs)/two.tsx

@@ -1,29 +1,37 @@
-import { Stack } from "expo-router";
-import { StyleSheet } from "react-native-unistyles";
 import { Container } from "@/components/container";
-import { Text, View } from "react-native";
+import { ScrollView, Text, View } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
 
-export default function Home() {
+export default function TabTwo() {
   return (
-    <>
-      <Stack.Screen options={{ title: "Tab Two" }} />
-      <Container>
-        <View style={styles.container}>
-          <Text style={styles.text}>Tab Two</Text>
+    <Container>
+      <ScrollView contentContainerStyle={styles.container}>
+        <View style={styles.headerSection}>
+          <Text style={styles.title}>Tab Two</Text>
+          <Text style={styles.subtitle}>
+            Discover more features and content
+          </Text>
         </View>
-      </Container>
-    </>
+      </ScrollView>
+    </Container>
   );
 }
 
 const styles = StyleSheet.create((theme) => ({
-  text: {
-    color: theme.colors.typography,
-  },
   container: {
-    flex: 1,
-    paddingBottom: 100,
-    justifyContent: "center",
-    alignItems: "center",
+    padding: theme.spacing.lg,
+  },
+  headerSection: {
+    paddingVertical: theme.spacing.xl,
+  },
+  title: {
+    fontSize: theme.fontSize["3xl"],
+    fontWeight: "bold",
+    color: theme.colors.foreground,
+    marginBottom: theme.spacing.sm,
+  },
+  subtitle: {
+    fontSize: theme.fontSize.lg,
+    color: theme.colors.mutedForeground,
   },
 }));

package/templates/frontend/native/unistyles/app/(drawer)/{_layout.tsx → _layout.tsx.hbs}

@@ -10,26 +10,26 @@ const DrawerLayout = () => {
 
   return (
     <Drawer
-      screenOptions={{
+      screenOptions=\{{
         headerStyle: {
           backgroundColor: theme.colors.background,
         },
         headerTitleStyle: {
-          color: theme.colors.typography,
+          color: theme.colors.foreground,
         },
-        headerTintColor: theme.colors.typography,
+        headerTintColor: theme.colors.foreground,
         drawerStyle: {
           backgroundColor: theme.colors.background,
         },
         drawerLabelStyle: {
-          color: theme.colors.typography,
+          color: theme.colors.foreground,
         },
-        drawerInactiveTintColor: theme.colors.typography,
+        drawerInactiveTintColor: theme.colors.mutedForeground,
       }}
     >
       <Drawer.Screen
         name="index"
-        options={{
+        options=\{{
           headerTitle: "Home",
           drawerLabel: "Home",
           drawerIcon: ({ size, color }) => (
@@ -39,7 +39,7 @@ const DrawerLayout = () => {
       />
       <Drawer.Screen
         name="(tabs)"
-        options={{
+        options=\{{
           headerTitle: "Tabs",
           drawerLabel: "Tabs",
           drawerIcon: ({ size, color }) => (
@@ -52,6 +52,34 @@ const DrawerLayout = () => {
           ),
         }}
       />
+      {{#if (includes examples "todo")}}
+      <Drawer.Screen
+        name="todos"
+        options=\{{
+          headerTitle: "Todos",
+          drawerLabel: "Todos",
+          drawerIcon: ({ size, color }) => (
+            <Ionicons name="checkbox-outline" size={size} color={color} />
+          ),
+        }}
+      />
+      {{/if}}
+      {{#if (includes examples "ai")}}
+      <Drawer.Screen
+        name="ai"
+        options=\{{
+          headerTitle: "AI",
+          drawerLabel: "AI",
+          drawerIcon: ({ size, color }) => (
+            <Ionicons
+              name="chatbubble-ellipses-outline"
+              size={size}
+              color={color}
+            />
+          ),
+        }}
+      />
+      {{/if}}
     </Drawer>
   );
 };