Debugging React Native Apps on Real Devices: A Beginner's Tutorial

Table of Content

• Introduction

• Objectives

• Step-by-step guide

• Using React Native CLI

• Using Expo Go

• Conclusion

INTRODUCTION

React Native is a cross-platform mobile app tool that gives developers the proficiency to create Android and iOS applications with a single codebase.

One of the benefits of React Native is that it gives a good developer experience by allowing developers to connect their app to a physical device for debugging and testing. These permit you to see how your app looks and behaves on a mobile and to specify and fix any troubles.

For developers whose laptop specs are below the recent average, this method helps reduce the number of tasks your system runs and improve the development experience.

OBJECTIVES

This article aspires to teach you step-by-step how to connect your React native apps to physical devices.

STEP-BY-STEP GUIDE

React Native CLI

There are two ways to connect a React Native Cli app to physical devices:

• By USB debugging

• By Wireless Connection

1. USB Debugging

This is a process in which you connect your device to your system through a USB (wired connection). To achieve this, connect your phone to your system via USB and enable developer options.

To enable the developer option:

1. On your mobile, go to settings.

2. From settings, scroll to the bottom and look for About phone, then click on it.

3. Look for software information and click on it

4. Look for Build Number and click on it at least 7 times to enable developer mode.

Now that you have enabled the developer mode, go back to settings and scroll to the bottom, you will see the developer option. Click on it and enable it. (You will see a button to enable it once you click it).

Also, scroll to USB debugging and also enable it.

Congratulations, you just configured your mobile. Now, let's see how to connect them.

Go to your terminal and type adb devices. It will show you a list of all devices your Android app can connect to. If you do not see your device there, check your cable if it is plugged correctly and redo the steps above.

Once you see your device name, you can run your React native project and it will automatically connect to your mobile. However, if it still opens your emulator after you find your physical device in the adb devices list, use this command;

adb -s <emulator-serial-number> emu kill

PS: Replace <emulator-serial-number> with the serial number of the emulator, you want to kill. You can find the serial number of the emulator by running the adb devices command.

1. Wireless Debugging

This is my favorite because you won't have to worry about toggling what you don't know.

First, ensure your device and system are connected to the same network. (Connected to the same router, and modem). Then, in your React Native project, go into the Android folder and clean the gradlew.

For Windows:

cd android && ./gradlew clean

For Linux and Mac:

cd android && ./gradlew clean

Once it has successfully cleaned with a success message, run ./gradlew assembleDebug

The command is to build a debug app. Once it is successful, go into project_name\android\app\build\outputs\apk\debug and send the app-debug.apk file to your device. Install it on your mobile and open it. LOL... don't worry if you see the red screen shake your phone and the developer option will pop up. Click on the USB and enter your WIFI v4 address.

To get this, you can use the terminal or go to the network settings of your computer.

Windows terminal, use ipconfig

Linux and Mac, use ifconfig

Once you copy it out, type it into your phone and click OK. That's all.

PS: It should look like 192.168.0.***:8081 where 192.168.0.*** is your wifi v4 address and 8081 is your react native port number

Now, reload your React native project and your device will be in development mode.

Expo CLI

The process is easy; all you have to do is follow;

1. Install the Expo Go app on your device.

2. Run your Expo app. It will generate a QR code.

3. Scan the QR code using Expo Go.

4. Your device will connect to your Expo project.

Faq:

1. Can I still use my phone when connected to my React Native project?

Yes, you can still use your phone when it is connected.

2. Will it work if my data is off? No, your device and computer must be connected to the same WiFi network for wireless debugging.

3. Can I have background apps running? Yes, as long as your device has enough RAM, background apps should continue running normally.