React Native

React Native - iOS
If you're using React Native for the iOS app, you can simply follow the iOS Guideline. There is no difference from the iOS native app.
iOS Device
iOS Simulator
React Native - Android
Basically, To capture HTTP/HTTPS traffic from React Native for Android apps, it's similar to the native Android app. Please follow Android Setup Guide:
Android Device & Emulator
However, It requires you do few steps:
1.Create AndroidManifest.xml if it does not exist. Skip it if it's already available.
To enable proxy for debug variant in android. Modify the AndroidManifest.xml under “debug” variant folder. (Create AndroidManifest.xml with the following configuration if it does not exist).
AndroidManifest.xml file should be located at ~/your_project/android/app/src/debug/AndroidManifest.xml
Create AndroidManifest.xml
2. Edit the AndroidManifest.xml file
Add android:networkSecurityConfig="@xml/network_security_config" to the file.
1
<?xml version="1.0" encoding="utf-8"?>
2
<manifest ... >
3
    <application android:networkSecurityConfig="@xml/network_security_config" ... >
4
    ...
5
    </application>
6
</manifest>
Copied!
3. Create network_security_config.xml file'
If res/xml/network_security_config.xml does not exist, let create the file.
1
<network-security-config>
2
    <debug-overrides>
3
        <trust-anchors>
4
            <!-- Trust user added CAs while debuggable only -->
5
            <certificates src="user" />
6
            <certificates src="system" />
7
        </trust-anchors>
8
    </debug-overrides>
9
    
10
    <base-config cleartextTrafficPermitted="true">
11
        <trust-anchors>
12
            <certificates src="system" />
13
        </trust-anchors>
14
    </base-config>
15
​
16
    <domain-config>
17
        <!-- Make sure your URL Server here -->
18
        <domain includeSubdomains="true">your_production_domain</domain>
19
        <trust-anchors>
20
            <certificates src="user"/>
21
            <certificates src="system"/>
22
        </trust-anchors>
23
    </domain-config>
24
</network-security-config>
Copied!
Make sure you replace your_production_domain with the real domains that you're going to intercept.
4. Follow all steps from Android Guideline.
Reference:
​https://ipallavi.medium.com/enabling-proxy-in-react-native-apps-33c1dd4e4175​
​

Debug on Devices - Previous

Ruby

Next - Debug on Devices

Flutter

Last modified 6mo ago

Copy link

Contents

React Native - iOS

React Native - Android