add support for nativewind v5 preview

Author: danstepanov

.changeset/yummy-wombats-roll.md

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

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

@@ -25,14 +25,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": "latest",
+      "@tailwindcss/postcss": "^4.1.13",
+      "nativewind": "5.0.0-preview.0",
+      "postcss": "^8.5.6",
+      "react-native-css": "^3.0.0-preview.5",
     <% } %>
     <% if (props.stylingPackage?.name === "nativewindui") { %>
       "@roninoss/icons": "^0.0.4",
@@ -148,7 +151,7 @@
   <% } %>
 
 
-    "react-native-reanimated": "~4.1.0",
+    "react-native-reanimated": "~4.1.1",
     "react-native-worklets": "0.5.1",
 
 
@@ -170,8 +173,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",
     <% } %>
     <% if (props.stylingPackage?.name === "tamagui") { %>
       "@tamagui/babel-plugin": "^1.132.23",

cli/src/templates/packages/nativewind/app-env.d.ts

@@ -1,3 +1,2 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@import 'nativewind/theme';

cli/src/templates/packages/nativewind/global.css

@@ -1,7 +1,8 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
 const { getDefaultConfig } = require('expo/metro-config');
-const { withNativeWind } = require('nativewind/metro');
+const { withNativewind } = require('nativewind/metro');
 
-// eslint-disable-next-line no-undef
+/** @type {import('expo/metro-config').MetroConfig} */
 const config = getDefaultConfig(__dirname);
 
-module.exports = withNativeWind(config, { input: './global.css' });
+module.exports = withNativewind(config);

cli/src/templates/packages/nativewind/metro.config.js

@@ -0,0 +1,4 @@
+// @ts-ignore
+/// <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 react-native-css. If you need to move or disable this file, please see the documentation.

cli/src/templates/packages/nativewind/nativewind-env.d.ts

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {}
+  }
+};

cli/src/templates/packages/nativewind/postcss.config.mjs

@@ -123,10 +123,10 @@ export function configureProjectFiles(
         'packages/nativewind/components/Container.tsx.ejs',
         'packages/nativewind/components/ScreenContent.tsx.ejs',
         'packages/nativewind/components/EditScreenInfo.tsx.ejs',
-        'packages/nativewind/tailwind.config.js.ejs',
-        'packages/nativewind/app-env.d.ts',
+        'packages/nativewind/global.css',
         'packages/nativewind/metro.config.js',
-        'packages/nativewind/global.css'
+        'packages/nativewind/nativewind-env.d.ts',
+        'packages/nativewind/postcss.config.mjs'
       ];
 
       files = [...files, ...nativewindFiles];