React-native android debugger connecting to 10.0.2.2 instead of localhost

Question

While running app with react-native run-android its connecting to 10.0.2.2:8081 instead of localhost:8081 and not able to debug.

Does anyone know how to fix so that it will connect to localhost instead?

Sublittoral

Answer 1

On MAC I solved it by doing following:

1. Press Cmd + M on emulator screen
2. Dev settings > Debug server host & port for device
3. Set localhost:8081
4. Rerun the android app: react-native run-android

Debugger is connected now!

Hope it will help others :)

Killing

Thnaks, for open Dev Settins use adb shell input keyevent 82 in windows – Explication

@ZanyarJ.Ahmed and on linux also – Mammet

Answer 2

You can try to change it through Dev Settings > Debug server & host port for device on menu, that you can access shaking a device or run adb shell input keyevent 82 command in a terminal

Macmahon

Answer 3

Just run port forwarding

adb -s emulator-5554 reverse tcp:8081 tcp:8081

OR your api server to port 5000

adb -s emulator-5554 reverse tcp:5000 tcp:5000

Roots

Answer 4

If you have created a network_security_config.xml file to allow for hardware devices to connect, this can be the source of the issue. Just add localhost and 10.0.2.2 in that file, and you should be good.

eg. network_security_config.xml file:

<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false">localhost</domain>
    <domain includeSubdomains="false">10.0.2.2</domain>
    <domain includeSubdomains="false">192.168.0.12</domain>
  </domain-config>
  <base-config>
    <trust-anchors>
        <certificates src="system"/>
        <certificates src="user"/>
    </trust-anchors>
  </base-config>
</network-security-config>

Instillation

Answer 5

I wrote a little package for this because it was driving me nuts having to open the screen, especially when using and restarting multiple emulators. Check it out here and an example project here:

npm i @nick-bull/react-native-debug-address

# DEBUG_HOST=127.0.0.1:8081 npx react-native start --port 8081
# or, equivalently
DEBUG_PORT=8081 npx react-native start --port 8081

npx react-native run-android --port 8081 

Grande