React Native app does not start in Expo app

Question

I have HTC M8s with Expo installed on which I want to test my apps written in React Native. I run my app in a console, scan QR code and try to connect to my app from my smartphone - unfortunately, I see an error saying that it could not load exp://myaddress:port.

I am using Windows 10 and both my PC and my smartphone are connected to the same WiFi network.

Here's the result of ipconfig command:

Ethernet adapter Ethernet:
   Media State . . . . . . . . . . . : Media disconnected
   Connection-specific DNS Suffix  . : myhostname.net

Wireless LAN adapter Wi-Fi:
   Connection-specific DNS Suffix  . : myhostname.guest
   Link-local IPv6 Address . . . . . : fe80::8136:d112:d190:5fd8%17
   IPv4 Address. . . . . . . . . . . : 10.168.4.171
   Subnet Mask . . . . . . . . . . . : 255.255.255.0
   Default Gateway . . . . . . . . . : 10.168.4.1

Ethernet adapter Ethernet 6:
   Media State . . . . . . . . . . . : Media disconnected
   Connection-specific DNS Suffix  . :

Wireless LAN adapter Local Area Connection* 1:
   Media State . . . . . . . . . . . : Media disconnected
   Connection-specific DNS Suffix  . :

Ethernet adapter Ethernet 3:
   Media State . . . . . . . . . . . : Media disconnected
   Connection-specific DNS Suffix  . :

Ethernet adapter Bluetooth Network Connection:
   Media State . . . . . . . . . . . : Media disconnected
   Connection-specific DNS Suffix  . :

Tunnel adapter Local Area Connection* 11:
   Connection-specific DNS Suffix  . :
   Link-local IPv6 Address . . . . . : fe80::1c40:2198:f557:fb54%11
   Default Gateway . . . . . . . . . :

Here's the result of running npm start:

(...) Or enter this address in the Expo app's search bar:

  exp://10.168.4.171:19000

Unfortunately, I can't access my app from Expo app installed in my smartphone.

I already tried:

• Uninstalled VirtualBox on my PC
• Changed the priority of network adapters so that WiFi has the highest priority

And I am still unable to run my app via Expo app. However, installing Expo app on my PC solved the problem - it shows different QR code than the one on console and I can run my react native app, but I would like to run my app from Expo app from my smartphone.

EDIT: I tried on another PC with Win10. Installed create-react-native-app, ran it and it worked perfectly through WiFi.

Answer 1

Source: https://github.com/react-community/create-react-native-app/issues/60#issuecomment-317104728 I read Himujjal's solution and it works with me: The following steps will definitely help. I had the same problem and was able to solve it in my Windows 10 OS. I had Virtual Box installed on my computer and I was not able to run CRNA in my android expo client. So,

1. first I connected my laptop through my mobile hotspot.
2. Then Control Panel > (search for 'network connections') > network connections
3. Right-Click on 'Wifi' > select 'Properties' > 'Internet Protocol Version 4 (TCP/IPv4)' [don't uncheck the mark]
4. Go to "Properties" > "Advanced..." > (Uncheck 'Automatic Metric') > Type in the text-box below that (Interface Metric) : 10.
5. Click OK and OK and OK :)
6. Then do the same for the other "Virtual Box-xxxxx" networks. But instead put 20 in the Interface Metric text-box.
7. Click OK, OK and OK.

Try restarting your app on Expo. It must work now!

Answer 2

I am not sure if you already found out the answer but I hope this may help someone who is facing the same situation. The culprit is the network adapter. There is something known as interface metric of a network adapter, the lower the interface metric the higher the priority of the adapter. I am writing this answer from windows perspective. As you have mentioned that your pc and your phone are connected to the same wi-fi network, the reason you are not able to access the app on your mobile is because the local ip you are getting when you start the server is not allocated to the adapter you want.

• The below solution worked for me:
  1. Launch command prompt as an administrator, type powershell.
  2. Type Get-NetIPInterface: This will give you a list of network adapters, their index numbers and their interface metrics
  3. Change the interface metric of wirelss adapter to the minimum by the following command: Set-NetIPInterface -InterfaceIndex "your_wifi_adapter_interface_index" -InterfaceMetric "MinimumValue"
  4. Type "r" in the console tab where npm is opened so that it will reboot the packager.
  5. Voila! It works.