Network Error in expo managed workflow React-Native projects

Isaac Ssemugenyi
3 min readJan 21, 2021
image with network cables
Unsplash imagge by THE “NEW” 9TH, Sandkaule, Bonn, Deutschland

Believe me at the time of writing I am about a month old with react native but its a fun and interest domain to explore as a developer as it come with its ins and outs. In the course of the project that I was working on, I was faced with a challenge of connecting this project to a node.js backend and this was to be done locally using an android phone that was linked to the expo project via the same home Wi-Fi as the PC running the project.

During working with dummy data from the jsonplaceholder site, everything worked well until it was time to connect to the actual backend, now on every try I could get an error in the expo console as “Network Error” but when I switched back to the dummy url everything worked well. So I searched the web for the solution, stackoverflow, grepper, among other site and all was in vein until I stumbled across a comment on a particular github issue where a fellow developer gave some advice that saved me from the hustle.

Here I am too to share this with who every might be going through the same in the future, but before the solution, I need to explain why it happens since there is no permission setting provided by expo in the documentation to solve this.

This is because this is not an issue of permission but rather an issue to do with the IP address at which your LAN network is at. If you are working on a project locally, the IP address you always use to communicate accross different projects in the browser and the database is http://127.0.0.1:portnumber, but when you are working across a network like when your phone is connected to the expo project via the Wi-Fi, in this case they communicate with your public IP address, the same address you use to access the internet. So if you intend to use your phone in an expo project to do api calls to the backend (local) then you need to indentify the public IP address of your pc and its this that you will use in your api call instead of localhost or 127.0.0.1.

The simplest way to find it on windows is by opening your command line and type ipconfig, this will list a couple of addresses even the one you use via cable connection (linux click here) but use the one with IPv4 Address http://publicIPaddress:(portOfYourServer), doing this will enable you to connect to your backend successfully

image with ipconfig details for windows
Image partial results from ipconfig command

I just hope this can help a sister or brother.

--

--

Isaac Ssemugenyi

Software Engineer with Stanbic Flyhub Uganda, Love programming with javascript, nodejs, vuejs, react, react-native and Java.