Unable to load script from assets index.android.bundle on windows

Question

I'm trying to run my first React Native project for first time on my device (Android 4.2.2).

And I get:

unable to load script from assets index.android.bundle

Commands that I used:

cd (project directory)
react-native start
react-native run-android

Before trying jerry's answer first check have u set ANDROID_HOME in environment variable and in path platform-tool. — Sagar Chavada, Apr 18 '18 at 05:14
It's a bug in the recent version. You have to use the previous version by using react-native init ProjectName --version=0.55.4 The problem should be fixed. — Sulung Nugroho, Sep 01 '18 at 11:18
same error, same context, but the fix is easy: wait for the debug server to change from `Loading dependency graph...` to `Loading dependency graph, done` and hit reload on the app. — Nino Filiu, Oct 27 '18 at 14:14
The accepted answer is an extremely inconvenient hack, that complicates the build process and the code base. There are better answers here. — Andrew Koster, Mar 28 '19 at 19:49
Use `mkdir ... /assets && react-native bundle --platform..` CAN NOT solve this problem completely，check this: https://stackoverflow.com/a/55511803/10139109 — Clocher Zhong, Apr 04 '19 at 09:04

score 1018 · Accepted Answer · edited Dec 16 '17 at 05:19

1018

I've encountered the same issue while following the React Native tutorial (developing on Linux and targeting Android).

This issue helped me resolve the problem in following steps.

(in project directory) mkdir android/app/src/main/assets
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
react-native run-android

You can automate the above steps by placing them in scripts part of package.json like this:

"android-linux": "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 && react-native run-android"

Then you can just execute npm run android-linux from your command line every time.

edited Dec 16 '17 at 05:19

Muhammad Atallah

976
2
12
34

answered Jun 10 '17 at 18:33

Jerry

10,412
1
12
12

17

what if we want to modify the file `index.android.js` ? every time in terminal we have to insert 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` – Maulik Jul 11 '17 at 06:46
Because once it attached to the bundle we can't able to change index.android.js and it will not reflect on app unless you run above command every time before application is running. – Maulik Jul 11 '17 at 06:48
no it is working great you have to insert this commands on the first time you create the project only and then you can modify and run the project anytime without inserting the command again@Maulik – Goba Jul 12 '17 at 11:55
10

it will get stuck at `Loading dependency graph...` every time when I rerun it from terminal and it takes too much time. FYI I am using ubuntu 14.04 – Maulik Jul 13 '17 at 06:23
13

React native newer versions doesn't contain index.android.js, Hence please use App.js with the command. :) Thanks – Chinthaka Dinadasa Oct 12 '17 at 08:12
1

I had the same problem on macOS and your solution worked beautifully – idleberg Oct 19 '17 at 11:40
12

@ChinthakaDinadasa in my case, it's `index.js`, not `App.js` – Felix Oct 20 '17 at 09:07
2

@idleberg what is your React-Native version?, this answer does'n work for me on `RN 0.50.1`, in newest RN version you only have `index.js` instead `index.android.js`. For IOS it's working great. – Alejandro Nov 09 '17 at 13:07
I followed the steps above and the compilation works, but the images I used in my application were not loaded, they used relative paths, how can I correct the image problems? – 1fabiopereira Dec 11 '17 at 11:31
2

I downvoted because this actually dosen't fix the issue as everytime you maek a slight change you're going to have to rebundle the app and it dosen't allow you to avail of React Native's many features including hot reloading – Jesse Onolemen Dec 14 '17 at 18:03
Getting this error: The file name must end with .xml or .png – Nouman Tahir Dec 18 '17 at 20:42
My project doesn't have any asset folder. what could be the reason? – Kaveri Jan 02 '18 at 11:34
http://array151.com/blog/react-native-setup-android-environment-windows/ – Sunil Garg Jan 15 '18 at 11:30
2

So anyone has an actual solution to make this work without redoing this command everytime, and using Hot Reload? – Guillaume Jan 16 '18 at 10:24
13

This guy needs a statue! I mean it really worked not only on linux but on windows 10 too – Malakai Mar 24 '18 at 12:38
2

On Windows what worked for me was adding `F:\AndroidSDK\tools` and `F:\AndroidSDK\platform-tools` to system path, since I used a non-standard SDK folder installation. – Lucas Bustamante May 06 '18 at 12:06
Thanks it is working. can you explain in detail how to automate bundle process in script file? – Khurshid Ansari Jul 21 '18 at 09:57
2

Working fine, I am new in react native not able to understand why its happening. please explain, and which is best site to learn it for beginner, Thanks in advance. – Arun Prajapati Jul 25 '18 at 13:44
1

It seems like a bug in 0.56 related to dependencies. The "solution" is to find the correct combination of dependencies' versions. We found a workaround by installing those versions EXACTLY.The following link helped me to resolve the issue.https://stackoverflow.com/questions/48756550/unable-to-resolve-module-accessibilityinfo-when-trying-to-create-release-bund – BABU K Jul 26 '18 at 07:19
React native version 0.55.4 is working perfectly with above mentioned steps in answer. – BABU K Jul 26 '18 at 07:21
It saved my life! I updated the gradle on Android Studio. And it only worked again on VS Code after that code! Thanks! – Roger Sampaio Aug 12 '18 at 05:54
1

used **App** instead of **index** for newer versions at two places in the command like this `"android-linux": "react-native bundle --platform android --dev false --entry-file App.js --bundle-output android/app/src/main/assets/App.android.bundle --assets-dest android/app/src/main/res && react-native run-android"` – Saransh Agarwal Aug 27 '18 at 07:09
1

making an entry in the package.json did not help. The CLI method worked for me. – Yoosaf Abdulla Aug 28 '18 at 05:38
@IbrokhimjonSaydakhmatov (and everyone that comes later that sees the same error he posted) That error happens when you're not in the project directory. – Patrick Oct 03 '18 at 07:15
1

Is there a real solution for this yet? I don't want to run this command every time some file changes – szx Nov 10 '18 at 13:39
2

Hot reload menu is not showing in the emulator. Also put --dev true – saiful619945 Jan 17 '19 at 09:14
Try this: https://github.com/facebook/react-native/issues/18692#issuecomment-439161621 : Starting with Android 9.0 (API level 28), cleartext support is disabled by default. – Jordan Feb 25 '19 at 07:15
1

This is a hack, and it forces you to run this command and regenerate the files every time. The correct answer is here: https://stackoverflow.com/questions/44446523/unable-to-load-script-from-assets-index-android-bundle-on-windows#answer-53326616 – Andrew Koster Mar 28 '19 at 19:48
1

This option is not a fix at all, because if you are in development still don't connected to the metro bundler, this means if you hit "reload" you still getting the error. Also, is using the release version. I'm using the last version from react-native `0.59.8` any updates?? – Juan P. Ortiz Jun 05 '19 at 18:30
Thankyou so much, after wasting too much time , i found perfect solution, it worked for me... **I have not created build for ios yet. Do you know if same issue will occur in ios app too, If yes,then How can i resolve in ios?** – kajal Sep 11 '19 at 06:16
For react-native versions 0.57 and above the bundle output path should be: `android/app/build/generated/assets/react/debug/index.android.js` See [react-native cli documentation](https://github.com/react-native-community/cli/blob/master/docs/commands.md#--bundle-output-string) for more details. – Radek Matěj Sep 29 '20 at 07:45
on windows use reverse slash for mkdir `mkdir android\app\src\main\assets` – Naruto Uzumaki Mar 09 '22 at 23:57

score 177 · Answer 2 · edited Sep 16 '17 at 06:57

177

If You are running your application on physical device and getting this error

unable to load script from assets index.android.bundle

try running the command:

adb reverse tcp:8081 tcp:8081

It workd for Me...

edited Sep 16 '17 at 06:57

Axel

3,331
11
35
58

answered Sep 16 '17 at 06:15

Nidhi Shah

2,338
1
10
14

This fixed my issue! Thanks! – Pablo Mar 23 '18 at 20:49
7

Worked for me. For those who dont have the android platform tools on your terminal path in windows, the adb executable is in `C:\Users\YourUser\AppData\Local\Android\sdk\platform-tools\` – Mikepote May 10 '18 at 14:06
2

I think this should be the correct answer, the other one seems like a hack. – Chris Gomez Jul 22 '18 at 18:14
This fixed the issue for me (Windows, running app on physical device). It's one of the suggested fixes on the red error box. – Tur1ng Nov 15 '18 at 17:30
It works for me on macOS, but I have to run this every time I replug the device. Is there any way to make this permament? – Pauloco Feb 08 '19 at 09:23
This did nothing for me. – Andrew Koster Mar 29 '19 at 20:06

neurosnap · Answer 3 · 2019-08-01T22:45:14.720

119

I spent hours trying to figure this issue out. My problem was not specific to Windows but is specific to Android.

Accessing the development server worked locally and in the emulator's browser. The only thing that did not work was accessing the development server in the app.

Starting with Android 9.0 (API level 28), cleartext support is disabled by default.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"
        ...>
        ...
    </application>
</manifest>

See for more info: https://stackoverflow.com/a/50834600/1713216

edited Aug 01 '19 at 22:45

answered Nov 15 '18 at 19:25

neurosnap

5,658
4
26
30

13

Thank you. This was my issue after upgrading `targetSdkVersion` to `28`. – bencergazda Nov 28 '18 at 16:36
This is the correct answer. It actually fixes the network communication problem. – Andrew Koster Mar 28 '19 at 19:45
This is the solution [used in React Native v0.59.2](https://github.com/facebook/react-native/compare/v0.59.1...v0.59.2#diff-38d6a0bccf283e9da50e0e748493777f). – Tur1ng Mar 29 '19 at 01:10
Thanks for flagging this - was completely preventing my RN app from loading. Disappointing that there wasn't better error messaging around this :/ – greg7gkb Apr 09 '19 at 00:14
It's shocking how all the different answers here seem to solve exactly the same error message. Making debugging even more time consuming and painful. This answer here worked for me! Thanks @neurosnap – Pauloco Aug 05 '19 at 03:22
yes, thanks, after added this line, its working fine – user Oct 15 '19 at 06:50

score 70 · Answer 4 · edited Jan 29 '18 at 14:21

70

Using npm version 4.3.0 react-native-cli version 2.01 react-native version 0.49.5

In the project directory,

mkdir android/app/src/main/assets
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
react-native run-android

The file name has changed from index.android.js to index.js

edited Jan 29 '18 at 14:21

IgorGanapolsky

26,189
23
116
147

answered Oct 31 '17 at 12:25

Darshan Pania

1,374
13
20

3

Kinda sad that FB releases a new version, and instead of fixing this bug - which is clearly hitting tons of people - they break the accepted work-around! – Tom Dec 07 '17 at 23:34
@IgorGanapolsky Make sure you have an index.bundle file in your assets folder – Darshan Pania Jan 15 '18 at 08:12
@DarshanPania What does that file do? – IgorGanapolsky Jan 15 '18 at 14:08
3

@IgorGanapolsky That JS file is an entry point into your app. From RN 0.49 onwards there is only one file `index.js` instead of `index.android.js` or `index.ios.js` – Darshan Pania Jan 29 '18 at 09:48
`ENOENT: no such file or directory, open 'android/app/src/main/assets/index.android.bundle'` – Green May 24 '18 at 10:28
@Green You can do a quick search for `index.android.bundle` in your project – Darshan Pania May 25 '18 at 08:25
After the `react-native bundle` command you wait till it says: Loading graph done. and Ctrl-C that or exit the command window. Then run the react-native run-android. – pashute Jun 18 '18 at 04:47
2

for linux : `sudo 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` – Taohidul Islam Jan 09 '19 at 15:11
This is a hack, and it forces you to run this command and regenerate the files every time. The correct answer is here: https://stackoverflow.com/questions/44446523/unable-to-load-script-from-assets-index-android-bundle-on-windows#answer-53326616 – Andrew Koster Mar 28 '19 at 19:48

score 47 · Answer 5 · answered Jul 30 '17 at 18:25

47

I have faced the same problem with a real android device.

Solution: Based on this answer by Niltoid

Find your local IP
Open app and shake your Android device
Go Dev Setting and>Debug Server...
Paste your IP and port; X.X.X.X:8088" (where X's are your local IP)

for Mac user: open your network preference, here you will get your local IP.

answered Jul 30 '17 at 18:25

Milon

2,221
23
27

Works for me (y) – MAhipal Singh Sep 26 '18 at 12:35

score 26 · Answer 6 · answered Oct 13 '17 at 05:44

If you are using Windows run the commands in the following way, or if you get an error "Cannot find entry file index.android.js"

mkdir android\app\src\main\assets
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
react-native run-android

score 24 · Answer 7 · answered Oct 03 '17 at 10:39

24

Had the same issue in mac, After spending 2 days i was finally able to get is working.

Since Emulator cellular data was turned off, I was getting the unable to load script from assets index.android.bundle make sure your bundle is running.

Make sure your Emulator cellular data is turned on by doing this package server was able to bundle index.android.js. Hope it helps for someone who is in development phase.

answered Oct 03 '17 at 10:39

Srinivas

847
11
13

What do you maen `Emulator cellular data is turned on`? Where is that? Virtual device? Real device? – Green May 24 '18 at 10:23
Emulator means Virtual device that comes from android studio. – Srinivas May 31 '18 at 08:45
Thank you, for some odd reason, my emulator got corrupted and wifi is gone. saved me. – Vitor Arbex Jul 26 '21 at 20:41

score 21 · Answer 8 · edited Mar 14 '18 at 23:08

21

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.

edited Mar 14 '18 at 23:08

David Liu

9,426
5
40
63

answered Jun 15 '17 at 10:17

mthakuri

1,085
8
13

I was getting this problem when running directly from android studio. using `react-native run-android` fixed it – yairsz Aug 30 '17 at 19:22
9

Your link does not work anymore, you should reference key helpful parts in future to keep information alive after its source dies. – Zac Grierson Jan 09 '18 at 00:40
So how to run this on a **real device**?? – IgorGanapolsky Jan 11 '18 at 15:53
1

@IgorGanapolsky i have the same issue and fixed it with official documentation, you can easily check your environment https://facebook.github.io/react-native/docs/running-on-device.html I can't load porj from android studio (and android folder) but i could do it with root folder of project and terminal. – Ivan Titkov Jan 18 '18 at 09:13
By the way the link is expired given in the answer .. Fyi. – Jay Rathod Oct 29 '20 at 12:34

score 20 · Answer 9 · answered Dec 14 '17 at 18:13

I've had this same issue for a number of months now. I initially used @Jerry's solution however, this was a false resolution as it didn't fully fix the problem. Instead, what it did was take every build as a production build meaning that any slight change you made in the app would mean that rebuilding the entire app is necessary.

While this is a temporal solution, it works horribly in the long term as you are no longer able to avail of React Native's amazing development tools such as hot reloading etc.

A proper solution is a shown:

In your MainApplication.java file, replace the following:

@Override
public boolean getUseDeveloperSupport() {
    return BuildConfig.DEBUG;
}

with

@Override
public boolean getUseDeveloperSupport() {
    return true;
}

as for some reason BuildConfig.DEBUG always returned false and resulted in a bundle file in the assets directory.

By manually setting this to true, you're forcing the app to use the packager. This WON't work in production so be sure to change it to false or the default value.

Don't forget also to run

$ adb reverse tcp:8081 tcp:8081

Holy, this is the actual solution. The accepted answer does not work for hot reloading and is in no way a legitimate fix to the issue. — Ganesh Datta, Nov 23 '18 at 03:29
This should be the answer! Been whole night trying to fix this with no luck. Thanks, Jesse! Btw, where is the BuildConfig.DEBUG value stored actually? — Jeaf Gilbert, Oct 27 '20 at 22:09
Maybe this is the reason: https://stackoverflow.com/questions/36350932/buildconfig-debug-always-return-false — Jeaf Gilbert, Oct 27 '20 at 22:17

score 16 · Answer 10 · answered Aug 15 '18 at 19:18

1 Go to your project directory and check if this folder exists android/app/src/main/assets

If it exists then delete two files viz index.android.bundle and index.android.bundle.meta
If the folder assets don't exist then create the assets directory there.

2.From your root project directory do

cd android && ./gradlew clean

3.Finally, navigate back to the root directory and check if there is one single entry file calledindex.js

If there is only one file i.e. index.js then run following command 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
If there are two files i.e index.android.js and index.ios.js then run this 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
1. Now run react-native run-android

after trying nearly all of these scenarios... this was the only solution that worked for me. Thank you!!!! — MizAkita, Sep 21 '19 at 12:47
This worked for me after running into this error following the get started guide on Ubuntu 18.04. Thanks! — , Oct 30 '19 at 18:59

score 11 · Answer 11 · answered Jan 21 '19 at 12:28

11

In my case, I have removed below line from MainApplication.java. (Which is previously mistakenly added by me.):-

import com.facebook.react.BuildConfig;

After that Clean Project and hit command

react-native run-android

answered Jan 21 '19 at 12:28

Poonam

297
4
13

Thanks, its also helps me. – Anil Ravsaheb Ghodake Jan 21 '19 at 12:30
Wow, it saved me! – bychung Aug 10 '22 at 07:40

score 10 · Answer 12 · edited Jan 14 '18 at 20:03

OS: Windows

Another way to resolve this problem after trying two methods above
(because I installed SDK not in DEFAULT LOCATION like C:\users\"user_name"\appdata\local\sdk)

If you noticed that command line announced: "'adb' is not recognized as an internal or external command..."

So this is how I get over:
Examples: I installed SDK in D:\Android\sdk
So I will insert path in System Variables 2 more lines:

D:\Android\sdk\tools  
D:\Android\sdk\platform-tools

(If you don't know how to edit path System Variables, here's the topic: https://android.stackexchange.com/questions/38321/what-do-i-type-in-path-variable-for-adb-server-to-start-from-cmd/38324)

Then I run cmd again: react-native run-android

It worked for me.

even though it is not really connected - this is one of the very common problems and it works as Thien described — Pixelartist, Oct 01 '17 at 20:31

score 9 · Answer 13 · edited May 12 '20 at 06:24

I was also facing this problem because when I run projects on the emulator its working fine but on a real device it gives this error. So I resolve this problem by the following solution

1st step: First of all open cmd and go to your SDK manager Platform-tools folder

cd C:Development\Android\Sdk\Platform-tools

2nd step: now run this command :

adb devices

after this command check your device listed in command prompt

3rd step: now run this

adb reverse tcp:8081 tcp:8081

Now your setup is done

4th step: Go to your project directory and run this command

react-native run-android

score 8 · Answer 14 · answered Jun 08 '18 at 10:25

8

For IOS:

In a terminal:

cd ios

Remove the build folder with: rm -r build

Run again: react-native run-ios

Alternatively, you could open Finder, navigate to YOUR_PROJECT/ios and delete the build folder.

Then run again: react-native run-ios

For ANDROID:

In a terminal:

cd android/app

Remove the build folder with: rm -r build

Run again: react-native run-android

Alternatively, you could open Finder, navigate to YOUR_PROJECT/android/app and delete the build folder.

Then run again: react-native run-android

answered Jun 08 '18 at 10:25

Gurbela

1,184
2
16
40

3

Works for Android! clean and easy! – llioor Jun 27 '18 at 14:06
Deleting `android/app/bin` folder on Windows worked as well. I had built it the project directly from Android Studio, instead of running `react-native run-android`, and it seems it built something wrong that I had to delete manually. – Lucas Bustamante Feb 10 '19 at 19:31

Chheng Chansopheaktra · Answer 15 · 2017-12-31T06:43:39.343

7

For this problem I just solve it by running:

react-native start

then

adb reverse tcp:8081 tcp:8081

on command line. And then i can run:

react-native run-android

So i will not waste my time to run:

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

every time.

edited Dec 31 '17 at 06:43

answered Dec 30 '17 at 17:23

Chheng Chansopheaktra

71
1
2

Harat · Answer 16 · 2018-07-24T19:33:03.910

Ubuntu

first time, I created new app with react-native init project-name. I got the same error. so i do the following steps to resolve this in my case.

Firstly run sudo chown user-name-of-pc /dev/kvm in my case.
While debugging from your Android phone, select Use USB to Transfer photos (PTP).
Create Folder assets in project-name/android/app/src/main
make sure index.js be avaiable into your project root directory and then run below command from console after cd project-name directory.

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

or for index.android.js then

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

run command ./studio.sh in android-studio/bin directory. It will opens up Android Studio.
run command react-native run-android.

score 5 · Answer 17 · answered Dec 06 '18 at 19:38

Make sure metro builder is running to make your physical device and server sync

First, run this command to run metro builder

npm start

Then you can start the build in react native

react-native run-android

Their should be no error this time. If you want your code to be live reload on change. Shake your device and then tap Enable Live Reload

score 4 · Answer 18 · answered Aug 30 '17 at 08:29

Make sure that you have added /path/to/sdk/platform-tools to your path variable.

When you run react-native run-android, it runs adb reverse tcp:< device-port > tcp:< local-port > command to forward the request from your device to the server running locally on your computer. You will see something like this if adb is not found.

/bin/sh: 1: adb: not found
Starting the app (.../platform-tools/adb shell am start -n 
com.first_app/com.first_app.MainActivity...
Starting: Intent { cmp=com.first_app/.MainActivity }

this should be right up to most upvoted answers, as should be one of the first things to check — eis, Aug 20 '18 at 08:52

score 4 · Answer 19 · 2018-01-10T07:49:32.417

I had issue with McAfee on my mac blocking port 8081, had to change it to 8082.

First run your package server:

react-native start --port 8082

Open another terminal, start the android app as usual:

react-native run-android

Once it finishes, now rewrite the tcp port that adb tunnels:

adb reverse tcp:8081 tcp:8082

See the list of adb tcp tunnels:

adb reverse --list

You should now see a heartwarming message:

(reverse) tcp:8081 tcp:8082

Go to your app and reload, done!

PS: Don't change anything in the app Dev settings, if you added "localhost:8082", just remove it, leave it blank.

EDIT: To all the McAfee victims out there, there's easier solution if you have root access, just temporarily kill the McAfee process sitting on port 8081 and no need for port change at all:

sudo launchctl remove com.mcafee.agent.macmn

score 4 · Answer 20 · answered Apr 18 '18 at 21:48

It may be caused by unlinked assets in your React Native project code base, like when you renames your project application/bundle id or adds an external package without link it properly, for example.

Simply try it in your project root directory:

react-native link

react-native run-android

score 4 · Answer 21 · answered Feb 20 '20 at 14:10

This problem also happens if you define an android:networkSecurityConfig in your main AndroidManifest.xml. The android:usesCleartextTraffic="true" in your debug AndroidManifest.xml will be ignored.

To fix this issue, you have to configure the app to allow http traffic to localhost.

Create a file android/src/debug/res/xml/network_security_config.xml:

<?xml version="1.0" encoding="utf-8" ?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
    </domain-config>
</network-security-config>

And reference it in android/src/debug/AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8" ?>
<manifest 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

    <application 
        android:networkSecurityConfig="@xml/network_security_config" 
        tools:targetApi="28" 
        tools:ignore="GoogleAppIndexingWarning" />
</manifest>

Further infos here: https://medium.com/astrocoders/i-upgraded-to-android-p-and-my-react-native-wont-connect-to-my-computer-to-download-index-delta-42580377e1d3

That's correct. This happens after I have set network config file for some domains. So we also need to set localhost. Thank you. — immodi, Jan 08 '21 at 07:39

score 3 · Answer 22 · answered Aug 09 '17 at 13:15

If when running react-native run-android command the second line of the trace is

JS server not recognized, continuing with build...

it means packager for the app cannot be started and the app will fail to load without some extra steps. Note that the end of the trace still reports success:

BUILD SUCCESSFUL

The problem is probably some port conflict (in my case it was the default IIS site that I completely forgot about). Another manifestation of the problem would be a failure to open http://localhost:8081/debugger-ui URL in Chrome.

Once the port conflict is resolved the trace will report

Starting JS server...

then an additional Node window will open (node ...cli.js start) and the app will load/reload successfully.

After that you should be able to open debug console in Chrome with http://localhost:8081/debugger-ui.

score 3 · Answer 23 · answered Nov 05 '17 at 17:37

I had the same issue even when running on a simulator. I did a quick workaround so that I could have the normal dev workflow.

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  @Override
  public boolean getUseDeveloperSupport() {
    // return true here to load JS from the packager
    // BuildConfig.DEBUG for me was set to false which meant it
    // it was always trying to load the assets from assets folder.
    return true;
  }

  @Override
  protected String getJSMainModuleName() {
    return "index";
  }
};

Probably will have to revert the change when trying to do a production build.

Sudhanva Patil · Answer 24 · 2018-01-19T20:02:45.140

I think you don't have yarn installed try installing it with chocolatey or something. It should be installed before creating your project (react-native init command).

No need of creating assets directory.

Reply if it doesn't work.

Edit: In the recent version of react-native they have fixed it. If you want complete freedom from this just uninstall node (For complete uninstallation Completely remove node refer this link) and reinstall node, react-native-cli then create your new project.

score 3 · Answer 25 · answered Apr 17 '18 at 08:30

3

don't forget turn on internet in emulator device, I resovled this error, it work perfect :V I get this error because i turn off internet to test NetInfo :D

answered Apr 17 '18 at 08:30

Nguyễn Phúc

273
3
9

score 3 · Answer 26 · answered Jun 24 '18 at 15:40

This is a general error message, you may have encountered during the react native application development. So In this tutorial we are going to provide solution to this issue.

Issue Description : Unable to load script from assets index.android.bundle on windows Unable to load script from assets index.android.bundle on windows

Follow the below steps to solve above issue :

Step-1 : Create "assets" folder inside your project directory Now create assets folder inside the project directory that is "MobileApp\android\app\src\main". You can manually create assets folder :

< OR >

you can create folder by using command as well. Command : mkdir android/app/src/main/assets

Step-2 : Running your React Native application Lets run the below command to run the react native application in emulator or physical device.

Switch to project directory. cd MobileApp

Run the below command that helps to bundle you android application project.

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

Run the Final step to run react native application in emulator or physical device. react-native run-android

< OR >

Also you can combine last two command in one, In this case case you have to execute command only once.

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 && react-native run-android

< OR >

You can automate the above steps by placing them in scripts part of package.json like this:

"android-android": "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 && react-native run-android"

If everything is set up correctly, you should see your new app running in your Android emulator shortly.

score 3 · Answer 27 · answered May 08 '19 at 01:57

I have just encounterred exactly the same problem and solved it. So hope to be helpful.

Suppose you are assemblling a release application package (.apk)

Check if your assets folder exist?: \android\app\src\main\assets If not, create one.
After executing "Assemble Release", check if there is anything in that folder(\android\app\src\main\assets) If not, find js bundle file(index.android.bundle), which should be in more than one of the following paths:

*a)\android\app\build\intermediates\merged_assets\release\out\index.android.bundle

b)\android\app\build\intermediates\merged_assets\release\mergeReleaseAssets\out\index.android.bundle

c)\android\app\build\intermediates\assets\release\index.android.bundle

d)\android\app\build\generated\assets\react\release\index.android.bundle*

A better way is to use "Everything" to search the file name: index.android.bundle.

Then copy this file into your assets folder(\android\app\src\main\assets\index.android.bundle)
Go back to powershell or command console, execute:

react-native run-android --variant=release

It should work.

Good luck!

Thank you very much! Struggled for three days! Btw react native 0.59 fixed the issue. — Annie, Nov 05 '19 at 14:41

score 3 · Answer 28 · answered Mar 17 '20 at 09:38

3

Actually, in my situation (React-native version 0.61.5 and trying to install debug APK on device) none of the answers helped me, my solution was adding bundleInDebug: true to android/app/build.gradle like this:

project.ext.react = [
    entryFile: "index.js",
    enableHermes: true,  // clean and rebuild if changing
    bundleInDebug: true
]

answered Mar 17 '20 at 09:38

Ahmad Khani

850
2
10
15

Thank you, it solved the issue But now I can't use fast refresh option – amirito Jan 15 '22 at 12:36
thanks - is this still relevant - 2022? expo doesn't use this project.ext.react and things change.... – johndpope Mar 10 '22 at 22:51

score 3 · Answer 29 · answered Jan 20 '22 at 09:07

3

using npx before the command did work for me, and the command becomes like following.

npx 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

why we use npx, here is the post Difference between npx and npm?

answered Jan 20 '22 at 09:07

Irshad Babar

1,311
19
26

Where to use this command? I tried to use this command but error message shows The resource `/Users/frank61003/Desktop/vanyi-mobile-apps/apps/employee/index.js` was not found. – frank61003 Jul 15 '22 at 03:00

score 2 · Answer 30 · answered Nov 25 '19 at 11:13

I have spent half a day figuring this issue...

If you are using the API target version Above 28.0.0 then you may face this issue.

Just add this line

android:usesCleartextTraffic="true"

in your Manifest Application block.

Manifest Application block code.

 <application
        ....
        android:usesCleartextTraffic="true"
.../>

score 1 · Answer 31 · answered Nov 07 '17 at 01:00

1

when I update react-native to 0.49.5, this problem appears and when I followed this Breaking changes and deprecations

it disappeared.

answered Nov 07 '17 at 01:00

chii

2,111
3
17
21

score 1 · Answer 32 · edited Mar 27 '18 at 13:48

1

I am facing this issue, lot of search and I resolved that issue.

c:\ProjectFolder\ProjectName> 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

Than Run the react native :

c:\ProjectFolder\ProjectName>react-native run-android

edited Mar 27 '18 at 13:48

Antoine Thiry

2,362
4
28
42

answered Mar 27 '18 at 12:26

Rohit Bansal

69
2

2

The screenshot is a little irrelevant to the answer. – Tyler Apr 23 '18 at 19:47
In my case , there I have it is problems ,and my react native app don't worked. more precisely I got the same display on the emulator screen for android. I just entered the start point in the package.json in root folder next code "main":"index.js", and application started. Probably command react-native init have some problem, and not add this code, and when you started, application don't know where to start. I hope so get for all you my little help – Miodrag Trajanovic Dec 18 '20 at 20:14

score 1 · Answer 33 · answered May 09 '18 at 21:39

For all of you guys who are developing from a create-react-native-app and ejected, and have this issue in development, this is what worked for me just a little detail from the accepted answer

(in project directory) mkdir android/app/src/main/assets

here comes the part that changes cos you are in development get rid of the --dev: false part:

react-native bundle --platform android --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

after that close all terminals, erase the build folder from android/app/ to make sure you start clean to build your app, open a new terminal, and

(in project directory) npm run android

will prompt the packager console (in another terminal) and build successfully

score 1 · Answer 34 · answered Oct 01 '18 at 11:56

Follow this, Worked for me.

https://github.com/react-community/lottie-react-native/issues/269

Go to your project directory and check if this folder exists android/app/src/main/assets i) If it exists then delete two files viz index.android.bundle and index.android.bundle.meta ii) If the folder assets doesn't exist then create the assets directory there.

From your root project directory do cd android && ./gradlew clean

Finally, navigate back to the root directory and check if there is one single entry file called index.js i) If there is only one file i.e. index.js then run following command 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

ii) If there are two files i.e index.android.js and index.ios.js then run this 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

Now run react-native run-android

Your comment helped me immensely. I'm not sure why I needed to delete the two bundle files. But your directions would perfectly! Thank you so much! — VK1, Nov 09 '18 at 06:52

score 1 · Answer 35 · answered Jun 25 '19 at 20:08

1

If you have entered 'Debug server host & port for device' in Dev Settings, make sure you remove what you have entered.

answered Jun 25 '19 at 20:08

yasincidem

51
2
7

Add this as a comment – A J Jun 25 '19 at 20:46
After 50 reputation – yasincidem Jun 26 '19 at 17:49

score 1 · Answer 36 · answered Feb 01 '20 at 08:25

first of all check your assets folder exist in this location \android\app\src\main\assets

if no then run this command in terminal

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

then run your project on your android device using

react-native run-android

score 0 · Answer 37 · answered Sep 22 '17 at 10:10

0

This issue can also be caused by the cellular data of the device / emulator being turned off. Make sure you check that.

answered Sep 22 '17 at 10:10

Kernael

3,270
4
22
42

score 0 · Answer 38 · answered Oct 13 '17 at 06:42

for this error :"unable to load script from assets 'index.android.bundle'"

1). check for "assets" folder at : mkdir android\app\src\main\assets

if folder is not available ,create folder with name "assets" manually. and execute the Curl command in terminal.

2). Curl command: curl "http://localhost:8081/index.android.bundle?platform=android" -o"android/app/src/main/assets/index.android.bundle"

it will create the "index.android.bundle" file in assets folder automatically and resolved the issue.

3). react-native run-android

score 0 · Answer 39 · answered Nov 23 '17 at 20:53

0

Chipping in an obvious suggestion that worked for me. Delete the app, restart the server and deploy again from your tooling to device.

answered Nov 23 '17 at 20:53

Sam Jarman

7,277
15
55
100

score 0 · Answer 40 · edited Dec 27 '17 at 13:09

0

If already tried all of above solution but still hit error. Try to configure your genymotion same with me:

edited Dec 27 '17 at 13:09

Leonardo Alves Machado

2,747
10
38
53

answered Dec 10 '17 at 08:26

ManhNguyen

121
1
5

1

please add your configuration as a text; images hosted on third-party sites will be unreachable, at some point. – Davide Alberani Dec 10 '17 at 08:46

nadia davari · Answer 41 · 2018-03-12T17:18:34.423

I had this issue when i was trying to debug my code , (in using Toggle inspector in my android phone and react development ) , I did this simple steps :

Open menu in phone ( where Reload is , I can open it by long press on back-button Or Shaking the phone ) enter image description here
tap Dev Setting
in Debugging -> Debug Server host & port for device should be empty Note : if you wrote port or anything here ( for debugging ) you should clear it.

score 0 · Answer 42 · answered Apr 02 '18 at 19:38

0

I encountered this issue not with a real device, but with an emulator. I fixed it by running react-native start in the terminal before trying to run the code with android studio. I never encountered this issue when running react-native run-android in the terminal.

answered Apr 02 '18 at 19:38

Grace Chandler

1
1

Thx for your answer. What's the difference to the existing answers and the original question (which mentions calling `react-native start` as well)? – Oliver Hader Apr 02 '18 at 20:20

score 0 · Answer 43 · answered Apr 04 '18 at 02:01

0

i resolve it by this cmd :

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

answered Apr 04 '18 at 02:01

Nguyễn Phúc

273
3
9

score 0 · Answer 44 · answered Apr 17 '18 at 07:32

0

In my case, I'd forgotten the Android Emulator wifi as disabled. To solve the issue, I just swiped down the notification bar to expand menu and to enable Wifi connection.

After activating Wifi connection, the problem has been resolved in my case.

answered Apr 17 '18 at 07:32

efkan

12,991
6
73
106

score 0 · Answer 45 · answered Jun 07 '18 at 22:14

0

On Windows

if you sure, node.js is installed successfuly on your system, please check system environment variables and add C:\windows\system32 in system variables Paths

answered Jun 07 '18 at 22:14

UMUT

134
5

score 0 · Answer 46 · edited Feb 13 '19 at 10:01

0

I think the first thing to do before all the other solutions is:

1. Check whether your device is online or not?

2. If you are running the application on the real device then the device should be on the same network where the development server is running.

More information at this page.

edited Feb 13 '19 at 10:01

Rumit Patel

8,830
18
51
70

answered Feb 12 '19 at 07:24

Njabulo Majozi

46
6

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. [Answers that are little more than a link may be deleted.](https://stackoverflow.com/help/deleted-answers) – Rumit Patel Feb 12 '19 at 07:51
@RumitPatel, I did add essential parts, I was just sourcing where I got the answer – Njabulo Majozi Feb 13 '19 at 07:31
No problem with that. It would be good to additionally explain **how** your solution would work. – Rumit Patel Feb 13 '19 at 10:05

Clocher Zhong · Answer 47 · 2019-04-04T09:44:17.963

Use mkdir ... /assets && react-native bundle --platform.. CAN NOT solve this problem completely,

Notice that, you have to run this command regenerate the files every time when code edited, and it show error again after Reload or Debug JS Remotely.

The fundamental cause this issue is your app cannot connect with server (because of some unknown reason)

Here is my solution:

Firstly, start service in other host and port like:

react-native start --port 8082 --host 0.0.0.0
Then, open app dev menu > Dev Setting > Debug server host for device
Input youripv4address:8082
dev menu > Reload

Hope this helps

score 0 · Answer 48 · answered May 10 '19 at 04:47

0

Go to Dev Settings -> to Debug server host & port for device -> Input your Computer Wifi IP address (Mac OS : Go to System Preferences -> Wifi to get Wifi IP address)

Final Rebuild application and Run

answered May 10 '19 at 04:47

Tung Tran

439
6
8

score 0 · Answer 49 · answered Dec 17 '19 at 05:55

0

For me gradle clean fixed it when I was having issue on Android

cd android

./gradlew clean

answered Dec 17 '19 at 05:55

MJ Montes

3,234
1
19
21

score 0 · Answer 50 · answered Jan 08 '20 at 06:04

The most upVoted answer seems working but become hectic for developers to see their minor changes after couple of minutes. I solved this issue by following these steps: 1- Push my code to bitbucket/github repo ( to view the changes later ) 2- cut paste android folder to any safe location for recovery 3- delete the android folder from my project 4- run react-native upgrade 5- Now, I see all the changes between the previous and the lastest build (using VsCode) 6- I found the issue in build.gradle file in these lines of code.

ext {
buildToolsVersion = "28.0.2"
minSdkVersion = 16
compileSdkVersion = 28
targetSdkVersion = 27
supportLibVersion = "28.0.0"
}

7- I copied these lines ( generated by react-native upgrade script and delete the android folder again. 8- Then I cut paste android folder back in my project folder which I Cut Pasted in step 2. 9 - Replace build.gradle files lines with the copied ones. 10- Now It works as normal.

Hope this will help you.

score 0 · Answer 51 · answered Jan 28 '23 at 13:44

we can fix this issue in just 1 Second weather its on MAC or Windows

search project.ext.react this term in your project

and make one changes in that bundleInDebug: true add this line. and run your project again.

    project.ext.react = [
    entryFile: "index.js",
    enableHermes: true,  // clean and rebuild if changing
    bundleInDebug: true  // **add this line only**
]

score 0 · Answer 52 · answered Apr 10 '23 at 16:52

0

If you are using genymotion you will need to start wifi. I looked through all the answers and none worked but by enabling wifi on genymotion emulator this works.

answered Apr 10 '23 at 16:52

Geoff

6,277
23
87
197

score -1 · Answer 53 · answered Sep 24 '18 at 04:05

-1

This solution only for windows OS

react-native run-android

run above command from android studio terminal it will resolve all dependence.

answered Sep 24 '18 at 04:05

vinod

2,850
1
18
23

Unable to load script from assets index.android.bundle on windows

53 Answers53

Linked

Related