How to do Wireless Debugging in React Native with Android Devices

ByMohammed Rashid Posted on

Usually, we run react native apps on real Android devices using the USB debugging method. The main issue with this method is that you need your device connected through a USB cable all the time. In this blog post, let’s how to debug or run your react native apps over a wireless network (WiFi).

First of all, make sure that your PC and Android device are connected over the same WiFi network. Go to developer options of your Android device and enable USB debugging option as well as Wireless debugging option(optional).

Connect your device through a USB cable and run the project for the first time. Open the developer menu through your app by pressing the d on the keyboard.

Choose Settings from developer menu. Select Debug server host & port for device option.

Now provide your local IP of your PC as well as the port. You can use default port of 8081.

That’s it. Remove your USB cable and now you can run and debug your react native app on real device on WiFi.

About Me

I'm Mohammed Rashid from the beautiful state of Kerala in southern India, with a journey seasoned in software engineering and mobile app development.

In a tech world that's always changing, I keep myself updated with the latest like SwiftUI and Jetpack Compose for crafting native apps on iOS and Android. I have also experience in React Native and Flutter.

Through this space, I share my learnings and insights hoping to assist anyone diving into the native mobile app development.

Similar Posts

How to Make Inline Text Bold in React Native

ByMohammed Rashid

Text styling is a crucial part of any mobile application’s UI. One common requirement is making certain words or phrases in a text string bold, while keeping others in regular style. In this tutorial, we’ll focus on how to achieve inline text styling, specifically making text bold, in a React Native application. Prerequisites Simple Inline…

How to Prevent taking Screenshots in React Native App (Android)

ByMohammed Rashid

Mobile users can take screenshots in any app easily. In some scenarios, you may want to prevent users from taking screenshots inside your app. In this tutorial, let’s check how to prevent screenshots in react native app. Please note that this tutorial works only for Android apps created using react native. Go to YourProject/android/app/src/main/java/com/yourproject/MainActivity and…

How to Conditionally Hide and Show a Component in React Native

ByMohammed Rashid

In some situations, you might need to show and hide components conditionally in React Native. Hiding as well as showing React Native components can be done using the state management and ternary operators. In the example given below, I am setting a state named isVisible with the value true, which means the text component will…

How to Make your React Native App Restricted to Portrait Orientation

ByMohammed Rashid

Some famous apps out there such as Instagram are restricted to portrait orientation. You may also want your react native app to support portrait orientation only. By default, react native works on both orientations- portrait and landscape. Let’s check how to restrict the app to portrait in react native. To make the app portrait only…

How to Add a Material Design Dropdown in React Native Compatible for both iOS and Android

ByMohammed Rashid

Picker component of react native is used for showing drop down menu in apps. If you are not satisfied with the picker component then you can use react native material dropdown component which works well on both Android and iOS platforms. The drop down component follows material design with ripple effects. You can install react…

Leave a Reply