create-better-t-stack 3.13.2 → 3.14.1

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

@@ -1,65 +0,0 @@
-import { Link, Stack } from "expo-router";
-import { Text, View } from "react-native";
-import { StyleSheet } from "react-native-unistyles";
-import { Container } from "@/components/container";
-
-export default function NotFoundScreen() {
-  return (
-    <>
-      <Stack.Screen options=\{{ title: "Oops!" }} />
-      <Container>
-        <View style={styles.container}>
-          <View style={styles.content}>
-            <Text style={styles.emoji}>🤔</Text>
-            <Text style={styles.title}>Page Not Found</Text>
-            <Text style={styles.description}>
-              Sorry, the page you're looking for doesn't exist.
-            </Text>
-            <Link href="/" style={styles.button}>
-              <Text style={styles.buttonText}>Go to Home</Text>
-            </Link>
-          </View>
-        </View>
-      </Container>
-    </>
-  );
-}
-
-const styles = StyleSheet.create((theme) => ({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    padding: theme.spacing.lg,
-  },
-  content: {
-    alignItems: "center",
-  },
-  emoji: {
-    fontSize: 64,
-    marginBottom: theme.spacing.md,
-  },
-  title: {
-    fontSize: theme.fontSize["2xl"],
-    fontWeight: "bold",
-    color: theme.colors.foreground,
-    marginBottom: theme.spacing.sm,
-    textAlign: "center",
-  },
-  description: {
-    color: theme.colors.mutedForeground,
-    textAlign: "center",
-    marginBottom: theme.spacing.xl,
-    maxWidth: 280,
-  },
-  button: {
-    backgroundColor: `${theme.colors.primary}1A`, // 10% opacity
-    paddingHorizontal: theme.spacing.lg,
-    paddingVertical: theme.spacing.sm + 4,
-    borderRadius: theme.borderRadius.lg,
-  },
-  buttonText: {
-    color: theme.colors.primary,
-    fontWeight: "500",
-  },
-}));

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

@@ -1,169 +0,0 @@
-{{#if (includes examples "ai")}}
-import "@/polyfills";
-{{/if}}
-{{#if (eq api "trpc")}}
-import { queryClient } from "@/utils/trpc";
-{{/if}}
-{{#if (eq api "orpc")}}
-import { queryClient } from "@/utils/orpc";
-{{/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";
-import { env } from "@{{projectName}}/env/native";
-{{else}}
-import { ConvexProvider, ConvexReactClient } from "convex/react";
-import { env } from "@{{projectName}}/env/native";
-{{/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 { GestureHandlerRootView } from "react-native-gesture-handler";
-import { useUnistyles } from "react-native-unistyles";
-import { StatusBar } from "expo-status-bar";
-
-export const unstable_settings = {
-  initialRouteName: "(drawer)",
-};
-
-{{#if (eq backend "convex")}}
-const convex = new ConvexReactClient(env.EXPO_PUBLIC_CONVEX_URL, {
-  unsavedChangesWarning: false,
-});
-{{/if}}
-
-export default function RootLayout() {
-  const { theme } = useUnistyles();
-
-  return (
-    {{#if (eq backend "convex")}}
-    {{#if (eq auth "clerk")}}
-    <ClerkProvider
-      tokenCache={tokenCache}
-      publishableKey={env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}
-    >
-      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
-        <GestureHandlerRootView style=\{{ flex: 1 }}>
-          <Stack
-            screenOptions=\{{
-              headerStyle: {
-                backgroundColor: theme.colors.background,
-              },
-              headerTitleStyle: {
-                color: theme.colors.foreground,
-              },
-              headerTintColor: theme.colors.foreground,
-            }}
-          >
-            <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>
-      </ConvexProviderWithClerk>
-    </ClerkProvider>
-    {{else if (eq auth "better-auth")}}
-    <ConvexBetterAuthProvider client={convex} authClient={authClient}>
-      <GestureHandlerRootView style=\{{ flex: 1 }}>
-        <Stack
-          screenOptions=\{{
-            headerStyle: {
-              backgroundColor: theme.colors.background,
-            },
-            headerTitleStyle: {
-              color: theme.colors.foreground,
-            },
-            headerTintColor: theme.colors.foreground,
-          }}
-        >
-          <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
-          <Stack.Screen
-            name="modal"
-            options=\{{ title: "Modal", presentation: "modal" }}
-          />
-        </Stack>
-      </GestureHandlerRootView>
-    </ConvexBetterAuthProvider>
-    {{else}}
-    <ConvexProvider client={convex}>
-      <GestureHandlerRootView style=\{{ flex: 1 }}>
-        <Stack
-          screenOptions=\{{
-            headerStyle: {
-              backgroundColor: theme.colors.background,
-            },
-            headerTitleStyle: {
-              color: theme.colors.foreground,
-            },
-            headerTintColor: theme.colors.foreground,
-          }}
-        >
-          <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
-          <Stack.Screen
-            name="modal"
-            options=\{{ title: "Modal", presentation: "modal" }}
-          />
-        </Stack>
-      </GestureHandlerRootView>
-    </ConvexProvider>
-    {{/if}}
-    {{else}}
-      {{#unless (eq api "none")}}
-    <QueryClientProvider client={queryClient}>
-      <GestureHandlerRootView style=\{{ flex: 1 }}>
-        <Stack
-          screenOptions=\{{
-            headerStyle: {
-              backgroundColor: theme.colors.background,
-            },
-            headerTitleStyle: {
-              color: theme.colors.foreground,
-            },
-            headerTintColor: theme.colors.foreground,
-          }}
-        >
-          <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
-          <Stack.Screen
-            name="modal"
-            options=\{{ title: "Modal", presentation: "modal" }}
-          />
-        </Stack>
-      </GestureHandlerRootView>
-    </QueryClientProvider>
-      {{else}}
-      <GestureHandlerRootView style=\{{ flex: 1 }}>
-        <Stack
-          screenOptions=\{{
-            headerStyle: {
-              backgroundColor: theme.colors.background,
-            },
-            headerTitleStyle: {
-              color: theme.colors.foreground,
-            },
-            headerTintColor: theme.colors.foreground,
-          }}
-        >
-          <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
-          <Stack.Screen
-            name="modal"
-            options=\{{ title: "Modal", presentation: "modal" }}
-          />
-        </Stack>
-      </GestureHandlerRootView>
-      {{/unless}}
-    {{/if}}
-  );
-}

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

@@ -1,33 +0,0 @@
-import { Container } from "@/components/container";
-import { Text, View } from "react-native";
-import { StyleSheet } from "react-native-unistyles";
-
-export default function Modal() {
-  return (
-    <Container>
-      <View style={styles.container}>
-        <View style={styles.header}>
-          <Text style={styles.title}>Modal</Text>
-        </View>
-      </View>
-    </Container>
-  );
-}
-
-const styles = StyleSheet.create((theme) => ({
-  container: {
-    flex: 1,
-    padding: theme.spacing.lg,
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: theme.spacing.xl,
-  },
-  title: {
-    fontSize: theme.fontSize["2xl"],
-    fontWeight: "bold",
-    color: theme.colors.foreground,
-  },
-}));

package/templates/frontend/native/unistyles/app.json.hbs

@@ -1,49 +0,0 @@
-{
-  "expo": {
-    "name": "{{projectName}}",
-    "slug": "{{projectName}}",
-    "version": "1.0.0",
-    "orientation": "portrait",
-    "icon": "./assets/images/icon.png",
-    "scheme": "mybettertapp",
-    "userInterfaceStyle": "automatic",
-    "newArchEnabled": true,
-    "ios": {
-      "supportsTablet": true
-    },
-    "android": {
-      "adaptiveIcon": {
-        "backgroundColor": "#E6F4FE",
-        "foregroundImage": "./assets/images/android-icon-foreground.png",
-        "backgroundImage": "./assets/images/android-icon-background.png",
-        "monochromeImage": "./assets/images/android-icon-monochrome.png"
-      },
-      "edgeToEdgeEnabled": true,
-      "predictiveBackGestureEnabled": false,
-      "package": "com.anonymous.mybettertapp"
-    },
-    "web": {
-      "output": "static",
-      "favicon": "./assets/images/favicon.png"
-    },
-    "plugins": [
-      "expo-router",
-      [
-        "expo-splash-screen",
-        {
-          "image": "./assets/images/splash-icon.png",
-          "imageWidth": 200,
-          "resizeMode": "contain",
-          "backgroundColor": "#ffffff",
-          "dark": {
-            "backgroundColor": "#000000"
-          }
-        }
-      ]
-    ],
-    "experiments": {
-      "typedRoutes": true,
-      "reactCompiler": true
-    }
-  }
-}

package/templates/frontend/native/unistyles/babel.config.js.hbs

@@ -1,21 +0,0 @@
-module.exports = (api) => {
-	api.cache(true);
-	const plugins = [];
-
-	plugins.push([
-		"react-native-unistyles/plugin",
-		{
-			root: "src",
-			autoProcessRoot: "app",
-			autoProcessImports: ["@/components"],
-		},
-	]);
-
-	plugins.push("react-native-worklets/plugin");
-
-	return {
-		presets: ["babel-preset-expo"],
-
-		plugins,
-	};
-};

package/templates/frontend/native/unistyles/breakpoints.ts.hbs

@@ -1,9 +0,0 @@
-export const breakpoints = {
-  xs: 0,
-  sm: 576,
-  md: 768,
-  lg: 992,
-  xl: 1200,
-  superLarge: 2000,
-  tvLike: 4000,
-} as const;

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

@@ -1,15 +0,0 @@
-import React from "react";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { StyleSheet } from "react-native-unistyles";
-
-export const Container = ({ children }: { children: React.ReactNode }) => {
-  return <SafeAreaView style={styles.container}>{children}</SafeAreaView>;
-};
-
-const styles = StyleSheet.create((theme, rt) => ({
-  container: {
-    flex: 1,
-    backgroundColor: theme.colors.background,
-    paddingBottom: rt.insets.bottom,
-  },
-}));

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

@@ -1,36 +0,0 @@
-import FontAwesome from "@expo/vector-icons/FontAwesome";
-import { forwardRef } from "react";
-import { Pressable } from "react-native";
-import { StyleSheet } from "react-native-unistyles";
-
-export const HeaderButton = forwardRef<
-  typeof Pressable,
-  { onPress?: () => void }
->(({ onPress }, ref) => {
-  return (
-    <Pressable onPress={onPress} style={styles.button}>
-      {({ pressed }) => (
-        <FontAwesome
-          name="info-circle"
-          size={20}
-          color={styles.icon.color}
-          style=\{{
-            opacity: pressed ? 0.7 : 1,
-          }}
-        />
-      )}
-    </Pressable>
-  );
-});
-
-const styles = StyleSheet.create((theme) => ({
-  button: {
-    padding: theme.spacing.sm,
-    marginRight: theme.spacing.sm,
-    borderRadius: theme.borderRadius.lg,
-    backgroundColor: `${theme.colors.secondary}80`, // 50% opacity
-  },
-  icon: {
-    color: theme.colors.secondaryForeground,
-  },
-}));

package/templates/frontend/native/unistyles/components/tabbar-icon.tsx.hbs

@@ -1,8 +0,0 @@
-import FontAwesome from "@expo/vector-icons/FontAwesome";
-
-export const TabBarIcon = (props: {
-  name: React.ComponentProps<typeof FontAwesome>["name"];
-  color: string;
-}) => {
-  return <FontAwesome size={24} style=\{{ marginBottom: -3 }} {...props} />;
-};

package/templates/frontend/native/unistyles/index.js.hbs

@@ -1,2 +0,0 @@
-import 'expo-router/entry';
-import './unistyles';

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

@@ -1,5 +0,0 @@
-const { getDefaultConfig } = require("expo/metro-config");
-
-const config = getDefaultConfig(__dirname);
-
-module.exports = config;

package/templates/frontend/native/unistyles/package.json.hbs

@@ -1,51 +0,0 @@
-{
-  "name": "native",
-  "version": "1.0.0",
-  "private": true,
-  "main": "index.js",
-  "scripts": {
-    "dev": "expo start --clear",
-    "android": "expo run:android",
-    "ios": "expo run:ios",
-    "web": "expo start --web"
-  },
-  "dependencies": {
-    "@expo/vector-icons": "^15.0.2",
-    "@react-navigation/bottom-tabs": "^7.3.10",
-    "@react-navigation/drawer": "^7.3.9",
-    "@react-navigation/native": "^7.1.6",
-    {{#if (includes examples "ai")}}
-    "@stardazed/streams-text-encoding": "^1.0.2",
-    "@ungap/structured-clone": "^1.3.0",
-    {{/if}}
-    "@tanstack/react-form": "^1.0.5",
-    "expo": "^54.0.0",
-    "expo-constants": "~18.0.8",
-    "expo-crypto": "~15.0.6",
-    "expo-linking": "~8.0.7",
-    "expo-router": "~6.0.0",
-    "expo-secure-store": "~15.0.6",
-    "expo-splash-screen": "~31.0.8",
-		"expo-status-bar": "^3.0.7",
-    "expo-system-ui": "~6.0.7",
-		"expo-dev-client": "~6.0.11",
-    "expo-web-browser": "~15.0.6",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "react-native": "0.81.4",
-		"react-native-edge-to-edge": "^1.7.0",
-    "react-native-gesture-handler": "~2.28.0",
-		"react-native-nitro-modules": "^0.29.4",
-    "react-native-reanimated": "~4.1.0",
-    "react-native-safe-area-context": "~5.6.0",
-    "react-native-screens": "~4.16.0",
-		"react-native-unistyles": "^3.0.12",
-    "react-native-web": "^0.21.0",
-    "react-native-worklets": "^0.5.1"
-  },
-  "devDependencies": {
-    "ajv": "^8.17.1",
-    "@babel/core": "^7.28.0",
-    "@types/react": "~19.1.10"
-  }
-}

package/templates/frontend/native/unistyles/theme.ts.hbs

@@ -1,98 +0,0 @@
-const sharedColors = {
-  success: "#22C55E",
-  destructive: "#EF4444",
-  warning: "#F59E0B",
-  info: "#3B82F6",
-} as const;
-
-export const lightTheme = {
-  colors: {
-    ...sharedColors,
-    typography: "hsl(0 0% 0%)",
-    background: "hsl(0 0% 100%)",
-    foreground: "hsl(0 0% 0%)",
-    card: "hsl(0 0% 98%)",
-    cardForeground: "hsl(0 0% 0%)",
-    primary: "hsl(0 0% 10%)",
-    primaryForeground: "hsl(0 0% 100%)",
-    secondary: "hsl(0 0% 95%)",
-    secondaryForeground: "hsl(0 0% 0%)",
-    muted: "hsl(0 0% 96%)",
-    mutedForeground: "hsl(0 0% 45%)",
-    accent: "hsl(0 0% 96%)",
-    accentForeground: "hsl(0 0% 0%)",
-    border: "hsl(0 0% 90%)",
-    input: "hsl(0 0% 90%)",
-    ring: "hsl(0 0% 20%)",
-  },
-  spacing: {
-    xs: 4,
-    sm: 8,
-    md: 16,
-    lg: 24,
-    xl: 32,
-    xxl: 48,
-  },
-  borderRadius: {
-    sm: 6,
-    md: 8,
-    lg: 12,
-    xl: 16,
-  },
-  fontSize: {
-    xs: 12,
-    sm: 14,
-    base: 16,
-    lg: 18,
-    xl: 20,
-    "2xl": 24,
-    "3xl": 30,
-    "4xl": 36,
-  },
-} as const;
-
-export const darkTheme = {
-  colors: {
-    ...sharedColors,
-    typography: "hsl(0 0% 100%)",
-    background: "hsl(0 0% 0%)",
-    foreground: "hsl(0 0% 100%)",
-    card: "hsl(0 0% 2%)",
-    cardForeground: "hsl(0 0% 100%)",
-    primary: "hsl(0 0% 90%)",
-    primaryForeground: "hsl(0 0% 0%)",
-    secondary: "hsl(0 0% 10%)",
-    secondaryForeground: "hsl(0 0% 100%)",
-    muted: "hsl(0 0% 8%)",
-    mutedForeground: "hsl(0 0% 65%)",
-    accent: "hsl(0 0% 8%)",
-    accentForeground: "hsl(0 0% 100%)",
-    border: "hsl(0 0% 15%)",
-    input: "hsl(0 0% 15%)",
-    ring: "hsl(0 0% 80%)",
-  },
-  spacing: {
-    xs: 4,
-    sm: 8,
-    md: 16,
-    lg: 24,
-    xl: 32,
-    xxl: 48,
-  },
-  borderRadius: {
-    sm: 6,
-    md: 8,
-    lg: 12,
-    xl: 16,
-  },
-  fontSize: {
-    xs: 12,
-    sm: 14,
-    base: 16,
-    lg: 18,
-    xl: 20,
-    "2xl": 24,
-    "3xl": 30,
-    "4xl": 36,
-  },
-} as const;

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

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

package/templates/frontend/native/unistyles/unistyles.ts.hbs

@@ -1,27 +0,0 @@
-import { StyleSheet } from "react-native-unistyles";
-
-import { breakpoints } from "./breakpoints";
-import { darkTheme, lightTheme } from "./theme";
-
-type AppBreakpoints = typeof breakpoints;
-
-type AppThemes = {
-  light: typeof lightTheme;
-  dark: typeof darkTheme;
-};
-
-declare module "react-native-unistyles" {
-  export interface UnistylesBreakpoints extends AppBreakpoints {}
-  export interface UnistylesThemes extends AppThemes {}
-}
-
-StyleSheet.configure({
-  breakpoints,
-  themes: {
-    light: lightTheme,
-    dark: darkTheme,
-  },
-  settings: {
-    adaptiveThemes: true,
-  },
-});

package/templates/frontend/native/uniwind/_gitignore

@@ -1,21 +0,0 @@
-node_modules/
-.expo/
-dist/
-npm-debug.*
-*.jks
-*.p8
-*.p12
-*.key
-*.mobileprovision
-*.orig.*
-web-build/
-
-# 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
-

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

@@ -1,46 +0,0 @@
-import { Tabs } from "expo-router";
-import { Ionicons } from "@expo/vector-icons";
-import { useThemeColor } from "heroui-native";
-
-export default function TabLayout() {
-	const themeColorForeground = useThemeColor("foreground");
-	const themeColorBackground = useThemeColor("background");
-
-	return (
-		<Tabs
-			screenOptions=\{{
-				headerShown: false,
-				headerStyle: {
-					backgroundColor: themeColorBackground,
-				},
-				headerTintColor: themeColorForeground,
-				headerTitleStyle: {
-					color: themeColorForeground,
-					fontWeight: "600",
-				},
-				tabBarStyle: {
-					backgroundColor: themeColorBackground,
-				},
-			}}
-		>
-			<Tabs.Screen
-				name="index"
-				options=\{{
-					title: "Home",
-					tabBarIcon: ({ color, size }: { color: string; size: number }) => (
-						<Ionicons name="home" size={size} color={color} />
-					),
-				}}
-			/>
-			<Tabs.Screen
-				name="two"
-				options=\{{
-					title: "Explore",
-					tabBarIcon: ({ color, size }: { color: string; size: number }) => (
-						<Ionicons name="compass" size={size} color={color} />
-					),
-				}}
-			/>
-		</Tabs>
-	);
-}