Create-react-native-app: App is using 172.16.123.1 as the IP address, which isn't on the network I'm connected to.

[Haegin]

Description

When I run yarn start Expo starts running my app on 172.16.123.1:19001, which isn't the IP I'm using on the only network I'm connected to. Because of this I can't connect with my device.

Expected Behaviour

I ran yarn start and was expecting it to start my app on my local machine, listening on the my network interface so I can connect from my phone.

Observed Behavior

It started on 172.16.123.1:19001 which isn't the IP of my machine on the only network I'm connected to.

My IP address is 172.46.0.206 and I'm not connected to any VPN, nor do I have Docker or any virtualisation software running that may create a dummy network adapter.

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-scripts:

[email protected] /Users/harry/dev/haegin/grimoire/grimoire
└── [email protected] 

• npm ls react-native:

[email protected] /Users/harry/dev/haegin/grimoire/grimoire
└── [email protected] 

• npm ls expo:

[email protected] /Users/harry/dev/haegin/grimoire/grimoire
└── [email protected] 

• node -v: v8.1.0
• npm -v:5.0.3
• yarn --version: 0.19.1
• watchman version:4.7.0

Also specify:

1. Operating system:
   

2. Phone/emulator/simulator & version:
   OnePlus 3 but I can't connect it because of this bug.

Reproducible Demo

create-react-native-app grimoire
cd grimoire
yarn start

[brentvatne]

hello! we use node-ip ip.address(), which in turn calls node's os.networkInterfaces() and then picks the first network interface. docker or hardware interfaces can sometimes cause problems with this, i'm not sure how the ordering of these is determined by the operating system. open to ideas for heuristics we can use, i'm not sure how we can pick from several network interfaces and know which one you'd like to use. so, it's easiest for you to configure the ip address that works if you have multiple network interfaces, and for that we expose REACT_NATIVE_PACKAGER_HOSTNAME

[piotr-cz]

In my case the problem is that I'm running vagrant on VirtualBox which is creating two additional Ethernet adapters which are listed before physical Wireless adapter and so picked by the start script.

I think this can be fixed either by

• configuration option in package.json to either hardcode physical adapter IP or subnet mask
• add an option so user can pick up physical adapter IP after start
• manual config in Expo App

To be precise, IP picked by start script is 192.168.56.1 instead of 192.168.8.100.
When I run os.networkinterfaces() it shows

{ 'VirtualBox Host-Only Network':
   [ { address: 'fe80::9c83:da24:de08:db42',
       netmask: 'ffff:ffff:ffff:ffff::',
       family: 'IPv6',
       mac: '0a:00:27:00:00:12',
       scopeid: 18,
       internal: false },
     { address: '192.168.56.1',
       netmask: '255.255.255.0',
       family: 'IPv4',
       mac: '0a:00:27:00:00:12',
       internal: false } ],
  'VirtualBox Host-Only Network #2':
   [ { address: 'fe80::9ccd:bd72:752f:239a',
       netmask: 'ffff:ffff:ffff:ffff::',
       family: 'IPv6',
       mac: '0a:00:27:00:00:16',
       scopeid: 22,
       internal: false },
     { address: '192.168.10.1',
       netmask: '255.255.255.0',
       family: 'IPv4',
       mac: '0a:00:27:00:00:16',
       internal: false } ],
  'Wi-Fi':
   [ { address: 'fe80::3c:7478:227a:1b62',
       netmask: 'ffff:ffff:ffff:ffff::',
       family: 'IPv6',
       mac: 'xx:xx:xx:xx:xx:xx',
       scopeid: 16,
       internal: false },
     { address: '192.168.8.100',
       netmask: '255.255.255.0',
       family: 'IPv4',
       mac: '80:19:34:0f:ba:18',
       internal: false } ],
  'Loopback Pseudo-Interface 1':
   [ { address: '::1',
       netmask: 'ffff:ffff:ffff:ffff:ffff:ffff:ffff:ffff',
       family: 'IPv6',
       mac: '00:00:00:00:00:00',
       scopeid: 0,
       internal: true },
     { address: '127.0.0.1',
       netmask: '255.0.0.0',
       family: 'IPv4',
       mac: '00:00:00:00:00:00',
       internal: true } ],
  'Local Area Connection* 3':
   [ { address: '2001:0:9d38:90d7:3ca4:9b6b:436d:f362',
       netmask: 'ffff:ffff:ffff:ffff::',
       family: 'IPv6',
       mac: '00:00:00:00:00:00',
       scopeid: 0,
       internal: false },
     { address: 'fe80::3ca4:9b6b:436d:f362',
       netmask: 'ffff:ffff:ffff:ffff::',
       family: 'IPv6',
       mac: '00:00:00:00:00:00',
       scopeid: 17,
       internal: false } ] }

[AdamPD]

Why not rather than specify an IP address in the env variables, specify a network interface (or MAC address or other identifier)?

I have the common situation that when I take my laptop to different locations, I have to constantly reconfigure this IP address for my local wifi.

[piotr-cz]

As expo recommends using Genymotion for emulation which is running on VirtualBox, this issue will probably come up more often

[brentvatne]

if you're having a trouble with this please consider sending a PR to help us improve it. I personally have never encountered this issue and cannot empathize well with it because I can't even re-create it. alternatively, you can use exp (http://github.com/expo/exp) or xde (https://github.com/expo/xde) to open your project -- they will automatically create a tunnel using ngrok, which lets you just forget about any of these issues.

[taylorren]

I have the same issue here. The awkward (mine is 192.168.56.1:19000) is the first virtual network that I have to use with my Vagrant. I also don't know how to rearrange it.

[pdalfarr]

Same issue here....
I generate QRcode (http://fr.qr-code-generator.com/) with my WiFi IP as reported by ipconfig and it worked.

It's true that my network config is a bit tricky ...
Looking forward to have a solution about that.

Thanks beforhand.

ipconfig

Windows IP Configuration

Ethernet adapter Local Area Connection 8:
Ethernet adapter Local Area Connection 7:
Wireless LAN adapter Wireless Network Connection 2:
Ethernet adapter Local Area Connection 3:
Ethernet adapter Local Area Connection:
Wireless LAN adapter Wireless Network Connection:
...
IPv4 Address. . . . . . . . . . . : 192.168.0.101
...
Ethernet adapter VirtualBox Host-Only Network:
Ethernet adapter VirtualBox Host-Only Network #4:
Ethernet adapter VirtualBox Host-Only Network #5:
Ethernet adapter VMware Network Adapter VMnet1:
Ethernet adapter VMware Network Adapter VMnet8:
Ethernet adapter VirtualBox Host-Only Network #6:
Tunnel adapter isatap.{SOME_UUID_VALUE_1}:
Tunnel adapter Local Area Connection* 12:
Tunnel adapter isatap.{SOME_GUID_VALUE_2}:
Tunnel adapter isatap.{SOME_GUID_VALUE_3}:
Tunnel adapter isatap.{SOME_GUID_VALUE_4}:
Tunnel adapter isatap.SOME_SERVER_HOST_NAME:
Tunnel adapter isatap.localdomain:
Tunnel adapter isatap.{SOME_GUID_VALUE_5}:
Tunnel adapter isatap.{SOME_GUID_VALUE_6}:
Tunnel adapter isatap.{SOME_GUID_VALUE_7}:
Tunnel adapter isatap.{SOME_GUID_VALUE_8}:
Tunnel adapter isatap.{SOME_GUID_VALUE_9}:

[pdalfarr]

@brentvatne Can you please explain a bit the 'ngrok' based solution?
Thanks.

[itsAmr]

Take a look at this solution, may be helpful: https://github.com/react-community/create-react-native-app/issues/60#issuecomment-317104728

[MrLuje]

Or this one, which uses env variables

[guiccbr]

@MrLuje's suggestion works perfectly. Thanks.