I'm trying to run AwesomeProject on my Nexus5 (android 5.1.1).
I'm able to build the project and install it on the device. But when I run it, I got a red screen saying
Unable to download JS bundle. Did you forget to start the development server or connect your device?
In react native iOS, I can choose to load jsbundle offline. How can I do the same thing for Android? (Or at least, where can I configure the server address?)
Update
To run with local server, run the following commands under your react-native project root directory
react-native start > /dev/null 2>&1 &
adb reverse tcp:8081 tcp:8081
please take a look at dsissitka's answer for more details.
To run without a server, bundle the jsfile into the apk by running:
create an assets folder under android/app/src/main
curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
please take a look at kzzzf's answer for more details.
To bundle JS file into your apk while having your server running (react-native start) download bundle into assets directory of your app:
curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
With the next release (0.12) we'll fix react-native bundle command to work with android projects as expected.
The following made it work for me on Ubuntu 14.04:
cd (App Dir)
react-native start > /dev/null 2>&1 &
adb reverse tcp:8081 tcp:8081
Update: See
Running On Device (Android)
Device warning suppressed?
Update 2: #scgough We got this error because React Native (RN) was unable to fetch JavaScript from the dev server running on our workstations. You can see why this happens here:
https://github.com/facebook/react-native/blob/42eb5464fd8a65ed84b799de5d4dc225349449be/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevServerHelper.java#L116-L137
If your RN app detects that you're using Genymotion or the emulator it tries to fetch the JavaScript from GENYMOTION_LOCALHOST (10.0.3.2) or EMULATOR_LOCALHOST (10.0.2.2).
Otherwise it presumes that you're using a device and it tries to fetch the JavaScript from DEVICE_LOCALHOST (localhost).
The problem is that the dev server runs on your workstation's localhost, not the device's, so in order to get it to work you need to either:
Forward traffic from (Device's localhost):8081/tcp to (Workstation's localhost):8081/tcp. That's what that adb command does.
Tell your RN app where it can find your dev server.
Ok, I think I've figured what the issue is here. It was to do with the version of watchman I was running.
In a new shell, run brew update
then: brew unlink watchman
then: brew install watchman
now, you can run react-native start from your project folder
I leave this shell open, create a new shell window and run: react-native run-android from my project folder. All is right with the world.
ps. I was originally on version 3.2 of watchman. This upgraded me to 3.7.
pps. I'm new to this so that might not be the swiftest route to the solution but it has worked for me.
* MORE INFO FOR RUNNING/DEBUGGING ON A DEVICE *
You might find that if you deploy your app to your Android device rather than an emulater you get a red screen of death with an error saying Unable to load JS Bundle. You need to set the debug server for your device to be your computer running react...either its name OR IP address.
Press the device Menu button
Select Dev Settings
Select Debug server host for device or Change Bundle Location
Type in your machine's IP and Reload JS plus the react port e.g. 192.168.1.10:8081
More info: http://facebook.github.io/react-native/docs/running-on-device-android.html
From your project directory, run
react-native start
It outputs the following:
$ react-native start
┌────────────────────────────────────────────────────────────────────────────┐
│ Running packager on port 8081. │
│ │
│ Keep this packager running while developing on any JS projects. Feel │
│ free to close this tab and run your own packager instance if you │
│ prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
/home/user/AwesomeProject
React packager ready.
[11:30:10 PM] <START> Building Dependency Graph
[11:30:10 PM] <START> Crawling File System
[11:30:16 PM] <END> Crawling File System (5869ms)
[11:30:16 PM] <START> Building in-memory fs for JavaScript
[11:30:17 PM] <END> Building in-memory fs for JavaScript (852ms)
[11:30:17 PM] <START> Building in-memory fs for Assets
[11:30:17 PM] <END> Building in-memory fs for Assets (838ms)
[11:30:17 PM] <START> Building Haste Map
[11:30:18 PM] <START> Building (deprecated) Asset Map
[11:30:18 PM] <END> Building (deprecated) Asset Map (220ms)
[11:30:18 PM] <END> Building Haste Map (759ms)
[11:30:18 PM] <END> Building Dependency Graph (8319ms)
An easy solution that works for me with Ubuntu 14.04.
react-native run-android
The emulator (already launched) will return: Unable to download JS Bundle; start again the JS server:
react-native start
Hit Reload JS on the emulator.
It worked for me. Hope it will help
In the app on android I opened Menu (Command + M in Genymotion) -> Dev Settings -> Debug server host & port for device
set the value to: localhost:8081
It worked for me.
After trying out a combination of the answers here, this is what is working for me.
I'm using Genymotion as my emulator.
1 Start up Genymotion emulator.
2 From a terminal
cd AwesomeProject
react-native run-android # it loads in genymotion and fails with bundle error
react-native start > /dev/null 2>&1 & # from dsissitka
adb reverse tcp:8081 tcp:8081 # from dsissitka
3 Reload from emulator.
It loads!
I can now begin developing.
Delete the App from your phone! I tried several steps, but that did it eventually.
If you tried to run your app before but failed, delete it from your android device.
Run $ react-native run-android
Open the React Rage Shake Menu from within your app on your android device, go to Dev Settings and then to Debug server host & port for device. There enter your server IP (IP of your computer) and host 8081, e.g. 192.168.50.35:8081. On a mac you can find the IP of your computer at System Preferences -> Network -> Advanced... -> TCP/IP -> IPv4 Address.
Open the Rage Shake Menu again and click Reload JS.
Apparently adb reverse was introduced in Android 5.0
Getting "error: closed" twice on "adb reverse"
I guess we have to go ahead with kzzzf's answer
I don't have enough reputation to comment, but this is referring to dsissitka's answer.
It works on Windows 10 as well.
To reiterate, the commands are:
cd (App Dir)
react-native start > /dev/null 2>&1 &
adb reverse tcp:8081 tcp:8081
Here are the simple steps to run your app on android(release):
1. Go to your application root.
2. Run this command.
react-native bundle --platform android --dev false --entry-file
index.android.js --bundle-output
android/app/src/main/assets/index.android.bundle --assets-dest
android/app/src/main/res
All your files are copied.
3. Create signed APK.
Open android studio.
Build > Generate Signed APK > [Fill required details, keystroke has to be generated before this step]
Your APK should be generated without any errors. Install on your device and this should work without any issues.
You can also connect your device and directly hit Run icon on android studio for testing.
Generating Keystroke:
Goto C:\Program Files\Java\jdkx.x.x_x\bin
Run
keytool -genkey -v -keystore d:\my_private_key.keystore -alias
my-key-alias -keyalg RSA -keysize 2048 -validity 10000
It will probably ask you to fill in some details. Do it and your have your keystroke file(my_private_key.keystore) which can be used to sign your apk.
I was getting this on Linux after stopping down the react-native run-android process. Seems the node server is still running so the next time you run it, it won't run properly and your app can't connect.
The fix here is to kill the node process which is running in an Xterm which you can kill by ctrl-cing that window (easier) or you can find it using lsof -n -i4TCP:8081 then kill -9 PID.
Then run react-native run-android again.
Check your wifi connection.
Another possibility could be you are either not connected to wifi, connected to the wrong network, or the ip address is wrong in your dev settings. For some reason, my android disconnected from the wifi and I started to get this error, unknowingly.
Running on device
I have found another answer.
adb reverse: only work on Android 5.0+ (API 21).
Another: Open the Developer menu by shaking the device, 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
An update
Now on windows no need to run react-native start. The packager will run automatically.
One important thing to check that no one has mentioned so far:
Check your local firewall, make sure it's turned OFF.
See my response here:
https://stackoverflow.com/a/41400708/1459275
I am using Ubuntu and Android only, and I was unable to get it running. I found a really simple solution which is to update your package.json file, changing this lines:
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
to
"scripts": {
"start": "adb reverse tcp:8081 tcp:8081 && node node_modules/react-native/local-cli/cli.js start"
},
And then you run the server by typing
npm run start
This ensures the android device looks for the node server on your computer instead of locally on the phone.
The initial question was about reloading the application in a phyisical device.
When you're debugging the application in a physical device (ie via adb), you can reload the JS bundle by clicking on the top left "action" button of your device. This will open the option menu (Reload, Debug JS remotely...).
Hope this helps.
This error can easily resolved by following steps:
//run the command at /android sdk / platforms-tool folder
adb reverse tcp:8081 tcp:8081
//now come to root folder of your app
1. npm start
2. create 'assets' folder inside rootApp/android/app/src/main/
3. curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
4. make sure anyone physical or virtual device attached is running.
5. react-native run-android
You can follow the instruction mentioned on the official page to fix this issue. This issue occur on real device because the JS bundle is located on your development system and the app inside your real device is not aware of it's location.
In new React Native (for sure 0.59) debug config is inside android/app/src/debug/res/xml/react_native_config.xml
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="false">localhost</domain>
<domain includeSubdomains="false">10.0.2.2</domain>
<domain includeSubdomains="false">10.0.3.2</domain>
</domain-config>
</network-security-config>
Start the two terminal on the same and 1st terminal run react-native start and second terminal react-native run-android this problem are solve in simply way. And best of luck
I found this to be weird but I got a solution.
I noticed that every once in a while my project folder went read-only and I couldn't save it from VS. So I read a suggestion to transfer NPM from local user PATH to system-wide PATH global variable, and it worked like a charm.
### Here is my solution
None of the above solutions can solve my problem but only follow the below steps working for me.
Add in network-security-config.xml file
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">10.0.2.2</domain>
</domain-config>
...
Then update AndroidManifest.xml file with
<application
+ android:networkSecurityConfig="#xml/network_security_config"
...
Hey I was facing this issue with my react-native bare project, the IOS simulator works fine but android kept giving me this error. here is a possible solution which has worked for me.
step 1, check if the adb device is authorized by running in your terminal : adb devices
if it is unauthorised run the following commands
step 2, sudo adb kill-server
step 3, sudo adb start-server
then check if the adb devices command shows
list of devices attached
emulator-5554 device
instead of unauthorized if it is device instead of unauthorized
step 4, run npx react-native run-android
this has worked in my instance.
Running npm start from react-native directory worked out for me.
Related
So I literally just started my react native app and am trying to run the app on the simulator. I am using Genymotion and am on the Mac. I have upgraded Genymotion to the latest.
Stack:
npm: 6.4.1
react-native: 0.57.1
react-native-cli: 2.0.1
I have done these steps:
adb reverse tcp:8081 tcp:8081
npm start
react-native run-android
I did steps 1-2 in one terminal tab and step 3 in another. I have tried to add port 8081 as a flag on step 3 and that did not work. I also tried to do this:
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
and it did not work. Instead I get this as an error:
Unable to resolve module `#babel/runtime/helpers/interopRequireDefault` from `/Users/jeffrey/projects/desti/index.js`: Module `#babel/runtime/helpers/interopRequireDefault` does not exist in the Haste module map
Update:
Ok I resolved it. I added this to my dependecies: "#babel/runtime": "^7.0.0-beta.55". I yarn installed and did steps 1-3 again. However, now I run into the issue of 'could not connect to development server'
Update2:
nvm, what I said before resolved it. I don't know what happened with that device I created in Genymotion, but I had to delete it and recreate it and it worked. I noticed this because I had a Pixel simulator on Genymotion and it worked fine, but not this one.
How should I close this?
If you cannot load it from localhost, and exhausted all options - try the below:
Option 1 (Change your listening address IP and port)
Get your Mac IP Address:
Use ipconfig getifaddr en1 for wireless, or ipconfig getifaddr en0 for ethernet.
(Kindly taken from: https://apple.stackexchange.com/questions/20547/how-do-i-find-my-ip-address-from-the-command-line)
Open your development console in React Native:
Go to your emulator > CMD + M or adb shell input keyevent 82 - Then in the menu that opens, go to Dev Settings, debug server & host port for device, and edit the IP and port (enter the IP you have from your command prior and the port will likely be 8081) like 1.1.1.1:8081
Go back and reload JS. If the metro bundler has not started, in your cmd type react-native start.
Option 2: From Android Studio
Open your project in Android Studio and Run your project there. Again, if the metro bundler isn't present run the react-native start
I found out the answer myself. I needed to add the dependency: "#babel/runtime": "^7.0.0-beta.55". I don't know why it solved it, but it did.
Have set up React native on my Windows box and it continually gives me this message when running react-native start:
ERROR Packager can't listen on port 8081
Ok, so I change it per instructions to:
react-native start --port=8088
This works great and I receive this:
[12/24/2016, 10:03:33 AM] HMR Server listening on /hot
React packager ready.
[12/24/2016, 10:03:41 AM] <START> Initializing Packager
[12/24/2016, 10:03:41 AM] <START> Building in-memory fs for JavaScript
[12/24/2016, 10:03:41 AM] <END> Building in-memory fs for JavaScript (103ms)
[12/24/2016, 10:03:41 AM] <START> Building Haste Map
[12/24/2016, 10:03:41 AM] <END> Building Haste Map (64ms)
[12/24/2016, 10:03:41 AM] <END> Initializing Packager (221ms)
So as instructed I then run this:
C:\ReactProjects\AwesomeProject>react-native run-android
And get this:
JS server not recognized, continuing with build...
Running C:\Users\<user>\AppData\Local\Android\sdk/platform-tools/adb -s emulator-5554 reverse tcp:8081 tcp:8081
Building and installing the app on the device (cd android && gradlew.bat installDebug)...
JS server not recognized, continuing with build...
Running C:\Users\<user>\AppData\Local\Android\sdk/platform-tools/adb -s emulator-5554 reverse tcp:8081 tcp:8081
Building and installing the app on the device (cd android && gradlew.bat installDebug)...
.
.
.
BUILD SUCCESSFUL
Total time: 19.304 secs
Starting the app on emulator-5554 (C:\Users\<user>\AppData\Local\Android\sdk/platform-tools/adb -s emulator-5554 shell am start -n com.awesomeproject/.MainActivity)...
Starting: Intent { cmp=com.awesomeproject/.MainActivity }
Sadly the emulator then gives me:
“Could not get BachedBridge, make sure your bundle is packaged correctly”
So there are instructions that state you must change the port on the emulator, but I am using the Nexus 5 running Marshmellow and cannot find that setting:
You will also need to update your applications to load the JavaScript bundle
from the new port. Open the in-app Developer menu, then go to Dev Settings → Debug
server host for device and replace 8081 with your port of choice.
Anyone have an idea of how to set the emulator up to recognize the packager?
Sadly the Rect native error messages are not that user friendly. :(
The error “Could not get BachedBridge, make sure your bundle is packaged correctly” means your device is not connected to your system.
Basically, when we start the react-native it deploy stuffs into the mobile/emulator, but when the app runs in mobile/emulator it does not know from where it need to pull code stuffs eg, assests, bundle packages etc.
So, we need to tell emulator that, boss please pick all your stuffs from blahblah server at blah blah port.
We have to do exactly what you have mentioned in the question.
Open the in-app Developer menu, then go to Dev Settings → Debug server host for device
Ok so we need to achieve 2 things:
Open Developer menu in emulator:
Developer menu is a modal pop up with bunch of options like, Reload, Debug JS Remotely, Enable Live Reload, Enable Hot Reload, Toggle Inspector ... , Dev Setting (this is the one we are interested in).
There are number of ways to do that (mentioned below), see what works for you
If you are Mac user simply press CMD + M. It will open up a pop up for you
If you are a non Mac try CTRL + M
For some people pressing F2 worked. "fn + F2"
If you are frustrated and nothing is working try running below command in terminal (obviously while the emulator is up) Running on Device:
adb shell input keyevent 82
Set up Dev Settings -> Debug to server host and port for device**
After opening Developer Menu navigate to "Dev Settings -> Debug to server host and port for device".
This place is the holy grail for solution to your problem.
Get your machine IP address and port where you have started react-native (i.e. 8088) and enter here. It will look something like "192.168.1.105:8088".
Checkout the image link here
Click OK and reload the app (by pressing R twice or by clicking Reload in Developer Menu) and voila you are up.
I was facing a similar issue since even my Windows laptop has McAfee installed on it. The issue was fixed for me by following the steps mentioned below :
1) Navigate to the project root and start react-native on a different port by hard-coding this value in server.js ( Please refer this answer )
react-native start
2) Now, open another instance of command prompt in the root directory and run the below commands one after the other, ( optionally you can create a bat file with the following commands and then place it at the root directory ). Please replace the port number of the emulator ( in my case 5554 ) and port number for your react-native server ( in my case 8088 ) with appropriate values.
adb -s emulator -5554 reverse tcp:8088 tcp:8088
node node_modules/react-native/local-cli/cli.js bundle --platform android --dev true --reset-cache --entry-file index.android.js --bundle-output android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest android/app/build/intermediates/res/merged/debug
cd android && gradlew.bat installDebug
The node command is explained by sumit6b
3) After executing the above command, the react-native server would throw an error and stop, however, the apk file would be installed in our AVD. The name of the file would be the same as the name of our project. Open this file manually in the AVD. When the app opens, we can access Dev Settings by pressing Ctrl + M. Over here, go to Debug server host & port for device and type in localhost:8088 ( replace as needed with the appropriate port number ) and hit OK. Now, repeat steps 1 and 2 again. This time the react-native server would not terminate. Close the app opened earlier and again open the app manually in AVD. It should say "Fetching JS bundle" and the react-native server should say something like "Transforming Files"
4) At this point your react-native server and your AVD are synched. You can verify this by making some changes in index.android.js, and then douple tap R in the emulator.
5) If you still face any issues, try changing localhost with the IP address of your machine in the Debug server host & port for device settings present in AVD.
You can use following command for run packager on another port
react-native start --port=8082
OR You can find the process which is use port 8081 by
netstat -a -b -o
netstat give you PID of process. kill that process by
taskkill /F /pid 8081
If you use physical device then Uninstall app before run
react-native run-android
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
I am unable to run any react-native project.
It says there is already a process running. The port 8081 is taken by McAfee antivirus running on my MAC. And in no way I am able to kill it (even though I should not be killing it, I tried it, and looks like it never dies! SUDO has no power after all!)
Referring to #7308 #9145 and stackoverflow, I tried to run on port 8082. Server starts up, but, run-android still fails saying no device found.
I have both my device (Galaxy S7 Edge with Debug mode on) and Genymotion open.
React Native version details -
SATJAGAN-M-T0HZ:react-native-card-modal satjagan$ react-native -v
react-native-cli: 1.0.0
react-native: 0.37.0
Genymotion active and available -
bozzmob:Twitter bozzmobusr$ adb devices
List of devices attached
192.168.57.101:5555 device
Terminal Logs of running the app-
(Interestingly it says JS Server not recognized, is there any problem there)?
bozzmob:Twitter bozzmobusr$ react-native start --port 8082
Scanning 712 folders for symlinks in /Users/satjagan/collection/work/github/reactnative/react-native-card-modal/node_modules (15ms)
┌────────────────────────────────────────────────────────────────────────────┐
│ Running packager on port 8082. │
│ │
│ Keep this packager running while developing on any JS projects. Feel │
│ free to close this tab and run your own packager instance if you │
│ prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
/Users/satjagan/collection/work/github/reactnative/react-native-card-modal
[Hot Module Replacement] Server listening on /hot
React packager ready.
[11/26/2016, 2:47:25 PM] <START> Initializing Packager
[11/26/2016, 2:47:25 PM] <START> Building in-memory fs for JavaScript
[11/26/2016, 2:47:25 PM] <END> Building in-memory fs for JavaScript (184ms)
[11/26/2016, 2:47:25 PM] <START> Building Haste Map
[11/26/2016, 2:47:25 PM] <END> Building Haste Map (425ms)
[11/26/2016, 2:47:25 PM] <END> Initializing Packager (741ms)
bozzmob:Twitter bozzmobusr$ react-native run-android
**JS server not recognized, continuing with build...**
Running adb -s 192.168.57.101:5555 reverse tcp:8081 tcp:8081
Building and installing the app on the device (cd android && ./gradlew installDebug...
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.
Go to https://facebook.github.io/react-native/docs/getting-started.html
and check the Android tab for setup instructions.
Unfortunately uninstalling McAfee is not an option :(
I would have done it first if I had the freedom.
React-Native is still trying to connect to the packager on 8081. Usually you open the development menu and specify a different port, but in your case you can't even get started.
It doesn't appear that you can specify a port otherwise. I think you may have two options:
Temporarily kill McAfee, install, and change the port via the development menu, as mentioned here: https://facebook.github.io/react-native/docs/troubleshooting.html#terminating-a-process-on-port-8081
Change this file: https://github.com/facebook/react-native/blob/292cc82d0ebc437a6f1cdd2e972b3917b7ee05a4/Libraries/Core/Devtools/getDevServer.js
I had similar problem. I couldn't not stop the McAfee process via kill command. This was because it was running as a service. It could be stopped however by via lanuchctl tool. Try this:
cd /Library/LaunchDaemons
sudo launchctl unload com.mcafee.agent.macmn.plist
It wil stop the McAfee process that is taking 8081 port.
Here's what you should do to specify a non-default packager location:
(Physically shake the device) > Dev Settings > Debug server host & port for device > IP:Port
Notes:
Obviously, this requires the app to be installed on the device first. If you cannot do this automatically, just copy the created .apk manually onto the device and proceed with the instructions after installation.
AFAIK, at the time of writing, this option is unavailable in react-native for iOS.
To open the debugging menu on an emulator, you can play around with gyro/accelerometer sliders to simulate a shake (I tested it on the stock emulator on Windows, not GenyMotion). Perhaps there's an easier way to do it, but I am yet to find one.
I find in almost all cases when you know the app should run with your current project settings and code, if it doesn't work, try:
killall -9 node
because the Metro Bundler node process is what is probably having the issue. Sometimes it gets bunged up.
That's what I do, but you can more-specifically look at what processes are holding port 8081 and kill those. (try a command like sudo lsof -n -i4TCP:8081 (cite: lsof definition). If you are running some node.js APIs on your localhost, you should perhaps be more careful with killing all node processes, but if you are just doing React Native dev, you can safely do that.
Trying to create a react-native project on Android 4.4.2 I get this error screen
and couldn't find any way to resolve it. I tried restarting packager, reconnecting device, even reinstalling react native and starting new project. On 6.0.0 and later versions it works just fine.
A possible solution for this is that you most probably not bundling your application first, perform the following steps and then deploy your app-debug.apk to your device
$ cd myproject
$ react-native start > /dev/null 2>&1 &
$ curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
(if the folder assets does not exists create it)
Then run from project root
$> (cd android/ && ./gradlew assembleDebug)
install the created apk to you device, from location: android/app/build/outputs/apk/app-debug.apk
let me know if that fixes your issue
EDIT:
You can simply put it to your package.json as a script to automate it, I believe it will be fixed in upcoming releases of react-native and will be executed prior assembling the final APK, hence this won't be needed (I hope as well)
put :
"scripts": {
"build": "(cd android/ && ./gradlew assembleDebug)",
"start": "node node_modules/react-native/local-cli/cli.js start",
"bundle-android": "react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --sourcemap-output android/app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/"
},
or as mentioned the curl equivalent, but for most cases the above is more robust
I came across this issue as well.
What I did was force kill the app on my device, then I opened up another console and ran
react-native start
and then I opened the app again from my device and it started working again.
EDIT: If you are using an android device via USB and have unplugged it or your computer went to sleep, you may have to first run
adb reverse tcp:8081 tcp:8081
Just got this error. Here's what I did to fix:
I selected Dismiss, Went into the Developer menu, then Dev Settings,
Choose Debug server host & port for device, I added my computers IP address and the port: 192.168.0.xx:8xxx, use whatever your developer machines assigned IP address is on your wifi network. The port is usually :8081
Once I did this, all went well. Also, while you're in the dev menu remember to select Enable Live Reload and Debug JS Remotely, it makes your life much-much easier while debugging.
This is what worked for me (After trying every other solution i found ...):
Run adb reverse tcp:8081 tcp:8081 inside \Android\sdk\platform-tools
I got this also when I started for the first time with React Native, using a physical device. If that's the case, you need to do some extra things before you can get started. You have to enter some information about your development machine in the 'Dev Settings' of React Native.
When you see the error, shake your device. A dialog will popup, the last option will be 'Dev Settings'. Select 'Debug server hot & port for device' and enter your local IP and the used port (usually 8081).
See the last paragraph of https://facebook.github.io/react-native/docs/running-on-device-android.html
If none of the solution work for you try this:
I found that my <root>/android/app/build/intermediates/assets/debug folder was empty and by running cd android && ./gradlew assembleDebug was not creating those files required, which are later used by javascript thread in our react native apps.
I ran manually the following command which the debug build command should have created ideally.
node node_modules/react-native/local-cli/cli.js bundle --platform android --dev true --reset-cache --entry-file index.android.js --bundle-output /<path to dir>/android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest /<path to dir>/android/app/build/intermediates/res/merged/debug
After running these commands I found two bundle files in this directory <root>/android/app/build/intermediates/assets/debug
And then a I ran again cd android && ./gradlew installDebug my app started working again.
Will debug more and would update what is failing actually.
In a separate terminal, connect your device to the computer and run the following commands:
react-native start
cd user/Library/Android/sdk/platform-tools/
./adb reverse tcp:8081 tcp:8081
Application terminal:
react-native run-android
install apk on your device from this location android/app/build/outputs/apk/app-debug.apk
It's little too late but this really works for me.
react-native run-android.
react-native start.
First command will build apk for android and deploy it on your device if its connected. When you open the App it will show red screen with error. Then run second command which will run packager and build app bundle for you.
see issue:
1.react-native start
2.click Reload(R,R) on your device.
Try this command in terminal and then reload. It worked for me
adb reverse tcp:8081 tcp:8081
restart the genymotion
run react-native run-android
the problem was solved
I was having the same exception on the device Z3 Compact D5803 - 6.0.1
I went opened the .buckconfig file and changed the line:
target = Google Inc.:Google APIs:23
to
target = Google Inc.:Google APIs:24
Because i saw in SDK Manager that Android 6.X has api level 24.
For me, it's because adb was not in the PATH. It's located /Users/man/Library/Android/sdk/platform-tools for me, it may be somewhere else for you, but anyway, find it and add it to your path to see if that help.
Since you are using Android < 5.0 you can't use the default adb reverse method, but Facebook has added official documentation to connect to the development server via Wi-Fi, which would support your version. Quoting the instructions for MacOS, but they also have them for Linux and Windows:
Method 2: Connect via Wi-Fi
You can also connect to the development server over Wi-Fi. You'll first need to install the app on your device using a USB cable, but once that has been done you can debug wirelessly by following these instructions. You'll need your development machine's current IP address before proceeding.
You can find the IP address in System Preferences → Network.
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. The following steps will fix that.
Open the in-app Developer menu.
Go to Dev Settings → 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).
Go back to the Developer menu and select Reload JS.
It had this issue "randomly" and took me sometime to realize what was wrong in my scenario.
After I have updated to React-native-cli 2.0.1, there was a message output to the log which helped me to dig and find the root cause:
JS server not recognized, continuing with build...
After researching some links I found this one:
Unable to recognize JS server
Since I´m on windows, I ran netstat and found out that my VLC player was also running on port 8081 causing the issue.
So, in my case, if I started the vlc server prior to the react-native server it wouldn´t work.
This same log message wasn´t output on previous versions of the react-native-cli, making it fail silently.
TL, DR: check if there´s anything running on the same port as the package manager (8081 by default)
someone suggested the following one
react-native run-android
react-native start --reset-cache,
But in my case, I just close the cli command prompt window and used the following.
npx react-native run-android
and it worked fine.
My way are:
react-native start
After that in your device using:
click to Reload.
See in console react-native, it will be fetch js bundle data.
My issue was that I went through my AndroidManifest.xml file and had removed the line
<uses-permission android:name="android.permission.INTERNET" />
because my app will not need internet. However, the react native debugging app does need internet access (to access the packager) Whoops. :)
I had the same problem. When I did create a react native project via create-react-native-app AwesomeProject it worked well in Expo app on phone. After that I wanted to use that quickstart project for developing my project and got same error as you do.
After some research I find out it's better to start new project with react-native init AwesomeProject (with all setting in react native docs) Then run this command:
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
That should fix the thing with bundle (--dev false is not showing warnings)
All you need to do for app to run on your virtual / real device is:
react-native run-android
And it should be working just fine. At least it worked for me.
Try to clean cache
react-native start --reset-cache
Please check if you have following error when you run react-native run-android:
adb server version (XX) doesn't match this client (XX); killing...
In that case make sure /usr/local/opt/android-sdk/platform-tools/adb and /usr/local/bin/adb are pointed to the same adb
In my case one was pointed to /Users/sd/Library/Android/sdk/platform-tools/adb (Android SDK), but another was pointed to /usr/local/Caskroom/android-platform-tools/26.0.2/platform-tools/adb (Homebrew)
And issue have been fixed after both of them pointed to /Users/sd/Library/Android/sdk/platform-tools/adb (Android SDK)
I got this error too, really confused. cuz all answers does not work.
Just after add adb to path.
For me, I had side-sync enabled and active. Closing it imediately made the issue go away. It might be worth closing this or any other communication between PC and device
I ended up having to open up the port that I was using (8081 by default). On Linux, you can do the following
sudo iptables -A INPUT -p tcp --dport 8081 -m conntrack --ctstate NEW,ESTABLISHED -j ACCEPT
sudo iptables -A OUTPUT -p tcp --sport 8081 -m conntrack --ctstate ESTABLISHED -j ACCEPT
You can test to see whether you actually need to do this. Just navigate to your dev server in Chrome on your Android device. If it doesn't respond, then this might be what you need. If it does respond, then this won't help you.
For me the problem was that 'adb' was not recognised - check this answer.
To fix this add C:\Users\USERNAME\AppData\Local\Android\sdk\platform-tools to Environment Variables
Most of us face this problem for the first time, when we start react native project#1.
Few simple steps solved my problem:
I created a sample project using command:
react-native init ReactProject1
Solution
The fix is to help local-cli\runAndroid\adb.js to find adb.exe, the same way as local-cli\runAndroid\runAndroid.js:
find replace statement under projectname(whatever you have given)\node_modules\react-native\local-cli\runAndroid
Replace:
const devicesResult = child_process.execSync('adb devices');
By:
const devicesResult = child_process.execSync( (process.env.ANDROID_HOME ? process.env.ANDROID_HOME + '/platform-tools/' : '') + 'adb devices');
after doing above replacement, just run react-native run-android in your cmd, it will bundle apk and at first try to install js bundle locally in your device. (Got Success)
"npm start"
I just closed the terminal and open a new one. Went to project location by cd command. And then just simply type - "npm start". and then 'r' for reload. Everything just vanished. I think everybody should try this at once.
I tried many of the suggestions above/below, but ultimately, the issue I faced was a permissions one with watchman, which was installed using homebrew earlier. If you look at your terminal messages while trying to use the emulator, and encounter 'Permission denied' errors with regards to watchman along with this 'Could not get BatchedBridge" message on your emulator, do the following:
Go to your /Users/<username>/Library/LaunchAgents directory and change the permissions settings so your user can Read and Write. This is regardless of whether or not you actually have a com.github.facebook.watchman.plist file in there.
I found that I needed to also add in a
react-native upgrade
to get the application to run correctly.
I got the same issue but it was a stupid mistake from myself...
From Android studio, I was launching installDebug/installRelease gradle script from app projet instead of root projet.