Force installation of Expo fork of react-native when ejecting with ExpoKit

Author: brentvatne

react-native-scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-scripts",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Configuration and scripts for Create React Native App.",
   "license": "BSD-3-Clause",
   "keywords": [

react-native-scripts/src/scripts/eject.js

@@ -239,7 +239,9 @@ Android Studio to build the native code for your project.`
 
         if (newDevDependencies.length > 0) {
           log('Installing new packages with npm...');
-          spawn.sync('npm', ['install', '--save-dev', ...newDevDependencies], { stdio });
+          spawn.sync('npm', ['install', '--save-dev', ...newDevDependencies], {
+            stdio,
+          });
         }
       }
     } else if (ejectMethod === 'expoKit') {

react-native-scripts/src/scripts/init.js

@@ -6,6 +6,7 @@ import path from 'path';
 import pathExists from 'path-exists';
 import spawn from 'cross-spawn';
 import log from '../util/log';
+import install from '../util/install';
 
 // UPDATE DEPENDENCY VERSIONS HERE
 const DEFAULT_DEPENDENCIES = {
@@ -24,6 +25,7 @@ module.exports = async (appPath: string, appName: string, verbose: boolean, cwd:
   const ownPackageName: string = require('../../package.json').name;
   const ownPath: string = path.join(appPath, 'node_modules', ownPackageName);
   const useYarn: boolean = await pathExists(path.join(appPath, 'yarn.lock'));
+  const npmOrYarn = useYarn ? 'yarn' : 'npm';
 
   // FIXME(perry) remove when npm 5 is supported
   if (!useYarn) {
@@ -107,44 +109,24 @@ https://github.com/npm/npm/issues/16991
       throw err;
     }
   }
+  const { code, command, args } = await install(appPath);
+  if (code !== 0) {
+    console.error('Failed to install');
+    // console.error(`\`${command} ${args.join(' ')}\` failed`);
+    return;
+  }
 
-  // Run yarn or npm
-  let command = '';
-  let args = [];
-
-  if (useYarn) {
-    command = 'yarnpkg';
+  // display the cleanest way to get to the app dir
+  // if the cwd + appName is equal to the full path, then just cd into appName
+  let cdpath;
+  if (path.resolve(cwd, appName) === appPath) {
+    cdpath = appName;
   } else {
-    command = 'npm';
-    args = ['install', '--save'];
-
-    if (verbose) {
-      args.push('--verbose');
-    }
+    cdpath = appPath;
   }
 
-  const npmOrYarn = useYarn ? 'yarn' : 'npm';
-  log(`Installing dependencies using ${npmOrYarn}...`);
-  log(); // why is this here
-
-  const proc = spawn(command, args, { stdio: 'inherit' });
-  proc.on('close', code => {
-    if (code !== 0) {
-      console.error(`\`${command} ${args.join(' ')}\` failed`);
-      return;
-    }
-
-    // display the cleanest way to get to the app dir
-    // if the cwd + appName is equal to the full path, then just cd into appName
-    let cdpath;
-    if (path.resolve(cwd, appName) === appPath) {
-      cdpath = appName;
-    } else {
-      cdpath = appPath;
-    }
-
-    log(
-      `
+  log(
+    `
 
 Success! Created ${appName} at ${appPath}
 Inside that directory, you can run several commands:
@@ -173,16 +155,15 @@ We suggest that you begin by typing:
 
   ${chalk.cyan('cd ' + cdpath)}
   ${chalk.cyan(npmOrYarn + ' start')}`
-    );
+  );
 
-    if (readmeExists) {
-      log(
-        `
+  if (readmeExists) {
+    log(
+      `
 ${chalk.yellow('You had a `README.md` file, we renamed it to `README.old.md`')}`
-      );
-    }
+    );
+  }
 
-    log();
-    log('Happy hacking!');
-  });
+  log();
+  log('Happy hacking!');
 };

react-native-scripts/src/util/expo.js

@@ -4,6 +4,7 @@ import chalk from 'chalk';
 import fse from 'fs-extra';
 import inquirer from 'inquirer';
 import path from 'path';
+import install from '../util/install';
 
 import { Detach, User as UserManager, Versions } from 'xdl';
 
@@ -67,13 +68,7 @@ publish it there. See this StackOverflow question for more information:
 
   const pkgJson = JSON.parse((await fse.readFile(path.resolve('package.json'))).toString());
 
-  const entryPoint = `import Expo from 'expo';
-import App from './App';
-
-Expo.registerRootComponent(App);
-`;
-  await fse.writeFile('index.js', entryPoint);
-  pkgJson.main = 'index.js';
+  pkgJson.main = 'node_modules/expo/AppEntry.js';
 
   delete pkgJson.devDependencies['react-native-scripts'];
   delete pkgJson.scripts.start;
@@ -85,21 +80,35 @@ Expo.registerRootComponent(App);
   const versions = await Versions.versionsAsync();
   const sdkTag = versions.sdkVersions[appJson.expo.sdkVersion].expoReactNativeTag;
 
-  pkgJson.dependencies[
-    'react-native'
-  ] = `https://github.com/expo/react-native/archive/${sdkTag}.tar.gz`;
-
   await fse.writeFile('package.json', JSON.stringify(pkgJson, null, 2));
 
-  console.log(
-    `${chalk.green('Successfully set up ExpoKit!')}
+  console.log('Installing the Expo fork of react-native...');
+  const reactNativeVersion = `https://github.com/expo/react-native/archive/${sdkTag}.tar.gz`;
+  const {
+    code,
+  } = await install(process.cwd(), 'react-native', reactNativeVersion, {
+    silent: true,
+  });
 
-You'll need to use Expo's XDE to run this project:
-  ${chalk.cyan('https://docs.expo.io/versions/latest/introduction/installation.html')}
+  if (code === 0) {
+    console.log(`${chalk.green('Successfully set up ExpoKit!')}`);
+  } else {
+    console.warn(
+      `
+      ${chalk.yellow('Unable to install the Expo fork of react-native.')}
+      ${chalk.yellow(`Please install react-native@${reactNativeVersion} before continuing.`)}
+    `
+    );
+  }
 
-For further instructions, please read ExpoKit's build documentation:
-  ${chalk.cyan('https://docs.expo.io/versions/latest/guides/expokit.html')}
-`
+  console.log(
+    `
+  You'll need to use Expo's XDE to run this project:
+    ${chalk.cyan('https://docs.expo.io/versions/latest/introduction/installation.html')}
+
+  For further instructions, please read ExpoKit's build documentation:
+    ${chalk.cyan('https://docs.expo.io/versions/latest/guides/expokit.html')}
+  `
   );
 }
 

react-native-scripts/src/util/install.js

@@ -0,0 +1,63 @@
+// @flow
+
+import spawn from 'cross-spawn';
+import pathExists from 'path-exists';
+import path from 'path';
+import log from '../util/log';
+
+type InstallResult = {
+  code: number,
+  command: string,
+  args: Array<string>,
+};
+
+export default (async function install(
+  appPath: string,
+  packageName?: string,
+  packageVersion?: string,
+  options?: any = {}
+): Promise<InstallResult> {
+  const useYarn: boolean = await pathExists(path.join(appPath, 'yarn.lock'));
+
+  let command = '';
+  let args = [];
+
+  if (useYarn) {
+    command = 'yarnpkg';
+    if (packageName) {
+      args = ['add'];
+    }
+  } else {
+    command = 'npm';
+    args = ['install', '--save'];
+
+    // if (verbose) {
+    //   args.push('--verbose');
+    // }
+  }
+
+  let pkg = packageName;
+  if (pkg) {
+    if (packageVersion) {
+      pkg = `${pkg}@${packageVersion}`;
+    }
+
+    args.push(pkg);
+  }
+
+  const npmOrYarn = useYarn ? 'yarn' : 'npm';
+  log(`Installing ${pkg ? pkg : 'dependencies'} using ${npmOrYarn}...`);
+  log();
+
+  let spawnOpts = {};
+  if (options.silent) {
+    spawnOpts.silent = true;
+  } else {
+    spawnOpts.stdio = 'inherit';
+  }
+
+  const proc = spawn(command, args, spawnOpts);
+  return new Promise(resolve => {
+    proc.on('close', code => resolve({ code, command, args }));
+  });
+});

react-native-scripts/src/util/log.js

@@ -2,15 +2,15 @@
 
 import chalk from 'chalk';
 
-function log() {
+function log(data: any) {
   const args = Array.prototype.slice.call(arguments, 0);
 
   respectProgressBars(() => {
     console.log(...args);
   });
 }
 
-log.withTimestamp = function() {
+log.withTimestamp = function(data: any) {
   const prefix = chalk.dim(new Date().toLocaleTimeString()) + ':';
   const args = [prefix].concat(Array.prototype.slice.call(arguments, 0));