Unable to load script.Make sure you are either running a Metro server or that your bundle 'index.android.bundle' is packaged correctly for release

Question

react-native run-android command terminates by leaving a message in android simulator. The message is as follows:

Unable to load script.Make sure you are either running a Metro server or that your bundle 'index.android.bundle' is packaged correctly for release.

What am I doing wrong?

Answer 1

After numerous experiments, I finally found the solution. The issue stemmed from the default behavior in react.gradle, which placed the JS bundle in a directory that ended up being moved into the app bundle in a way that React Native couldn’t locate it. The fix was simply to map the JS bundle directory to the correct location.

in build.gradle file

project.ext.react = [
        enableHermes     : true,          
        jsBundleDirProdRelease:"$buildDir/intermediates/assets/prodRelease",
        jsBundleDirDevRelease: "$buildDir/intermediates/assets/devRelease",
        jsBundleDirQaRelease: "$buildDir/intermediates/assets/qaRelease"
]

Answer 2

As state in https://reactnative.dev/docs/running-on-device

Method 1: Using adb reverse (recommended) You can use this method if your device is running Android 5.0 (Lollipop) or newer, it has USB debugging enabled, and it is connected via USB to your development machine.

Run the following in a command prompt:

$ adb -s reverse tcp:8081 tcp:8081

To find the device name, run the following adb command:

$ adb devices

Note that simply using adb reverse tcp:8081 tcp:8081 will applies the port forwarding to the first available connected Android device or emulator. Even after port forwarding, if machine's ip is not correctly specify, connection still fail.

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.

Open a terminal and type /sbin/ifconfig to find your machine's IP address.

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 Dev Menu. Using: adb shell input keyevent 82 Go to Dev Settings → Debug server host & port for device. Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).

Note here:10.0.1.1 is not your machine IP's address. You MUST change this to your machine's IP address such as 192.168.1.6 ( get it via ifconfig )

Go back to the Dev Menu and select Reload JS. Run command npm start to start metro server again. From now on template app will start.

Answer 3

What helped me (after agonizing 8+ hours of debugging & reverting to older revisions to no avail), was simply deleting the %temp%/metro-cache folder.

rmdir /S /Q %temp%"/metro-cache"

Then it just magically worked. Previously, the bundler was running, but just did not bundle. Pressing "a" launched wrong application (without applicationIdSuffix).

I had also ran react-native start --reset-cache but I think that the first command was what helped, since it helped on other repos as well.

Answer 4

In fact, Settings > Proxy in the Emulator should be as follows

Answer 5

I got this error today when testing my react-native app on Macbook with android device. Try this solution - check your IP address and put it on your device bundle location dev menu (by shaking the phone):

1. Get your leptop IP address by command: "ipconfig getifaddr en0"
2. Change JS bundle location to YOUR_IP_ADDRESS:8081

It helps me.

Answer 6

if you are using

<application
+   android:networkSecurityConfig="@xml/network_security_config"
    ...

in your AndroidManifest.xml, then you need to update the added network-security-config.xml file in your xml and add the following

<domain-config cleartextTrafficPermitted="true">
      <domain includeSubdomains="true">localhost</domain>
</domain-config>

as Metro server is using HTTP rather than HTTPS.

Answer 7

Working solution Updated 12/25/2023

Step 1. Assuming that you're in the root directory of your project, create a directory:

mkdir android/app/src/main/assets

Step 2. Run the following command:

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

Step 3. Verify that the directory and its files were created

Step 4. npm start

Step 5. Select the appropriate option (i, a, d, r)

Step 6. Open a new terminal and run: npm run android

Answer 8

after someday effort, I found that I should add

android:usesCleartextTraffic="true"

to the android/app/src/main/AndroidManifest.xml

Answer 9

There are many possiblities one which I faced due to my mistake. I had set the host and port in app setting to solve another issue. after reconnecting to same wifi IP address of device may change so IP of my PC changes from 192.168.0.101 to 192.168.0.102 and in my RN app i had set it to 192.168.0.101:8081.

so setting correct IP:PORT in rn apk fixed the issue.

(you can access it by shaking the device as your app wont react to pressing d in metro terminal)

I am not listing other solutions as they are already in old answers here

Answer 10

Solution :

Run:

adb reverse tcp:8081 tcp:8081

Answer 11

For me adding a network security config help solve the issue:

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

and add the config to the Manifest file:

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

Answer 12

Issue solved at least for me.

create network_security_config.xml:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

use this config in app manifest:

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

Answer 13

Non of the above solutions did not work for me on ubuntu OS, I solved it by running the following commands in order so that they run and watch on the same port:

1. npm start --port=8081
2. npm run-android --port=8081

Answer 14

I found in windows 'macmnsvc.exe' was also running in port 8081

so you can change your port for android application by running

npm start -- --port=8088

in your root directory using cmd

Answer 15

I have also faced this issue. I resolved this by following step.

Check android sdk path in Environment Variable.

Add ANDROID_HOME = C:\Users\user_name\AppData\Local\Android\Sdk in System Variable
and C:\Users\user_name\AppData\Local\Android\Sdk\platform-tools path in System Variable

replace sharedBlacklist as below code segment,

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

in node_modules/metro-config/src/default/blacklist.js

Then run npx react-native run-android --port 9001

Answer 16

These steps really help me:

Step 1: Create a directory in android/app/src/main/assets

Linux command: mkdir android/app/src/main/assets

Step 2: Rename index.android.js (in root directory) to index.js (Maybe there is an index.js file in which case you do not need to rename it) then run the 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

Step 3: Build your APK: react-native run-android

Please use index.js in latest version.

Enjoy :)

Answer 17

this works for me on ubuntu

1. if you are having node version 17 first downgrade its version:- You can use n for node's version management.

this is very easy to use. $ npm install -g n

then you can show your node version: $ node -v v16.13.2

2. create an assets folder inside root of the project:- project\android\app\src\main\assets set folder name should be assets

3. now the final step implement the given code inside the project folder:-

$cd project /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

4. after following all these step react-native was successfully running on my pc

Answer 18

A combination of 2 answers solved my problem. It was port related.

adb reverse tcp:8088 tcp:8088
react-native run-android --port=8088

By doing this, the app loaded fine of my phone connected by USB. I think my AV or Vagrant or something else in my PC was using that port.

You can change 8088 to something else if needed.

Answer 19

I just made sure my phone was connected to the same internet address with my laptop, and the problem was solved. Also cd into you android folder and run ./gradlew clean

Answer 20

If your using eas expo react native, check your package.json file to see if you installed expo-dev-client.

This was the issue for me. Installing it fixed it for me.

Ensure to prebuild after installation else likely won't work. npx expo prebuild

Answer 21

try this command

~/Library/Android/sdk/platform-tools/adb -s emulator-5554 reverse tcp:8081 tcp:8081

Answer 22

First do steps 4 and 5 then you can run your project. If you do not get the result (with steps 4 and 5) do the following steps

1- Try to downgrade your Node version (current version is 12.13.1)

  choco uninstall nodejs
  choco install nodejs --version 12.8

2- Add the path of npm module (C:\Users\your user name\AppData\Roaming\npm) to system variables instead of user variables

3- Install react native globally by using command

  npm install -g react-native-cli

4- Go to the root of your project directory and run the following command :

  react-native start

5- Open another terminal in the root of your project and run the following command :

   react-native run-android 

EDIT :

You are using Genymotion ? If yes, do the following step :

After above step if you get the following error ?

error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`.

Open your genymotion and go to :

genymotion menu -> Settings -> ADB -> Then select use custom android sdk tools (click on browse to find sdk location)

Finally , run you project again ..

Answer 23

Try This

taskkill /F /IM node.exe

and then

npx react-native run-android

Answer 24

I encountered this issue with React Native v0.69 after renaming my android package ID.

While renaming /android/app/src/debug/java/old_package_name to
/android/app/src/debug/java/new_package_name, I accidentaly moved the debug version of AndroidManifest.xml into the newly created path.

After moving it back out to /android/app/src/debug/, yarn android worked again without doing any of these other solutions. It's interesting this mistake caused this error so in case it happens to anyone else, check to make sure your files are where they are supposed to be.

Answer 25

This could also be caused by disabling INTERNET permissions in the manifest. I have an app which does not require/use any internet and I had removed it. It's been a while since I updated this app and had forgotten all about it. Spent about an hour trying every single answer again.

Answer 26

For M1 Chip

Verify your JAVA_HOME path, in my case for M1 chip I defined this as in .zprofile

export JAVA_HOME="/Applications/Android Studio.app/Contents/jre/Contents/Home"

then run source ~/.zprofile on terminal

It worked for me after this.

Answer 27

this works for me, additionally add port number and run android

npx react-native run-android --port=8082 (maybe port number differs)

Answer 28

In my case I was trying to run the application on the emulator. But, I was getting this

This IP 10.0.2.2 was accessible from emulator chrome browser. The issue is that this IP is not whitelisted in Android Network Security Settings. So, whatever IP Address you are seeing here add that in below settings and you are good to go.

./android/app/src/main/AndroidManifest.xml

        <application
                android:name=".MainApplication"
+               android:usesCleartextTraffic="true"   <- Add this line
                android:allowBackup="true"
                android:label="@string/app_name"
                android:icon="@mipmap/ic_launcher"

./android/app/src/main/res/xml/network_security_config.xml
</network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
        <domain includeSubdomains="true">10.0.1.1</domain>
        <domain includeSubdomains="true">10.0.2.2</domain>
        <domain includeSubdomains="true">10.0.3.2</domain>
    </domain-config>
 </network-security-config>

Just replace <domain includeSubdomains="true">10.0.2.2</domain> with the IP you are shown in the error from react-native.

Answer 29

You can try the following:

Add this line on your AndroidManifest.xml

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

EDIT: Be careful, it must be false on production for the security of your app

Answer 30

Turn off proxy, if you set proxy in android studio, default use proxy