React Native Android cannot connect to metro bundler when using Charles SSL proxy

Question

I have followed many of the online guides describing how to debug network traffic on Android applications such as this one using Charles Web Proxy. Everything is set up correctly but when I run my React Native app, it can't connect to the Metro bundler running on port 8083. I have tried everything including taking these extra steps, but it seems like the manually setup proxy interrupts communication with Metro bundler. What extra steps should be taken to get Charles working with Metro and React Native?

Answer 1

Usually, you get issues like this because you are using tools or third-party libraries that won't let you sniff out the API calls. Please make sure that you:

1. Disable "macOS Proxy" especially if you are using a real device and not an emulator.

2. Make sure that you are not capturing all the network traffic and only the domain you are interested in.

Do not add a *:* wildcard host and capture everything try to capture just the network traffic from your app network.

3. Turn it on and off. Sometimes after changes like this, you need to (a) close Charles Proxy (b) turn on/off your Wi-Fi network (c) turn on/off your device Wi-Fi network (d) finally re-open Charles Proxy again.

Let me know if this doesn't fix your issue.