refactor: use create-expo-app to generate expo example

Author: satya164

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

@@ -9,7 +9,7 @@ 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';
+import generateExampleApp from './utils/generateExampleApp';
 
 const FALLBACK_BOB_VERSION = '0.18.3';
 
@@ -384,6 +384,7 @@ async function create(argv: yargs.Arguments<any>) {
       url: authorUrl,
     },
     repo: repoUrl,
+    example,
   };
 
   const copyDir = async (source: string, dest: string) => {
@@ -419,13 +420,12 @@ async function create(argv: yargs.Arguments<any>) {
 
   const spinner = ora('Generating example app').start();
 
-  if (example === 'native') {
-    await generateRNApp({
-      dest: folder,
-      projectName: options.project.name,
-      isNewArch: options.project.turbomodule,
-    });
-  }
+  await generateExampleApp({
+    type: example,
+    dest: folder,
+    projectName: options.project.name,
+    isNewArch: options.project.turbomodule,
+  });
 
   spinner.succeed(
     `Project created successfully at ${kleur.yellow(argv.name)}!\n`
@@ -487,20 +487,18 @@ 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,
-    });
-  }
+  // 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 });

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

@@ -0,0 +1,137 @@
+import fs from 'fs-extra';
+import spawn from 'cross-spawn';
+import path from 'path';
+
+const FILES_TO_DELETE = [
+  '__tests__',
+  '.buckconfig',
+  '.eslintrc.js',
+  '.flowconfig',
+  '.git',
+  '.gitignore',
+  '.prettierrc.js',
+  'App.js',
+  'index.js',
+];
+
+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',
+};
+
+const PACKAGES_TO_ADD_NEW_ARCH = {
+  'patch-package': '^6.4.7',
+  'postinstall-postinstall': '^2.1.0',
+};
+
+export default async function generateExampleApp({
+  type,
+  dest,
+  projectName,
+  isNewArch,
+}: {
+  type: 'expo' | 'native';
+  dest: string;
+  projectName: string;
+  isNewArch: boolean;
+}) {
+  const directory = path.join(dest, 'example');
+  const args =
+    type === 'native'
+      ? // `npx react-native init <projectName> --directory example --skip-install`
+        [
+          'react-native',
+          'init',
+          `${projectName}Example`,
+          '--directory',
+          directory,
+          '--skip-install',
+        ]
+      : // `npx create-expo-app example --no-install`
+        ['create-expo-app', directory, '--no-install'];
+
+  const child = spawn('npx', ['--yes', ...args], {
+    cwd: dest,
+  });
+
+  await new Promise((resolve, reject) => {
+    child.once('error', reject);
+    child.once('close', resolve);
+  });
+
+  // Remove unnecessary files and folders
+  for (const file of FILES_TO_DELETE) {
+    await fs.remove(path.join(directory, file));
+  }
+
+  // Patch the example app's package.json
+  const pkg = JSON.parse(
+    await fs.readFile(path.join(directory, 'package.json'), 'utf8')
+  );
+
+  // Remove Jest config for now
+  delete pkg.jest;
+
+  const { scripts, devDependencies } = pkg;
+
+  delete scripts.test;
+  delete scripts.lint;
+
+  if (type === 'native') {
+    scripts.pods = 'pod-install --quiet';
+  }
+
+  PACKAGES_TO_REMOVE.forEach((pkg) => {
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+    delete devDependencies[pkg];
+  });
+
+  Object.assign(devDependencies, PACKAGES_TO_ADD);
+
+  // Temporary until autolinking is fixed on iOS
+  // https://github.com/facebook/react-native/commit/a5622165c198ac6e7ffff5883d4f269a2c974f2e
+  if (isNewArch) {
+    scripts.postinstall = 'patch-package';
+
+    Object.assign(devDependencies, PACKAGES_TO_ADD_NEW_ARCH);
+  }
+
+  await fs.writeFile(
+    path.join(directory, 'package.json'),
+    JSON.stringify(pkg, 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 = await fs.readFile(
+      path.join(directory, 'android', 'gradle.properties'),
+      'utf8'
+    );
+
+    await fs.writeFile(
+      path.join(directory, 'android', 'gradle.properties'),
+      gradleProperties.replace('newArchEnabled=false', 'newArchEnabled=true')
+    );
+
+    // iOS
+    // Add ENV['RCT_NEW_ARCH_ENABLED'] = 1 on top of example/ios/Podfile
+    const podfile = await fs.readFile(
+      path.join(directory, 'ios', 'Podfile'),
+      'utf8'
+    );
+
+    await fs.writeFile(
+      path.join(directory, 'ios', 'Podfile'),
+      "ENV['RCT_NEW_ARCH_ENABLED'] = '1'\n" + podfile
+    );
+  }
+}

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

@@ -33,7 +33,11 @@
     "prepare": "bob build",
     "release": "release-it",
     "example": "yarn --cwd example",
-    "bootstrap": "yarn example && yarn && yarn example pods"
+<% if (example == 'native') { -%>
+    "bootstrap": "yarn example && yarn install && yarn example pods"
+<% } else { -%>
+    "bootstrap": "yarn example && yarn install"
+<% } -%>
   },
   "keywords": [
     "react-native",

packages/create-react-native-library/templates/common/$package.json

@@ -0,0 +1 @@
+export { default } from './src/App';