@highbeek/create-rnstarterkit 1.0.2-beta.15 → 1.0.2-beta.18

package/README.md

@@ -36,6 +36,27 @@ npx @highbeek/create-rnstarterkit myApp --preset indie
 npx @highbeek/create-rnstarterkit myApp --preset minimal
 ```
 
+### After scaffolding — React Native CLI projects
+
+Native dependencies need linking via CocoaPods before you can run on iOS:
+
+```bash
+cd myApp
+npm install          # already run by the generator, skip if done
+cd ios && pod install && cd ..
+
+# Then run
+npx react-native run-ios
+npx react-native run-android
+```
+
+### After scaffolding — Expo projects
+
+```bash
+cd myApp
+npx expo start
+```
+
 ---
 
 ## Presets
@@ -69,6 +90,7 @@ When run without a preset, the CLI walks you through your stack:
 ? Sentry:                  Yes / No
 ? i18n (i18next):          Yes / No
 ? Maestro E2E flows:       Yes / No
+? NativeWind (Tailwind):   Yes / No
 ? CI (GitHub Actions):     Yes / No
 ? Husky pre-commit hooks:  Yes / No
 ```
@@ -161,9 +183,23 @@ Three implementations — all include Login/Register screens, protected routes,
 | AsyncStorage | Default — async token persistence |
 | MMKV | Synchronous, 10x faster, drop-in replacement |
 
+### NativeWind (Tailwind CSS)
+
+Adds `nativewind` + `tailwindcss` and wires everything up for your platform:
+
+| Step | Expo | React Native CLI |
+|---|---|---|
+| `tailwind.config.js` | content globs for `app/` + `src/` | content globs for `App.tsx` + `src/` |
+| `global.css` | created, imported in `app/_layout.tsx` | created, imported in `index.js` |
+| `metro.config.js` | wrapped with `withNativeWind` (expo/metro-config) | wrapped with `withNativeWind` (@react-native/metro-config) |
+| `babel.config.js` | `jsxImportSource: 'nativewind'` in babel-preset-expo | `nativewind/babel` plugin added |
+| `tsconfig.json` | `"nativewind/types"` added to types | same |
+
+After generation, use `className` props directly on React Native components — no extra setup needed.
+
 ### Sentry
 
-Adds `@sentry/react-native`, initialises in the app entry point, and exports `captureException` + `addBreadcrumb` helpers. Replace `__YOUR_DSN__` in `src/utils/sentry.ts` with your project DSN.
+Adds `@sentry/react-native`, initialises in the app entry point, and exports `captureException` + `addBreadcrumb` helpers. The DSN is read from your environment variables — set `EXPO_PUBLIC_SENTRY_DSN` (Expo) or `SENTRY_DSN` (RN CLI) in your `.env` file.
 
 ### i18n
 
@@ -230,7 +266,7 @@ Templates live in `src/templates/`. Generator logic is in `src/generators/appGen
 
 ## Status
 
-Current version: `1.0.2-beta.15`
+Current version: `1.0.2-beta.17`
 
 Beta release — core scaffolding, presets, and generators are working. Feedback and contributions welcome.
 

package/dist/bin/create-rnstarterkit.js

@@ -26,6 +26,7 @@ const PRESETS = {
         sentry: false,
         i18n: false,
         maestro: false,
+        nativewind: false,
     },
     fintech: {
         platform: "React Native CLI",
@@ -43,6 +44,7 @@ const PRESETS = {
         sentry: true,
         i18n: true,
         maestro: true,
+        nativewind: false,
     },
     social: {
         platform: "Expo",
@@ -60,6 +62,7 @@ const PRESETS = {
         sentry: true,
         i18n: true,
         maestro: false,
+        nativewind: false,
     },
     indie: {
         typescript: true,
@@ -76,6 +79,7 @@ const PRESETS = {
         sentry: false,
         i18n: false,
         maestro: false,
+        nativewind: false,
     },
 };
 // ---------------------------------------------------------------------------
@@ -194,6 +198,13 @@ async function runInteractivePrompt(prefilledName, presetDefaults) {
             default: false,
             when: () => presetDefaults?.maestro === undefined,
         },
+        {
+            type: "confirm",
+            name: "nativewind",
+            message: "Use NativeWind (Tailwind CSS for React Native)?",
+            default: false,
+            when: () => presetDefaults?.nativewind === undefined,
+        },
         {
             type: "confirm",
             name: "ci",
@@ -224,6 +235,7 @@ async function runInteractivePrompt(prefilledName, presetDefaults) {
         sentry: answers.sentry ?? presetDefaults?.sentry ?? false,
         i18n: answers.i18n ?? presetDefaults?.i18n ?? false,
         maestro: answers.maestro ?? presetDefaults?.maestro ?? false,
+        nativewind: answers.nativewind ?? presetDefaults?.nativewind ?? false,
         ci: answers.ci ?? presetDefaults?.ci ?? false,
         husky: answers.husky ?? presetDefaults?.husky ?? true,
     };
@@ -235,7 +247,7 @@ const program = new commander_1.Command();
 program
     .name("create-rnstarterkit")
     .description("Scaffold a production-ready React Native app")
-    .version("1.0.2-beta.15")
+    .version("1.0.2-beta.18")
     .argument("[projectName]", "Name of the project (alphanumeric)")
     .option("--preset <name>", "Skip prompts with a preset: minimal | fintech | social | indie")
     .action(async (projectName, cmdOptions) => {
@@ -263,6 +275,7 @@ program
             sentry: presetDefaults.sentry ?? false,
             i18n: presetDefaults.i18n ?? false,
             maestro: presetDefaults.maestro ?? false,
+            nativewind: presetDefaults.nativewind ?? false,
             ci: presetDefaults.ci ?? false,
             husky: presetDefaults.husky ?? true,
         };

package/dist/src/generators/appGenerator.js

@@ -7,6 +7,10 @@ exports.generateApp = generateApp;
 const path_1 = __importDefault(require("path"));
 const fs_extra_1 = __importDefault(require("fs-extra"));
 const execa_1 = require("execa");
+const CLI_REANIMATED_VERSION = "^4.2.0";
+const CLI_WORKLETS_VERSION = "^0.7.0";
+const EXPO_REANIMATED_VERSION = "~4.1.1";
+const EXPO_WORKLETS_VERSION = "0.5.1";
 async function generateApp(options) {
     const { platform, projectName, auth, apiClient, absoluteImports, state, dataFetching, validation, storage, typescript, apiClientType, husky, sentry, i18n, maestro, } = options;
     const templateRoot = await resolveTemplateRoot();
@@ -80,6 +84,8 @@ async function generateApp(options) {
         await configureI18n(targetPath, platform);
     if (maestro)
         await configureMaestro(targetPath, { auth, ci: options.ci });
+    if (options.nativewind)
+        await configureNativeWind(targetPath, platform);
     await stampVersion(targetPath, options);
     if (options.ci)
         await configureCi(targetPath);
@@ -96,6 +102,7 @@ async function generateApp(options) {
             await fs_extra_1.default.rename(appJs, appTsx);
         }
     }
+    await validateGeneratedRuntimeCompatibility(targetPath);
     await installDependencies(targetPath);
     console.log("✅ Project created successfully!");
 }
@@ -512,11 +519,13 @@ async function configureStateAndAuthDependencies(targetPath, options) {
         dependencies["@react-navigation/bottom-tabs"] = "^7.4.0";
         dependencies["react-native-screens"] = "^4.16.0";
         dependencies["react-native-gesture-handler"] = "^2.28.0";
-        dependencies["react-native-reanimated"] = "^3.17.4";
+        dependencies["react-native-worklets"] = CLI_WORKLETS_VERSION;
+        dependencies["react-native-reanimated"] = CLI_REANIMATED_VERSION;
     }
     // Expo with auth uses expo-router tabs which require reanimated
     if (options.auth && options.platform === "Expo") {
-        dependencies["react-native-reanimated"] = "^3.17.4";
+        dependencies["react-native-worklets"] = EXPO_WORKLETS_VERSION;
+        dependencies["react-native-reanimated"] = EXPO_REANIMATED_VERSION;
     }
     // AsyncStorage: needed when explicitly selected OR when auth is enabled
     // (auth modules use AsyncStorage for welcome screen persistence)
@@ -2055,6 +2064,8 @@ async function writeCliBabelConfig(targetPath, options) {
     if (options.useAbsoluteImports) {
         plugins.push("['module-resolver', { root: ['./src'], alias: { '@': './src' } }]");
     }
+    // Must stay last when present.
+    plugins.push("'react-native-worklets/plugin'");
     const pluginsLine = plugins.length > 0 ? `,\n  plugins: [${plugins.join(", ")}]` : "";
     const content = `module.exports = {\n  presets: ['module:@react-native/babel-preset']${pluginsLine},\n};\n`;
     await fs_extra_1.default.writeFile(babelConfigPath, content, "utf8");
@@ -2086,6 +2097,31 @@ async function ensureDependencies(targetPath, patch) {
         await fs_extra_1.default.writeJson(packageJsonPath, packageJson, { spaces: 2 });
     }
 }
+function parseMajorMinor(version) {
+    const match = version.match(/(\d+)\.(\d+)/);
+    if (!match)
+        return null;
+    return { major: Number(match[1]), minor: Number(match[2]) };
+}
+async function validateGeneratedRuntimeCompatibility(targetPath) {
+    const packageJsonPath = path_1.default.join(targetPath, "package.json");
+    if (!(await fs_extra_1.default.pathExists(packageJsonPath)))
+        return;
+    const pkg = await fs_extra_1.default.readJson(packageJsonPath);
+    const rnVersion = pkg.dependencies?.["react-native"];
+    const reanimatedVersion = pkg.dependencies?.["react-native-reanimated"];
+    if (!rnVersion || !reanimatedVersion)
+        return;
+    const rn = parseMajorMinor(String(rnVersion));
+    const reanimated = parseMajorMinor(String(reanimatedVersion));
+    if (!rn || !reanimated)
+        return;
+    // Reanimated 3 is not compatible with RN >= 0.82.
+    if (rn.major === 0 && rn.minor >= 82 && reanimated.major < 4) {
+        throw new Error(`❌ Invalid dependency combination detected: react-native@${rnVersion} with react-native-reanimated@${reanimatedVersion}. ` +
+            `Use react-native-reanimated@4+ (and react-native-worklets) for React Native 0.${rn.minor}.x.`);
+    }
+}
 async function writeIfMissing(filePath, content) {
     await fs_extra_1.default.ensureDir(path_1.default.dirname(filePath));
     if (!(await fs_extra_1.default.pathExists(filePath))) {
@@ -2264,6 +2300,112 @@ async function configureTesting(targetPath) {
         }
     }
 }
+// ---------------------------------------------------------------------------
+// NativeWind (Tailwind CSS for React Native)
+// ---------------------------------------------------------------------------
+async function configureNativeWind(targetPath, platform) {
+    // 1. Install dependencies
+    await ensureDependencies(targetPath, {
+        dependencies: {
+            nativewind: "^4.1.23",
+            tailwindcss: "^3.4.17",
+        },
+    });
+    // 2. tailwind.config.js
+    const contentGlobs = platform === "Expo"
+        ? `['./app/**/*.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}']`
+        : `['./App.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}']`;
+    const tailwindConfig = `/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ${contentGlobs},
+  presets: [require('nativewind/preset')],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+`;
+    await writeIfMissing(path_1.default.join(targetPath, "tailwind.config.js"), tailwindConfig);
+    // Both platforms need global.css
+    const globalCss = `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n`;
+    await writeIfMissing(path_1.default.join(targetPath, "global.css"), globalCss);
+    const metroPath = path_1.default.join(targetPath, "metro.config.js");
+    if (platform === "Expo") {
+        // Expo: metro.config.js — wrap with withNativeWind using expo/metro-config
+        const expoMetroContent = `const { getDefaultConfig } = require('expo/metro-config');
+const { withNativeWind } = require('nativewind/metro');
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withNativeWind(config, { input: './global.css' });
+`;
+        await fs_extra_1.default.writeFile(metroPath, expoMetroContent, "utf8");
+        // Expo: babel.config.js — jsxImportSource switches JSX transform to nativewind
+        const expoBabelContent = `module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
+    ],
+  };
+};
+`;
+        await fs_extra_1.default.writeFile(path_1.default.join(targetPath, "babel.config.js"), expoBabelContent, "utf8");
+        // Expo: inject global.css import at the top of app/_layout.tsx
+        const layoutPath = path_1.default.join(targetPath, "app", "_layout.tsx");
+        if (await fs_extra_1.default.pathExists(layoutPath)) {
+            const layoutContent = await fs_extra_1.default.readFile(layoutPath, "utf8");
+            if (!layoutContent.includes("global.css")) {
+                await fs_extra_1.default.writeFile(layoutPath, `import '../global.css';\n${layoutContent}`, "utf8");
+            }
+        }
+    }
+    else {
+        // CLI: metro.config.js — replace with withNativeWind using @react-native/metro-config
+        const cliMetroContent = `const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const { withNativeWind } = require('nativewind/metro');
+
+const config = mergeConfig(getDefaultConfig(__dirname), {});
+
+module.exports = withNativeWind(config, { input: './global.css' });
+`;
+        await fs_extra_1.default.writeFile(metroPath, cliMetroContent, "utf8");
+        // CLI: babel.config.js — add nativewind/babel plugin
+        const babelPath = path_1.default.join(targetPath, "babel.config.js");
+        if (await fs_extra_1.default.pathExists(babelPath)) {
+            let babelContent = await fs_extra_1.default.readFile(babelPath, "utf8");
+            if (!babelContent.includes("nativewind/babel")) {
+                babelContent = babelContent.replace(/plugins:\s*\[([^\]]*)\]/, (match, inner) => inner.trim()
+                    ? match.replace(inner, `${inner.trimEnd()}, 'nativewind/babel'`)
+                    : `plugins: ['nativewind/babel']`);
+                if (!babelContent.includes("nativewind/babel")) {
+                    babelContent = babelContent.replace(/module\.exports\s*=\s*\{/, `module.exports = {\n  plugins: ['nativewind/babel'],`);
+                }
+                await fs_extra_1.default.writeFile(babelPath, babelContent, "utf8");
+            }
+        }
+        // CLI: inject global.css import at the top of index.js
+        const indexPath = path_1.default.join(targetPath, "index.js");
+        if (await fs_extra_1.default.pathExists(indexPath)) {
+            const indexContent = await fs_extra_1.default.readFile(indexPath, "utf8");
+            if (!indexContent.includes("global.css")) {
+                await fs_extra_1.default.writeFile(indexPath, `import './global.css';\n${indexContent}`, "utf8");
+            }
+        }
+    }
+    // 4. Add nativewind types to tsconfig
+    const tsconfigPath = path_1.default.join(targetPath, "tsconfig.json");
+    if (await fs_extra_1.default.pathExists(tsconfigPath)) {
+        const tsconfig = await fs_extra_1.default.readJson(tsconfigPath);
+        tsconfig.compilerOptions = tsconfig.compilerOptions || {};
+        const types = tsconfig.compilerOptions.types || [];
+        if (!types.includes("nativewind/types")) {
+            tsconfig.compilerOptions.types = [...types, "nativewind/types"];
+        }
+        await fs_extra_1.default.writeJson(tsconfigPath, tsconfig, { spaces: 2 });
+    }
+    console.log("🎨 NativeWind configured — use className props on your React Native components.");
+}
 async function stampVersion(targetPath, options) {
     const packageJsonPath = path_1.default.join(targetPath, "package.json");
     if (!(await fs_extra_1.default.pathExists(packageJsonPath)))
@@ -2297,6 +2439,7 @@ async function stampVersion(targetPath, options) {
         sentry: options.sentry,
         i18n: options.i18n,
         maestro: options.maestro,
+        nativewind: options.nativewind,
     };
     await fs_extra_1.default.writeJson(packageJsonPath, projectPkg, { spaces: 2 });
 }
@@ -2672,6 +2815,8 @@ function isTextFile(filePath) {
         ".lock",
         ".xcprivacy",
         ".storyboard",
+        ".xcworkspacedata",
+        ".xcscheme",
     ]);
     const base = path_1.default.basename(filePath).toLowerCase();
     return textExtensions.has(extension) || base === "podfile" || base === "gemfile";

package/dist/templates/cli-base/babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
+  plugins: ['react-native-worklets/plugin'],
 };

package/dist/templates/cli-base/package.json

@@ -15,7 +15,8 @@
     "react": "19.2.3",
     "react-native": "0.84.0",
     "react-native-safe-area-context": "^5.5.2",
-    "react-native-reanimated": "^3.17.4"
+    "react-native-worklets": "^0.7.0",
+    "react-native-reanimated": "^4.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@highbeek/create-rnstarterkit",
-  "version": "1.0.2-beta.15",
+  "version": "1.0.2-beta.18",
   "description": "CLI to scaffold production-ready React Native app structures.",
   "main": "dist/src/generators/appGenerator.js",
   "bin": {