React Native is a popular framework for building mobile apps using JavaScript and React. It allows developers to build native apps using React and JavaScript.

However, it's not easy to capture and inspect HTTPS traffic from React Native apps. The most common solution is using the console.log() function to print the HTTPS traffic to the console.

This tutorial demonstrates how to capture and inspect HTTPS traffic from React Native apps with Proxyman.

Here is the demo video: Youtube at https://www.youtube.com/watch?v=4LkKXyIPulM

1. Download and setup Proxyman macOS

Proxyman is a powerful tool that allows you to capture HTTP and HTTPS from your iPhone, iPad, iOS Simulators without jailbreak or complicated steps.

Before we start, please download and setup Proxyman macOS.

1. Open Proxyman's website and download the latest version of Proxyman macOS

• Proxyman macOS: Support macOS 12 or later

2. Open Proxyman -> Certificate Menu -> Install Certificate for this Mac...
3. Follow the steps to install the certificate
4. Verify that all green checkmarks are checked

2. Checkout React Native sample app in Github and start the iOS or Android app

1. Clone the React Native sample app from Github: https://github.com/ProxymanApp/Proxyman-React-Native-Sample-App

git clone https://github.com/ProxymanApp/Proxyman-React-Native-Sample-App
cd Proxyman-React-Native-Sample-App

This project is created by using Expo. You can create your own React Native app by following the Expo documentation.

2. Install the dependencies and make sure you're using NodeJS 22 or later

npm install

2. Start the app on iOS with this command:

npm run ios

New iOS Simulator will be opened and the app will be started.

3. Start capturing and inspecting HTTPS traffic from iOS Simulator

Before we start capturing the HTTPS traffic, we need to install the Proxyman certificate on the iOS Simulator.

It's an important step, so Proxyman cap decrypt your HTTPS data without getting any SSL Errors.

Proxyman makes it easy to install the certificate on the iOS Simulator in few clicks.

Let's open Proxyman -> Certificate Menu -> Install Certificate for iOS -> Simulators -> Follow the steps

It's done now. Let's start capturing the HTTPS traffic.

Go back to the iOS Simulator and start the app again. Try to click on the GET / POST / PUT buttons on the main apps. This app will make a HTTPS request to https://httpbin.proxyman.app which is a echo server for HTTPS Testing.

At this point, we can see the HTTPS traffic is captured by Proxyman, but it's encrypted.

Look at the Response Panel, you can see the HTTPS traffic is encrypted. Let's click on the "Enable SSL Proxying" button.

Done. Let open the iOS Simulator again and click on the GET / POST / PUT buttons on the main apps. This time, you can see the HTTPS traffic is decrypted.

4. Start capturing and inspecting HTTPS traffic from Android Emulators

4.1 Create a new Android Emulator with Google APIs versions

It's the same as the iOS Simulator. However, we need to create a new Android Emulator in Android Studio.

1. In Android Studio -> Go to Virtual Device Manager -> Create a new Android Emulator
2. You can select any device you want, for example, Pixel 9 Pro
3. However, make sure select Google APIs versions and not Play Store version.
4. In this tutorial, we will use Pixel 9 Pro and Google API 36 (Android 13)

5. Launch React Native app on the Android Emulator with this command:

npm run android

4.2 Install Proxyman certificate on the Android Emulator

In order to capture the HTTPS traffic from the Android Emulator, we need to install the Proxyman certificate on the Android Emulator.

By using Automatic Script for Android Emulator, we do everything in 1 click. It's a time-saving feature.

1. Open Proxyman -> Certificate Menu -> Install Certificate for Android -> Emulators -> Click on the Override Emulator button

On this screen, you can see the Proxyman certificate is installed on the Android Emulator.

Done, let open the Android Emulator again and click on the GET / POST / PUT buttons on the main apps. This time, you can see the HTTPS traffic is decrypted.

5. Conclusion

In this tutorial, we demonstrated how to capture and inspect HTTPS traffic from React Native apps with Proxyman.

Proxyman is a powerful tool that allows you to capture HTTP and HTTPS from your iPhone, iPad, iOS Simulators and Android Emulators without jailbreak or complicated steps.