# React Native

> Proxyman で、iOS 実機・iOS シミュレータ・Android 実機・Android エミュレータ上の React Native アプリと Expo アプリの HTTPS 通信をキャプチャします。

## 動画 {#video}

[iOS シミュレータと Android エミュレータで React Native Expo アプリの HTTPS 通信をキャプチャする](https://www.youtube.com/watch?v=4LkKXyIPulM)

## 1. React Native - iOS {#1-react-native---ios}

* iOS アプリで React Native を使用している場合は、iOS のガイドに従ってください。ネイティブの iOS アプリと違いはありません。
* Expo や Metro バンドラーでも使用できます

- [iOS デバイス](https://proxyman.com/docs/ja/debug-devices/ios-device)

- [iOS シミュレータ](https://proxyman.com/docs/ja/debug-devices/ios-simulator)

## 2. React Native - Android {#2-react-native---android}

React Native の Android アプリの HTTP/HTTPS 通信キャプチャは、ネイティブの Android アプリと同じように動作します。以下の Android セットアップガイドに従ってください：

* [Android 実機](https://proxyman.com/docs/ja/debug-devices/android-device)
* [Android エミュレータ](https://proxyman.com/docs/ja/debug-devices/android-device/automatic-script-for-android-emulator)

> **警告:** ガイドのすべての手順に従ってください。特に **5 番目の手順**では、**res/xml/network\_security\_config.xml** と **AndroidManifest.xml** を追加します。
>
> そうしないと、Proxyman は SSL 接続を復号できません。

## 3. トラブルシューティング - Android {#3-troubleshooting---android}

### 3.1 Metro バンドルのエラー {#31-metro-bundle-errors}

Android デバイスの HTTP Proxy を Proxyman に設定すると、Metro バンドラーがローカルサーバーに接続できないため、次のエラーが表示されることがあります。

![Android の React Native レッドスクリーン。「Unable to load script, make sure you're running Metro」と表示されている](https://proxyman.com/docs/assets/Screenshot%202023-04-06%20at%2007.58.01.png)

_Metro バンドルのエラー_

解決するには：

#### Android エミュレータ {#android-emulator}

1. Proxyman を開き、**Certificate** メニュー → **Install Certificate on Android** → **Emulators…** を選択して、**Revert All Changes** をクリックします
2. Android エミュレータを開き、**Settings** アプリ → **Network** → **Wi-Fi** → プロキシの設定を開きます
3. **Proxyman IP & Port** を使って HTTP Proxy を手動で設定します。IP とポートがわからない場合は、**Certificate** メニュー → **Install Certificate on Android** → **Physical Devices…** を開き、手順 2 の Server IP & Port を確認してください。
4. 保存する前に、バイパスプロキシリストに `localhost` を入力します ✅

![Proxyman の IP とポート、およびバイパスプロキシリストの localhost が設定された Android の Wi-Fi プロキシ設定](https://user-images.githubusercontent.com/5878421/230129476-4bd5d1a0-c3c5-4c73-bb79-81f14a071e63.jpg)

5. 完了
6. `The Bridge Was shutdown` の警告と Metro バンドルのエラーが解消されます ✅

#### Android 実機 {#android-physical-device}

1. Android 実機で **Settings** アプリ → **Network** → **Wi-Fi** を開き、プロキシの設定を開きます
2. **Proxyman IP & Port** を使って HTTP Proxy を手動で設定します。IP とポートがわからない場合は、**Certificate** メニュー → **Install Certificate on Android** → **Physical Devices…** を開き、手順 2 の Server IP & Port を確認してください。
3. 保存する前に、バイパスプロキシリストに `your IP` を入力します ✅ 
4. 完了

詳細はこちら：[https://github.com/ProxymanApp/Proxyman/issues/1407#issuecomment-1497235102](https://github.com/ProxymanApp/Proxyman/issues/1407#issuecomment-1497235102)

## 詳細情報 {#learn-more}

* [Expo の React Native アプリ（iOS・Android）から HTTP/HTTPS 通信をキャプチャする方法](https://proxyman.com/posts/how-to-capture-https-from-React-native-app-2025-update)
* [Proxyman で React Native アプリの HTTPS 通信をキャプチャする](https://proxyman.com/posts/2023-09-25-Capture-HTTPs-Requests-From-React-Native-Apps)
* [Proxyman で React Native アプリの HTTP/HTTPS 通信をキャプチャする](https://proxyman.com/react-native)（Proxyman 公式サイト）