How to run react native apps on physical device during development using wifi

Frequent use of the USB cable method to run react native app on physical device at times can be annoying. Ohh What if you forgot your USB Cable!!

Hi there…In this post, you will quickly learn how to open your react native app in your android physical device using wifi or wireless network (not USB as usual).

The simple logic behind this is that your app will run by connecting to react native server via your IP address : port.
Note!: Keep your USB Cable connected until you’re done with the process and also ensure your android physical device and computer are connected on the same internet network. Lets get started. Follow the steps below;

1. Install and open your react-native on physical device with USB cable using npm start and npx react-native run-android on different cmd terminals from your project directory.
   NB: More instructions can be found on react-native docs
   

2. With your app up and running on your android physical device, open a new terminal and run the command ipconfig to get your computer’s IP address (Ipv4 Address as seen below for my computer).

3. With the app open on your physical device, go the cmd (command line) window or terminal where you executed the command npm start (same as npx react-native start) and press the letter “d” on your keyboard to open developer menu on your android device (with the app open).

4. Press settings to open the settings screen and select Debug server host & port for device.

5. Next, we will add the IP address (add your own IP) and react native server port which will enable us to connect to the server and open the app / make changes without using a USB Cable.

Remember the metro bundler runs by default on port 8081.

Click ok, and it’s done.
Go back to your cmd window where metro bundler is open and press “d” on your keyboard to open the developer menu on your device. Finally, disconnect your USB Cable (leaving the developer menu screen open on your device), open the first command line window (the one with Welcome to Metro) and press the letter “r” on your keyboard to restart your app and see how it runs without the USB cable connected to your computer.

Hope it was helpful.

Drop your questions or comments if any.

Read also: Introduction to express middleware