React-native 0.21 (android) remote debugger (Chrome) cannot connect

Question

My remote debugging (Via Chrome with React-native dev tools 0.14.8) used to work fine.

I am not sure what exactly happened in between (I upgraded to react-native 0.21, did an update to android studio, updated Linux Mint 17.3 with apt-get update/ upgrade).

But now all I see is "Please Wait Connecting to Remote debugger" for about 5-8 seconds on my emulator, and then I get the error (see attached image): "Unable to connect with remote debugger"

I have tried re-installing Chrome React-native extensions. Tried rebuilding my app. Did not help. I am not exactly sure where the problem is. May be I just need to increase a value for connection timeout.. but there does not seem to be an option like that.

Below is also my package.json (it took a couple of days to go through the 0.20 to 0.21 upgrade, due to various dependency problems). May be there is a new settings there that I am missing, that somebody could point out.

{
    "name": "ftesting",
    "version": "1.0.0",
    "description": "ftesting desc",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node_modules/react-native/packager/packager.sh",
    "android-setup-port": "adb reverse tcp:8081 tcp:8080",

    "test": "eslint ./src/js.app/my.forms",
    "start": "rnws start",
        "clean:babelrc": "find ./node_modules -name react-packager -prune -o -name '.babelrc' -print | xargs rm -f",
        "postinstall": "npm run clean:babelrc"
    },
    "repository": {
    "type": "git",
    "url": "xyz"    },
    "keywords": [
    "ftesting"
    ],
    "author": "ls",
    "license": "MIT",


    "engines": {
    "node": ">=4",
    "npm": ">=2 <4"
  },

    "devDependencies": {


        "babel-eslint": "^6.0.0-beta.1",

    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-1": "^6.5.0",


        "eslint": "~2.2.0",
    "eslint-loader": "^1.1.1",
    "eslint-plugin-react": "^4.2.0"

    },


    "dependencies": {

    "react-native": "^0.21.0",

    "@remobile/react-native-splashscreen": "^1.0.3",

    "react-native-blur": "^0.7.10",
    "react-native-htmlview": "^0.2.0",


    "react-native-material-kit": "^0.3.0", 
    "react-native-material-design": "^0.3.3"
    }
}

score 2 · Answer 1 · answered Mar 15 '16 at 03:02

2

There's a github issue posted with this problem. You can follow there: https://github.com/facebook/react-native/issues/6390

answered Mar 15 '16 at 03:02

Stefan Turcanu

904
9
13

score 0 · Answer 2 · answered May 02 '16 at 19:47

Maybe it's silly problem for someone else, if it helps, for me the problem solved when I connected the wifi (I had disconnected it :)

I realized it was a connectivity problem, when I've requested from the browser the url which react native is getting the index.bundle from (the one in config settings in device app) and found that it was reachable...

I'm using 0.25.0-rc

score 0 · Answer 3 · answered May 15 '16 at 00:34

It is definitely working now. Tested with 0.25.1 Look at the replies in the linked github issue.

Overall, I think the big problem was that once react-native team addressed the orginal issue that was introduced in 0.21, they changed the way you are supposed to build the application.

And if you did not change, the error was salient. So it was impossible to catch it during debug/build process.

Basically since Feb 2016, you are no longer supposed to pull react-native jar from maven repository. Instead, you need to point your gradle.build to the react-native jar from the npm-modules location

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

and then

compile "com.facebook.react:react-native:+"

this combination of changes above, allowed me to link to the latest copy of the react-native jar, rather than pulling 0.20.1 from maven (and notice that 0.20.1 from maven had not been modified since feb 2016).

score 0 · Answer 4 · answered Mar 12 '19 at 18:12

This is for apps created with react-native init or ejected from expo. Start de app with:

react-native run-android

The emulator will show the red screen debugger connection error (that is why we are here in the first place).

With the emulator in focus press:

Ctrl+M

or from the shell issue:

adb shell input keyevent KEYCODE_MENU

The in app Developer Menu will appear:

Click in

Dev settings

Select the option:

Debug server host & port for device

And enter:

localhost:8081

Now we’ll make calls in port 8081 in the emulator go to the same port on the host machine. From the shell do:

adb reverse tcp:8081 tcp:8081

Ready, just restart the app

react-native run-android

React-native 0.21 (android) remote debugger (Chrome) cannot connect

4 Answers4