Develop Reference

React-native Timeout when connecting to remote debugger in windows

I am new to React-Native and android app development as a whole. While i try to run remote debugger in Android Emulator (Pixel 2 phone), I get the following error in the emulator:
Then after, even if I stop remote debugging, the application won't run on the emulator (i.e. nothing is rendered into the emulator screen). I need to run the project again.
Following is the auto-generated debugger URL: http://10.0.2.2:8081/debugger-ui
How can I Fix this problem?

http://10.0.2.2:8081/debugger-ui This is internal IP the Android VM, with your browser use localhost:8081/debugger-ui reference https://github.com/facebook/react-native/issues/16674#issuecomment-376774645

uninstall your application, then run => react-native run-android in terminal then click debugging end in chrome replace http://localhost:8081/debugger-ui/, end run react-native run-android. if you still haven't succeeded try again

React native error in launching app with android emulator

I get following error when I run react-native run-android in CMD(windows command prompt)
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html
What caused This problem?
Thanks in Advance.

check your device connected or not by execute below command in cmd
adb devices
if adb not found then open below dir
C:\Users\MANGO\AppData\Local\Android\sdk\platform-tools
then check device connected or not
then you can lunch your app
i hope it solve your problem

Set the sdk platform tools path in system variable inside Enviroment variable.
With this you can check the connected devices from command promt.
Note: Make sure you have connected your device to PC with USB debugging On from developer menu. You can follow this link
Then follow following steps.
From command prompt type " adb devices ", if you are connecting the real android device first time then inside your device there will be a RSA key generated which you have to click "OK".
Then to confirm from devices you can again type adb devices if all went good it will show your device.
Move to your project folder from command prompt and then run your app from command prompt.

Unable to connect with remote debugger

I'm using React.JS and when I do react-native run-android (with my device plugged in) I see a blank page. When I shake the device and select Debug JS Remotely from the option list I see the following screen.
FYI:
OS: Ubuntu 16.04
Node version is: v4.6.2
java version "1.8.0_111"
react": "15.4.1
react-native": "0.38.0

In my case the issue was that the emulator was making a request to:
http://10.0.2.2:8081/debugger-ui
instead of:
http://localhost:8081/debugger-ui and the request was failing.
To solve the issue: Before enabling remote debugging on your emulator, open http://localhost:8081/debugger-ui in chrome. Then enable remote debugging and go back to the chrome page where you should see your console logs.

Solved the issue following:
Press Cmd + M on emulator screen
Go to Dev settings > Debug server host & port for device
Set localhost:8081
Rerun the android app: react-native run-android
Debugger is connected now!

I solved it doing adb reverse tcp:8081 tcp:8081 and then reload on my phone.

In my case, selecting Debug JS Remotely launched Chrome, but did not connect with the android device. Normally, the new Chrome tab/window would have the debugging URL pre-populated in the address bar, but in this case the address bar was blank. After the timeout period, the "Unable to connect with remote debugger" error message was displayed. I fixed this with the following procedure:
Run adb reverse tcp:8081 tcp:8081
Paste http://localhost:8081/debugger-ui into the address field of my Chrome browser. You should see the normal debugging screen but your app will still not be connected.
That should fix the problem. If not, you may need to take the following additional steps:
Close and uninstall the app from your Android device
Reinstall the app with react-native run-android
Enable remote debugging on your app.
Your app should now be connected to the debugger.

I had a similar issue that led me to this question. In my browser debugger I was getting this error message:
Access to fetch at 'http://localhost:8081/index.delta?platform=android&dev=true&minify=false' from origin 'http://127.0.0.1:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
It took me awhile to realize I was using 127.0.0.1:8081 instead of localhost:8081 for my debugger.
To fix it, I simply had to change Chrome from:
http://127.0.0.1:8081/debugger-ui/
to
http://localhost:8081/debugger-ui/

My case is that when I tap enable remote JS debugging, it will launch chrome, but can not connect to it.
I have tried to run:
adb reverse tcp:8081 tcp:8081
, did but not work.
I uninstalled my chrome totally and install a new one. And it works.

The other answers here were missing one crucial step for me. In AndroidManifest.xml I needed to add usesCleartextTraffic:
<application
...
android:usesCleartextTraffic="true">
You probably don't want to keep this in the production release of your app though, unless you want to support insecure http requests.
After I added this to my AndroidManifest.xml, then I followed Tom Aranda's answer, and the emulator was finally able to connect to the debugger.

Make sure that the node server to provide the bundle is running in the background. To run start the server use npm start or react-native start and keep the tab open during development

react-native start --reset-cache in one tab and react-native run-android in another
adb reverse tcp:8081 tcp:8081 ( so you could add it to your scripts and just run yarn run adb-reverse)
If you're using android, Instead of shake your phone a great tip is run adb commands.
So you can run:
adb shell input keyevent 82 (menu option )
adb shell input keyevent 46 46 ( reload )

I did #sajib s answer and used this script to redirect ports:
#!/usr/bin/env bash
# packager
adb reverse tcp:8081 tcp:8081
adb -d reverse tcp:8081 tcp:8081
adb -e reverse tcp:8081 tcp:8081
echo "🚧 React Native Packager Redirected 🚧"

uninstall your application, then run react-native run-android. then click debugging end in chrome replace http://localhost:8081/debugger-ui/, end run react-native run-android. if you still haven't succeeded try again

Inculding all impressive answers the expert developers specially Ribamar Santos provided, if you didn't get it working, you must check something more tricky!
Something like Airplane mode of your (emulated) phone! Or your network status of Emulator (Data status and Voice status on Cellular tab of Emulator configuration) that might be manipulated to don't express network! for some emulation needs!
I've overcome to this problem by this trick! It was a bit breathtaking debug to find this hole!

in my case it also need to install it's npm package
so
npm install react-native-debugger -g

Try adding this
package.json
devDependencies: {
//...
"#react-native-community/cli-debugger-ui": "4.7.0"
}
Terminate everything.
npm install
npx react-native start
npx react-native run-android
Reference: https://github.com/react-native-community/cli/issues/1081#issuecomment-614223917

Trouble shooting React native with React Cli and Typescript/js (Android Emulator)
Check if 'android/src/mai/assets/index.android.bundle' is available. If no Create index.android.bundle file in 'android/src/main/assets'
If above path not available then create the path then file
3.Run for bundling : react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
4.a. By default development server runs on 8081 port. Run 'react-native start' then on browser check if 'http://localhost:8081' and 'http://yourIP:8081' works. If yes then
Open application in Android Emulator (react-native run-android)
Click Ctrl + M
Select Settings
Select Debug Server Host and Port For Device
Add 'YourIPAddress:8081' e.g. 10.0.2.2:8081
4.b If http://localhost:8081 not working then run react-native port=8088(or any port)once successfully executed. Check on browser http://localhost:8088 and http://yourIP:8088 works. Yes then Open application in Android Emulator (react-native run-android)
Click 'Ctrl + M'
Select Settings-
Select Debug Server Host and Port For Device-
Add 'YourIPAddress:8081' e.g. 10.0.2.2:8088
YourIPAddress : Open command promt -> write 'ipconfig' -> copy IPv4 address

As for my own case , i was using the expo go and my android phone for my emulator and it was giving me this error.
so what i did was to clear the expo go app cache & data on my android device. it was working just fine

TL;DR:
If you created the app with expo cli with some native code or libraries not supported by expo, try this command in case the other solutions do not work.
npx expo run:android
Docs
My scenario:
I tried to run one of my old expo applications by building the app from Android studio and faced this issue. The other solutions mentioned didn't work. When I tried to use Expo Go to scan the QR, I got to know the error. Since I had used react-native-mmkv, I couldn't use expo-cli, I had to eject. So I ran npx expo run:android and everything started working fine.

The solution is to clear the expo go application data to solve the problem. Ref to: How to disable Remote JS Debugging in React-Native

dev server returned error code 403 react native

Followed the steps here to try react-native android on a windows box.
On a separate prompt I executed react-native start which is running fine
Started the AVD from AVD Manager
Executed react-native run-android
BUILD SUCCESSFUL
Total time: 27.632 secs
Starting the app on emulator-5554 (D:\software\Android\android-sdk/platform-tool
s/adb -s emulator-5554 shell am start -n com.awesomeproject/.MainActivity)...
Starting: Intent { cmp=com.awesomeproject/.MainActivity }
Executed react-native run-android on a separate console from within same folder
But I see an error which I'm having hard time to resolve. Please suggest resolution.
---EDIT---
Possibly the issue is that 8081 port is in use by McAfee. So I updated the server.js to run dev port on 8088 and now when I browse http://localhost:8088/index.android.bundle?platform=android I can see JS loading.
But how do I make android use this address instead of default **10.0.2.2:8081?** I found a file AndroidInfoHelpers.java which contains that 10.0.2.2 path but not sure if that's the way as being a JAVA file I possibly need to recompile whole program. There should be a simpler way to point android app to use a different port for dev server.
Also, when I execute react-native run-android the first line that gets output says "JS Server not recognized.. Continuing with the build" which likely is shouting the same thing.

A) Set the new port for dev server
User command
react-native start --port=8088
or yourproject\node_modules\react-native\local-cli\server\server.js
to set the the available port say 8080
now use react-native start to start server on 8080
B) Now to establish communication between emulator and dev server, use below command
adb -s emulator -5554 reverse tcp:8088 tcp:8088
i) 5554 =>emulator port (adb devices command will tell you emulator port but if this command is not working then set the path C:/../android-sdk/platform-tools in Path environemnt variable )
ii) 8088 =>server port
C) run the command react-native run-android
D) Follow below steps updating Dev server path in emulator
i) Ctrl + M for windows to open your dev menu for the emulator.
ii) Click Dev Settings
III) Under Debugging select Debug server host & port for device
IV) Enter the url and port for your application as 10.0.2.2:8088

Press cmd + M (Ctrl + M for windows) to open your dev menu for the emulator (Please make sure your react-native app is open in the active window of the android emulator before using this command)
Click Dev Settings
Under Debugging select Debug server host & port for device
Enter the correct url and port for your application in your case 10.0.2.2:8088
Once you do that you can reload your application and it should work.

1) First set the port number as 8088 in below file
yourproject\node_modules\react-native\local-cli\server\server.js
now build the project.
2) Follow below steps updating Dev server path in emulator
Ctrl + M for windows to open your dev menu for the emulator.
Click Dev Settings
Under Debugging select Debug server host & port for device
Enter the url and port for your application as 10.0.2.2:8088

This issue might occur because of the blockage of default port. In my case, I was able to fix it after executing following steps-
Start dev server on a new port:-
react-native start --port=8088
Open developer menu by vibrating on actual connected device or pressing 'Ctrl + M' on emulator.
Select Dev Settings
Under Debugging select Debug server host & port for device
Enter the url and port for your application as '10.0.2.2:8088'

Just run this one your phone, it is a waste of time to try to figure out the hard coded React code for the emulator. It just does not seem like enough time was spent fixing this issue. Spent 3 days on reading way to many blogs, and trying way to many things and nothing worked. Our company also runs McAfee and I had the same issue.

This worked for me. Does the same thing but quick.
Just set the port when run the app
react-native run-android --port=8082

React Native 'hello world' quick start: "could not connect to development server"

I'm trying to do the react native 'hello world', and I'm using usb debugging on my android.
I ran react-native run-android, then react-native start.
I can view the js file in localhost, but get 'could not connect to development server' message on my phone.
I followed the instructions to run adb reverse tcp:8081 tcp:8081, then realized that command doesn't exist, so I ran adb forward tcp:8081 tcp:8081 instead.
Still no luck. Using react-native#0.22.0, ubuntu 14.04. My phone is nexus 5 on android 6.0.1.
How can I allow my phone to access my localhost?
By the way, it is working over wifi, but I'd like to get it working over usb.

Just another scenario, this error happened to me when I forgot to run react-native start command. I usually follow the steps here when I start new project. The steps in a nutshell are as follows (Android in my case):
Start Android Studio -> AVD Manager -> select your aVD and click Start from action
inside the directory where you want to create your new project, open your command line and run:
$ react-native init <Your new project name/it is also the registration name>
$ cd <the new directory you created>
$ react-native start //This is the step that I forgot
Open a new command prompt and run the following inside the same directory(you just created) to launch the app on your AVD.
$ react-native run-android
If everything is set up correctly, you should see your new app running in your Android emulator shortly.
You'll find in the file index.android.js in the home directory of your project, the last line contians the App registry using the same name you used in the first command above

adb reverse tcp:8081 tcp:8081 Only works for android 5.0 + for running app on devices with android versions lesser than 5.0 hit following command after npm start is done in Terminal (in app directory folder).
curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
now run the app, it will work. Only drawback is that every time you make a change you need to fire the command again and run the app again.

I found the solution :)
I am on ubuntu 16, so, I used command ip addr show which gave me my computer ip address.
I used this ip address and I was able to access localhost on my mobile.
Finally I added the ip address and port no to devsettings of android phone and My app was able to access development server

10 mins ago I had the same problem I guess, and the way I solved this was reading this
https://facebook.github.io/react-native/docs/running-on-device-android.html
and when I did that, I found that I didn't have android-tools-adb installed,
so looking around I found
'No command 'adb' found' error on Ubuntu
which gives me the answer
sudo apt-get install android-tools-adb
and after all this I set
export PATH=${PATH}:~/android-sdk-linux/tools
export PATH=${PATH}:~/android-sdk-linux/platform-tools
then everything works fine, now I can see my app in my Android device.
BTW the option I choose from react native docs was the one that says me
"Using adb reverse
Note that this option is available on devices running Android 5.0+ (API 21).
Have your device connected via USB with debugging enabled (see paragraph above on how to enable USB debugging on your device).
Run adb reverse tcp:8081 tcp:8081
You can use Reload JS and other development options with no extra configuration

I am having seen the same issue, and that's all because the android app don't have this permission:
<uses-permission android:name="android.permission.INTERNET" />

I had a similar problem. I would get this error when trying to get it to run on device. It was working fine on my simulators on my computer.
The problem was when I would do adb devices or react-native run-android I would get "ADB is Not Recognized as an internal or external command".
So my fix was to add the path to adb.exe's parent directory to my Environment Variables and then restart my command prompts. After I did that, adb devices would not throw the "unrecognized internal external blah" and it listed my device. I then ran react-native run-android and on startup no more red screen showing the completely useless error message Error calling AppRegistry.runApplication! :)
So I found ADB was located in my folder:
C:\Users\dell\AppData\Local\Android\sdk\platform-tools\adb.exe
I am on a Windows 10 system. dell is my user name of the computer.
So I went to System Environemnt Variables then found "Path" then clicked "Edit", then clicked "New" and added in "C:\Users\dell\AppData\Local\Android\sdk\platform-tools".