Hello, I'm Luiz, a 26-year-old Software Engineer from São Paulo, Brazil. Today, I want to share some essential tips for debugging Android apps using React Native and ADB (Android Debug Bridge). Whether you're an experienced developer or just starting out, these tips will help make your debugging process more efficient. Let's dive in!

ADB

What is ADB? ADB, or Android Debug Bridge, is a versatile command-line tool that allows developers to communicate with and control Android devices. It facilitates a variety of device actions, such as installing and debugging apps, and provides access to a Unix shell that you can use to run various commands on a device.

Connect your device over WiFi to install or debug

ADB, has a feature that will allow us to connect our android device over wi-fi so this way we can debug without the need of a cable connected to the device.

To make this happen make sure that you follow the steps

1. Make sure that your device and your computer are under the same wi-fi network, ADB Debugging and Wireless Debugging are enabled in the Android Device's Developer options
2. Get the IP Address of the Device, Searching for IP address on the device settings or by connecting via USB and running this command adb shell "ip addr show wlan0 | grep -e wlan0$ | cut -d\" \" -f 6 | cut -d/ -f 1"
3. Now if you have any cables connected remove from the device and run adb connect <ip_address>:5555

Redirecting ports

Sometimes, Android and React Native encounter issues fetching localhost URLs. What does this mean? It indicates that Android is unable to find the ports on your machine. To resolve this, you can use some commands to proxy the ports to your computer to the Android Device:

adb reverse tcp:PORT tcp:PORT
adb -d reverse tcp:PORT tcp:PORT
adb -e reverse tcp:PORT tcp:PORT

Typically, this issue arises with the React Native bundler. To fix it, you just need to replace PORT with 8081:

adb reverse tcp:8081 tcp:8081
adb -d reverse tcp:8081 tcp:8081
adb -e reverse tcp:8081 tcp:8081

Control your device with your computer

There is a Tool that you can install and control devices that are connected over ADB on your computer, called scrcpy:

• Install on Mac
• Install on Linux
• Install on Windows

To start the application just run type on your terminal

scrcpy

Thats all Folks

Debugging Android apps with React Native and ADB can make your life a lot easier. Using features like wireless debugging, port redirection, and tools like scrcpy helps you stay connected and fix issues without hassle. Keep experimenting and stay updated with new tools to make your debugging process smooth and efficient. Happy coding!