Next

.changeset/all-cars-matter.md

@@ -0,0 +1,6 @@
+---
+'create-expo-stack': patch
+'rn-new': patch
+---
+
+update tests to include nativewind + expo router

.changeset/clean-dingos-film.md

@@ -0,0 +1,6 @@
+---
+'create-expo-stack': minor
+'rn-new': minor
+---
+
+add support for nativewind v5

.changeset/nasty-symbols-shop.md

@@ -0,0 +1,6 @@
+---
+'create-expo-stack': minor
+'rn-new': minor
+---
+
+add support for nativewind v5 and expo router

.changeset/shaky-wombats-stand.md

@@ -0,0 +1,6 @@
+---
+'create-expo-stack': patch
+'rn-new': patch
+---
+
+temporarily disable nativewindui options and expo router options, update tests accordingly

.changeset/spicy-steaks-stand.md

@@ -0,0 +1,6 @@
+---
+'create-expo-stack': patch
+'rn-new': patch
+---
+
+add back expo router as an option for the cli

README.md

@@ -69,7 +69,9 @@ Each project is generated based on the results of the CLI, on a per-file basis.
 | Expo Status Bar    | Status Bar Library  | v3      | Status bar support                             |
 | Expo System UI     | System UI Library   | v6      | System UI support                              |
 | Expo Web Browser   | Web Browser Library | v15     | Open links in the browser                      |
-| NativeWind         | UI Framework        | v4.1    | Tailwind CSS for React Native                  |
+| NativeWind         | UI Framework        | v5      | Tailwind CSS for React Native                  |
+| Tailwind CSS       | CSS Framework       | v4.1    | Utility-first CSS framework                    |
+| React Native CSS   | CSS Engine          | latest  | CSS support for React Native                   |
 | Unistyles          | UI Framework        | v3      | Superset of StyleSheet                         |
 | Safe Area Context  | Safe Area Library   | v5.6    | Safe area support                              |
 | React Native Web   | Web Support         | v0.21   | React Native for Web                           |

cli/README.md

@@ -59,24 +59,24 @@ Each project is generated based on the results of the CLI, on a per-file basis.
 
 | Library            | Category            | Version | Description                                    |
 | ------------------ | ------------------- | ------- | ---------------------------------------------- |
-| React Native       | Mobile Framework    | v0.79   | The best cross-platform mobile framework       |
-| React              | UI Framework        | v19     | The most popular UI framework in the world     |
-| TypeScript         | Language            | v5      | Static typechecking                            |
-| React Navigation   | Navigation          | v7      | Performant and consistent navigation framework |
-| Expo               | SDK                 | v53     | Allows (optional) Expo modules                 |
-| Expo Font          | Custom Fonts        | v13     | Import custom fonts                            |
-| Expo Linking       | URL Handling        | v7      | Open your app via a URL                        |
-| Expo Router        | Navigation          | v5      | File-based routing in React-Native             |
-| Expo Splash Screen | Splash Screen       | v0.27   | Custom splash screen                           |
-| Expo Status Bar    | Status Bar Library  | v2      | Status bar support                             |
-| Expo System UI     | System UI Library   | v5      | System UI support                              |
-| Expo Web Browser   | Web Browser Library | v14     | Open links in the browser                      |
-| NativeWind         | UI Framework        | v4.1    | Tailwind CSS for React Native                  |
+| React Native       | Mobile Framework    | v0.81   | The best cross-platform mobile framework       |
+| React              | UI Framework        | v19.1   | The most popular UI framework in the world     |
+| TypeScript         | Language            | v5.9    | Static typechecking                            |
+| React Navigation   | Navigation          | v7.1    | Performant and consistent navigation framework |
+| Expo               | SDK                 | v54     | Opionated framework for building RN apps       |
+| Expo Linking       | URL Handling        | v8      | Open your app via a URL                        |
+| Expo Router        | Navigation          | v6      | File-based routing in React-Native             |
+| Expo Status Bar    | Status Bar Library  | v3      | Status bar support                             |
+| Expo System UI     | System UI Library   | v6      | System UI support                              |
+| Expo Web Browser   | Web Browser Library | v15     | Open links in the browser                      |
+| NativeWind         | UI Framework        | v5      | Tailwind CSS for React Native                  |
+| Tailwind CSS       | CSS Framework       | v4.1    | Utility-first CSS framework                    |
+| React Native CSS   | CSS Engine          | latest  | CSS support for React Native                   |
 | Unistyles          | UI Framework        | v3      | Superset of StyleSheet                         |
-| Safe Area Context  | Safe Area Library   | v5      | Safe area support                              |
-| React Native Web   | Web Support         | v0.20   | React Native for Web                           |
-| Firebase           | Backend and Auth    | v10     | Cloud-hosted NoSQL database from Google        |
-| Supabase           | Backend and Auth    | v2      | Open source Firebase alternative               |
+| Safe Area Context  | Safe Area Library   | v5.6    | Safe area support                              |
+| React Native Web   | Web Support         | v0.21   | React Native for Web                           |
+| Firebase           | Backend and Auth    | v10.5   | Cloud-hosted NoSQL database from Google        |
+| Supabase           | Backend and Auth    | v2.38   | Open source Firebase alternative               |
 
 ## Reporting Bugs & Feedback
 

cli/__tests__/__snapshots__/cli-integration.test.ts.snap

@@ -568,11 +568,14 @@ exports[`generates a project with --stylesheet --expo-router --no-install --bun
 exports[`generates a project with --nativewind --bun --overwrite: --nativewind, --bun, --overwrite-package-json 1`] = `
 {
   "dependencies": {
+    "@tailwindcss/postcss": "",
     "expo": "",
     "expo-status-bar": "",
     "nativewind": "",
+    "postcss": "",
     "react": "",
     "react-native": "",
+    "react-native-css": "",
     "react-native-reanimated": "",
     "react-native-safe-area-context": "",
     "react-native-worklets": "",
@@ -591,6 +594,9 @@ exports[`generates a project with --nativewind --bun --overwrite: --nativewind,
   "main": "node_modules/expo/AppEntry.js",
   "name": "myTestProject",
   "private": true,
+  "resolutions": {
+    "lightningcss": "1.30.1",
+  },
   "scripts": {
     "android": "expo start --android",
     "format": "eslint "**/*.{js,jsx,ts,tsx}" --fix && prettier "**/*.{js,jsx,ts,tsx,json}" --write",
@@ -645,28 +651,30 @@ exports[`generates a project with --nativewind --bun --overwrite: --nativewind,
   "./myTestProject/bun.lock",
   "./myTestProject/cesconfig.jsonc",
   "./myTestProject/components",
-  "./myTestProject/components/Container.tsx",
   "./myTestProject/components/EditScreenInfo.tsx",
   "./myTestProject/components/ScreenContent.tsx",
   "./myTestProject/eslint.config.js",
   "./myTestProject/global.css",
   "./myTestProject/metro.config.js",
   "./myTestProject/nativewind-env.d.ts",
   "./myTestProject/package.json",
+  "./myTestProject/postcss.config.mjs",
   "./myTestProject/prettier.config.js",
-  "./myTestProject/tailwind.config.js",
   "./myTestProject/tsconfig.json",
 ]
 `;
 
 exports[`generates a project with --nativewind --no-install --bun --overwrite: --nativewind, --no-install, --bun, --overwrite-package-json 1`] = `
 {
   "dependencies": {
+    "@tailwindcss/postcss": "",
     "expo": "",
     "expo-status-bar": "",
     "nativewind": "",
+    "postcss": "",
     "react": "",
     "react-native": "",
+    "react-native-css": "",
     "react-native-reanimated": "",
     "react-native-safe-area-context": "",
     "react-native-worklets": "",
@@ -685,6 +693,9 @@ exports[`generates a project with --nativewind --no-install --bun --overwrite: -
   "main": "node_modules/expo/AppEntry.js",
   "name": "myTestProject",
   "private": true,
+  "resolutions": {
+    "lightningcss": "1.30.1",
+  },
   "scripts": {
     "android": "expo start --android",
     "format": "eslint "**/*.{js,jsx,ts,tsx}" --fix && prettier "**/*.{js,jsx,ts,tsx,json}" --write",
@@ -738,16 +749,15 @@ exports[`generates a project with --nativewind --no-install --bun --overwrite: -
   "./myTestProject/babel.config.js",
   "./myTestProject/cesconfig.jsonc",
   "./myTestProject/components",
-  "./myTestProject/components/Container.tsx",
   "./myTestProject/components/EditScreenInfo.tsx",
   "./myTestProject/components/ScreenContent.tsx",
   "./myTestProject/eslint.config.js",
   "./myTestProject/global.css",
   "./myTestProject/metro.config.js",
   "./myTestProject/nativewind-env.d.ts",
   "./myTestProject/package.json",
+  "./myTestProject/postcss.config.mjs",
   "./myTestProject/prettier.config.js",
-  "./myTestProject/tailwind.config.js",
   "./myTestProject/tsconfig.json",
 ]
 `;
@@ -757,6 +767,7 @@ exports[`generates a project with --nativewind --expo-router --bun --overwrite:
   "dependencies": {
     "@expo/vector-icons": "",
     "@react-navigation/native": "",
+    "@tailwindcss/postcss": "",
     "expo": "",
     "expo-constants": "",
     "expo-linking": "",
@@ -765,9 +776,11 @@ exports[`generates a project with --nativewind --expo-router --bun --overwrite:
     "expo-system-ui": "",
     "expo-web-browser": "",
     "nativewind": "",
+    "postcss": "",
     "react": "",
     "react-dom": "",
     "react-native": "",
+    "react-native-css": "",
     "react-native-gesture-handler": "",
     "react-native-reanimated": "",
     "react-native-safe-area-context": "",
@@ -789,6 +802,9 @@ exports[`generates a project with --nativewind --expo-router --bun --overwrite:
   "main": "expo-router/entry",
   "name": "myTestProject",
   "private": true,
+  "resolutions": {
+    "lightningcss": "1.30.1",
+  },
   "scripts": {
     "android": "expo start --android",
     "format": "eslint "**/*.{js,jsx,ts,tsx}" --fix && prettier "**/*.{js,jsx,ts,tsx,json}" --write",
@@ -856,7 +872,6 @@ exports[`generates a project with --nativewind --expo-router --bun --overwrite:
   "./myTestProject/cesconfig.jsonc",
   "./myTestProject/components",
   "./myTestProject/components/Button.tsx",
-  "./myTestProject/components/Container.tsx",
   "./myTestProject/components/EditScreenInfo.tsx",
   "./myTestProject/components/ScreenContent.tsx",
   "./myTestProject/eslint.config.js",
@@ -865,8 +880,8 @@ exports[`generates a project with --nativewind --expo-router --bun --overwrite:
   "./myTestProject/metro.config.js",
   "./myTestProject/nativewind-env.d.ts",
   "./myTestProject/package.json",
+  "./myTestProject/postcss.config.mjs",
   "./myTestProject/prettier.config.js",
-  "./myTestProject/tailwind.config.js",
   "./myTestProject/tsconfig.json",
 ]
 `;
@@ -876,6 +891,7 @@ exports[`generates a project with --nativewind --expo-router --no-install --bun
   "dependencies": {
     "@expo/vector-icons": "",
     "@react-navigation/native": "",
+    "@tailwindcss/postcss": "",
     "expo": "",
     "expo-constants": "",
     "expo-linking": "",
@@ -884,9 +900,11 @@ exports[`generates a project with --nativewind --expo-router --no-install --bun
     "expo-system-ui": "",
     "expo-web-browser": "",
     "nativewind": "",
+    "postcss": "",
     "react": "",
     "react-dom": "",
     "react-native": "",
+    "react-native-css": "",
     "react-native-gesture-handler": "",
     "react-native-reanimated": "",
     "react-native-safe-area-context": "",
@@ -908,6 +926,9 @@ exports[`generates a project with --nativewind --expo-router --no-install --bun
   "main": "expo-router/entry",
   "name": "myTestProject",
   "private": true,
+  "resolutions": {
+    "lightningcss": "1.30.1",
+  },
   "scripts": {
     "android": "expo start --android",
     "format": "eslint "**/*.{js,jsx,ts,tsx}" --fix && prettier "**/*.{js,jsx,ts,tsx,json}" --write",
@@ -974,7 +995,6 @@ exports[`generates a project with --nativewind --expo-router --no-install --bun
   "./myTestProject/cesconfig.jsonc",
   "./myTestProject/components",
   "./myTestProject/components/Button.tsx",
-  "./myTestProject/components/Container.tsx",
   "./myTestProject/components/EditScreenInfo.tsx",
   "./myTestProject/components/ScreenContent.tsx",
   "./myTestProject/eslint.config.js",
@@ -983,8 +1003,8 @@ exports[`generates a project with --nativewind --expo-router --no-install --bun
   "./myTestProject/metro.config.js",
   "./myTestProject/nativewind-env.d.ts",
   "./myTestProject/package.json",
+  "./myTestProject/postcss.config.mjs",
   "./myTestProject/prettier.config.js",
-  "./myTestProject/tailwind.config.js",
   "./myTestProject/tsconfig.json",
 ]
 `;

cli/__tests__/cli-integration.test.ts

@@ -95,16 +95,16 @@ const nativewindCombinations = [
   ['--nativewind', '--expo-router', '--no-install']
 ] as const;
 
-const nativewinduiCombinations = [
-  ['--nativewindui'],
-  ['--nativewindui', '--no-install'],
-  ['--nativewindui', '--blank'],
-  ['--nativewindui', '--blank', '--no-install']
-] as const;
+// const nativewinduiCombinations = [
+//   ['--nativewindui'],
+//   ['--nativewindui', '--no-install'],
+//   ['--nativewindui', '--blank'],
+//   ['--nativewindui', '--blank', '--no-install']
+// ] as const;
 
 // Combine all combinations based on environment variables
 // UPDATED - Only using core combinations since React Navigation tests are commented out
-const popularCombinations = [...styleSheetCombinations, ...nativewindCombinations, ...nativewinduiCombinations];
+const popularCombinations = [...styleSheetCombinations, ...nativewindCombinations];
 
 const projectName = `myTestProject`;
 const pathToProject = `./${projectName}`;

cli/src/templates/base/babel.config.js.ejs

@@ -15,14 +15,7 @@ module.exports = function(api) {
   plugins.push('react-native-worklets/plugin');
 
   return {
-    <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>
-      presets: [
-        ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
-        'nativewind/babel',
-      ],
-    <% } else { %>
-      presets: ['babel-preset-expo'],
-    <% } %>
+    presets: ['babel-preset-expo'],
     plugins,
   };
 };

cli/src/templates/base/package.json.ejs

@@ -31,7 +31,10 @@
   },
   "dependencies": {
     <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>
-      "nativewind": "4.1.21",
+      "nativewind": "preview",
+      "react-native-css": "latest",
+      "postcss": "^8.5.6",
+      "@tailwindcss/postcss": "^4.1.13",
     <% } %>
     <% if (props.stylingPackage?.name === "nativewindui") { %>
       "@shopify/flash-list": "2.0.2",
@@ -143,8 +146,8 @@
     "eslint-config-prettier": "^10.1.2",
     "prettier": "^3.2.5",
     <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>
-      "tailwindcss": "^3.4.0",
-      "prettier-plugin-tailwindcss": "^0.5.11",
+      "tailwindcss": "^4.1.13",
+      "prettier-plugin-tailwindcss": "^0.6.14",
     <% } %>
     "typescript": "~5.9.2"
   },
@@ -154,5 +157,10 @@
   <% if  (props.packageManager === "yarn"){ %>
     "packageManager": "[email protected]",
   <% } %>
+  <% if (props.stylingPackage?.name === "nativewind") { %>
+    "resolutions": {
+      "lightningcss": "1.30.1"
+    },
+  <% } %>
   "private": true
 }

cli/src/templates/packages/expo-router/metro.config.js.ejs

@@ -1,17 +1,17 @@
 // Learn more https://docs.expo.io/guides/customizing-metro
 const { getDefaultConfig } = require('expo/metro-config');
 <% if (["nativewind", "nativewindui"].includes(props.stylingPackage?.name)) { %>
-  const { withNativeWind } = require("nativewind/metro");
+  const { withNativewind } = require("nativewind/metro");
 <% } %>
 
 /** @type {import('expo/metro-config').MetroConfig} */
 // eslint-disable-next-line no-undef
 const config = getDefaultConfig(__dirname);
 
 <% if (props.stylingPackage?.name === "nativewind") { %>
-  module.exports = withNativeWind(config, { input: "./global.css" });
+  module.exports = withNativewind(config);
 <% } else if (props.stylingPackage?.name === "nativewindui") { %>
-  module.exports = withNativeWind(config, { input: "./global.css", inlineRem: 16 });
+  module.exports = withNativewind(config, { inlineRem: 16 });
 <% } else { %>
   module.exports = config;
 <% } %>