feat: use react-native init for generating example app (#271)

Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>

Author: 2 people

packages/create-react-native-library/package.json

@@ -48,6 +48,7 @@
     "fs-extra": "^10.1.0",
     "github-username": "^6.0.0",
     "kleur": "^4.1.4",
+    "ora": "^5.4.1",
     "prompts": "^2.4.2",
     "validate-npm-package-name": "^4.0.0",
     "yargs": "^17.5.1"

packages/create-react-native-library/src/index.ts

@@ -5,9 +5,11 @@ import dedent from 'dedent';
 import kleur from 'kleur';
 import yargs from 'yargs';
 import spawn from 'cross-spawn';
+import ora from 'ora';
 import validateNpmPackage from 'validate-npm-package-name';
 import githubUsername from 'github-username';
 import prompts, { PromptObject } from './utils/prompts';
+import generateRNApp from './utils/generateRNApp';
 
 const FALLBACK_BOB_VERSION = '0.18.3';
 
@@ -413,6 +415,17 @@ async function create(argv: yargs.Arguments<any>) {
     }
   };
 
+  await fs.mkdirp(folder);
+  if (example === 'native') {
+    const spinner = ora('Generating example app').start();
+    await generateRNApp({
+      dest: folder,
+      projectName: options.project.name,
+      isNewArch: options.project.turbomodule,
+    });
+    spinner.succeed();
+  }
+
   await copyDir(COMMON_FILES, folder);
 
   if (languages === 'js') {
@@ -469,6 +482,21 @@ async function create(argv: yargs.Arguments<any>) {
     }
   }
 
+  if (example === 'native') {
+    // Set `react` and `react-native` versions of root `package.json` from example `package.json`
+    const examplePackageJson = fs.readJSONSync(
+      path.join(folder, 'example', 'package.json')
+    );
+    const rootPackageJson = fs.readJSONSync(path.join(folder, 'package.json'));
+    rootPackageJson.devDependencies.react =
+      examplePackageJson.dependencies.react;
+    rootPackageJson.devDependencies['react-native'] =
+      examplePackageJson.dependencies['react-native'];
+    fs.writeJSONSync(path.join(folder, 'package.json'), rootPackageJson, {
+      spaces: 2,
+    });
+  }
+
   try {
     spawn.sync('git', ['init'], { cwd: folder });
     spawn.sync('git', ['add', '.'], { cwd: folder });

packages/create-react-native-library/src/utils/generateRNApp.ts

@@ -0,0 +1,132 @@
+import fs from 'fs';
+import spawn from 'cross-spawn';
+import path from 'path';
+
+const FILES_TO_DELETE = [
+  '.eslintrc.js',
+  '.gitignore',
+  '.prettierrc.js',
+  'App.js',
+  'index.js',
+  '.flowconfig',
+  '.buckconfig',
+];
+
+const FOLDERS_TO_DELETE = ['__tests__'];
+
+const PACKAGES_TO_REMOVE = [
+  '@react-native-community/eslint-config',
+  'babel-jest',
+  'eslint',
+  'jest',
+  'react-test-renderer',
+];
+
+const PACKAGES_TO_ADD = {
+  'babel-plugin-module-resolver': '^4.1.0',
+  'metro-react-native-babel-preset': '^0.72.1',
+  'patch-package': '^6.4.7',
+  'postinstall-postinstall': '^2.1.0',
+};
+
+export default async function generateRNApp({
+  dest,
+  projectName,
+  isNewArch,
+}: {
+  dest: string;
+  projectName: string;
+  isNewArch: boolean;
+}) {
+  // Generate the example app's base using `npx react-native init <projectName>Example --directory example --skip-install`
+  const createRNAppProcess = spawn(
+    'npx',
+    [
+      'react-native',
+      'init',
+      `${projectName}Example`,
+      '--directory',
+      path.join(dest, 'example'),
+      '--skip-install',
+    ],
+    {
+      cwd: dest,
+    }
+  );
+  await new Promise((resolve, reject) => {
+    createRNAppProcess.once('error', reject);
+    createRNAppProcess.once('close', resolve);
+  });
+
+  // Remove unnecessary files
+  FILES_TO_DELETE.forEach((file) => {
+    try {
+      fs.unlinkSync(path.join(dest, 'example', file));
+    } catch (e) {
+      //ignore
+    }
+  });
+
+  // Remove unnecessary folders
+  FOLDERS_TO_DELETE.forEach((folder) => {
+    try {
+      fs.rmSync(path.join(dest, 'example', folder), {
+        recursive: true,
+      });
+    } catch (e) {
+      // ignore
+    }
+  });
+
+  // Patch the example app's package.json
+  const examplePackageJson = JSON.parse(
+    fs.readFileSync(path.join(dest, 'example', 'package.json'), 'utf8')
+  );
+  examplePackageJson.scripts = {
+    ...examplePackageJson.scripts,
+    test: undefined,
+    lint: undefined,
+
+    pods: 'pod-install --quiet',
+    postinstall: 'patch-package',
+  };
+  PACKAGES_TO_REMOVE.forEach((pkg) => {
+    examplePackageJson.devDependencies[pkg] = undefined;
+  });
+  examplePackageJson.devDependencies = {
+    ...examplePackageJson.devDependencies,
+    ...PACKAGES_TO_ADD,
+  };
+  examplePackageJson.jest = undefined;
+  fs.writeFileSync(
+    path.join(dest, 'example', 'package.json'),
+    JSON.stringify(examplePackageJson, null, 2)
+  );
+
+  // If the library is on new architecture, enable new arch for IOS and Android
+  if (isNewArch) {
+    // Android
+    // Change newArchEnabled=false to newArchEnabled=true in example/android/gradle.properties
+    const gradleProperties = fs
+      .readFileSync(
+        path.join(dest, 'example', 'android', 'gradle.properties'),
+        'utf8'
+      )
+      .replace('newArchEnabled=false', 'newArchEnabled=true');
+    fs.writeFileSync(
+      path.join(dest, 'example', 'android', 'gradle.properties'),
+      gradleProperties
+    );
+
+    // IOS
+    // Add ENV['RCT_NEW_ARCH_ENABLED'] = 1 on top of example/ios/Podfile
+    const podfile = fs.readFileSync(
+      path.join(dest, 'example', 'ios', 'Podfile'),
+      'utf8'
+    );
+    fs.writeFileSync(
+      path.join(dest, 'example', 'ios', 'Podfile'),
+      "ENV['RCT_NEW_ARCH_ENABLED'] = '1'\n" + podfile
+    );
+  }
+}

packages/create-react-native-library/templates/example-turbo/example/patches/react-native+0.68.2.patch

@@ -0,0 +1,134 @@
+diff --git a/node_modules/react-native/scripts/codegen/generate-artifacts-executor.js b/node_modules/react-native/scripts/codegen/generate-artifacts-executor.js
+index 458495b..6fc398a 100644
+--- a/node_modules/react-native/scripts/codegen/generate-artifacts-executor.js
++++ b/node_modules/react-native/scripts/codegen/generate-artifacts-executor.js
+@@ -204,6 +204,55 @@ function handleThirdPartyLibraries(
+   });
+ }
+ 
++function handleLibrariesFromReactNativeConfig(
++  libraries,
++  codegenConfigKey,
++  codegenConfigFilename,
++  appRootDir,
++) {
++  const rnConfigFileName = 'react-native.config.js';
++
++  console.log(
++    `\n\n[Codegen] >>>>> Searching for codegen-enabled libraries in ${rnConfigFileName}`,
++  );
++
++  const rnConfigFilePath = path.join(appRootDir, rnConfigFileName);
++
++  if (fs.existsSync(rnConfigFilePath)) {
++    const rnConfig = require(rnConfigFilePath);
++
++    if (rnConfig.dependencies != null) {
++      Object.keys(rnConfig.dependencies).forEach(name => {
++        const dependencyConfig = rnConfig.dependencies[name];
++
++        if (dependencyConfig.root) {
++          const codegenConfigFileDir = path.resolve(
++            appRootDir,
++            dependencyConfig.root,
++          );
++          const configFilePath = path.join(
++            codegenConfigFileDir,
++            codegenConfigFilename,
++          );
++          const pkgJsonPath = path.join(codegenConfigFileDir, 'package.json');
++
++          if (fs.existsSync(configFilePath)) {
++            const pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath));
++            const configFile = JSON.parse(fs.readFileSync(configFilePath));
++            extractLibrariesFromJSON(
++              configFile,
++              libraries,
++              codegenConfigKey,
++              pkgJson.name,
++              codegenConfigFileDir,
++            );
++          }
++        }
++      });
++    }
++  }
++}
++
+ function handleInAppLibraries(
+   libraries,
+   pkgJson,
+@@ -362,6 +411,39 @@ function createComponentProvider(
+   }
+ }
+ 
++function findCodegenEnabledLibraries(
++  appRootDir,
++  baseCodegenConfigFileDir,
++  codegenConfigFilename,
++  codegenConfigKey,
++) {
++  const pkgJson = readPackageJSON(appRootDir);
++  const dependencies = {...pkgJson.dependencies, ...pkgJson.devDependencies};
++  const libraries = [];
++
++  handleReactNativeCodeLibraries(
++    libraries,
++    codegenConfigFilename,
++    codegenConfigKey,
++  );
++  handleThirdPartyLibraries(
++    libraries,
++    baseCodegenConfigFileDir,
++    dependencies,
++    codegenConfigFilename,
++    codegenConfigKey,
++  );
++  handleLibrariesFromReactNativeConfig(
++    libraries,
++    codegenConfigKey,
++    codegenConfigFilename,
++    appRootDir,
++  );
++  handleInAppLibraries(libraries, pkgJson, codegenConfigKey, appRootDir);
++
++  return libraries;
++}
++
+ // It removes all the empty files and empty folders
+ // it finds, starting from `filepath`, recursively.
+ //
+@@ -429,23 +511,12 @@ function execute(
+   }
+ 
+   try {
+-    const pkgJson = readPackageJSON(appRootDir);
+-    const dependencies = {...pkgJson.dependencies, ...pkgJson.devDependencies};
+-    const libraries = [];
+-
+-    handleReactNativeCodeLibraries(
+-      libraries,
+-      codegenConfigFilename,
+-      codegenConfigKey,
+-    );
+-    handleThirdPartyLibraries(
+-      libraries,
++    const libraries = findCodegenEnabledLibraries(
++      appRootDir,
+       baseCodegenConfigFileDir,
+-      dependencies,
+       codegenConfigFilename,
+       codegenConfigKey,
+     );
+-    handleInAppLibraries(libraries, pkgJson, codegenConfigKey, appRootDir);
+ 
+     if (libraries.length === 0) {
+       console.log('[Codegen] No codegen-enabled libraries found.');
+@@ -482,6 +553,7 @@ module.exports = {
+   execute: execute,
+   // exported for testing purposes only:
+   _extractLibrariesFromJSON: extractLibrariesFromJSON,
++  _findCodegenEnabledLibraries: findCodegenEnabledLibraries,
+   _executeNodeScript: executeNodeScript,
+   _generateCode: generateCode,
+   _cleanupEmptyFilesAndFolders: cleanupEmptyFilesAndFolders,