Debugging react-native application using WIFI

Make sure you have connected on the same network, like in my case I connected my laptop through my phone's hotspot. Of course you also need to have internet access and make sure you have successfully installed your app to your phone using react-native run android. If you have successfully installed your app you may now remove the attached USB cable.

Then on Windows, just open your terminal (CMD), then type ipconfig, and then press enter. You will then see the list of your IP configuration. Your private ip address is the IPv4 Address, something like 192.168.0.10.

On your react native project, run react-native start to start the metro bundler. When the metro bundler started it will say Running Metro Bundler on port 8081 <- this is the port that you have to connect through.

On your device go to device setting then to "Debug server host & port for device", then type the computer's private IP address plus the port where metro bundler is running, for example: 192.168.0.10:8081.

Click on save then try to reload your app again.

As stated on react-native docs

devices have to be on same wifi in order to work, then go to settings through app by shaking it and in menu select "Dev Settings": Just add pc local address to "Debug server host & port for device" like so 10.0.1.1:8081.

As well adb reverse tcp:8081 tcp:8081 may be required.

In the beginning connect your mobile to pc and run app using react-native run:android command. then run adb shell input keyevent 82 command. It will display a popup window and select Dev Settings.And then go to debug server host &port for device. Then Enter your wifi host ip which is also connect with your PC (use this link to get wifi IP get local IP of the connected wifi)

and get the value of Your Local IP is:*************

and after that IP address add : 8081

if you want to live reload through the wifi use this adb shell input keyevent 82 command and select live reload option.

What I do when I'm having troubles with the wi-fi connection because my PC at work has firewall rules that changes all the time.

1. Turn on my "mobile hotspot", to share my connection, with the mobile connected to the wi-fi.
2. Connect my notebook on the shared network from mobile.
3. Get the IP that the mobile has generated.
4. Set "Debug server host & port for device" to that IP at port 8081.

I had faced the same issue over trying to connect android 4.4 device for debugging with react native application .

you have to disable firewall

then connect over again , it works fine

Happy coding !!