chore: bump expo to v54, tailwind to v4 (#1413)

Co-authored-by: Julius Marminge <julius0216@outlook.com>
Co-authored-by: Vanja Popovic <VaniaPopovic@users.noreply.github.com>
Co-authored-by: Vanja Popovic <vaniapopovic@icloud.com>

Author: juliusmarminge

.vscode/settings.json

@@ -14,12 +14,13 @@
     { "pattern": "packages/*/" },
     { "pattern": "tooling/*/" }
   ],
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
   "prettier.ignorePath": ".gitignore",
   "tailwindCSS.classFunctions": ["cva", "cx", "cn"],
-  "tailwindCSS.experimental.configFile": "./tooling/tailwind/web.ts",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "typescript.preferences.autoImportFileExcludePatterns": [
-    "zod/dist/types/index.d.ts", // Force auto-imports to v4
     "next/router.d.ts",
     "next/dist/client/router.d.ts"
   ],

README.md

@@ -37,15 +37,15 @@ It uses [Turborepo](https://turborepo.com) and contains:
   └─ Recommended extensions and settings for VSCode users
 apps
   ├─ expo
-  │   ├─ Expo SDK 53
-  │   ├─ React Native using React 19
+  │   ├─ Expo SDK 54
+  │   ├─ React Native 0.81 using React 19
   │   ├─ Navigation using Expo Router
-  │   ├─ Tailwind using NativeWind
+  │   ├─ Tailwind CSS v4 using NativeWind v5
   │   └─ Typesafe API calls using tRPC
   └─ next.js
       ├─ Next.js 15
       ├─ React 19
-      ├─ Tailwind CSS
+      ├─ Tailwind CSS v4
       └─ E2E Typesafe API Server & Client
 packages
   ├─ api
@@ -62,7 +62,7 @@ tooling
   ├─ prettier
   │   └─ shared prettier configuration
   ├─ tailwind
-  │   └─ shared tailwind configuration
+  │   └─ shared tailwind theme and configuration
   └─ typescript
       └─ shared tsconfig you can extend from
 ```

apps/expo/.prettierignore

@@ -38,6 +38,8 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   experiments: {
     tsconfigPaths: true,
     typedRoutes: true,
+    reactCanary: true,
+    reactCompiler: true,
   },
   plugins: [
     "expo-router",

apps/expo/app.config.ts

@@ -2,26 +2,15 @@
 const path = require("node:path");
 const { getDefaultConfig } = require("expo/metro-config");
 const { FileStore } = require("metro-cache");
-const { withNativeWind } = require("nativewind/metro");
+const { withNativewind } = require("nativewind/metro");
 
-module.exports = withTurborepoManagedCache(
-  withNativeWind(getDefaultConfig(__dirname), {
-    input: "./src/styles.css",
-    configPath: "./tailwind.config.ts",
+const config = getDefaultConfig(__dirname);
+
+config.cacheStores = [
+  new FileStore({
+    root: path.join(__dirname, "node_modules", ".cache", "metro"),
   }),
-);
+];
 
-/**
- * Move the Metro cache to the `.cache/metro` folder.
- * If you have any environment variables, you can configure Turborepo to invalidate it when needed.
- *
- * @see https://turborepo.com/docs/reference/configuration#env
- * @param {import('expo/metro-config').MetroConfig} config
- * @returns {import('expo/metro-config').MetroConfig}
- */
-function withTurborepoManagedCache(config) {
-  config.cacheStores = [
-    new FileStore({ root: path.join(__dirname, ".cache/metro") }),
-  ];
-  return config;
-}
+/** @type {import('expo/metro-config').MetroConfig} */
+module.exports = withNativewind(config);

apps/expo/babel.config.js

@@ -1,3 +1,3 @@
-/// <reference types="nativewind/types" />
+/// <reference types="react-native-css/types" />
 
-// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.
+// NOTE: This file should not be edited and should be committed with your source code. It is generated by react-native-css. If you need to move or disable this file, please see the documentation.

apps/expo/metro.config.js

@@ -14,32 +14,34 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@better-auth/expo": "1.3.8",
-    "@expo/metro-config": "^0.20.14",
-    "@legendapp/list": "^2.0.2",
+    "@better-auth/expo": "1.3.27",
+    "@expo/metro-config": "~54.0.6",
+    "@legendapp/list": "^2.0.11",
     "@tanstack/react-query": "catalog:",
     "@trpc/client": "catalog:",
     "@trpc/server": "catalog:",
     "@trpc/tanstack-react-query": "catalog:",
-    "better-auth": "1.3.8",
-    "expo": "53.0.9",
-    "expo-constants": "17.1.6",
-    "expo-dev-client": "5.1.8",
-    "expo-linking": "7.1.5",
-    "expo-router": "5.0.7",
-    "expo-secure-store": "14.2.3",
-    "expo-splash-screen": "0.30.8",
-    "expo-status-bar": "2.2.3",
-    "expo-system-ui": "~5.0.7",
-    "expo-web-browser": "14.1.6",
-    "nativewind": "~4.1.23",
+    "better-auth": "1.3.27",
+    "expo": "~54.0.13",
+    "expo-constants": "~18.0.9",
+    "expo-dev-client": "~6.0.15",
+    "expo-linking": "~8.0.8",
+    "expo-router": "~6.0.12",
+    "expo-secure-store": "~15.0.7",
+    "expo-splash-screen": "~31.0.10",
+    "expo-status-bar": "~3.0.8",
+    "expo-system-ui": "~6.0.7",
+    "expo-web-browser": "~15.0.8",
+    "nativewind": "5.0.0-preview.1",
     "react": "catalog:react19",
     "react-dom": "catalog:react19",
-    "react-native": "0.79.2",
-    "react-native-gesture-handler": "~2.25.0",
-    "react-native-reanimated": "~3.18.0",
-    "react-native-safe-area-context": "~5.4.1",
-    "react-native-screens": "~4.11.1",
+    "react-native": "~0.81.4",
+    "react-native-css": "3.0.0",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.3",
+    "react-native-safe-area-context": "~5.6.1",
+    "react-native-screens": "~4.16.0",
+    "react-native-worklets": "~0.5.1",
     "superjson": "2.2.2"
   },
   "devDependencies": {
@@ -48,10 +50,6 @@
     "@acme/prettier-config": "workspace:*",
     "@acme/tailwind-config": "workspace:*",
     "@acme/tsconfig": "workspace:*",
-    "@babel/core": "^7.28.4",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/runtime": "^7.28.4",
-    "@types/babel__core": "^7.20.5",
     "@types/react": "catalog:react19",
     "eslint": "catalog:",
     "prettier": "catalog:",

apps/expo/nativewind-env.d.ts

@@ -0,0 +1 @@
+module.exports = require("@acme/tailwind-config/postcss-config");

apps/expo/package.json

@@ -1,7 +1,7 @@
+import { useColorScheme } from "react-native";
 import { Stack } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { QueryClientProvider } from "@tanstack/react-query";
-import { useColorScheme } from "nativewind";
 
 import { queryClient } from "~/utils/api";
 
@@ -10,8 +10,7 @@ import "../styles.css";
 // This is the main layout of the app
 // It wraps your pages with the providers they need
 export default function RootLayout() {
-  const { colorScheme } = useColorScheme();
-
+  const colorScheme = useColorScheme();
   return (
     <QueryClientProvider client={queryClient}>
       {/*
@@ -21,7 +20,7 @@ export default function RootLayout() {
       <Stack
         screenOptions={{
           headerStyle: {
-            backgroundColor: "#f472b6",
+            backgroundColor: "#c03484",
           },
           contentStyle: {
             backgroundColor: colorScheme == "dark" ? "#09090B" : "#FFFFFF",