Why Does My Phone Keep Trying to Connect to localhost?

I recently restarted my Mac, opened my React Native project again and expected the development build on my iPhone to connect as usual. Instead, scanning the Expo QR code kept opening something around localhost:8081 on the phone.

That obviously did not work.

The confusing part about localhost is that it always means the device you are currently on. On my Mac, localhost:8081 points to the development server running on the Mac. On my iPhone, the exact same address means port 8081 on the iPhone itself.

The phone has no idea that I really mean “the laptop sitting next to me”.

This sounds trivial once you know it, but it explains a surprising number of development problems.

For a physical phone to reach a local development server, there has to be a route between the two devices. Usually that means they are on the same network and the phone connects to the Mac using its local network address. Another option is an Expo tunnel, which creates an externally reachable connection to the development server.

In my case, using the tunnel option was one of the things I tried because it avoids depending on local network discovery.

What made this especially annoying was that the development build had worked before the restart. Nothing significant in the application itself had changed, so my first instinct was to look at the code. But the code was not the problem at all. The connection between the phone and the development server was.

That is probably the useful lesson here: when a mobile app suddenly cannot reach something that works on the development machine, first ask what localhost means from the phone’s point of view.

A backend can be running perfectly and still be completely unreachable from another device.