Android 9.0でReactNativeのReloadが失敗する

現象

Android Studioのエミュレータを利用してReact Nativeの開発する際に
エミュレータのOSがAndroid 9.0 (Pie)だとソース変更後のReloadで以下のエラーが発生する。

　　

システムの構成要素

• React Native
  • react-native-cli: 2.0.1
  • react-native: 0.59.9
• Android エミュレータ
  • Android Studio: 3.4.2
    • Hardware: Pixel 3
    • System Image: Pie 28 x86_64 Android9.0(Google APIs)

原因

Reload時にhttp通信でMetro Bundlerへのアクセスを行うが、
Android 9.0(APIレベル28)からHTTP通信がデフォルト無効になっているため。

対応方法

特定のIPアドレスのみホワイトリストに登録し、HTTP通信を許可する。

1. AndroidManifest.xml を編集する。

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

   <manifest xmlns:android="http://schemas.android.com/apk/res/android"
       package="jp.test.com.app"
       xmlns:tools="http://schemas.android.com/tools"
       >
   　　
       <application
           android:allowBackup="false"
           android:networkSecurityConfig="@xml/network_security_config"> <!-- ← この設定を追加 -->
       </application>
   </manifest>
   

2. network_security_config.xml を編集（なければ新規作成）する。

   ./android/app/src/main/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 includeSubdomains="true">192.168.1.3</domain> <!-- ← ここにローカルのIPアドレスを指定する -->
     </domain-config>
   </network-security-config>
   

3. Android StudioでCrean Projectし、フルビルドする。

4. react-native bundleを実行する。

5. reacr-native run-androidを実行する。

これでReload出来るようになっているはず。

【参考】stackoverflow - [react-native]could not connect to development server on android