Running RN View in existing android app gives error Unable to load script

Question

I have integrated existing android app in react native app. When I run using react native cli it opens the app and after clicking a button to open RN view it gives the error 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 (refer image)

If I manually create the index.android.js using 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

and run the app, it works fine.

Also I can see bundle on this url

http://localhost:8081/index.bundle?platform=android&dev=true&minify=false

Any idea what I am missing on?

I am running app in simulator and its not on flying mode.

Bundler opens like this but but on clicking RR, it says No apps connected (refer image)

Answer 1

After trying most of the options from this answer, no option worked. What worked for me is adding below code to <network-security-config> in network_security_config.xml file:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config xmlns:tools="http://schemas.android.com/tools">

    <!-- This is only for debuggable versions of the App that use Charles Proxy
      https://www.charlesproxy.com/documentation/using-charles/ssl-certificates/ -->
    <debug-overrides>
        <trust-anchors>
            <!-- Trust user added CAs while debuggable only -->
            <certificates src="user" />
        </trust-anchors>
    </debug-overrides>
    <base-config cleartextTrafficPermitted="false" />
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">127.0.0.1</domain>
        <domain includeSubdomains="true">localhost</domain>
        <domain includeSubdomains="true">10.0.2.2</domain>
        <domain includeSubdomains="true">10.0.3.2</domain>
    </domain-config>
 </network-security-config>