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.

If you are connected to an Android device over wifi you must do as advised in the last suggestion on the error screen (because adb -s ip:port reverse ... seems not to work):

1. With your app open, shake the device until you see the developer menu.
2. Go to "Dev Settings".
3. Set "Debug server host & port for device" to your development machine's IP at port 8081.

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.

I was able to do without having to connect device and installing app initially.

1. Open project in Android Studio
2. Open "Device Manager" in Android Studio
3. Click "Pair using Wi-Fi" in Device Manager Android Studio
4. On device -> Settings -> Developer Options -> Wireless debugging -> Enable wireless debugging
5. On device -> Settings -> Developer Options -> Wireless debugging -> Pair using QR code -> Scan QR code showing in android
6. Run adb devices from terminal or equivalent to list the device on the same network
7. run react-native run-android deviceId=xxxxxxxx with xxxxxx the device name of your adb device on same wifi network showing in terminal

There you will have app debuggable from wifi

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.

I had same problem on Windows, I solved it by adding rule for port 8081.

in your case, this may help you:

sudo ufw allow 5555/tcp 

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 !!