Calling locally hosted server from Expo App

import Constants from "expo-constants";

const { manifest } = Constants;

const uri = `http://${manifest.debuggerHost.split(':').shift()}:4000`;

You should replace the http://localhost:3000/ address with the ip address of your computer.

On windows, open a prompt and type ipconfig, check the line of your network interface and get the address IPV4, should look like 192.168.1.20. Then you can make your calls with fetch and an url looking like htt://192.168.1.20/routname.

By the way, your computer (server) and your device must be on the same local network. Wifi and lan shares the same network.

To add to Tadeusz's answer, in the current version of Expo (I'm on 32.0.0 right now), you would import Constants rather than Expo (even though the constants are referenced in the docs as Expo.Constants.manifest), so it would look like

import { Constants } from 'expo';
const { manifest } = Constants;

Also, prepending the generated address with the protocol seems to be a must to make it all work.

For the life of me, I could not get any solution that I found (including all the ones on this page) to work. I spent a couple days trying. Finally, I just gave up and worked around this whole problem by using localtunnel and exposing my service running on localhost:8080 to the web. Worked first try when calling it from my expo app. Maybe not the greatest long-term solution, but not so bad, either. I hope this helps someone else!

Tad Lispy's solution worked for me. But I formatted it a little bit differently.

I also added support for react-native-web, using the document object.

import Constants from "expo-constants";

//const inProduction = manifest.packagerOpts == null;
const inProduction = process.env.NODE_ENV === 'production';
const inExpo = Constants.manifest && Constants.manifest.debuggerHost;
const inBrowser = typeof document !== 'undefined';

export const apiDomain =
    inProduction ? 'mywebsite.com'
  : inExpo ? Constants.manifest.debuggerHost!.split(`:`).shift()
  : inBrowser ? document.location.hostname
  : 'unknown';

console.log('apiDomain:', apiDomain);

const protocol = inProduction ? 'https' : 'http';

const apiUrl = `${protocol}://${apiDomain}/...`;

I tried some of it and it didn't work, finally simply used ngrok

Works with React-Native app on iOS physical device that's running separately from your computer, but is calling a localhost API:

Your API call before may have looked like this: http://localhost:3000/api/user/login

On windows, open up your command prompt (press the windows key on your keyboard, type cmd, press enter; this should open it), then enter ipconfig into your command prompt and press enter.

This should give you a big list of data. Scroll down until you you see this field: IPv4 Address...... Take it's value from the right side (something like this: 192.168.1.33).

Next, plug this number into your API call like so: http://192.168.1.33:3000/api/user/login

Make sure you and your device are both using the same wifi network. This should now work.

Summary:

Old API call: http://localhost:3000/api/user/login

New API call: http://192.168.1.33:3000/api/user/login

Doesn't know why but this particular IP address is somehow related to the Android Emulator. I tried the above solutions (Machine's private IPv4) but that also didn't work. So, if someone's developing inside an Android emulator then you can use this IP address.

http://10.0.2.2

And don't forget to add the PORT number of your localhost server.

Quick and easy solution that works straight forward!

Localtunnel docs

1. Install Localtunnel globally (requires NodeJS) to make it accessible anywhere:

npm install -g localtunnel

2. Start a webserver on some local port (eg http://localhost:8000) and use the command line interface to request a tunnel to your local server:

lt --port 8000

3. You will receive a url, for example https://gqgh.localtunnel.me, that you can share with anyone for as long as your local instance of lt remains active. Any requests will be routed to your local service at the specified port.

In my project I normally get the local dev server via config so I adapted @tiagob's answer to just patch the localhost address:

let uri = Config.host;
if (uri.includes('localhost') && manifest.debuggerHost)
  uri = uri.replace(
    'localhost',
    manifest.debuggerHost.split(':').shift()
  );

In production the config won't include localhost so this code will just return the unmodified configuration variable.

[In addition to the above] If using Laravel artisan serve, pass in your computer ip as host parameter:

php artisan serve --host 192.168.0.19 --port 8000

How to call a locally hosted server from Expo is explained in details from Divyanshu Singh with some solutions:

• By using ngrok or localtunnel
• By running the server on 0.0.0.0 (this solution worked for me)

https://dsinecos.github.io/blog/How-to-call-a-locally-hosted-server-from-expo-app