create-react-native-starter-kit 0.0.0-stage → 1.0.1

package/lib/creator.js

@@ -0,0 +1,211 @@
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+const { STARTER_DEPENDENCIES, STARTER_DEV_DEPENDENCIES } = require('./deps');
+const { patchAllConfigs } = require('./patch-configs');
+const { patchAllNative } = require('./patch-native');
+const { copySrcFolder, copyPatchesFolder, copyEnvExample } = require('./copy-src');
+
+/**
+ * Execute command with stdout/stderr inherited
+ */
+function runCommand(cmd, cwd = process.cwd()) {
+  console.log(`\n🚀 Executing: ${cmd}`);
+  execSync(cmd, { stdio: 'inherit', cwd });
+}
+
+/**
+ * Validate project name
+ */
+function validateProjectName(name) {
+  if (!name || typeof name !== 'string') {
+    throw new Error('Project name must be provided.');
+  }
+  const cleanName = name.trim();
+  if (!/^[a-zA-Z][a-zA-Z0-9_]*$/.test(cleanName)) {
+    throw new Error(
+      `Invalid project name: "${cleanName}". Project name must start with a letter and contain only alphanumeric characters or underscores (e.g. MyProject or my_project).`
+    );
+  }
+  return cleanName;
+}
+
+/**
+ * Update package.json with starter dependencies and devDependencies
+ */
+function updatePackageJsonDependencies(projectDir) {
+  const pkgPath = path.join(projectDir, 'package.json');
+  if (!fs.existsSync(pkgPath)) {
+    throw new Error(`package.json not found in ${projectDir}`);
+  }
+
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+
+  pkg.dependencies = pkg.dependencies || {};
+  pkg.devDependencies = pkg.devDependencies || {};
+
+  console.log('\n📦 Adding starter dependencies to package.json...');
+
+  for (const dep of STARTER_DEPENDENCIES) {
+    if (dep === 'react' || dep === 'react-native') {
+      continue;
+    }
+    pkg.dependencies[dep] = 'latest';
+  }
+
+  for (const dep of STARTER_DEV_DEPENDENCIES) {
+    pkg.devDependencies[dep] = 'latest';
+  }
+
+  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n', 'utf8');
+  console.log('✅ package.json dependencies updated.');
+}
+
+/**
+ * Main project creation orchestrator
+ */
+async function createProject({
+  projectName,
+  targetDir = process.cwd(),
+  starterRoot = path.resolve(__dirname, '../template'),
+  packageManager = 'yarn', // or 'npm'
+  skipInstall = false,
+  skipPods = false,
+  dryRun = false,
+}) {
+  const name = validateProjectName(projectName);
+  const projectDir = path.join(targetDir, name);
+
+  console.log('\n============================================================');
+  console.log(`✨ Creating React Native Starter Project: ${name}`);
+  console.log(`📂 Destination: ${projectDir}`);
+  console.log(`🔧 Package Manager: ${packageManager}`);
+  console.log('⚛️  React Native: latest stable release');
+  console.log('⚡ Installing latest library versions directly from npm registry');
+  console.log('============================================================\n');
+
+  if (fs.existsSync(projectDir)) {
+    throw new Error(`Directory "${projectDir}" already exists. Please choose a different name or remove the existing directory.`);
+  }
+
+  if (!fs.existsSync(path.join(starterRoot, 'src'))) {
+    throw new Error(`Starter template not found at ${starterRoot}. Run "npm run sync-template" inside the cli folder first.`);
+  }
+
+  if (dryRun) {
+    console.log('🔍 [DRY RUN] Simulating steps without writing files:');
+    console.log(`1. Initialize bare React Native CLI project (${name}, latest stable React Native)`);
+    console.log('2. Copy src/ folder, patches/, and scripts');
+    console.log(`3. Install latest starter dependencies dynamically via ${packageManager} add`);
+    console.log('4. Apply JS/TS configurations (babel, metro, tsconfig, declarations, App.tsx)');
+    console.log('5. Apply Native configurations (Android build.gradle, MainActivity, AndroidManifest, iOS Info.plist)');
+    console.log('6. Link font assets (react-native-asset) and generate icons');
+    console.log('7. Run pod install (if on macOS)');
+    console.log('\n✅ Dry run completed successfully.');
+    return;
+  }
+
+  // Step 1: Initialize bare React Native CLI project
+  console.log('\n📥 Step 1/7: Initializing bare React Native CLI project (latest stable React Native)...');
+  // Without --version, init uses react-native's "latest" dist-tag, which only points to stable releases (RCs go to "next").
+  const initCmd = `npx @react-native-community/cli@latest init ${name} --skip-install`;
+  runCommand(initCmd, targetDir);
+
+  // Step 2: Copy src directory and assets
+  console.log('\n📁 Step 2/7: Copying src/ directory, patches/, and assets...');
+  copySrcFolder(starterRoot, projectDir);
+  copyPatchesFolder(starterRoot, projectDir);
+
+  // Step 3: Install starter dependencies (always latest from registry)
+  if (!skipInstall) {
+    console.log(`\n📦 Step 3/7: Installing latest starter dependencies using ${packageManager}...`);
+    const depsString = STARTER_DEPENDENCIES.join(' ');
+    const devDepsString = STARTER_DEV_DEPENDENCIES.join(' ');
+
+    if (packageManager === 'yarn') {
+      runCommand(`yarn add ${depsString}`, projectDir);
+      runCommand(`yarn add -D ${devDepsString}`, projectDir);
+    } else {
+      runCommand(`npm install --legacy-peer-deps ${depsString}`, projectDir);
+      runCommand(`npm install -D --legacy-peer-deps ${devDepsString}`, projectDir);
+    }
+  } else {
+    console.log('\n📝 Step 3/7: Adding starter dependencies to package.json (latest)...');
+    updatePackageJsonDependencies(projectDir);
+  }
+
+  // Step 4: Apply JS/TS config patches
+  console.log('\n⚙️ Step 4/7: Applying Babel, Metro, TS, and App configurations...');
+  patchAllConfigs(projectDir);
+  copyEnvExample(starterRoot, projectDir);
+
+  // Apply dependency patches via patch-package if present
+  const patchesDir = path.join(projectDir, 'patches');
+  if (fs.existsSync(patchesDir) && !skipInstall) {
+    console.log('\n🩹 Applying dependency patches (patch-package)...');
+    try {
+      runCommand('npx patch-package', projectDir);
+    } catch (e) {
+      console.log('⚠️ Note: patch-package completed with warnings:', e.message);
+    }
+  }
+
+  // Step 5: Apply Native Android and iOS patches
+  console.log('\n📱 Step 5/7: Applying Android and iOS native configurations & permissions...');
+  patchAllNative(projectDir);
+
+  // Step 6: Asset linking & Icon generation
+  if (!skipInstall) {
+    console.log('\n🎨 Step 6/7: Linking font assets & generating icons...');
+    try {
+      runCommand('npx react-native-asset', projectDir);
+    } catch (e) {
+      console.log('⚠️ Note: react-native-asset completed with warnings:', e.message);
+    }
+
+    try {
+      runCommand('node scripts/generate-icons.js', projectDir);
+    } catch (e) {
+      console.log('⚠️ Note: Icon generation completed with warnings:', e.message);
+    }
+  } else {
+    console.log('\n⏭️ Step 6/7: Skipped asset linking & icon generation (--skip-install).');
+  }
+
+  // Step 7: iOS Pods installation (macOS only)
+  if (!skipPods && !skipInstall && process.platform === 'darwin') {
+    const iosDir = path.join(projectDir, 'ios');
+    if (fs.existsSync(iosDir)) {
+      console.log('\n🍎 Step 7/7: Installing iOS CocoaPods...');
+      try {
+        runCommand('pod install', iosDir);
+      } catch (e) {
+        console.log('⚠️ CocoaPods installation encountered an issue. You can run "cd ios && pod install" manually.');
+      }
+    }
+  } else {
+    console.log('\n⏭️ Step 7/7: Skipped CocoaPods installation.');
+  }
+
+  // Finished!
+  console.log('\n============================================================');
+  console.log(`🎉 Project ${name} is ready!`);
+  console.log('============================================================');
+  console.log('\nNext steps:');
+  console.log(`  1. cd ${name}`);
+  if (skipInstall) {
+    console.log(`  2. ${packageManager === 'yarn' ? 'yarn install' : 'npm install'}`);
+    if (process.platform === 'darwin') {
+      console.log('  3. cd ios && pod install && cd ..');
+    }
+  }
+  console.log(`  ${skipInstall ? '4' : '2'}. ${packageManager === 'yarn' ? 'yarn' : 'npm run'} android   (Run Android)`);
+  console.log(`  ${skipInstall ? '5' : '3'}. ${packageManager === 'yarn' ? 'yarn' : 'npm run'} ios       (Run iOS)`);
+  console.log('============================================================\n');
+}
+
+module.exports = {
+  createProject,
+  validateProjectName,
+  updatePackageJsonDependencies,
+};

package/lib/deps.js

@@ -0,0 +1,58 @@
+/**
+ * Curated list of starter dependencies and devDependencies.
+ * No hardcoded version numbers - package manager (yarn/npm) dynamically
+ * installs the latest compatible versions directly from the npm registry.
+ */
+
+const STARTER_DEPENDENCIES = [
+  '@bam.tech/react-native-image-resizer',
+  '@d11/react-native-fast-image',
+  '@gorhom/bottom-sheet',
+  '@hookform/resolvers',
+  '@mhpdev/react-native-haptics',
+  '@react-native-community/datetimepicker',
+  '@react-native-community/netinfo',
+  '@react-native-documents/picker',
+  '@react-navigation/bottom-tabs',
+  '@react-navigation/native',
+  '@react-navigation/native-stack',
+  '@reduxjs/toolkit',
+  '@tanstack/react-query',
+  'axios',
+  'i18next',
+  'moment',
+  'react-hook-form',
+  'react-i18next',
+  'react-native-element-dropdown',
+  'react-native-gesture-handler',
+  'react-native-image-picker',
+  'rn-international-phone-number',
+  'react-native-linear-gradient',
+  'react-native-mmkv',
+  'react-native-nitro-modules',
+  'react-native-reanimated',
+  'react-native-reanimated-skeleton',
+  'react-native-safe-area-context',
+  'react-native-screens',
+  'react-native-svg',
+  'react-native-toast-message',
+  'react-native-walkthrough-tooltip',
+  'react-native-worklets',
+  'react-redux',
+  'redux-persist',
+  'yup',
+];
+
+const STARTER_DEV_DEPENDENCIES = [
+  'babel-plugin-module-resolver',
+  'babel-plugin-transform-inline-environment-variables',
+  'dotenv',
+  'react-native-svg-transformer',
+  'react-native-asset',
+  'patch-package',
+];
+
+module.exports = {
+  STARTER_DEPENDENCIES,
+  STARTER_DEV_DEPENDENCIES,
+};

package/lib/patch-configs.js

@@ -0,0 +1,318 @@
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Patch or generate babel.config.js
+ */
+function patchBabelConfig(projectDir) {
+  const babelPath = path.join(projectDir, 'babel.config.js');
+  const babelContent = `const path = require('path');
+const env =
+  require('dotenv').config({
+    path: path.resolve(__dirname, '.env'),
+  }).parsed || {};
+
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+
+  //by own
+  plugins: [
+    [
+      'transform-inline-environment-variables',
+      { include: Object.keys(env) },
+    ],
+    [
+      'module-resolver',
+      {
+        root: ['./src'],
+        alias: {
+          '@': './src',
+        },
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    ],
+    ['react-native-worklets/plugin'],
+  ],
+};
+`;
+  fs.writeFileSync(babelPath, babelContent, 'utf8');
+}
+
+/**
+ * Ship a sample env file and keep real env files out of git.
+ */
+function patchEnvExample(projectDir) {
+  const envExample = [
+    '# Leave API_BASE_URL unset to use the built-in mock API (src/services/api/mock).',
+    '# Set it to your backend URL to call the real server.',
+    '# API_BASE_URL=https://api.example.com',
+    '',
+  ].join('\n');
+  fs.writeFileSync(path.join(projectDir, '.env.example'), envExample, 'utf8');
+
+  const gitignorePath = path.join(projectDir, '.gitignore');
+  if (!fs.existsSync(gitignorePath)) {
+    return;
+  }
+
+  const gitignore = fs.readFileSync(gitignorePath, 'utf8');
+  if (!/(^|\n)\.env(\n|$)/.test(gitignore)) {
+    fs.appendFileSync(
+      gitignorePath,
+      '\n# Environment\n.env\n.env.local\n',
+      'utf8',
+    );
+  }
+}
+
+/**
+ * Patch or generate metro.config.js
+ */
+function patchMetroConfig(projectDir) {
+  const metroPath = path.join(projectDir, 'metro.config.js');
+  const metroContent = `const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const path = require('path');
+
+//by own
+const defaultConfig = getDefaultConfig(__dirname);
+const { assetExts, sourceExts } = defaultConfig.resolver;
+/**
+ * Metro configuration
+ * https://reactnative.dev/docs/metro
+ *
+ * @type {import('@react-native/metro-config').MetroConfig}
+ */
+const config = {
+  //by own
+  transformer: {
+    babelTransformerPath: require.resolve(
+      'react-native-svg-transformer/react-native',
+    ),
+  },
+  resolver: {
+    assetExts: assetExts.filter(ext => ext !== 'svg'),
+    sourceExts: [...sourceExts, 'svg'],
+    extraNodeModules: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+};
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+`;
+  fs.writeFileSync(metroPath, metroContent, 'utf8');
+}
+
+/**
+ * Remove // and /* *\/ comments and trailing commas from JSONC, leaving string contents
+ * untouched (globs like "**\/*.ts" contain comment-like sequences).
+ */
+function stripJsonComments(raw) {
+  let out = '';
+  let inString = false;
+  for (let i = 0; i < raw.length; i++) {
+    const ch = raw[i];
+    const next = raw[i + 1];
+    if (inString) {
+      out += ch;
+      if (ch === '\\') {
+        out += next ?? '';
+        i++;
+      } else if (ch === '"') {
+        inString = false;
+      }
+    } else if (ch === '"') {
+      inString = true;
+      out += ch;
+    } else if (ch === '/' && next === '/') {
+      while (i < raw.length && raw[i] !== '\n') i++;
+      out += '\n';
+    } else if (ch === '/' && next === '*') {
+      i += 2;
+      while (i < raw.length && !(raw[i] === '*' && raw[i + 1] === '/')) i++;
+      i++;
+    } else {
+      out += ch;
+    }
+  }
+  return out.replace(/,(\s*[}\]])/g, '$1');
+}
+
+function readJsonc(filePath) {
+  const raw = fs.readFileSync(filePath, 'utf8');
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return JSON.parse(stripJsonComments(raw));
+  }
+}
+
+/**
+ * Patch tsconfig.json
+ */
+function patchTsConfig(projectDir) {
+  const tsConfigPath = path.join(projectDir, 'tsconfig.json');
+  let tsConfig = { extends: '@react-native/typescript-config' };
+  if (fs.existsSync(tsConfigPath)) {
+    try {
+      tsConfig = readJsonc(tsConfigPath);
+    } catch (e) {
+      console.log('⚠️ Could not parse tsconfig.json, writing a default one:', e.message);
+    }
+  }
+
+  tsConfig.compilerOptions = tsConfig.compilerOptions || {};
+  // `paths` resolves relative to tsconfig without `baseUrl`; TypeScript 6 rejects `baseUrl` as deprecated.
+  delete tsConfig.compilerOptions.baseUrl;
+  tsConfig.compilerOptions.paths = {
+    '@/*': ['./src/*'],
+    ...(tsConfig.compilerOptions.paths || {}),
+  };
+  tsConfig.compilerOptions.skipLibCheck = true;
+
+  fs.writeFileSync(tsConfigPath, JSON.stringify(tsConfig, null, 2) + '\n', 'utf8');
+}
+
+/**
+ * Generate react-native.config.js
+ */
+function patchReactNativeConfig(projectDir) {
+  const configPath = path.join(projectDir, 'react-native.config.js');
+  const content = `module.exports = {
+  project: {
+    ios: {},
+    android: {},
+  },
+  assets: [
+    './src/assets/fonts/',
+  ],
+};
+`;
+  fs.writeFileSync(configPath, content, 'utf8');
+}
+
+/**
+ * Generate declarations.d.ts
+ */
+function patchDeclarations(projectDir) {
+  const decPath = path.join(projectDir, 'declarations.d.ts');
+  const content = `declare module '*.svg' {
+  import React from 'react';
+  import { SvgProps } from 'react-native-svg';
+  const content: React.FC<SvgProps>;
+  export default content;
+}
+`;
+  fs.writeFileSync(decPath, content, 'utf8');
+}
+
+/**
+ * Update App.tsx
+ */
+function patchAppTsx(projectDir) {
+  const appPath = path.join(projectDir, 'App.tsx');
+  const content = `/**
+ * React Native Starter Kit
+ *
+ * Main entry point - exports the App component from src/app
+ *
+ * @format
+ */
+
+// Export the main App component from the src directory
+export { default } from './src/app/App';
+`;
+  fs.writeFileSync(appPath, content, 'utf8');
+}
+
+/**
+ * Copy or create scripts/generate-icons.js and update package.json scripts
+ */
+function patchScriptsAndPackageJson(projectDir) {
+  const scriptsDir = path.join(projectDir, 'scripts');
+  if (!fs.existsSync(scriptsDir)) {
+    fs.mkdirSync(scriptsDir, { recursive: true });
+  }
+
+  const iconScriptPath = path.join(scriptsDir, 'generate-icons.js');
+  const iconScriptContent = `const fs = require('fs');
+const path = require('path');
+
+const ICONS_DIR = path.resolve(__dirname, '../src/assets/icons');
+const OUTPUT_FILE = path.join(ICONS_DIR, 'index.ts');
+
+if (!fs.existsSync(ICONS_DIR)) {
+  console.log('⚠️ Icons directory not found:', ICONS_DIR);
+  process.exit(0);
+}
+
+const files = fs.readdirSync(ICONS_DIR).filter(file => file.endsWith('.svg'));
+
+const toPascalCase = name =>
+  name.replace(/(^\\w|-\\w)/g, m => m.replace('-', '').toUpperCase());
+
+const imports = files
+  .map(file => {
+    const name = toPascalCase(path.basename(file, '.svg'));
+    return \`import \${name} from './\${file}';\`;
+  })
+  .join('\\n');
+
+const mappings = files
+  .map(file => {
+    const key = path.basename(file, '.svg');
+    const value = toPascalCase(key);
+    return \`  \${key}: \${value},\`;
+  })
+  .join('\\n');
+
+const content = \`\${imports}
+
+export const Icons = {
+\${mappings}
+} as const;
+
+export type IconName = keyof typeof Icons;
+\`;
+
+fs.writeFileSync(OUTPUT_FILE, content);
+console.log('✅ Icons index.ts generated');
+`;
+  fs.writeFileSync(iconScriptPath, iconScriptContent, 'utf8');
+
+  // Update target package.json
+  const pkgPath = path.join(projectDir, 'package.json');
+  if (fs.existsSync(pkgPath)) {
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+    pkg.scripts = pkg.scripts || {};
+    pkg.scripts['generate:icons'] = 'node scripts/generate-icons.js';
+    pkg.scripts['postinstall'] = 'patch-package';
+    fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n', 'utf8');
+  }
+}
+
+/**
+ * Run all JS/TS config patches
+ */
+function patchAllConfigs(projectDir) {
+  patchBabelConfig(projectDir);
+  patchEnvExample(projectDir);
+  patchMetroConfig(projectDir);
+  patchTsConfig(projectDir);
+  patchReactNativeConfig(projectDir);
+  patchDeclarations(projectDir);
+  patchAppTsx(projectDir);
+  patchScriptsAndPackageJson(projectDir);
+}
+
+module.exports = {
+  patchAllConfigs,
+  patchBabelConfig,
+  patchEnvExample,
+  patchMetroConfig,
+  patchTsConfig,
+  patchReactNativeConfig,
+  patchDeclarations,
+  patchAppTsx,
+  patchScriptsAndPackageJson,
+};