By Matthew


2015-09-14 19:25:17 8 Comments

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

  1. react-native start > /dev/null 2>&1 &
  2. 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:

  1. create an assets folder under android/app/src/main
  2. 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.

23 comments

@Chaurasia 2019-07-06 23:51:47

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

@bobu 2019-03-27 08:53:57

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>

@mthakuri 2017-06-15 10:24:40

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.

@Edison D'souza 2017-06-16 06:08:38

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:

  1. Goto C:\Program Files\Java\jdkx.x.x_x\bin

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

@Atif Hussain 2017-03-24 07:42:29

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

@Marson Mao 2017-05-19 09:36:13

can i run adb reverse tcp:8081 tcp:8081 in my app's root folder?

@Atif Hussain 2017-05-19 09:41:09

nope, this command is runnable at your adb folder

@Atif Hussain 2017-05-19 09:42:08

find the adb folder in your OS. its in Android SDK / platform tools /

@Marson Mao 2017-05-19 09:42:50

but i see many places referring that this command can be run at app root folder, also the answer by dsissitka suggests that run it in root app folder, so im really confused.

@Atif Hussain 2017-05-19 09:47:38

may be this command is handle by react-native too. im not sure about this. but adb is supported by android sdk tools. you can find more details here facebook.github.io/react-native/docs/…

@mchandleraz 2018-01-07 00:35:22

@MarsonMao Depending on your system setup, you may be able to run adb from your app directory. Read up on PATH variable, and global vs local packages for more info.

@niltoid 2016-12-30 18:14:58

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

@GuGuss 2016-12-13 21:34:40

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.

@Jagadish Upadhyay 2016-07-10 16:36:52

An update

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

@Sergey Onishchenko 2016-06-14 06:55:13

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

@Mike Nguyen 2016-05-23 06:12:05

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

@IonicBurger 2016-04-23 11:30:35

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.

@scgough 2015-09-14 21:50:08

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.

  1. Press the device Menu button
  2. Select Dev Settings
  3. Select Debug server host for device
  4. 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

@scgough 2015-09-15 17:34:25

@jacobross85 Glad it helped! Give me an upvote if you feel like it ;-)

@Amozoss 2015-09-17 00:32:14

Had to run brew uninstall watchman before it would install the latest version for me.

@scgough 2015-09-24 08:19:34

I've added a bit more info for those debugging to an Android device rather than an emulator.

@pfac 2015-10-28 17:38:14

Was already running the latest version of watchman but this fixed it for me. Weeeeird

@Joshua Pinter 2017-03-02 03:43:41

App crashes when I click on Dev Settings.

@Super Developers 2018-10-08 07:53:28

Thanks for this brother it's really helpful. That's why I'll give you the upvote.

@Andru 2016-01-14 12:53:50

Delete the App from your phone! I tried several steps, but that did it eventually.

  1. If you tried to run your app before but failed, delete it from your android device.
  2. Run $ react-native run-android
  3. 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.
  4. Open the Rage Shake Menu again and click Reload JS.

@deju 2016-02-28 10:24:47

It works for me.

@Kelsey 2015-12-30 18:49:59

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.

@Paul 2016-01-19 18:03:08

Thanks, that was it. By default the Debug server is reached on the local network. Therefore if you have no wifi access you can't reach it.

@Travis Reeder 2015-12-13 20:27:07

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.

@Raphael_b 2015-12-02 21:40:10

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

@bluecollarcoder 2016-02-05 18:40:32

Actually works. Out of all the answers, this is the simplest solution. Can't believe this is not in the official doc.

@davidgoli 2016-06-16 19:08:38

The OP is about running on a device, not the emulator. These steps do not work on a device without additional setup. See accepted answer.

@Daniel Masarin 2015-11-08 15:37:21

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.

@Howard 2015-11-13 11:20:25

Thanks! Worked for me

@Sean Saito 2015-11-03 17:33:06

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

@ooolala 2015-09-24 04:15:40

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.

@almeynman 2015-10-26 16:20:05

getting Getting "error: closed" twice on "adb reverse"

@ooolala 2015-12-26 05:15:17

FYI: I'm now doing the above with "Daniel Masarin" answer of setting the debug server host to my WiFi address with port 8081, it is working with RN v 0.17.0

@Ashwini Bhat 2016-05-11 08:00:21

thank you very much this works for me :) on above API 21+ only works this

@Nishanth Shankar 2015-09-19 10:11:56

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

@kzzzf 2015-09-17 01:02:38

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.

@Matthew 2015-09-21 17:55:03

thank you! How do I tell reactInstanceManager to use the bundled asset? Or the magic just happens automatically?

@kzzzf 2015-09-23 07:52:06

It's defined using setBundleAssetName usually in the main activity (see template: github.com/facebook/react-native/blob/master/local-cli/…)

@almeynman 2015-10-26 16:32:25

Failed to create the file Warning: android/app/src/main/assets/index.android.bundle: No such file or Warning: directory

@iam batman 2015-12-09 04:54:20

Do you have an answer for this stackoverflow.com/questions/34170962/…

@Shivang 2016-03-11 12:08:01

Warning: Failed to create the file Warning: android/app/src/main/assets/index.android.bundle: No such file or Warning: directory curl: (23) Failed writing body (0 != 16167)

@piscator 2016-05-04 18:30:02

@Shivang: Create the directory assets in android/app/src/main. I had this error because it didn't exist yet.

@Dinesh Anuruddha 2016-06-21 04:54:22

This is the best and simple way when we distribute the app locally for testing purpose. (via fabric ) thanks

@Dinesh Spartacus 2016-11-25 06:07:40

adb reverse tcp:8081 tcp:8081 not working for me

@Garima Mathur 2016-12-27 06:37:40

@kzzzf Failed writing body (0 != 6983)

@dsissitka 2015-09-14 21:28:02

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

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:

@shyamal 2015-09-15 00:13:09

running adb reverse tcp:8081 tcp:8081 on osx works as well

@Matthew 2015-09-15 01:26:27

It works! thanks a lot. Do you know if there's a way to point jscodelocation to apk resource, just like iOS's main.jsbundle?

@scgough 2015-09-15 09:14:50

@dsissitka can I just ask so it's recorded here in the thread - what does that do exactly?

@dsissitka 2015-09-15 12:03:53

@Matthew Afraid not. Sorry!

@dsissitka 2015-09-15 12:07:15

@scgough See update 2.

@Augustin Riedinger 2015-11-27 23:04:00

What if we are running on Android 4.2 and getting this error: stackoverflow.com/questions/31525431/…

@Bhumit Mehta 2016-08-03 12:57:21

Use the accepted answer for android version < 5.0 . For 5.0+ this works great.

@Marson Mao 2017-05-19 09:37:59

why can't I run adb reverse tcp:8081 tcp:8081 in my app's root folder? the adb is not recognized here, i must run it in android sdk platform tool folder

@Pēteris Caune 2015-09-14 20:32:10

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)

@scgough 2015-09-14 21:17:57

I'm also having the issue the OP reported. I run the project using react-native run-android from the project folder. It builds OK in terminal but as soon as the app opens on my device I get red screened saying Unable to download JS bundle

@Matthew 2015-09-15 01:27:25

you need to run adb reverse tcp:8081 tcp:8081

@JacobRossDev 2015-09-15 17:07:05

I ran adb reverse tcp:8081 tcp:8081 and I get error: closed error:closed

@Eusthace 2015-10-03 05:29:17

I have the same issue, error: closed. Any help, please?

@Sam Purcell 2016-01-06 17:20:39

Make sure your ip address is correct in "Dev settings" if you're on Android. If you're working with a dynamic IP, this can change overnight.

@Lutaaya Huzaifah Idris 2017-08-12 20:37:32

What is 'Dev settings' and where is it found ? am new on this but facing the same problem?

Related Questions

Sponsored Content

94 Answered Questions

[SOLVED] Close/hide the Android Soft Keyboard

25 Answered Questions

[SOLVED] Is there a way to run Python on Android?

44 Answered Questions

43 Answered Questions

[SOLVED] Is there a unique Android device ID?

27 Answered Questions

77 Answered Questions

28 Answered Questions

[SOLVED] What is 'Context' on Android?

38 Answered Questions

[SOLVED] Lazy load of images in ListView

11 Answered Questions

[SOLVED] Proper use cases for Android UserManager.isUserAGoat()?

1 Answered Questions

[SOLVED] Error with react-native run-android --configuration Release

Sponsored Content