@highbeek/create-rnstarterkit 1.0.2-beta.7 → 1.1.0

package/dist/src/generators/appGenerator.js

@@ -7,8 +7,12 @@ 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, } = options;
+    const { platform, projectName, auth, apiClient, absoluteImports, state, dataFetching, validation, storage, typescript, apiClientType, husky, sentry, i18n, maestro, } = options;
     const templateRoot = await resolveTemplateRoot();
     const templateFolder = platform === "Expo" ? "expo-base" : "cli-base";
     const templatePath = path_1.default.join(templateRoot, templateFolder);
@@ -18,7 +22,10 @@ async function generateApp(options) {
         filter: (src) => shouldCopyPath(src, templatePath),
     });
     await replaceProjectName(targetPath, projectName);
-    await createStandardStructure(targetPath, platform);
+    if (platform === "React Native CLI") {
+        await configureCliNativeProjectNames(targetPath, projectName);
+    }
+    await createStandardStructure(targetPath, platform, state);
     if (auth) {
         const authFolder = state === "Redux Toolkit"
             ? "auth-redux"
@@ -26,30 +33,34 @@ async function generateApp(options) {
                 ? "auth-zustand"
                 : "auth-context";
         await copyOptionalModule(authFolder, targetPath);
-        if (authFolder === "auth-context" ||
-            authFolder === "auth-zustand" ||
-            authFolder === "auth-redux") {
-            if (platform === "Expo") {
-                await writeExpoRouterAuthRoutes(targetPath, state);
-            }
-            else {
-                await setAuthTabsByPlatform(targetPath, platform);
-                await writeAuthAppShell(targetPath, state);
-            }
+        if (platform === "Expo") {
+            await writeExpoRouterAuthRoutes(targetPath, state, dataFetching);
+        }
+        else {
+            await setAuthTabsByPlatform(targetPath, platform);
+            await writeAuthAppShell(targetPath, state, dataFetching);
         }
     }
     if (apiClient) {
         await copyOptionalModule("apiClient", targetPath);
         await configureApiClientByPlatform(targetPath, platform);
     }
-    if (state === "Redux Toolkit")
+    // Only copy standalone state modules when auth is disabled
+    // (auth modules already include their own store setup)
+    if (state === "Redux Toolkit" && !auth)
         await copyOptionalModule("redux", targetPath);
-    if (state === "Zustand")
+    if (state === "Zustand" && !auth)
         await copyOptionalModule("zustand", targetPath);
     if (dataFetching === "React Query")
         await copyOptionalModule("react-query", targetPath);
+    if (dataFetching === "SWR")
+        await copyOptionalModule("swr", targetPath);
     if (storage === "MMKV")
         await copyOptionalModule("mmkv", targetPath);
+    if (validation.includes("Formik"))
+        await copyOptionalModule("formik", targetPath);
+    if (validation.includes("React Hook Form"))
+        await copyOptionalModule("react-hook-form", targetPath);
     await configureStateAndAuthDependencies(targetPath, {
         platform,
         state,
@@ -61,19 +72,37 @@ async function generateApp(options) {
     await configureApiClientTransport(targetPath, apiClient, apiClientType);
     await syncApiIndex(targetPath);
     await configureValidation(targetPath, validation);
+    await configureTheme(targetPath);
+    await configureErrorBoundary(targetPath);
+    await configureTesting(targetPath);
+    await configureNavigationTypes(targetPath, { platform, auth, state });
+    await configureEnv(targetPath, platform);
+    await configureVSCode(targetPath);
+    if (sentry)
+        await configureSentry(targetPath, platform);
+    if (i18n)
+        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);
+    if (husky)
+        await configureHusky(targetPath);
     if (typescript) {
-        const tsconfigTemplate = path_1.default.join(templateRoot, "optional/tsconfig.json");
-        if (await fs_extra_1.default.pathExists(tsconfigTemplate)) {
-            await fs_extra_1.default.copy(tsconfigTemplate, path_1.default.join(targetPath, "tsconfig.json"), {
-                overwrite: true,
-            });
-        }
+        // Rename App.js -> App.tsx for projects generated without a .tsx entry point.
+        // Both cli-base and expo-base templates already ship App.tsx and correct
+        // tsconfigs (extending @react-native/typescript-config / expo/tsconfig.base),
+        // so we must NOT overwrite those configs here.
         const appJs = path_1.default.join(targetPath, "App.js");
         const appTsx = path_1.default.join(targetPath, "App.tsx");
         if (await fs_extra_1.default.pathExists(appJs)) {
             await fs_extra_1.default.rename(appJs, appTsx);
         }
     }
+    await validateGeneratedRuntimeCompatibility(targetPath);
     await installDependencies(targetPath);
     console.log("✅ Project created successfully!");
 }
@@ -102,14 +131,81 @@ async function replaceProjectName(dir, projectName) {
         }
     }
 }
+function toNativeAppName(projectName) {
+    const cleaned = projectName
+        .replace(/[^a-zA-Z0-9]+/g, " ")
+        .trim()
+        .split(/\s+/)
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join("");
+    const fallback = cleaned || "App";
+    return /^\d/.test(fallback) ? `App${fallback}` : fallback;
+}
+function toAndroidPackageSegment(projectName) {
+    const cleaned = projectName.toLowerCase().replace(/[^a-z0-9]+/g, "");
+    const fallback = cleaned || "app";
+    return /^\d/.test(fallback) ? `app${fallback}` : fallback;
+}
+async function replaceInTextFiles(dir, replacements) {
+    const files = await fs_extra_1.default.readdir(dir);
+    for (const file of files) {
+        const filePath = path_1.default.join(dir, file);
+        const stat = await fs_extra_1.default.stat(filePath);
+        if (stat.isDirectory()) {
+            await replaceInTextFiles(filePath, replacements);
+            continue;
+        }
+        if (!isTextFile(filePath))
+            continue;
+        let content = await fs_extra_1.default.readFile(filePath, "utf8");
+        for (const [pattern, replacement] of replacements) {
+            content = content.replace(pattern, replacement);
+        }
+        await fs_extra_1.default.writeFile(filePath, content, "utf8");
+    }
+}
+async function renameIfExists(fromPath, toPath) {
+    if (!(await fs_extra_1.default.pathExists(fromPath)))
+        return;
+    await fs_extra_1.default.move(fromPath, toPath, { overwrite: true });
+}
+async function configureCliNativeProjectNames(targetPath, projectName) {
+    const nativeAppName = toNativeAppName(projectName);
+    const androidPackageSegment = toAndroidPackageSegment(projectName);
+    await replaceInTextFiles(targetPath, [
+        [/BaseApp/g, nativeAppName],
+        [/com\.baseapp/g, `com.${androidPackageSegment}`],
+    ]);
+    const iosPath = path_1.default.join(targetPath, "ios");
+    const androidJavaRoot = path_1.default.join(targetPath, "android", "app", "src", "main", "java");
+    await renameIfExists(path_1.default.join(iosPath, "BaseApp"), path_1.default.join(iosPath, nativeAppName));
+    await renameIfExists(path_1.default.join(iosPath, "BaseApp.xcodeproj"), path_1.default.join(iosPath, `${nativeAppName}.xcodeproj`));
+    await renameIfExists(path_1.default.join(iosPath, "BaseApp.xcworkspace"), path_1.default.join(iosPath, `${nativeAppName}.xcworkspace`));
+    await renameIfExists(path_1.default.join(iosPath, `${nativeAppName}.xcodeproj`, "xcshareddata", "xcschemes", "BaseApp.xcscheme"), path_1.default.join(iosPath, `${nativeAppName}.xcodeproj`, "xcshareddata", "xcschemes", `${nativeAppName}.xcscheme`));
+    await renameIfExists(path_1.default.join(androidJavaRoot, "com", "baseapp"), path_1.default.join(androidJavaRoot, "com", androidPackageSegment));
+}
 async function installDependencies(targetPath) {
+    if (process.env.SKIP_INSTALL === "1") {
+        console.log("⏭️  Skipping npm install (SKIP_INSTALL=1)");
+        return;
+    }
     console.log("📦 Installing dependencies...");
     try {
         await (0, execa_1.execa)("npm", ["install"], { cwd: targetPath, stdio: "inherit" });
         console.log("✅ Dependencies installed!");
     }
-    catch (err) {
-        console.log("⚠️ Failed to install dependencies. Run 'npm install' manually.");
+    catch {
+        console.log("⚠️ Peer dep conflict detected, retrying with --legacy-peer-deps...");
+        try {
+            await (0, execa_1.execa)("npm", ["install", "--legacy-peer-deps"], {
+                cwd: targetPath,
+                stdio: "inherit",
+            });
+            console.log("✅ Dependencies installed!");
+        }
+        catch {
+            console.log("⚠️ Failed to install dependencies. Run 'npm install --legacy-peer-deps' manually.");
+        }
     }
 }
 async function setAuthTabsByPlatform(targetPath, platform) {
@@ -151,7 +247,7 @@ async function ensureCliApiEnvSupport(targetPath) {
         },
     });
 }
-async function createStandardStructure(targetPath, platform) {
+async function createStandardStructure(targetPath, platform, state) {
     const commonDirectories = [
         "assets",
         "assets/icons",
@@ -161,10 +257,19 @@ async function createStandardStructure(targetPath, platform) {
         "hooks",
         "utils",
         "services",
-        "api",
         "config",
-        "context",
+        "theme",
+        "types",
     ];
+    // context/ only when Context API is the state solution
+    if (state === "Context API" || state === "None") {
+        commonDirectories.push("context");
+    }
+    // api/ only when an API client or auth module will populate it
+    // (auth modules and apiClient copyOptionalModule both write into api/)
+    // — handled by those modules; we don't pre-create an empty dir here
+    // providers/ is NOT pre-created — writeIfMissing creates it on demand
+    // when SWR / React Query / i18n providers are written into it
     const cliOnlyDirectories = ["navigation", "screens"];
     const directories = platform === "Expo"
         ? commonDirectories
@@ -196,9 +301,22 @@ async function configureDataFetching(targetPath, dataFetching) {
                 "@tanstack/react-query": "^5.90.5",
             },
         });
+        // queryClient.ts is provided by the react-query optional module template
+        // writeIfMissing ensures we don't overwrite it if already copied
         await writeIfMissing(path_1.default.join(targetPath, "services/queryClient.ts"), `import { QueryClient } from "@tanstack/react-query";
 
-export const queryClient = new QueryClient();
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 2,
+      staleTime: 1000 * 60 * 5,
+      gcTime: 1000 * 60 * 10,
+    },
+    mutations: {
+      retry: 0,
+    },
+  },
+});
 `);
     }
     if (dataFetching === "SWR") {
@@ -207,6 +325,28 @@ export const queryClient = new QueryClient();
                 swr: "^2.3.6",
             },
         });
+        // SWRProvider is provided by the swr optional module template
+        // Add a fallback if template copy didn't work
+        await writeIfMissing(path_1.default.join(targetPath, "providers/SWRProvider.tsx"), `import React from "react";
+import { SWRConfig } from "swr";
+
+type Props = { children: React.ReactNode };
+
+export function SWRProvider({ children }: Props) {
+  return (
+    <SWRConfig
+      value={{
+        revalidateOnFocus: true,
+        revalidateOnReconnect: true,
+        shouldRetryOnError: true,
+        errorRetryCount: 3,
+      }}
+    >
+      {children}
+    </SWRConfig>
+  );
+}
+`);
     }
 }
 async function configureApiClientTransport(targetPath, apiClient, apiClientType) {
@@ -377,7 +517,28 @@ async function configureValidation(targetPath, validation) {
 async function configureStateAndAuthDependencies(targetPath, options) {
     const dependencies = {};
     if (options.auth && options.platform === "React Native CLI") {
+        // Full navigation stack required for auth flow
+        dependencies["@react-navigation/native"] = "^7.1.8";
         dependencies["@react-navigation/native-stack"] = "^7.3.29";
+        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-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-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)
+    if (options.storage === "AsyncStorage" || options.auth) {
+        dependencies["@react-native-async-storage/async-storage"] = "^2.2.0";
+    }
+    // MMKV: used for token storage when selected
+    if (options.storage === "MMKV") {
+        dependencies["react-native-mmkv"] = "^3.0.0";
     }
     if (options.state === "Redux Toolkit") {
         dependencies["@reduxjs/toolkit"] = "^2.9.0";
@@ -386,21 +547,17 @@ async function configureStateAndAuthDependencies(targetPath, options) {
     if (options.state === "Zustand") {
         dependencies.zustand = "^5.0.8";
     }
-    if (options.storage === "AsyncStorage" &&
-        (options.state === "Context API" || options.state === "Zustand")) {
-        dependencies["@react-native-async-storage/async-storage"] = "^2.2.0";
-    }
     if (Object.keys(dependencies).length > 0) {
         await ensureDependencies(targetPath, { dependencies });
     }
 }
-async function writeExpoRouterAuthRoutes(targetPath, state) {
+async function writeExpoRouterAuthRoutes(targetPath, state, dataFetching = "None") {
     const appDir = path_1.default.join(targetPath, "app");
     const authDir = path_1.default.join(appDir, "(auth)");
     const tabsDir = path_1.default.join(appDir, "(tabs)");
     await fs_extra_1.default.ensureDir(authDir);
     await fs_extra_1.default.ensureDir(tabsDir);
-    const stateBindings = getExpoAuthStateBindings(state);
+    const stateBindings = getExpoAuthStateBindings(state, dataFetching);
     const routeFiles = getExpoAuthRouteFiles(state);
     await fs_extra_1.default.writeFile(path_1.default.join(appDir, "_layout.tsx"), stateBindings.rootLayout, "utf8");
     await fs_extra_1.default.writeFile(path_1.default.join(appDir, "index.tsx"), stateBindings.indexRoute, "utf8");
@@ -408,35 +565,87 @@ async function writeExpoRouterAuthRoutes(targetPath, state) {
     await fs_extra_1.default.writeFile(path_1.default.join(tabsDir, "_layout.tsx"), stateBindings.tabsLayout, "utf8");
     await fs_extra_1.default.writeFile(path_1.default.join(authDir, "login.tsx"), routeFiles.login, "utf8");
     await fs_extra_1.default.writeFile(path_1.default.join(authDir, "register.tsx"), routeFiles.register, "utf8");
+    await fs_extra_1.default.writeFile(path_1.default.join(appDir, "welcome.tsx"), routeFiles.welcome, "utf8");
     await fs_extra_1.default.writeFile(path_1.default.join(tabsDir, "index.tsx"), routeFiles.home, "utf8");
     await fs_extra_1.default.writeFile(path_1.default.join(tabsDir, "profile.tsx"), routeFiles.profile, "utf8");
     await fs_extra_1.default.writeFile(path_1.default.join(tabsDir, "settings.tsx"), routeFiles.settings, "utf8");
     await fs_extra_1.default.remove(path_1.default.join(targetPath, "navigation"));
     await fs_extra_1.default.remove(path_1.default.join(targetPath, "screens"));
 }
-function getExpoAuthStateBindings(state) {
+function getDataFetchingExpoImports(dataFetching) {
+    if (dataFetching === "React Query") {
+        return `import { QueryClientProvider } from "@tanstack/react-query";\nimport { queryClient } from "../services/queryClient";\n`;
+    }
+    if (dataFetching === "SWR") {
+        return `import { SWRConfig } from "swr";\n`;
+    }
+    return "";
+}
+function wrapExpoSlotWithDataFetching(inner, dataFetching) {
+    if (dataFetching === "React Query") {
+        return `<QueryClientProvider client={queryClient}>\n        ${inner}\n      </QueryClientProvider>`;
+    }
+    if (dataFetching === "SWR") {
+        return `<SWRConfig value={{ revalidateOnFocus: true, revalidateOnReconnect: true }}>\n        ${inner}\n      </SWRConfig>`;
+    }
+    return inner;
+}
+function getExpoAuthStateBindings(state, dataFetching = "None") {
+    const dfImports = getDataFetchingExpoImports(dataFetching);
     if (state === "Redux Toolkit") {
+        const slot = wrapExpoSlotWithDataFetching(`<Slot />`, dataFetching);
         return {
             rootLayout: `import React from "react";
 import { Slot } from "expo-router";
 import { Provider } from "react-redux";
-import { store } from "../store/store";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+${dfImports}import { store } from "../store/store";
 
 export default function RootLayout() {
   return (
-    <Provider store={store}>
-      <Slot />
-    </Provider>
+    <SafeAreaProvider>
+      <Provider store={store}>
+        ${slot}
+      </Provider>
+    </SafeAreaProvider>
   );
 }
 `,
-            indexRoute: `import React from "react";
+            indexRoute: `import React, { useEffect, useState } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { ActivityIndicator } from "react-native";
 import { Redirect } from "expo-router";
 import { useSelector } from "react-redux";
+import ScreenLayout from "../components/layout/ScreenLayout";
 import type { RootState } from "../store/store";
 
 export default function Index() {
   const token = useSelector((state: RootState) => state.auth.token);
+  const [isCheckingWelcome, setIsCheckingWelcome] = useState(true);
+  const [hasSeenWelcome, setHasSeenWelcome] = useState(false);
+
+  useEffect(() => {
+    const readWelcomeState = async () => {
+      try {
+        const seen = await AsyncStorage.getItem("@rnskit_has_seen_welcome");
+        setHasSeenWelcome(seen === "true");
+      } finally {
+        setIsCheckingWelcome(false);
+      }
+    };
+
+    void readWelcomeState();
+  }, []);
+
+  if (isCheckingWelcome) {
+    return (
+      <ScreenLayout centered padded={false}>
+        <ActivityIndicator />
+      </ScreenLayout>
+    );
+  }
+
+  if (!hasSeenWelcome) return <Redirect href="/welcome" />;
   return <Redirect href={token ? "/(tabs)" : "/(auth)/login"} />;
 }
 `,
@@ -478,43 +687,67 @@ export default function TabsLayout() {
         };
     }
     if (state === "Zustand") {
+        const slot = wrapExpoSlotWithDataFetching(`<Slot />`, dataFetching);
         return {
             rootLayout: `import React from "react";
 import { Slot } from "expo-router";
-
+import { SafeAreaProvider } from "react-native-safe-area-context";
+${dfImports}
 export default function RootLayout() {
-  return <Slot />;
+  return (
+    <SafeAreaProvider>
+      ${slot}
+    </SafeAreaProvider>
+  );
 }
 `,
-            indexRoute: `import React from "react";
-import { useEffect } from "react";
-import { ActivityIndicator, View } from "react-native";
+            indexRoute: `import React, { useEffect, useState } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { ActivityIndicator } from "react-native";
 import { Redirect } from "expo-router";
+import ScreenLayout from "../components/layout/ScreenLayout";
 import { useAuthStore } from "../store/authStore";
 
 export default function Index() {
   const token = useAuthStore((state) => state.token);
   const isHydrated = useAuthStore((state) => state.isHydrated);
   const hydrate = useAuthStore((state) => state.hydrate);
+  const [isCheckingWelcome, setIsCheckingWelcome] = useState(true);
+  const [hasSeenWelcome, setHasSeenWelcome] = useState(false);
 
   useEffect(() => {
     void hydrate();
   }, [hydrate]);
 
-  if (!isHydrated) {
+  useEffect(() => {
+    const readWelcomeState = async () => {
+      try {
+        const seen = await AsyncStorage.getItem("@rnskit_has_seen_welcome");
+        setHasSeenWelcome(seen === "true");
+      } finally {
+        setIsCheckingWelcome(false);
+      }
+    };
+
+    void readWelcomeState();
+  }, []);
+
+  if (!isHydrated || isCheckingWelcome) {
     return (
-      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      <ScreenLayout centered padded={false}>
         <ActivityIndicator />
-      </View>
+      </ScreenLayout>
     );
   }
 
+  if (!hasSeenWelcome) return <Redirect href="/welcome" />;
   return <Redirect href={token ? "/(tabs)" : "/(auth)/login"} />;
 }
 `,
             authLayout: `import React, { useEffect } from "react";
-import { ActivityIndicator, View } from "react-native";
+import { ActivityIndicator } from "react-native";
 import { Redirect, Stack } from "expo-router";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { useAuthStore } from "../../store/authStore";
 
 export default function AuthLayout() {
@@ -528,9 +761,9 @@ export default function AuthLayout() {
 
   if (!isHydrated) {
     return (
-      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      <ScreenLayout centered padded={false}>
         <ActivityIndicator />
-      </View>
+      </ScreenLayout>
     );
   }
 
@@ -545,8 +778,9 @@ export default function AuthLayout() {
 }
 `,
             tabsLayout: `import React, { useEffect } from "react";
-import { ActivityIndicator, View } from "react-native";
+import { ActivityIndicator } from "react-native";
 import { Redirect, Tabs } from "expo-router";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { useAuthStore } from "../../store/authStore";
 
 export default function TabsLayout() {
@@ -560,9 +794,9 @@ export default function TabsLayout() {
 
   if (!isHydrated) {
     return (
-      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      <ScreenLayout centered padded={false}>
         <ActivityIndicator />
-      </View>
+      </ScreenLayout>
     );
   }
 
@@ -579,41 +813,64 @@ export default function TabsLayout() {
 `,
         };
     }
+    const slot = wrapExpoSlotWithDataFetching(`<Slot />`, dataFetching);
     return {
         rootLayout: `import React from "react";
 import { Slot } from "expo-router";
-import { AuthProvider } from "../context/AuthContext";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+${dfImports}import { AuthProvider } from "../context/AuthContext";
 
 export default function RootLayout() {
   return (
-    <AuthProvider>
-      <Slot />
-    </AuthProvider>
+    <SafeAreaProvider>
+      <AuthProvider>
+        ${slot}
+      </AuthProvider>
+    </SafeAreaProvider>
   );
 }
 `,
-        indexRoute: `import React, { useContext } from "react";
-import { ActivityIndicator, View } from "react-native";
+        indexRoute: `import React, { useContext, useEffect, useState } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { ActivityIndicator } from "react-native";
 import { Redirect } from "expo-router";
+import ScreenLayout from "../components/layout/ScreenLayout";
 import { AuthContext } from "../context/AuthContext";
 
 export default function Index() {
   const { token, isHydrated } = useContext(AuthContext);
+  const [isCheckingWelcome, setIsCheckingWelcome] = useState(true);
+  const [hasSeenWelcome, setHasSeenWelcome] = useState(false);
 
-  if (!isHydrated) {
+  useEffect(() => {
+    const readWelcomeState = async () => {
+      try {
+        const seen = await AsyncStorage.getItem("@rnskit_has_seen_welcome");
+        setHasSeenWelcome(seen === "true");
+      } finally {
+        setIsCheckingWelcome(false);
+      }
+    };
+
+    void readWelcomeState();
+  }, []);
+
+  if (!isHydrated || isCheckingWelcome) {
     return (
-      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      <ScreenLayout centered padded={false}>
         <ActivityIndicator />
-      </View>
+      </ScreenLayout>
     );
   }
 
+  if (!hasSeenWelcome) return <Redirect href="/welcome" />;
   return <Redirect href={token ? "/(tabs)" : "/(auth)/login"} />;
 }
 `,
         authLayout: `import React, { useContext } from "react";
-import { ActivityIndicator, View } from "react-native";
+import { ActivityIndicator } from "react-native";
 import { Redirect, Stack } from "expo-router";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { AuthContext } from "../../context/AuthContext";
 
 export default function AuthLayout() {
@@ -621,9 +878,9 @@ export default function AuthLayout() {
 
   if (!isHydrated) {
     return (
-      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      <ScreenLayout centered padded={false}>
         <ActivityIndicator />
-      </View>
+      </ScreenLayout>
     );
   }
 
@@ -638,8 +895,9 @@ export default function AuthLayout() {
 }
 `,
         tabsLayout: `import React, { useContext } from "react";
-import { ActivityIndicator, View } from "react-native";
+import { ActivityIndicator } from "react-native";
 import { Redirect, Tabs } from "expo-router";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { AuthContext } from "../../context/AuthContext";
 
 export default function TabsLayout() {
@@ -647,9 +905,9 @@ export default function TabsLayout() {
 
   if (!isHydrated) {
     return (
-      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      <ScreenLayout centered padded={false}>
         <ActivityIndicator />
-      </View>
+      </ScreenLayout>
     );
   }
 
@@ -667,43 +925,784 @@ export default function TabsLayout() {
     };
 }
 function getExpoAuthRouteFiles(state) {
-    const register = `import React from "react";
-import { Text, View } from "react-native";
+    const welcomeRedux = `import React, { useRef, useState } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import {
+  FlatList,
+  Image,
+  ImageSourcePropType,
+  Pressable,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  ViewToken,
+} from "react-native";
+import { router } from "expo-router";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useSelector } from "react-redux";
+import type { RootState } from "../store/store";
+
+type Slide = {
+  id: string;
+  title: string;
+  description: string;
+  image: ImageSourcePropType;
+};
+
+const slides: Slide[] = [
+  {
+    id: "1",
+    title: "Welcome to RN Starter Kit",
+    description: "Build faster with a clean, production-ready app foundation.",
+    image: require("../assets/images/react-logo.png"),
+  },
+  {
+    id: "2",
+    title: "Structure That Scales",
+    description: "Auth, state, and API setup are organized for real-world apps.",
+    image: require("../assets/images/partial-react-logo.png"),
+  },
+  {
+    id: "3",
+    title: "Make It Yours",
+    description: "Swap this welcome flow with your own brand and product journey.",
+    image: require("../assets/images/icon.png"),
+  },
+];
+
+export default function WelcomeScreen() {
+  const token = useSelector((state: RootState) => state.auth.token);
+  const { width } = useWindowDimensions();
+  const [activeIndex, setActiveIndex] = useState(0);
+  const listRef = useRef<FlatList<Slide>>(null);
+
+  const onViewableItemsChanged = useRef(
+    ({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
+      if (viewableItems[0]?.index != null) {
+        setActiveIndex(viewableItems[0].index);
+      }
+    },
+  ).current;
+
+  const viewabilityConfig = useRef({ viewAreaCoveragePercentThreshold: 60 }).current;
+
+  const handleNext = async () => {
+    const nextIndex = activeIndex + 1;
+    if (nextIndex < slides.length) {
+      listRef.current?.scrollToIndex({ index: nextIndex, animated: true });
+      return;
+    }
+    await AsyncStorage.setItem("@rnskit_has_seen_welcome", "true");
+    router.replace(token ? "/(tabs)" : "/(auth)/login");
+  };
+
+  const isLastSlide = activeIndex === slides.length - 1;
+
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      <FlatList
+        ref={listRef}
+        data={slides}
+        horizontal
+        pagingEnabled
+        bounces={false}
+        keyExtractor={(item) => item.id}
+        showsHorizontalScrollIndicator={false}
+        renderItem={({ item }) => (
+          <View style={[styles.slide, { width }]}>
+            <Image source={item.image} style={styles.image} resizeMode="contain" />
+            <Text style={styles.title}>{item.title}</Text>
+            <Text style={styles.description}>{item.description}</Text>
+          </View>
+        )}
+        onViewableItemsChanged={onViewableItemsChanged}
+        viewabilityConfig={viewabilityConfig}
+      />
+
+      <View style={styles.footer}>
+        <View style={styles.dotsRow}>
+          {slides.map((slide, index) => (
+            <View
+              key={slide.id}
+              style={[styles.dot, index === activeIndex && styles.dotActive]}
+            />
+          ))}
+        </View>
+
+        <Pressable style={styles.button} onPress={() => void handleNext()}>
+          <Text style={styles.buttonLabel}>{isLastSlide ? "Get Started" : "Next"}</Text>
+        </Pressable>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: "#F7F7F9",
+  },
+  slide: {
+    flex: 1,
+    paddingHorizontal: 24,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  image: {
+    width: 220,
+    height: 220,
+    marginBottom: 28,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "700",
+    color: "#111827",
+    textAlign: "center",
+    marginBottom: 12,
+  },
+  description: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: "#4B5563",
+    textAlign: "center",
+    maxWidth: 320,
+  },
+  footer: {
+    paddingHorizontal: 24,
+    paddingBottom: 28,
+    gap: 20,
+  },
+  dotsRow: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 8,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 999,
+    backgroundColor: "#D1D5DB",
+  },
+  dotActive: {
+    width: 24,
+    backgroundColor: "#111827",
+  },
+  button: {
+    height: 52,
+    borderRadius: 12,
+    backgroundColor: "#111827",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  buttonLabel: {
+    color: "#FFFFFF",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});
+`;
+    const welcomeZustand = `import React, { useEffect, useRef, useState } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import {
+  ActivityIndicator,
+  FlatList,
+  Image,
+  ImageSourcePropType,
+  Pressable,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  ViewToken,
+} from "react-native";
+import { router } from "expo-router";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useAuthStore } from "../store/authStore";
+import ScreenLayout from "../components/layout/ScreenLayout";
+
+type Slide = {
+  id: string;
+  title: string;
+  description: string;
+  image: ImageSourcePropType;
+};
+
+const slides: Slide[] = [
+  {
+    id: "1",
+    title: "Welcome to RN Starter Kit",
+    description: "Build faster with a clean, production-ready app foundation.",
+    image: require("../assets/images/react-logo.png"),
+  },
+  {
+    id: "2",
+    title: "Structure That Scales",
+    description: "Auth, state, and API setup are organized for real-world apps.",
+    image: require("../assets/images/partial-react-logo.png"),
+  },
+  {
+    id: "3",
+    title: "Make It Yours",
+    description: "Swap this welcome flow with your own brand and product journey.",
+    image: require("../assets/images/icon.png"),
+  },
+];
+
+export default function WelcomeScreen() {
+  const token = useAuthStore((state) => state.token);
+  const isHydrated = useAuthStore((state) => state.isHydrated);
+  const hydrate = useAuthStore((state) => state.hydrate);
+  const { width } = useWindowDimensions();
+  const [activeIndex, setActiveIndex] = useState(0);
+  const listRef = useRef<FlatList<Slide>>(null);
+
+  useEffect(() => {
+    void hydrate();
+  }, [hydrate]);
+
+  const onViewableItemsChanged = useRef(
+    ({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
+      if (viewableItems[0]?.index != null) {
+        setActiveIndex(viewableItems[0].index);
+      }
+    },
+  ).current;
+
+  const viewabilityConfig = useRef({ viewAreaCoveragePercentThreshold: 60 }).current;
+
+  const handleNext = async () => {
+    const nextIndex = activeIndex + 1;
+    if (nextIndex < slides.length) {
+      listRef.current?.scrollToIndex({ index: nextIndex, animated: true });
+      return;
+    }
+    await AsyncStorage.setItem("@rnskit_has_seen_welcome", "true");
+    router.replace(token ? "/(tabs)" : "/(auth)/login");
+  };
+
+  if (!isHydrated) {
+    return (
+      <ScreenLayout centered padded={false}>
+        <ActivityIndicator />
+      </ScreenLayout>
+    );
+  }
+
+  const isLastSlide = activeIndex === slides.length - 1;
+
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      <FlatList
+        ref={listRef}
+        data={slides}
+        horizontal
+        pagingEnabled
+        bounces={false}
+        keyExtractor={(item) => item.id}
+        showsHorizontalScrollIndicator={false}
+        renderItem={({ item }) => (
+          <View style={[styles.slide, { width }]}>
+            <Image source={item.image} style={styles.image} resizeMode="contain" />
+            <Text style={styles.title}>{item.title}</Text>
+            <Text style={styles.description}>{item.description}</Text>
+          </View>
+        )}
+        onViewableItemsChanged={onViewableItemsChanged}
+        viewabilityConfig={viewabilityConfig}
+      />
+
+      <View style={styles.footer}>
+        <View style={styles.dotsRow}>
+          {slides.map((slide, index) => (
+            <View
+              key={slide.id}
+              style={[styles.dot, index === activeIndex && styles.dotActive]}
+            />
+          ))}
+        </View>
+
+        <Pressable style={styles.button} onPress={() => void handleNext()}>
+          <Text style={styles.buttonLabel}>{isLastSlide ? "Get Started" : "Next"}</Text>
+        </Pressable>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: "#F7F7F9",
+  },
+  slide: {
+    flex: 1,
+    paddingHorizontal: 24,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  image: {
+    width: 220,
+    height: 220,
+    marginBottom: 28,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "700",
+    color: "#111827",
+    textAlign: "center",
+    marginBottom: 12,
+  },
+  description: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: "#4B5563",
+    textAlign: "center",
+    maxWidth: 320,
+  },
+  footer: {
+    paddingHorizontal: 24,
+    paddingBottom: 28,
+    gap: 20,
+  },
+  dotsRow: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 8,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 999,
+    backgroundColor: "#D1D5DB",
+  },
+  dotActive: {
+    width: 24,
+    backgroundColor: "#111827",
+  },
+  button: {
+    height: 52,
+    borderRadius: 12,
+    backgroundColor: "#111827",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  buttonLabel: {
+    color: "#FFFFFF",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});
+`;
+    const welcomeContext = `import React, { useContext, useRef, useState } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import {
+  ActivityIndicator,
+  FlatList,
+  Image,
+  ImageSourcePropType,
+  Pressable,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  ViewToken,
+} from "react-native";
+import { router } from "expo-router";
+import { SafeAreaView } from "react-native-safe-area-context";
+import ScreenLayout from "../components/layout/ScreenLayout";
+import { AuthContext } from "../context/AuthContext";
+
+type Slide = {
+  id: string;
+  title: string;
+  description: string;
+  image: ImageSourcePropType;
+};
+
+const slides: Slide[] = [
+  {
+    id: "1",
+    title: "Welcome to RN Starter Kit",
+    description: "Build faster with a clean, production-ready app foundation.",
+    image: require("../assets/images/react-logo.png"),
+  },
+  {
+    id: "2",
+    title: "Structure That Scales",
+    description: "Auth, state, and API setup are organized for real-world apps.",
+    image: require("../assets/images/partial-react-logo.png"),
+  },
+  {
+    id: "3",
+    title: "Make It Yours",
+    description: "Swap this welcome flow with your own brand and product journey.",
+    image: require("../assets/images/icon.png"),
+  },
+];
+
+export default function WelcomeScreen() {
+  const { token, isHydrated } = useContext(AuthContext);
+  const { width } = useWindowDimensions();
+  const [activeIndex, setActiveIndex] = useState(0);
+  const listRef = useRef<FlatList<Slide>>(null);
+
+  const onViewableItemsChanged = useRef(
+    ({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
+      if (viewableItems[0]?.index != null) {
+        setActiveIndex(viewableItems[0].index);
+      }
+    },
+  ).current;
+
+  const viewabilityConfig = useRef({ viewAreaCoveragePercentThreshold: 60 }).current;
+
+  const handleNext = async () => {
+    const nextIndex = activeIndex + 1;
+    if (nextIndex < slides.length) {
+      listRef.current?.scrollToIndex({ index: nextIndex, animated: true });
+      return;
+    }
+    await AsyncStorage.setItem("@rnskit_has_seen_welcome", "true");
+    router.replace(token ? "/(tabs)" : "/(auth)/login");
+  };
+
+  if (!isHydrated) {
+    return (
+      <ScreenLayout centered padded={false}>
+        <ActivityIndicator />
+      </ScreenLayout>
+    );
+  }
+
+  const isLastSlide = activeIndex === slides.length - 1;
+
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      <FlatList
+        ref={listRef}
+        data={slides}
+        horizontal
+        pagingEnabled
+        bounces={false}
+        keyExtractor={(item) => item.id}
+        showsHorizontalScrollIndicator={false}
+        renderItem={({ item }) => (
+          <View style={[styles.slide, { width }]}>
+            <Image source={item.image} style={styles.image} resizeMode="contain" />
+            <Text style={styles.title}>{item.title}</Text>
+            <Text style={styles.description}>{item.description}</Text>
+          </View>
+        )}
+        onViewableItemsChanged={onViewableItemsChanged}
+        viewabilityConfig={viewabilityConfig}
+      />
+
+      <View style={styles.footer}>
+        <View style={styles.dotsRow}>
+          {slides.map((slide, index) => (
+            <View
+              key={slide.id}
+              style={[styles.dot, index === activeIndex && styles.dotActive]}
+            />
+          ))}
+        </View>
+
+        <Pressable style={styles.button} onPress={() => void handleNext()}>
+          <Text style={styles.buttonLabel}>{isLastSlide ? "Get Started" : "Next"}</Text>
+        </Pressable>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: "#F7F7F9",
+  },
+  slide: {
+    flex: 1,
+    paddingHorizontal: 24,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  image: {
+    width: 220,
+    height: 220,
+    marginBottom: 28,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "700",
+    color: "#111827",
+    textAlign: "center",
+    marginBottom: 12,
+  },
+  description: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: "#4B5563",
+    textAlign: "center",
+    maxWidth: 320,
+  },
+  footer: {
+    paddingHorizontal: 24,
+    paddingBottom: 28,
+    gap: 20,
+  },
+  dotsRow: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 8,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 999,
+    backgroundColor: "#D1D5DB",
+  },
+  dotActive: {
+    width: 24,
+    backgroundColor: "#111827",
+  },
+  button: {
+    height: 52,
+    borderRadius: 12,
+    backgroundColor: "#111827",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  buttonLabel: {
+    color: "#FFFFFF",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});
+`;
+    const registerRedux = `import React, { useState } from "react";
+import { Button, Text, TextInput } from "react-native";
+import ScreenLayout from "../../components/layout/ScreenLayout";
+import { useDispatch } from "react-redux";
+import { registerApi } from "../../api";
+import { login } from "../../store/authSlice";
+
+export default function RegisterScreen() {
+  const dispatch = useDispatch();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+
+  const handleRegister = async () => {
+    try {
+      setError("");
+      const token = await registerApi(email, password);
+      dispatch(login(token));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Registration failed");
+    }
+  };
+
+  return (
+    <ScreenLayout>
+      <TextInput
+        placeholder="Email"
+        value={email}
+        onChangeText={setEmail}
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        placeholderTextColor="#888"
+        style={{
+          borderWidth: 1,
+          borderColor: "#ccc",
+          borderRadius: 8,
+          paddingHorizontal: 12,
+          paddingVertical: 10,
+          color: "#111",
+          marginBottom: 12,
+        }}
+      />
+      <TextInput
+        placeholder="Password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry
+        placeholderTextColor="#888"
+        style={{
+          borderWidth: 1,
+          borderColor: "#ccc",
+          borderRadius: 8,
+          paddingHorizontal: 12,
+          paddingVertical: 10,
+          color: "#111",
+          marginBottom: 12,
+        }}
+      />
+      {!!error && <Text style={{ color: "red", marginBottom: 8 }}>{error}</Text>}
+      <Button title="Register" onPress={() => void handleRegister()} />
+    </ScreenLayout>
+  );
+}
+`;
+    const registerZustand = `import React, { useState } from "react";
+import { Button, Text, TextInput } from "react-native";
+import ScreenLayout from "../../components/layout/ScreenLayout";
+import { registerApi } from "../../api";
+import { useAuthStore } from "../../store/authStore";
 
 export default function RegisterScreen() {
+  const login = useAuthStore((state) => state.login);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+
+  const handleRegister = async () => {
+    try {
+      setError("");
+      const token = await registerApi(email, password);
+      await login(token);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Registration failed");
+    }
+  };
+
   return (
-    <View style={{ padding: 20 }}>
-      <Text>RegisterScreen</Text>
-    </View>
+    <ScreenLayout>
+      <TextInput
+        placeholder="Email"
+        value={email}
+        onChangeText={setEmail}
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        placeholderTextColor="#888"
+        style={{
+          borderWidth: 1,
+          borderColor: "#ccc",
+          borderRadius: 8,
+          paddingHorizontal: 12,
+          paddingVertical: 10,
+          color: "#111",
+          marginBottom: 12,
+        }}
+      />
+      <TextInput
+        placeholder="Password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry
+        placeholderTextColor="#888"
+        style={{
+          borderWidth: 1,
+          borderColor: "#ccc",
+          borderRadius: 8,
+          paddingHorizontal: 12,
+          paddingVertical: 10,
+          color: "#111",
+          marginBottom: 12,
+        }}
+      />
+      {!!error && <Text style={{ color: "red", marginBottom: 8 }}>{error}</Text>}
+      <Button title="Register" onPress={() => void handleRegister()} />
+    </ScreenLayout>
+  );
+}
+`;
+    const registerContext = `import React, { useContext, useState } from "react";
+import { Button, Text, TextInput } from "react-native";
+import ScreenLayout from "../../components/layout/ScreenLayout";
+import { registerApi } from "../../api";
+import { AuthContext } from "../../context/AuthContext";
+
+export default function RegisterScreen() {
+  const { login } = useContext(AuthContext);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+
+  const handleRegister = async () => {
+    try {
+      setError("");
+      const token = await registerApi(email, password);
+      await login(token);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Registration failed");
+    }
+  };
+
+  return (
+    <ScreenLayout>
+      <TextInput
+        placeholder="Email"
+        value={email}
+        onChangeText={setEmail}
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        placeholderTextColor="#888"
+        style={{
+          borderWidth: 1,
+          borderColor: "#ccc",
+          borderRadius: 8,
+          paddingHorizontal: 12,
+          paddingVertical: 10,
+          color: "#111",
+          marginBottom: 12,
+        }}
+      />
+      <TextInput
+        placeholder="Password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry
+        placeholderTextColor="#888"
+        style={{
+          borderWidth: 1,
+          borderColor: "#ccc",
+          borderRadius: 8,
+          paddingHorizontal: 12,
+          paddingVertical: 10,
+          color: "#111",
+          marginBottom: 12,
+        }}
+      />
+      {!!error && <Text style={{ color: "red", marginBottom: 8 }}>{error}</Text>}
+      <Button title="Register" onPress={() => void handleRegister()} />
+    </ScreenLayout>
   );
 }
 `;
     const profile = `import React from "react";
-import { Text, View } from "react-native";
+import { Text } from "react-native";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 
 export default function ProfileScreen() {
   return (
-    <View style={{ padding: 20 }}>
+    <ScreenLayout>
       <Text>ProfileScreen</Text>
-    </View>
+    </ScreenLayout>
   );
 }
 `;
     const settings = `import React from "react";
-import { Text, View } from "react-native";
+import { Text } from "react-native";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 
 export default function SettingsScreen() {
   return (
-    <View style={{ padding: 20 }}>
+    <ScreenLayout>
       <Text>SettingsScreen</Text>
-    </View>
+    </ScreenLayout>
   );
 }
 `;
     if (state === "Redux Toolkit") {
         return {
+            welcome: welcomeRedux,
             login: `import React, { useState } from "react";
-import { Button, TextInput, View } from "react-native";
+import { Button, Text, TextInput } from "react-native";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { useDispatch } from "react-redux";
 import { loginApi } from "../../api";
 import { login } from "../../store/authSlice";
@@ -712,29 +1711,64 @@ export default function LoginScreen() {
   const dispatch = useDispatch();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
 
   const handleLogin = async () => {
-    const token = await loginApi(email, password);
-    dispatch(login(token));
+    try {
+      setError("");
+      const token = await loginApi(email, password);
+      dispatch(login(token));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    }
   };
 
   return (
-    <View style={{ padding: 20 }}>
-      <TextInput placeholder="Email" value={email} onChangeText={setEmail} />
+    <ScreenLayout>
+      <TextInput
+        placeholder="Email"
+        value={email}
+        onChangeText={setEmail}
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        placeholderTextColor="#888"
+        style={{
+          borderWidth: 1,
+          borderColor: "#ccc",
+          borderRadius: 8,
+          paddingHorizontal: 12,
+          paddingVertical: 10,
+          color: "#111",
+          marginBottom: 12,
+        }}
+      />
       <TextInput
         placeholder="Password"
         value={password}
         onChangeText={setPassword}
         secureTextEntry
+        placeholderTextColor="#888"
+        style={{
+          borderWidth: 1,
+          borderColor: "#ccc",
+          borderRadius: 8,
+          paddingHorizontal: 12,
+          paddingVertical: 10,
+          color: "#111",
+          marginBottom: 12,
+        }}
       />
+      {!!error && <Text style={{ color: "red", marginBottom: 8 }}>{error}</Text>}
       <Button title="Login" onPress={() => void handleLogin()} />
-    </View>
+    </ScreenLayout>
   );
 }
 `,
-            register,
+            register: registerRedux,
             home: `import React from "react";
-import { Button, Text, View } from "react-native";
+import { Button, Text } from "react-native";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { useDispatch } from "react-redux";
 import { logout } from "../../store/authSlice";
 
@@ -742,10 +1776,10 @@ export default function HomeScreen() {
   const dispatch = useDispatch();
 
   return (
-    <View style={{ padding: 20 }}>
+    <ScreenLayout>
       <Text>Welcome Home!</Text>
       <Button title="Logout" onPress={() => dispatch(logout())} />
-    </View>
+    </ScreenLayout>
   );
 }
 `,
@@ -755,8 +1789,10 @@ export default function HomeScreen() {
     }
     if (state === "Zustand") {
         return {
+            welcome: welcomeZustand,
             login: `import React, { useState } from "react";
-import { Button, TextInput, View } from "react-native";
+import { Button, Text, TextInput } from "react-native";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { loginApi } from "../../api";
 import { useAuthStore } from "../../store/authStore";
 
@@ -764,39 +1800,74 @@ export default function LoginScreen() {
   const login = useAuthStore((state) => state.login);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
 
   const handleLogin = async () => {
-    const token = await loginApi(email, password);
-    await login(token);
+    try {
+      setError("");
+      const token = await loginApi(email, password);
+      await login(token);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    }
   };
 
   return (
-    <View style={{ padding: 20 }}>
-      <TextInput placeholder="Email" value={email} onChangeText={setEmail} />
+    <ScreenLayout>
+      <TextInput
+        placeholder="Email"
+        value={email}
+        onChangeText={setEmail}
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        placeholderTextColor="#888"
+        style={{
+          borderWidth: 1,
+          borderColor: "#ccc",
+          borderRadius: 8,
+          paddingHorizontal: 12,
+          paddingVertical: 10,
+          color: "#111",
+          marginBottom: 12,
+        }}
+      />
       <TextInput
         placeholder="Password"
         value={password}
         onChangeText={setPassword}
         secureTextEntry
+        placeholderTextColor="#888"
+        style={{
+          borderWidth: 1,
+          borderColor: "#ccc",
+          borderRadius: 8,
+          paddingHorizontal: 12,
+          paddingVertical: 10,
+          color: "#111",
+          marginBottom: 12,
+        }}
       />
+      {!!error && <Text style={{ color: "red", marginBottom: 8 }}>{error}</Text>}
       <Button title="Login" onPress={() => void handleLogin()} />
-    </View>
+    </ScreenLayout>
   );
 }
 `,
-            register,
+            register: registerZustand,
             home: `import React from "react";
-import { Button, Text, View } from "react-native";
+import { Button, Text } from "react-native";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { useAuthStore } from "../../store/authStore";
 
 export default function HomeScreen() {
   const logout = useAuthStore((state) => state.logout);
 
   return (
-    <View style={{ padding: 20 }}>
+    <ScreenLayout>
       <Text>Welcome Home!</Text>
       <Button title="Logout" onPress={() => void logout()} />
-    </View>
+    </ScreenLayout>
   );
 }
 `,
@@ -805,8 +1876,10 @@ export default function HomeScreen() {
         };
     }
     return {
+        welcome: welcomeContext,
         login: `import React, { useContext, useState } from "react";
-import { Button, TextInput, View } from "react-native";
+import { Button, Text, TextInput } from "react-native";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { loginApi } from "../../api";
 import { AuthContext } from "../../context/AuthContext";
 
@@ -814,39 +1887,74 @@ export default function LoginScreen() {
   const { login } = useContext(AuthContext);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
 
   const handleLogin = async () => {
-    const token = await loginApi(email, password);
-    await login(token);
+    try {
+      setError("");
+      const token = await loginApi(email, password);
+      await login(token);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    }
   };
 
   return (
-    <View style={{ padding: 20 }}>
-      <TextInput placeholder="Email" value={email} onChangeText={setEmail} />
+    <ScreenLayout>
+      <TextInput
+        placeholder="Email"
+        value={email}
+        onChangeText={setEmail}
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        placeholderTextColor="#888"
+        style={{
+          borderWidth: 1,
+          borderColor: "#ccc",
+          borderRadius: 8,
+          paddingHorizontal: 12,
+          paddingVertical: 10,
+          color: "#111",
+          marginBottom: 12,
+        }}
+      />
       <TextInput
         placeholder="Password"
         value={password}
         onChangeText={setPassword}
         secureTextEntry
+        placeholderTextColor="#888"
+        style={{
+          borderWidth: 1,
+          borderColor: "#ccc",
+          borderRadius: 8,
+          paddingHorizontal: 12,
+          paddingVertical: 10,
+          color: "#111",
+          marginBottom: 12,
+        }}
       />
+      {!!error && <Text style={{ color: "red", marginBottom: 8 }}>{error}</Text>}
       <Button title="Login" onPress={() => void handleLogin()} />
-    </View>
+    </ScreenLayout>
   );
 }
 `,
-        register,
+        register: registerContext,
         home: `import React, { useContext } from "react";
-import { Button, Text, View } from "react-native";
+import { Button, Text } from "react-native";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { AuthContext } from "../../context/AuthContext";
 
 export default function HomeScreen() {
   const { logout } = useContext(AuthContext);
 
   return (
-    <View style={{ padding: 20 }}>
+    <ScreenLayout>
       <Text>Welcome Home!</Text>
       <Button title="Logout" onPress={() => void logout()} />
-    </View>
+    </ScreenLayout>
   );
 }
 `,
@@ -854,49 +1962,74 @@ export default function HomeScreen() {
         settings,
     };
 }
-async function writeAuthAppShell(targetPath, state) {
+function getDataFetchingCliImports(dataFetching) {
+    if (dataFetching === "React Query") {
+        return `import { QueryClientProvider } from "@tanstack/react-query";\nimport { queryClient } from "./services/queryClient";\n`;
+    }
+    if (dataFetching === "SWR") {
+        return `import { SWRConfig } from "swr";\n`;
+    }
+    return "";
+}
+function wrapCliNavWithDataFetching(inner, dataFetching) {
+    if (dataFetching === "React Query") {
+        return `<QueryClientProvider client={queryClient}>\n        ${inner}\n      </QueryClientProvider>`;
+    }
+    if (dataFetching === "SWR") {
+        return `<SWRConfig value={{ revalidateOnFocus: true, revalidateOnReconnect: true }}>\n        ${inner}\n      </SWRConfig>`;
+    }
+    return inner;
+}
+async function writeAuthAppShell(targetPath, state, dataFetching = "None") {
     const appPath = path_1.default.join(targetPath, "App.tsx");
+    const dfImports = getDataFetchingCliImports(dataFetching);
+    const contextInner = wrapCliNavWithDataFetching(`<NavigationContainer>\n          <ProtectedStack />\n        </NavigationContainer>`, dataFetching);
+    const reduxInner = wrapCliNavWithDataFetching(`<NavigationContainer>\n          <ProtectedStack />\n        </NavigationContainer>`, dataFetching);
+    const zustandInner = wrapCliNavWithDataFetching(`<NavigationContainer>\n        <ProtectedStack />\n      </NavigationContainer>`, dataFetching);
     const byState = {
         "Context API": `import React from "react";
 import { NavigationContainer } from "@react-navigation/native";
-import { AuthProvider } from "./context/AuthContext";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+${dfImports}import { AuthProvider } from "./context/AuthContext";
 import ProtectedStack from "./navigation/ProtectedStack";
 
 export default function App() {
   return (
-    <AuthProvider>
-      <NavigationContainer>
-        <ProtectedStack />
-      </NavigationContainer>
-    </AuthProvider>
+    <SafeAreaProvider>
+      <AuthProvider>
+        ${contextInner}
+      </AuthProvider>
+    </SafeAreaProvider>
   );
 }
 `,
         "Redux Toolkit": `import React from "react";
 import { NavigationContainer } from "@react-navigation/native";
 import { Provider } from "react-redux";
-import ProtectedStack from "./navigation/ProtectedStack";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+${dfImports}import ProtectedStack from "./navigation/ProtectedStack";
 import { store } from "./store/store";
 
 export default function App() {
   return (
-    <Provider store={store}>
-      <NavigationContainer>
-        <ProtectedStack />
-      </NavigationContainer>
-    </Provider>
+    <SafeAreaProvider>
+      <Provider store={store}>
+        ${reduxInner}
+      </Provider>
+    </SafeAreaProvider>
   );
 }
 `,
         Zustand: `import React from "react";
 import { NavigationContainer } from "@react-navigation/native";
-import ProtectedStack from "./navigation/ProtectedStack";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+${dfImports}import ProtectedStack from "./navigation/ProtectedStack";
 
 export default function App() {
   return (
-    <NavigationContainer>
-      <ProtectedStack />
-    </NavigationContainer>
+    <SafeAreaProvider>
+      ${zustandInner}
+    </SafeAreaProvider>
   );
 }
 `,
@@ -915,7 +2048,7 @@ async function configureTsconfigAlias(targetPath, absoluteImports) {
     if (absoluteImports) {
         tsconfig.compilerOptions.baseUrl = ".";
         tsconfig.compilerOptions.paths = tsconfig.compilerOptions.paths || {};
-        tsconfig.compilerOptions.paths["@/*"] = ["./*"];
+        tsconfig.compilerOptions.paths["@/*"] = ["./src/*"];
     }
     else if (tsconfig.compilerOptions.paths) {
         delete tsconfig.compilerOptions.paths["@/*"];
@@ -933,8 +2066,10 @@ async function writeCliBabelConfig(targetPath, options) {
     if (options.useDotenv)
         plugins.push("'module:react-native-dotenv'");
     if (options.useAbsoluteImports) {
-        plugins.push("['module-resolver', { root: ['./'], alias: { '@': './' } }]");
+        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");
@@ -966,12 +2101,692 @@ 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))) {
         await fs_extra_1.default.writeFile(filePath, content, "utf8");
     }
 }
+async function configureNavigationTypes(targetPath, options) {
+    if (options.platform !== "React Native CLI" || !options.auth)
+        return;
+    await writeIfMissing(path_1.default.join(targetPath, "types/navigation.ts"), `import type { NativeStackScreenProps } from "@react-navigation/native-stack";
+import type { BottomTabScreenProps } from "@react-navigation/bottom-tabs";
+import type { CompositeScreenProps } from "@react-navigation/native";
+
+export type AuthStackParamList = {
+  Login: undefined;
+  Register: undefined;
+};
+
+export type MainTabParamList = {
+  Home: undefined;
+  Profile: undefined;
+  Settings: undefined;
+};
+
+export type AuthStackScreenProps<T extends keyof AuthStackParamList> =
+  NativeStackScreenProps<AuthStackParamList, T>;
+
+export type MainTabScreenProps<T extends keyof MainTabParamList> =
+  CompositeScreenProps<
+    BottomTabScreenProps<MainTabParamList, T>,
+    NativeStackScreenProps<AuthStackParamList>
+  >;
+`);
+}
+async function configureTheme(targetPath) {
+    await writeIfMissing(path_1.default.join(targetPath, "theme/colors.ts"), `export const colors = {
+  primary: "#111827",
+  secondary: "#6B7280",
+  background: "#F7F7F9",
+  surface: "#FFFFFF",
+  error: "#EF4444",
+  success: "#10B981",
+  warning: "#F59E0B",
+  text: {
+    primary: "#111827",
+    secondary: "#4B5563",
+    disabled: "#9CA3AF",
+    inverse: "#FFFFFF",
+  },
+  border: "#E5E7EB",
+};
+
+export type AppColors = typeof colors;
+`);
+    await writeIfMissing(path_1.default.join(targetPath, "theme/spacing.ts"), `export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
+} as const;
+
+export type AppSpacing = typeof spacing;
+`);
+    await writeIfMissing(path_1.default.join(targetPath, "theme/typography.ts"), `import { StyleSheet } from "react-native";
+
+export const typography = StyleSheet.create({
+  h1: { fontSize: 32, fontWeight: "700", lineHeight: 40 },
+  h2: { fontSize: 24, fontWeight: "700", lineHeight: 32 },
+  h3: { fontSize: 20, fontWeight: "600", lineHeight: 28 },
+  body: { fontSize: 16, fontWeight: "400", lineHeight: 24 },
+  bodySmall: { fontSize: 14, fontWeight: "400", lineHeight: 20 },
+  caption: { fontSize: 12, fontWeight: "400", lineHeight: 16 },
+  label: { fontSize: 14, fontWeight: "600", lineHeight: 20 },
+});
+`);
+    await writeIfMissing(path_1.default.join(targetPath, "theme/index.ts"), `export { colors } from "./colors";
+export { spacing } from "./spacing";
+export { typography } from "./typography";
+export type { AppColors } from "./colors";
+export type { AppSpacing } from "./spacing";
+`);
+}
+async function configureErrorBoundary(targetPath) {
+    await writeIfMissing(path_1.default.join(targetPath, "components/ErrorBoundary.tsx"), `import React, { Component, type ReactNode } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+
+type Props = {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onReset?: () => void;
+};
+
+type State = {
+  hasError: boolean;
+  error: Error | null;
+};
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: { componentStack: string }) {
+    console.error("ErrorBoundary caught:", error, info.componentStack);
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null });
+    this.props.onReset?.();
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+      return (
+        <View style={styles.container}>
+          <Text style={styles.title}>Something went wrong</Text>
+          <Text style={styles.message}>{this.state.error?.message}</Text>
+          <Pressable style={styles.button} onPress={this.handleReset}>
+            <Text style={styles.buttonLabel}>Try again</Text>
+          </Pressable>
+        </View>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: "center", justifyContent: "center", padding: 24 },
+  title: { fontSize: 20, fontWeight: "700", color: "#111827", marginBottom: 8 },
+  message: { fontSize: 14, color: "#6B7280", textAlign: "center", marginBottom: 24 },
+  button: { paddingHorizontal: 24, paddingVertical: 12, backgroundColor: "#111827", borderRadius: 8 },
+  buttonLabel: { color: "#FFFFFF", fontSize: 14, fontWeight: "600" },
+});
+`);
+}
+async function configureTesting(targetPath) {
+    // Pin react-test-renderer to the same React version already in the project
+    // to avoid ERESOLVE peer dep conflicts (react-test-renderer requires exact react match)
+    const pkgJsonPath = path_1.default.join(targetPath, "package.json");
+    let reactVersion = "19.0.0";
+    if (await fs_extra_1.default.pathExists(pkgJsonPath)) {
+        const pkg = await fs_extra_1.default.readJson(pkgJsonPath);
+        reactVersion =
+            pkg.dependencies?.react ?? pkg.devDependencies?.react ?? "19.0.0";
+        // Strip any semver range prefix so the pin is exact
+        reactVersion = reactVersion.replace(/^[\^~]/, "");
+    }
+    await ensureDependencies(targetPath, {
+        devDependencies: {
+            "@testing-library/react-native": "^13.2.0",
+            "@testing-library/jest-native": "^5.4.3",
+            "react-test-renderer": reactVersion,
+        },
+    });
+    // Wire @testing-library into jest.config.js so matchers like toBeVisible() work
+    const jestConfigPath = path_1.default.join(targetPath, "jest.config.js");
+    if (await fs_extra_1.default.pathExists(jestConfigPath)) {
+        const content = await fs_extra_1.default.readFile(jestConfigPath, "utf8");
+        if (!content.includes("setupFilesAfterEnv")) {
+            await fs_extra_1.default.writeFile(jestConfigPath, `module.exports = {
+  preset: 'react-native',
+  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(react-native|@react-native|@react-navigation|react-native-reanimated)/)',
+  ],
+};\n`, "utf8");
+        }
+    }
+}
+// ---------------------------------------------------------------------------
+// NativeWind (Tailwind CSS for React Native)
+// ---------------------------------------------------------------------------
+async function configureNativeWind(targetPath, platform) {
+    // 1. Dependencies — matches official NativeWind v4 docs for each platform
+    await ensureDependencies(targetPath, {
+        dependencies: {
+            nativewind: "^4.1.23",
+            "react-native-reanimated": "^3.16.7",
+            "react-native-safe-area-context": "^4.14.1",
+        },
+        devDependencies: {
+            "tailwindcss": "^3.4.17",
+            "prettier-plugin-tailwindcss": "^0.5.11",
+            ...(platform === "Expo" ? { "babel-preset-expo": "^12.0.10" } : {}),
+        },
+    });
+    // 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}", "./components/**/*.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"]`;
+    await writeIfMissing(path_1.default.join(targetPath, "tailwind.config.js"), `/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ${contentGlobs},
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+`);
+    // 3. global.css
+    await writeIfMissing(path_1.default.join(targetPath, "global.css"), `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n`);
+    const metroPath = path_1.default.join(targetPath, "metro.config.js");
+    if (platform === "Expo") {
+        // --- Expo setup (official docs) ---
+        // metro.config.js
+        await fs_extra_1.default.writeFile(metroPath, `const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withNativeWind(config, { input: "./global.css" });
+`, "utf8");
+        // babel.config.js — jsxImportSource + nativewind/babel preset
+        await fs_extra_1.default.writeFile(path_1.default.join(targetPath, "babel.config.js"), `module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
+  };
+};
+`, "utf8");
+        // app.json — enable Metro web bundler
+        const appJsonPath = path_1.default.join(targetPath, "app.json");
+        if (await fs_extra_1.default.pathExists(appJsonPath)) {
+            const appJson = await fs_extra_1.default.readJson(appJsonPath);
+            appJson.expo = appJson.expo || {};
+            appJson.expo.web = { ...(appJson.expo.web || {}), bundler: "metro" };
+            await fs_extra_1.default.writeJson(appJsonPath, appJson, { spaces: 2 });
+        }
+        // Import global.css in 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 {
+        // --- React Native CLI setup (official docs) ---
+        // metro.config.js
+        await fs_extra_1.default.writeFile(metroPath, `const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
+const { withNativeWind } = require("nativewind/metro");
+
+const config = mergeConfig(getDefaultConfig(__dirname), {
+  /* your config */
+});
+
+module.exports = withNativeWind(config, { input: "./global.css" });
+`, "utf8");
+        // babel.config.js — append nativewind/babel as a preset
+        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")) {
+                // Add as a preset alongside the existing @react-native/babel-preset
+                babelContent = babelContent.replace(/presets:\s*\[([^\]]*)\]/, (match, inner) => match.replace(inner, `${inner.trimEnd()}, 'nativewind/babel'`));
+                if (!babelContent.includes("nativewind/babel")) {
+                    babelContent = babelContent.replace(/module\.exports\s*=\s*\{/, `module.exports = {\n  presets: ['nativewind/babel'],`);
+                }
+                await fs_extra_1.default.writeFile(babelPath, babelContent, "utf8");
+            }
+        }
+        // Import global.css in 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. TypeScript: create nativewind-env.d.ts (official recommended approach)
+    await writeIfMissing(path_1.default.join(targetPath, "nativewind-env.d.ts"), `/// <reference types="nativewind/types" />\n`);
+    // 5. Overwrite home.tsx with a NativeWind version so users see className in use immediately
+    if (platform === "Expo") {
+        const homePath = path_1.default.join(targetPath, "app", "home.tsx");
+        const projectName = path_1.default.basename(targetPath);
+        await fs_extra_1.default.writeFile(homePath, `import React from "react";
+import { Text, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+export default function HomeScreen() {
+  return (
+    <SafeAreaView className="flex-1 bg-gray-50">
+      <View className="flex-1 items-center justify-center px-6">
+        <Text className="text-3xl font-bold text-gray-900 mb-2">${projectName}</Text>
+        <Text className="text-base text-gray-500">Your app starts here.</Text>
+      </View>
+    </SafeAreaView>
+  );
+}
+`, "utf8");
+    }
+    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)))
+        return;
+    // Resolve the CLI's own package.json regardless of cwd
+    const cliPkgCandidates = [
+        path_1.default.resolve(__dirname, "../../../package.json"), // dist/src/generators -> root
+        path_1.default.resolve(__dirname, "../../package.json"), // ts-node: src/generators -> root
+        path_1.default.resolve(process.cwd(), "package.json"), // fallback
+    ];
+    let cliVersion = "unknown";
+    for (const candidate of cliPkgCandidates) {
+        if (await fs_extra_1.default.pathExists(candidate)) {
+            const cliPkg = await fs_extra_1.default.readJson(candidate);
+            if (cliPkg.name?.includes("rnstarterkit")) {
+                cliVersion = cliPkg.version ?? "unknown";
+                break;
+            }
+        }
+    }
+    const projectPkg = await fs_extra_1.default.readJson(packageJsonPath);
+    // Save full config so `generate` subcommand can read project context
+    projectPkg.rnstarterkitConfig = {
+        version: cliVersion,
+        platform: options.platform,
+        state: options.state,
+        auth: options.auth,
+        dataFetching: options.dataFetching,
+        storage: options.storage,
+        apiClient: options.apiClient,
+        sentry: options.sentry,
+        i18n: options.i18n,
+        maestro: options.maestro,
+        nativewind: options.nativewind,
+    };
+    await fs_extra_1.default.writeJson(packageJsonPath, projectPkg, { spaces: 2 });
+}
+async function configureVSCode(targetPath) {
+    await writeIfMissing(path_1.default.join(targetPath, ".vscode", "extensions.json"), JSON.stringify({
+        recommendations: [
+            "dbaeumer.vscode-eslint",
+            "esbenp.prettier-vscode",
+            "msjsdiag.vscode-react-native",
+            "orta.vscode-jest",
+            "pflannery.vscode-versionlens",
+        ],
+    }, null, 2) + "\n");
+    await writeIfMissing(path_1.default.join(targetPath, ".vscode", "settings.json"), JSON.stringify({
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.codeActionsOnSave": {
+            "source.fixAll.eslint": "explicit",
+        },
+        "typescript.preferences.importModuleSpecifier": "relative",
+        "typescript.tsdk": "node_modules/typescript/lib",
+        "emmet.includeLanguages": { typescript: "javascript" },
+        "files.exclude": {
+            "**/.git": true,
+            "**/node_modules": true,
+            "ios/Pods": true,
+            "android/.gradle": true,
+        },
+    }, null, 2) + "\n");
+}
+async function configureSentry(targetPath, platform) {
+    await ensureDependencies(targetPath, {
+        dependencies: { "@sentry/react-native": "^6.4.0" },
+    });
+    // Write platform-aware sentry.ts — DSN is read from env, never hardcoded
+    const isExpo = platform === "Expo";
+    const dsnVar = isExpo ? "process.env.EXPO_PUBLIC_SENTRY_DSN" : "Config.SENTRY_DSN";
+    const dsnImport = isExpo
+        ? ""
+        : `import Config from 'react-native-config';\n`;
+    const sentryContent = `${dsnImport}import * as Sentry from '@sentry/react-native';
+
+export function initSentry() {
+  const dsn = ${dsnVar};
+  if (!dsn) {
+    console.warn('[Sentry] DSN not set. Add ${isExpo ? "EXPO_PUBLIC_SENTRY_DSN" : "SENTRY_DSN"} to your .env file.');
+    return;
+  }
+  Sentry.init({
+    dsn,
+    tracesSampleRate: 1.0,
+    debug: __DEV__,
+    attachStacktrace: true,
+    environment: __DEV__ ? 'development' : 'production',
+  });
+}
+
+/** Manually capture an exception (e.g. in a catch block) */
+export function captureException(error: unknown) {
+  Sentry.captureException(error);
+}
+
+/** Add a breadcrumb for tracing user flows */
+export function addBreadcrumb(message: string, category = 'app') {
+  Sentry.addBreadcrumb({ message, category });
+}
+`;
+    await writeIfMissing(path_1.default.join(targetPath, "src", "utils", "sentry.ts"), sentryContent);
+    // Add SENTRY_DSN to .env.example so devs know where to put it
+    const envExamplePath = path_1.default.join(targetPath, ".env.example");
+    if (await fs_extra_1.default.pathExists(envExamplePath)) {
+        const envContent = await fs_extra_1.default.readFile(envExamplePath, "utf8");
+        const sentryKey = isExpo ? "EXPO_PUBLIC_SENTRY_DSN" : "SENTRY_DSN";
+        if (!envContent.includes(sentryKey)) {
+            await fs_extra_1.default.appendFile(envExamplePath, `\n# Sentry — get your DSN from https://sentry.io → Project Settings → Client Keys\n${sentryKey}=\n`);
+        }
+    }
+    // Inject initSentry into app entry point
+    const entryFile = isExpo
+        ? path_1.default.join(targetPath, "app", "_layout.tsx")
+        : path_1.default.join(targetPath, "App.tsx");
+    if (await fs_extra_1.default.pathExists(entryFile)) {
+        let content = await fs_extra_1.default.readFile(entryFile, "utf8");
+        if (!content.includes("initSentry")) {
+            const sentryImportPath = isExpo ? '../src/utils/sentry' : './src/utils/sentry';
+            content = content.replace(/^(import .+\n)+/m, (match) => `${match}import { initSentry } from '${sentryImportPath}';\n`);
+            content = content.replace(/(export default|function )/, `initSentry();\n\n$1`);
+            await fs_extra_1.default.writeFile(entryFile, content, "utf8");
+        }
+    }
+    console.log(`➕ Sentry configured. Add your DSN to .env:\n   ${isExpo ? "EXPO_PUBLIC_SENTRY_DSN" : "SENTRY_DSN"}=https://...@sentry.io/...`);
+}
+async function configureI18n(targetPath, platform) {
+    const isExpo = platform === "Expo";
+    // Copy locale files (JSON only — platform-agnostic)
+    await copyOptionalModule("i18n", targetPath);
+    // Write platform-specific i18n.ts — Expo uses expo-localization (no native
+    // linking), RN CLI uses react-native-localize (requires native module)
+    const i18nContent = isExpo
+        ? `import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import * as Localization from 'expo-localization';
+
+import en from './locales/en.json';
+import es from './locales/es.json';
+
+const resources = {
+  en: { translation: en },
+  es: { translation: es },
+};
+
+const fallbackLocale = 'en';
+const bestMatch = Localization.getLocales()[0]?.languageCode ?? fallbackLocale;
+
+void i18n
+  .use(initReactI18next)
+  .init({
+    resources,
+    lng: bestMatch,
+    fallbackLng: fallbackLocale,
+    interpolation: { escapeValue: false },
+    compatibilityJSON: 'v4',
+  });
+
+export default i18n;
+`
+        : `import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import * as RNLocalize from 'react-native-localize';
+
+import en from './locales/en.json';
+import es from './locales/es.json';
+
+const resources = {
+  en: { translation: en },
+  es: { translation: es },
+};
+
+const fallbackLocale = 'en';
+const bestMatch = RNLocalize.getLocales()[0]?.languageCode ?? fallbackLocale;
+
+void i18n
+  .use(initReactI18next)
+  .init({
+    resources,
+    lng: bestMatch,
+    fallbackLng: fallbackLocale,
+    interpolation: { escapeValue: false },
+    compatibilityJSON: 'v4',
+  });
+
+export default i18n;
+`;
+    // Overwrite the template's generic i18n.ts with the platform-correct version
+    await fs_extra_1.default.writeFile(path_1.default.join(targetPath, "src", "i18n", "i18n.ts"), i18nContent, "utf8");
+    await ensureDependencies(targetPath, {
+        dependencies: isExpo
+            ? {
+                i18next: "^24.2.0",
+                "react-i18next": "^15.4.0",
+                "expo-localization": "^16.0.0",
+            }
+            : {
+                i18next: "^24.2.0",
+                "react-i18next": "^15.4.0",
+                "react-native-localize": "^3.4.0",
+            },
+    });
+    // Inject i18n initialisation import into app entry
+    const entryFile = isExpo
+        ? path_1.default.join(targetPath, "app", "_layout.tsx")
+        : path_1.default.join(targetPath, "App.tsx");
+    if (await fs_extra_1.default.pathExists(entryFile)) {
+        let content = await fs_extra_1.default.readFile(entryFile, "utf8");
+        if (!content.includes("i18n/i18n")) {
+            // Import path differs by platform
+            const importPath = isExpo ? "../src/i18n/i18n" : "./src/i18n/i18n";
+            content = `import '${importPath}';\n${content}`;
+            await fs_extra_1.default.writeFile(entryFile, content, "utf8");
+        }
+    }
+}
+async function configureMaestro(targetPath, options) {
+    await copyOptionalModule(options.auth ? "maestro-auth" : "maestro", targetPath);
+    // Extend CI workflow with a maestro job if CI was also selected
+    if (options.ci) {
+        const ciPath = path_1.default.join(targetPath, ".github", "workflows", "ci.yml");
+        if (await fs_extra_1.default.pathExists(ciPath)) {
+            const content = await fs_extra_1.default.readFile(ciPath, "utf8");
+            if (!content.includes("maestro")) {
+                await fs_extra_1.default.appendFile(ciPath, `
+  e2e:
+    name: E2E (Maestro)
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - run: npm install
+      - name: Install Maestro
+        run: curl -Ls "https://get.maestro.mobile.dev" | bash
+      - run: maestro test .maestro/flows/
+`);
+            }
+        }
+    }
+}
+async function configureEnv(targetPath, platform) {
+    // Always create .env.example so devs know where to put secrets
+    await writeIfMissing(path_1.default.join(targetPath, ".env.example"), `# Environment variables — copy to .env and fill in values
+# Never commit .env to source control
+
+API_URL=https://api.example.com
+APP_ENV=development
+`);
+    // Ensure .env is gitignored
+    const gitignorePath = path_1.default.join(targetPath, ".gitignore");
+    if (await fs_extra_1.default.pathExists(gitignorePath)) {
+        const content = await fs_extra_1.default.readFile(gitignorePath, "utf8");
+        if (!content.includes(".env")) {
+            await fs_extra_1.default.appendFile(gitignorePath, "\n# Environment variables\n.env\n");
+        }
+    }
+    if (platform === "React Native CLI") {
+        // react-native-config: reads .env and exposes via Config.*
+        await ensureDependencies(targetPath, {
+            dependencies: { "react-native-config": "^1.5.1" },
+        });
+        await writeIfMissing(path_1.default.join(targetPath, "src", "config", "env.ts"), `import Config from 'react-native-config';
+
+export const ENV = {
+  API_URL: Config.API_URL ?? 'https://api.example.com',
+  APP_ENV: Config.APP_ENV ?? 'development',
+} as const;
+`);
+    }
+    else {
+        // Expo: use expo-constants / process.env (works with babel inline transform)
+        await writeIfMissing(path_1.default.join(targetPath, "src", "config", "env.ts"), `// Expo exposes env vars via process.env (set in app.config.js extra field)
+// or via babel-plugin-transform-inline-environment-variables
+
+export const ENV = {
+  API_URL: process.env.EXPO_PUBLIC_API_URL ?? 'https://api.example.com',
+  APP_ENV: process.env.EXPO_PUBLIC_APP_ENV ?? 'development',
+} as const;
+`);
+    }
+}
+async function configureHusky(targetPath) {
+    await ensureDependencies(targetPath, {
+        devDependencies: {
+            husky: "^9.1.0",
+            "lint-staged": "^15.2.0",
+        },
+    });
+    const packageJsonPath = path_1.default.join(targetPath, "package.json");
+    if (await fs_extra_1.default.pathExists(packageJsonPath)) {
+        const packageJson = await fs_extra_1.default.readJson(packageJsonPath);
+        packageJson.scripts = packageJson.scripts || {};
+        if (!packageJson.scripts.prepare) {
+            packageJson.scripts.prepare = "husky";
+        }
+        if (!packageJson["lint-staged"]) {
+            packageJson["lint-staged"] = {
+                "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
+            };
+        }
+        await fs_extra_1.default.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+    }
+    const huskyDir = path_1.default.join(targetPath, ".husky");
+    await fs_extra_1.default.ensureDir(huskyDir);
+    await writeIfMissing(path_1.default.join(huskyDir, "pre-commit"), `npx lint-staged\n`);
+    // Make pre-commit executable
+    try {
+        await fs_extra_1.default.chmod(path_1.default.join(huskyDir, "pre-commit"), 0o755);
+    }
+    catch {
+        // chmod may not work on all platforms, safe to ignore
+    }
+}
+async function configureCi(targetPath) {
+    const workflowsDir = path_1.default.join(targetPath, ".github", "workflows");
+    await fs_extra_1.default.ensureDir(workflowsDir);
+    await writeIfMissing(path_1.default.join(workflowsDir, "ci.yml"), `name: CI
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - run: npm install
+      - run: npm run lint
+
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - run: npm install
+      - run: npm test -- --passWithNoTests
+`);
+}
 async function resolveTemplateRoot() {
     const candidates = [
         path_1.default.join(__dirname, "../templates"), // ts-node: src/generators -> src/templates
@@ -1029,6 +2844,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";