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

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"
}
}

Answer 1

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

Answer 2

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

Answer 3

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).

Answer 4

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