App crash on opening it on android device. Build successfully but raising an error "Failed to connect to development server".
There can be multiple issues with this.
Check that your node package mananger is running close it, connect
your mobile and run the following command.
adb reverse tcp:8081 tcp:8081
npx react-native start
it my solve your problem.
second
if you want wireless debugging, shake your cellphone it will open the debug menu click on the setting , find your ip address witht he command ipconfig/all and then click on Debug server host & port for device enter your IP like this xxx.xxx.xx.xx:8081 and press R from your development server.
Hope this solve your porblem
Related
I'm setting up my development environment for React Native with a custom Android Emulator (Nox).
I followed the steps on this website:
How to connect Android Studio with Nox App Player
But when I type: adb devices it still shows nothing.
So when I try to run my app with react-native run-android it says that there is no Android simulator running.
Is there something I missed or someone with the same problem?
Open terminal and type adb connect 127.0.0.1:62001. type adb devices to make sure your emulator is connected.
Go to your project, type react-native run-android --deviceId 127.0.0.1:62001, waiting for the project to finish compiling, and the you will see a red error screen.
Open the developer menu, Go to Dev Settings → Debug server host for device, Assume your local ip is 192.168.1.121, then type: 192.168.1.121:8081
Use developer menu to reload your app,then close the app, and reopen it.
Open terminal and type adb connect 127.0.0.1:62001. type adb devices
to make sure your emulator is connected.
Go to your project, type react-native run-android --deviceId 127.0.0.1:62001, waiting for the project to finish compiling, and then you will see a red error screen.
Open the developer menu, Go to Dev Settings → Debug server host for device, Assume your local ip is 192.168.1.121, then type:
192.168.1.121:8081
Use developer menu to reload your app,then close the app, and reopen it.
Just in step 2 type react-native run-android (if you don't work with android >10 add prefix) --no-jetifier. It works for me!
it mean for android v 4.1.1 in nox emulator adb connect 127.0.0.1:62001
for android v 5.1.1 in nox emulator adb connect 127.0.0.1:62025
adb connect localhost:62001
react-native run-android --deviceId localhost:62001
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
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
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".
I'm working on React Native on Windows and I have a problem on my device (Android 4.1.2).
I am following the tutorial but, i have a problem when i run on my device then it shows red screen with error message "Unable to download JS bundle"
My question is about the second part : when i Configure device to connect to the dev server via Wi-Fi. When I go to "developer options", to write my machine's IP address then app is crash
How can I try to resolve this error ?
To run with local server, run the following commands under your
react-native project root directory
react-native start > /dev/null 2>&1 &
Make sure your laptop and your phone are on the same Wi-Fi network.
Open your React Native app on your device.
You'll see a red screen with an error. This is OK. We'll fix this in the following steps.
Open the Developer menu by shaking the device or running adb shell input keyevent 82 from the command line.
Go to Dev Settings.
Go to Debug server host for device.
Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081). On Mac, you can find the IP address in
System Preferences / Network. On Windows, open the command prompt
and type ipconfig to find your machine's IP address (more info).
Go back to the Developer menu and select Reload JS.