My setup is in a Windows 10 machine with VirtualBox installed with a Host Only Network added by VirtualBox. Every time I run expo start it always picks up the VirtualBox network adapter instead of my machine’s Ethernet adapter. Without blowing up my VirtualBox setup, I made a small tweak to fix the issue.
The Setup
First, I have a very simple React Native up managed by the Expo CLI workflow. When I run either yarn start or expo start, it will create a web server where Expo apps in iOS and Android can visit in the local network in order to load the app for testing.
For Windows 10, you have to allow the inbound port 19000 which is used by the Expo development server. This is done by going through Windows Firewall settings. Read Tom’s Hardware guide to allow ports in Windows Firewall.
Once the Expo dev server is up, we can test the app in either iOS or Android through its Expo Client app. However, when I tested it, the app won’t load properly although it was detected.
The Network Adapter Problem
Every time I run the Expo dev server, it uses the incorrect IP address. Instead of setting it up on my machine’s IP address, it uses my VirtualBox virtual network adapter instead. I’m not sure why but it seems that there is some sort of priority/ordering that needs to be tweaked so that my machine’s ethernet adapter is picked up first before the VirtualBox adapter.
Here is a guide on how to set priority settings for network adapter for Windows 10.
Fixed!
Yes, just like that, my Expo dev server now uses the correct IP address when exposing it to the local network and into the Expo Client app on the mobile. The problem actually is just that the Expo integration uses the incorrect IP address. However, if you manually input the IP address in the client app, it will actually still load properly. Of course, we need the proper configuration and we won’t want to mess around with inconvenient things.
That’s it!