対象者

React Native でAndroidアプリの開発者
AndroidデバイスをWiFiデバッグしている
AndroidアプリでHTTPアクセスを使うなど、ネットワークセキュリティ構成を独自設定した時

参考

React Native on Android でHTTPアクセスしたい時は
以下のリンクを参考にしてみてください。

発生した問題

先のリンクのようにネットワークセキュリティ構成を変更した結果、
リリースビルドで出力したAPKをAndroidデバイスで実行する分には問題ありません。

しかし、このアプリをデバッグしようとnpx startしてAndroidアプリを開こうとすると、
Unable to load script. Make sure you’re either running a Metor service (run ‘react-native start’) or that your bundle ‘index.android.bundle’ is packaged correctly for release.
というエラーが表示がされます。
これはWiFiでのデバッグを行った時に発生します。

今回の場合には適さない解決方法

単純にこのエラーをGoogle先生に聞くと、
index.android.bundleを作りましょう、という解決法があるかと思います。

$ mkdir android/app/src/main/assets
$ 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
【RN】既存のプロジェクトのandroid buildでUnable to load script. Make sure you’re either running a Metor service (run ‘react-native start’) or that your bundle ‘index.android.bundle’ is packaged correctly for release.と言われる

stack overflowでの議論：　https://stackoverflow.com/questions/55441230/unable-to-load-script-make-sure-you-are-either-running-a-metro-server-or-that-yo

根本的な原因

しかしながら、今回の場合は変更したネットワークセキュリティ構成が問題でこのようなエラーが出ています。
試しに、ネットワークセキュリティ構成を適用しているAndroidManifest.xml内の以下の記述、

AndroidManifest.xml

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

を消すと、ReactNativeでのデバッグが可能になるかと思います。

エラーが出る理由

問題はネットワークセキュリティ構成の内容です。
私が先に投稿した記事では以下のように設定しています。

network_security_config.xml

<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">metadata.soracom.io</domain>
    </domain-config>
</network-security-config>

しかし、このような設定をすると、SORACOMへのHTTP通信は許可されますが、デバッグ時のローカル通信も制限されます。

つまり、デバッグでReactNativeのサーバへのHTTPアクセスが拒否されてしまい、
結果として、デバッグができなくなるという状態になります。

(以前の記事を見ていただいた方は大変申し訳ございませんでした。私の勉強不足でした。。。)

処置方法

ここまでの内容からネットワークセキュリティ構成に設定したい項目は2つです。

SORACOMの各サービスへのHTTP通信の許可
デバッグ時のローカル通信の許可

この2点を満たすように構成するには次のようにnetwork_security_config.xmlを設定します。

network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <!-- 通常の通信ではHTTPSのみ許可 -->
    <base-config cleartextTrafficPermitted="false"/>

    <!--　SORACOMなどHTTPアクセスしたいものを許可 -->
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">soracom.io</domain>
        <domain includeSubdomains="true">{そのほかサービス}</domain>
    </domain-config>

    <!-- RNデバッグ用ローカルサーバへのアクセスを許可 -->
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
    </domain-config>
</network-security-config>

このように設定することで、デバッグも今まで通り実行しつつ、
リリース時でもSORACOMなどHTTPアクセスが必要なものも利用できます。

まとめ

ネットワークセキュリティ構成を独自に設定するときは、
ローカル通信もHTTPアクセスが制限されます。

ReactNative(Android)でネットワーク セキュリティ構成を変更したとき

対象者

参考

発生した問題

今回の場合には適さない解決方法

根本的な原因

エラーが出る理由

処置方法

まとめ

参考

ReactNative(Android)でネットワークセキュリティ構成を変更したとき