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?

score 32 · Answer 1 · answered Jul 30 '18 at 12:40

32

On MAC I solved it by doing following:

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

Debugger is connected now!

Hope it will help others :)

answered Jul 30 '18 at 12:40

Anshuman Jaiswal

5,352
1
29
46

1

Thnaks, for open **Dev Settins** use `adb shell input keyevent 82` in windows – Zanyar Jalal Jan 04 '21 at 18:00
@ZanyarJ.Ahmed and on linux also – Biereagu Sochima Aug 16 '21 at 19:35

score 3 · Answer 2 · answered Mar 26 '18 at 21:03

3

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

answered Mar 26 '18 at 21:03

savelichalex

196
5

score 3 · Answer 3 · answered Apr 16 '19 at 16:10

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

answered Apr 16 '19 at 16:10

Антон Васильев

27
1
2

score 0 · Answer 4 · answered Feb 17 '21 at 19:50

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>

Nick Bull · Answer 5 · 2021-03-14T10:51:34.910

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

React-native android debugger connecting to 10.0.2.2 instead of localhost

5 Answers5