feat(cli): upgrade to expo 54

apps/cli/templates/auth/better-auth/native/native-base/lib/auth-client.ts.hbs

@@ -1,5 +1,5 @@
-import { createAuthClient } from "better-auth/react";
 import { expoClient } from "@better-auth/expo/client";
+import { createAuthClient } from "better-auth/react";
 import * as SecureStore from "expo-secure-store";
 
 export const authClient = createAuthClient({

apps/cli/templates/backend/server/next/package.json.hbs

@@ -9,8 +9,8 @@
   },
   "dependencies": {
     "next": "15.5.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "dotenv": "^17.2.1"
   },
 {{#if (eq dbSetup 'supabase')}}
@@ -20,7 +20,7 @@
 {{/if}}
   "devDependencies": {
     "@types/node": "^20",
-    "@types/react": "^19",
+    "@types/react": "~19.1.10",
     "zod": "^4.0.13",
     "typescript": "^5"
   }

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

@@ -7,7 +7,7 @@ export default function TabLayout() {
 
   return (
     <Tabs
-      screenOptions={{
+      screenOptions=\{{
         headerShown: false,
         tabBarActiveTintColor: isDarkColorScheme
           ? "hsl(217.2 91.2% 59.8%)"
@@ -27,14 +27,14 @@ export default function TabLayout() {
     >
       <Tabs.Screen
         name="index"
-        options={{
+        options=\{{
           title: "Home",
           tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
         }}
       />
       <Tabs.Screen
         name="two"
-        options={{
+        options=\{{
           title: "Explore",
           tabBarIcon: ({ color }) => (
             <TabBarIcon name="compass" color={color} />

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

@@ -5,7 +5,7 @@ import { Text, View } from "react-native";
 export default function NotFoundScreen() {
   return (
     <>
-      <Stack.Screen options={{ title: "Oops!" }} />
+      <Stack.Screen options=\{{ title: "Oops!" }} />
       <Container>
         <View className="flex-1 justify-center items-center p-6">
           <View className="items-center">

apps/cli/templates/frontend/native/nativewind/babel.config.js.hbs

@@ -0,0 +1,14 @@
+module.exports = (api) => {
+	api.cache(true);
+	const plugins = [];
+
+	plugins.push("react-native-worklets/plugin");
+
+	return {
+		presets: [
+			["babel-preset-expo", { jsxImportSource: "nativewind" }],
+			"nativewind/babel",
+		],
+		plugins,
+	};
+};

apps/cli/templates/frontend/native/nativewind/components/container.tsx → apps/cli/templates/frontend/native/nativewind/components/container.tsx.hbs

@@ -1,5 +1,5 @@
 import React from "react";
-import { SafeAreaView } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 export const Container = ({ children }: { children: React.ReactNode }) => {
   return (

apps/cli/templates/frontend/native/nativewind/components/header-button.tsx → apps/cli/templates/frontend/native/nativewind/components/header-button.tsx.hbs

@@ -16,7 +16,7 @@ export const HeaderButton = forwardRef<
           name="info-circle"
           size={20}
           className="text-secondary-foreground"
-          style={{
+          style=\{{
             opacity: pressed ? 0.7 : 1,
           }}
         />

apps/cli/templates/frontend/native/nativewind/components/tabbar-icon.tsx → apps/cli/templates/frontend/native/nativewind/components/tabbar-icon.tsx.hbs

@@ -4,5 +4,5 @@ export const TabBarIcon = (props: {
   name: React.ComponentProps<typeof FontAwesome>["name"];
   color: string;
 }) => {
-  return <FontAwesome size={24} style={{ marginBottom: -3 }} {...props} />;
+  return <FontAwesome size={24} style=\{{ marginBottom: -3 }} {...props} />;
 };

apps/cli/templates/frontend/native/nativewind/package.json.hbs

@@ -10,39 +10,40 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "@expo/vector-icons": "^14.0.4",
+    "@expo/vector-icons": "^15.0.2",
     "@react-navigation/bottom-tabs": "^7.2.0",
     "@react-navigation/drawer": "^7.1.1",
     "@react-navigation/native": "^7.0.14",
     "@tanstack/react-form": "^1.0.5",
-    "@tanstack/react-query": "^5.69.2",
+    "@tanstack/react-query": "^5.85.5",
     {{#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-crypto": "~14.1.5",
-    "expo-linking": "~7.1.4",
-    "expo-navigation-bar": "~4.2.3",
-    "expo-router": "~5.0.3",
-    "expo-secure-store": "~14.2.3",
-    "expo-status-bar": "~2.2.3",
-    "expo-system-ui": "~5.0.6",
-    "expo-web-browser": "~14.1.6",
+    "expo": "^54.0.0",
+    "expo-constants": "~18.0.8",
+    "expo-crypto": "~15.0.6",
+    "expo-linking": "~8.0.7",
+    "expo-navigation-bar": "~5.0.8",
+    "expo-router": "~6.0.0",
+    "expo-secure-store": "~15.0.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.0.0",
-    "react-dom": "19.0.0",
-    "react-native": "0.79.1",
-    "react-native-gesture-handler": "~2.24.0",
-    "react-native-reanimated": "~3.17.4",
-    "react-native-safe-area-context": "5.3.0",
-    "react-native-screens": "~4.10.0",
-    "react-native-web": "^0.20.0"
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.4",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.0",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-web": "^0.21.0",
+    "react-native-worklets": "^0.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.26.10",
-    "@types/react": "~19.0.10",
+    "@types/react": "~19.1.10",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.8.2"
   },

apps/cli/templates/frontend/native/nativewind/tailwind.config.js.hbs

@@ -0,0 +1,59 @@
+import { hairlineWidth } from "nativewind/theme";
+
+/** @type {import('tailwindcss').Config} */
+export const darkMode = "class";
+export const content = [
+	"./app/**/*.{js,ts,tsx}",
+	"./components/**/*.{js,ts,tsx}",
+];
+export const presets = [require("nativewind/preset")];
+export const theme = {
+	extend: {
+		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))",
+			},
+			secondary: {
+				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(),
+		},
+	},
+};
+export const plugins = [];

apps/cli/templates/frontend/native/unistyles/app/(drawer)/(tabs)/_layout.tsx → apps/cli/templates/frontend/native/unistyles/app/(drawer)/(tabs)/_layout.tsx.hbs

@@ -8,7 +8,7 @@ export default function TabLayout() {
 
   return (
     <Tabs
-      screenOptions={{
+      screenOptions=\{{
         headerShown: false,
         tabBarActiveTintColor: theme.colors.primary,
         tabBarInactiveTintColor: theme.colors.mutedForeground,
@@ -20,14 +20,14 @@ export default function TabLayout() {
     >
       <Tabs.Screen
         name="index"
-        options={{
+        options=\{{
           title: "Home",
           tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
         }}
       />
       <Tabs.Screen
         name="two"
-        options={{
+        options=\{{
           title: "Explore",
           tabBarIcon: ({ color }) => (
             <TabBarIcon name="compass" color={color} />