Android failed to load JS bundle

Question

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  gt   dev null 2 gt  amp 1  amp  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  quot http   localhost 8081 index android bundle platform android quot  -o  quot android app src main assets index android bundle quot   please take a look at kzzzf s answer for more details

User · Answer

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

User · Answer

Running npm start from react-native directory worked out for me

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Apparently adb reverse was introduced in Android 5 0  Getting  quot error  closed quot  twice on  quot adb reverse quot   I guess we have to go ahead with kzzzf s answer

User · Answer

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  amp  amp  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

User · Answer

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

User · Answer

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

User · Answer

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  gt   dev null 2 gt  amp 1  amp    from dsissitka adb reverse tcp 8081 tcp 8081   from dsissitka   3 Reload from emulator   It loads   I can now begin developing

User · Answer

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      lt domain-config cleartextTrafficPermitted  quot true quot  gt             lt domain includeSubdomains  quot true quot  gt 10 0 2 2 lt  domain gt       lt  domain-config gt           Then update AndroidManifest xml file with  lt application     android networkSecurityConfig  quot  xml network security config quot

User · Answer

The following made it work for me on Ubuntu 14 04   cd  App Dir  react-native start  gt   dev null 2 gt  amp 1  amp  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

User · Answer

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

User · 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  gt   dev null 2 gt  amp 1  amp  adb reverse tcp 8081 tcp 8081

User · Answer

In the app on android I opened Menu  Command   M in Genymotion  -  Dev Settings -  Debug server host  amp  port for device  set the value to  localhost 8081  It worked for me

User · Answer

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

User · Answer

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

User · Answer

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   lt START gt  Building Dependency Graph  11 30 10 PM   lt START gt  Crawling File System  11 30 16 PM   lt END gt    Crawling File System  5869ms   11 30 16 PM   lt START gt  Building in-memory fs for JavaScript  11 30 17 PM   lt END gt    Building in-memory fs for JavaScript  852ms   11 30 17 PM   lt START gt  Building in-memory fs for Assets  11 30 17 PM   lt END gt    Building in-memory fs for Assets  838ms   11 30 17 PM   lt START gt  Building Haste Map  11 30 18 PM   lt START gt  Building  deprecated  Asset Map  11 30 18 PM   lt END gt    Building  deprecated  Asset Map  220ms   11 30 18 PM   lt END gt    Building Haste Map  759ms   11 30 18 PM   lt END gt    Building Dependency Graph  8319ms

User · Answer

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

User · Answer

In new React Native  for sure 0 59  debug config is inside android app src debug res xml react native config xml   lt  xml version  1 0  encoding  utf-8   gt   lt network-security-config gt     lt domain-config cleartextTrafficPermitted  true  gt       lt domain includeSubdomains  false  gt localhost lt  domain gt       lt domain includeSubdomains  false  gt 10 0 2 2 lt  domain gt       lt domain includeSubdomains  false  gt 10 0 3 2 lt  domain gt     lt  domain-config gt   lt  network-security-config gt

User · Answer

An update  Now on windows no need to run react-native start  The packager will run automatically

User · Answer

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

User · Answer

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  amp  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 - gt  Network - gt  Advanced    - gt  TCP IP - gt  IPv4 Address  Open the Rage Shake Menu again and click Reload JS

User · Answer

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

[android] Android failed to load JS bundle

Examples related to android

Examples related to react-native