create-expo-stack 2.24.0-next.8fdc608 → 2.24.0-next.f2abac9

package/README.md

@@ -51,6 +51,27 @@ To get started, use npx to run the CLI tool. You will be prompted to opt into th
 
 <img src="https://github.com/roninoss/create-expo-stack/assets/5482800/e709dd66-cb9b-463c-91f9-b842bb80585c" />
 
+## Try the Nativewind v5 release candidate
+
+Create a new Expo 57 project with the `next` release:
+
+```sh
+npx rn-new@next my-app --nativewind --expo-router
+```
+
+The equivalent command is `npx create-expo-stack@next my-app --nativewind --expo-router`.
+Omit `--expo-router` for a project without Router.
+
+Nativewind starters pin `nativewind@5.0.0-rc.0`, `react-native-css@3.1.0-rc.0`, and Tailwind CSS 4.1.12.
+NativewindUI starters continue to use Nativewind 4.2.6 and Tailwind CSS 3.
+
+For an existing v5 preview project, update Nativewind and its engine together. Follow the
+[RC release notes](https://github.com/nativewind/nativewind/releases/tag/5.0.0-rc.0)
+for Expo alignment, configuration checks, and migration details.
+
+For v4 projects, the [migration skill draft](https://github.com/nativewind/nativewind/tree/main/skills/nativewind-v4-to-v5)
+is available for evaluation. It has not yet passed independent application migration verification.
+
 ## Tech Stack for the templates
 
 Currently, all of the [templates](https://github.com/roninoss/create-expo-stack/tree/main/cli/src/templates) use the same versions of the following libraries. Not all of the templates include all of the libraries, but they are all available for use.

package/build/templates/base/app.json.ejs

@@ -5,7 +5,7 @@
     "version": "1.0.0",
     <% if (props.navigationPackage?.name === 'expo-router') { %>
       "scheme": "<%= props.projectScheme %>",
-      "platforms": ["ios", "android"],
+      "platforms": ["ios", "android"<% if (props.stylingPackage?.name === "nativewind") { %>, "web"<% } %>],
       "web": {
         "bundler": "metro",
         "output": "static",
@@ -54,7 +54,7 @@
     <% } %>
     "orientation": "portrait",
     "icon": "./assets/icon.png",
-    <% if (props.stylingPackage?.name === "nativewindui" || props.stylingPackage?.name === "unistyles") { %>
+    <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui" || props.stylingPackage?.name === "unistyles") { %>
     "userInterfaceStyle": "automatic",
      <% } else { %>
      "userInterfaceStyle": "light",

package/build/templates/base/babel.config.js.ejs

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

package/build/templates/base/package.json.ejs

@@ -30,13 +30,15 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>
-      "nativewind": "preview",
-      "react-native-css": "latest",
+    <% if (props.stylingPackage?.name === "nativewind") { %>
+      "nativewind": "5.0.0-rc.0",
+      "react-native-css": "3.1.0-rc.0",
       "postcss": "^8.5.6",
-      "@tailwindcss/postcss": "^4.1.13",
+      "@tailwindcss/postcss": "4.1.12",
+      "expo-system-ui": "~57.0.4",
     <% } %>
     <% if (props.stylingPackage?.name === "nativewindui") { %>
+      "nativewind": "4.2.6",
       "@react-navigation/elements": "^2.9.25",
       "@shopify/flash-list": "2.0.2",
       "class-variance-authority": "^0.7.0",
@@ -82,7 +84,7 @@
     <% } %>
 
     <% if (props.navigationPackage?.type === "navigation" || props.packages?.some((p) => p.name === "react-native-screens")) { %>
-      "react-native-screens": "4.25.2",
+      "react-native-screens": "<%= props.stylingPackage?.name === 'nativewind' ? '~4.26.0' : '4.25.2' %>",
     <% } %>
 
     <% if (props.packages?.some((p) => p.name === "react-native-svg")) { %>
@@ -96,7 +98,7 @@
     <% if (props.navigationPackage?.name === "react-navigation") { %>
       "@react-navigation/stack": "^7.4.8",
       "@expo/vector-icons": "^15.0.2",
-      "expo-font": "~57.0.0",
+      "expo-font": "<%= props.stylingPackage?.name === 'nativewind' ? '~57.0.4' : '~57.0.0' %>",
     <% } %>
 
     <% if (props.analyticsPackage?.name === "vexo-analytics") { %>
@@ -116,14 +118,16 @@
     <% } %>
 
     <% if (props.navigationPackage?.name === "expo-router") { %>
-      "@expo/log-box": "^57.0.0",
+      "@expo/log-box": "<%= props.stylingPackage?.name === 'nativewind' ? '~57.0.4' : '^57.0.0' %>",
       "@expo/vector-icons": "^15.0.2",
-      "expo-font": "~57.0.0",
-      "expo-linking": "~57.0.2",
-      "expo-router": "~57.0.4",
-      "expo-constants": "~57.0.3",
+      "expo-font": "<%= props.stylingPackage?.name === 'nativewind' ? '~57.0.4' : '~57.0.0' %>",
+      "expo-linking": "<%= props.stylingPackage?.name === 'nativewind' ? '~57.0.10' : '~57.0.2' %>",
+      "expo-router": "<%= props.stylingPackage?.name === 'nativewind' ? '~57.0.21' : '~57.0.4' %>",
+      "expo-constants": "<%= props.stylingPackage?.name === 'nativewind' ? '~57.0.18' : '~57.0.3' %>",
+      <% if (props.stylingPackage?.name !== "nativewind") { %>
       "expo-system-ui": "~57.0.0",
-      "expo-web-browser": "~57.0.0",
+      <% } %>
+      "expo-web-browser": "<%= props.stylingPackage?.name === 'nativewind' ? '~57.0.3' : '~57.0.0' %>",
       "react-dom": "19.2.3",
       "react-native-web": "~0.21.0",
     <% } %>
@@ -140,32 +144,32 @@
   <% if (props.internalizationPackage?.name === "i18next") { %>
     "i18next": "^23.7.20",
     "react-i18next": "^14.0.1",
-    "expo-localization": "~57.0.0",
+    "expo-localization": "<%= props.stylingPackage?.name === 'nativewind' ? '~57.0.2' : '~57.0.0' %>",
   <% } %>
   <% if (props.flags?.eas || props.stylingPackage?.name === "nativewindui") { %>
-    "expo-dev-client": "~57.0.5",
-    "expo-device": "~57.0.0",
+    "expo-dev-client": "<%= props.stylingPackage?.name === 'nativewind' ? '~57.0.19' : '~57.0.5' %>",
+    "expo-device": "<%= props.stylingPackage?.name === 'nativewind' ? '~57.0.2' : '~57.0.0' %>",
   <% } %>
 
-    "react-native-reanimated": "4.5.0",
-    "react-native-worklets": "0.10.0",
+    "react-native-reanimated": "<%= props.stylingPackage?.name === 'nativewind' ? '4.5.1' : '4.5.0' %>",
+    "react-native-worklets": "<%= props.stylingPackage?.name === 'nativewind' ? '0.10.1' : '0.10.0' %>",
 
     "react-native-safe-area-context": "~5.7.0",
-    "expo": "~57.0.4",
-    "expo-splash-screen": "~57.0.2",
-    "expo-status-bar": "~57.0.0",
+    "expo": "<%= props.stylingPackage?.name === 'nativewind' ? '~57.0.22' : '~57.0.4' %>",
+    "expo-splash-screen": "<%= props.stylingPackage?.name === 'nativewind' ? '~57.0.9' : '~57.0.2' %>",
+    "expo-status-bar": "<%= props.stylingPackage?.name === 'nativewind' ? '~57.0.1' : '~57.0.0' %>",
     "react": "19.2.3",
-    "react-native": "0.86.0"
+    "react-native": "<%= props.stylingPackage?.name === 'nativewind' ? '0.86.3' : '0.86.0' %>"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@types/react": "~19.2.2",
     "eslint": "^9.25.1",
-    "eslint-config-expo": "~57.0.0",
+    "eslint-config-expo": "<%= props.stylingPackage?.name === 'nativewind' ? '~57.0.2' : '~57.0.0' %>",
     "eslint-config-prettier": "^10.1.2",
     "prettier": "^3.2.5",
     <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>
-      "tailwindcss": "^4.1.13",
+      "tailwindcss": "<%= props.stylingPackage?.name === 'nativewind' ? '4.1.12' : '^3.4.17' %>",
       "prettier-plugin-tailwindcss": "^0.6.14",
     <% } %>
     "typescript": "~6.0.3"

package/build/templates/packages/expo-router/metro.config.js.ejs

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

package/build/templates/packages/nativewind/global.css

@@ -1,5 +1,4 @@
 @import 'tailwindcss/theme.css' layer(theme);
 @import 'tailwindcss/preflight.css' layer(base);
 @import 'tailwindcss/utilities.css';
-
 @import 'nativewind/theme';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-expo-stack",
-	"version": "2.24.0-next.8fdc608",
+	"version": "2.24.0-next.f2abac9",
 	"description": "CLI tool to initialize a React Native application with Expo",
 	"repository": {
 		"type": "git",