I’m building a React Native application and recently updated to v0.31.0 and at first things were working well debugging on the device benefiting from a feature of the react-native-xcode.sh script. The script copies your Dev machine’s IP address to a text file called ip.txt which is used for establishing the connection to your machine from your device since localhost points to the wrong place. Here’s the line of code in ./node_modules/react-native/packager/react-native-xcode.sh:
echo "$IP.xip.io" > "$DEST/ip.txt"
Unfortunately, I started running into problems and seeing errors like:
Error: Bundle was not loaded from the packager
Could not connect to development server
After a bunch of Googling I found a few threads where people were suffering through the same problem and along the way noting that the RN docs were outdated. This thread mentioned disabling NSAppTransportSecurity as a possible solution though I already had that setting in info.plist.
However, I discovered the issue for me was a caveat with how the Dev machine IP address is determined using this line in the aforementioned script:
IP=$(ipconfig getifaddr en0)
While this worked great when my machine was plugged into my home network via ethernet it generated a file containing:
But, when I removed my ethernet cable the above ipconfig command yielded no results and an IP.txt file containing only:
To properly populate this with a wifi only connection the ipconfig line needs to read as follows:
IP=$(ipconfig getifaddr en<strong>1</strong>)
Note the “1” which you can learn from here:
➜ ~ networksetup -listallhardwareports Hardware Port: Ethernet Device: en0 Ethernet Address: a8:20:66:2f:ad:8d Hardware Port: FireWire Device: fw0 Ethernet Address: a8:20:66:ff:fe:8e:9d:4e Hardware Port: Wi-Fi Device: en1 Ethernet Address: 20:c9:d0:c4:3b:b9
So, simply plugging my machine back into ethernet had me happily debugging on my iPhone without having the hard code IP addresses.
I’m not exactly sure what the right change would be to the react-native-xcode.sh shell script to have this situation handled automatically as conditions always change.
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.