Create-react-native-app: Cannot run application after eject

Created on 24 Sep 2018  路  5Comments  路  Source: expo/create-react-native-app

Description

After running npm run eject de android project cannot resolve ReactApplication and ReactNativeHost and it does not compile.

Expected Behavior

I can compile the android project generated by npm run eject and execute it in the androi emulator

Observed Behavior

The project has some errors in the imports, like ReactApplication or ReactNativeHost. The MainActivity does not implement the method getUseDeveloperSupport() that is required as it extends ReactActivity

Environment

Please run these commands in the project folder and fill in their results:

  • npm ls react-native-scripts: empty
  • npm ls react-native: [email protected]
  • npm ls expo: empty
  • node -v: v8.11.3
  • npm -v: 5.6.0
  • yarn --version: 1.9.4
  • watchman version: The term 'watchman' is not recognized as the name of a cmdlet

Also specify:

  1. Operating system: Microsoft Windows 10 Enterprise
  2. Phone/emulator/simulator & version: Android emulator, API 27, Android 8.1 (Google APIs)

Reproducible Demo

$ npm install -g expo-cli
$ expo init my-app
$ cd my-app/
$ npm run eject

Then open Android Studio and try to compile the Android project generated after npm eject

moving-to-expo-cli

Most helpful comment

I ran into this problem as well. It took a few days of searching to realize that there are several issues after ejecting. Here's the things that worked for me.

One issue can be with react-native 0.56.* in the project after ejecting. It looks like you have 0.54.0 which works fine but if you don't then consider downgrading for now. See this issue here https://github.com/react-community/create-react-native-app/issues/401

After ejecting in package.json react-native is listed as this "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz" which doesn't seem to work.

To downgrade to [email protected]

You can do this by removing your node_modules, changing your package.json to use [email protected]

"dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.4"
}

and then reinstalling node_modules with npm install or yarn install if using yarn.

The second issue is that you'll need to check in your android/build.gradle and make sure that Google's Maven repository google() is included in both buildscript {} and allprojects{}. By default it's missing after eject. This is only the case if using a Gradle version > 4.1 though.

Something like this (although yours might look slightly different)

buildscript {
    repositories {
        google()
        jcenter()
    }
    dependencies {
       ...
    }
}

allprojects {
    repositories {
        google()
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

In addition it seems that index.js, index.android.js and index.ios.js are not created when ejecting anymore. So check for those and if they aren't there at least create index.js in the project root and add the following to it to get started.

import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('the_name_of_your_ejected_app', () => App);

I've just gone through these steps again on a new app and confirmed that they fix the issues.

All 5 comments

Same issue, I tried to not use expo CLI and use :
react-native eject
(with defining app.json)
and I have the same issue

Same issue using both new syntax (expo cli) and old

I ran into this problem as well. It took a few days of searching to realize that there are several issues after ejecting. Here's the things that worked for me.

One issue can be with react-native 0.56.* in the project after ejecting. It looks like you have 0.54.0 which works fine but if you don't then consider downgrading for now. See this issue here https://github.com/react-community/create-react-native-app/issues/401

After ejecting in package.json react-native is listed as this "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz" which doesn't seem to work.

To downgrade to [email protected]

You can do this by removing your node_modules, changing your package.json to use [email protected]

"dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.4"
}

and then reinstalling node_modules with npm install or yarn install if using yarn.

The second issue is that you'll need to check in your android/build.gradle and make sure that Google's Maven repository google() is included in both buildscript {} and allprojects{}. By default it's missing after eject. This is only the case if using a Gradle version > 4.1 though.

Something like this (although yours might look slightly different)

buildscript {
    repositories {
        google()
        jcenter()
    }
    dependencies {
       ...
    }
}

allprojects {
    repositories {
        google()
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

In addition it seems that index.js, index.android.js and index.ios.js are not created when ejecting anymore. So check for those and if they aren't there at least create index.js in the project root and add the following to it to get started.

import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('the_name_of_your_ejected_app', () => App);

I've just gone through these steps again on a new app and confirmed that they fix the issues.

I think it's because there is no index.js file after eject. Still, there is no update to .gitignore after eject too.

This issue still exists!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

JackWReid picture JackWReid  路  4Comments

andyvanosdale picture andyvanosdale  路  3Comments

noelweichbrodt picture noelweichbrodt  路  3Comments

FezVrasta picture FezVrasta  路  3Comments

liujb picture liujb  路  5Comments