Calling locally hosted server from Expo App

call localhost from server
fetch localhost
ngrok
expo server
expo network request failed
expo-constants
fetch localhost 3000
expo allow http request

I am creating a react-native app and one of the components I have created contains a property which is populated through data coming from an http request.

Right now I am hosting the server from my laptop, however I am testing the app on my phone using the Expo app. Since these are two separate devices, the http://localhost:3000 calls are not working and thus I can not tell whether or not my component is properly working.

Is there any way for me to run the server on my laptop and set it up so that the http requests from within the Expo app reach the server?

You can get the IP address at runtime using the Expo manifest:

import Constants from "expo-constants";
const { manifest } = Constants;

const api = (typeof manifest.packagerOpts === `object`) && manifest.packagerOpts.dev
  ? manifest.debuggerHost.split(`:`).shift().concat(`:3000`)
  : `api.example.com`;

This will set api constant to the address of your local development machine in development mode and to whatever address you use in production. Note that apps deployed through App Store / Play Store seems to have packagerOpts undefined. That's why we have additional typeof condition. In that case we assume it's production build.

More about the manifest here: https://docs.expo.io/versions/latest/workflow/how-expo-works/#expo-development-server

How to call a locally hosted server from Expo? · Blog, Hi guys, I have my own API server running on my computer and also debugging my application using Expo XDE. And I need to send an image  Calling locally hosted server from Expo App. Ask Question Asked 2 years, 7 months ago. Active 3 months ago. Viewed 12k times 19. 6. I am creating a react-native app

import Constants from "expo-constants";

const { manifest } = Constants;

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

Can Expo get a connection from localhost (my local server using , Description I'm trying to call HTTP request from a real device to my local network computer which is running server. Expected Behavior fetch  Opens your app in the Expo client on a connected Android device.--ios, -i: Opens your app in the Expo client in a currently running iOS simulator on your computer.--web, -w: Opens your app in a web browser.--host, -m [mode] Type of host to use. [lan, localhost or tunnel]. Tunnel allows you to view your link from other networks. Default is lan

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.

fetch request to localhost server · Issue #154 · expo/create-react , Description Can't connect to an API server ran on my local machine from my to host and review code, manage projects, and build software together. IP) and I'​m not golden to test my local dev calls from the Expo app! When running the published version of your app, this refers to the the location on Expo's asset server where Expo has stored your asset. When running the app from Expo CLI during development, this URI points to Expo CLI's server running on your computer and the asset is served directly from your computer.

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.

Can't make requests to local API server · Issue #241 · expo/create , Note - I'm using Expo, a Rails backend, and testing on iPhone/iOS Simulator so this post is only base Tagged with It's useful to test a local development server. The URL HOST is pointing to my computer's IP address. Description I'm trying to call HTTP request from a real device to my local network computer which is running server. Expected Behavior fetch request to localhost, eg: localhost:8000 to get or post some data.

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!

Running Your React Native Expo App on a Device with Local Backend, A new server is created with express by calling express() directly, as a local const​, usually named app by convention. We were able to create a new Expo server  Expo will generate the other required sizes. This icon will appear on the home screen and within the Expo app. */ "icon": STRING, /* URL to your app on the Apple App Store, if you have deployed it there. This is used to link to your store page from your Expo project page if your app is public.

React Native Cookbook: Recipes for solving common React Native , The command-line tool for creating and publishing Expo apps. Miss any of our Open RFC calls? A few seconds later, you should get a clean URL sent to you that points to the exp.host server where your package was published to. You can​  Open CMD from your Project Directory and Run Command as set REACT_NATIVE_PACKAGER_HOSTNAME=192.168.0.12. Replace the ip with your own LAN ip address. The Command set is used to set the Environment variable locally, without defining it into Environment Variables. share. Share a link to this answer.

expo-cli, at the top of the page to bring the XML namespace objects into local scope. If you are working behind an Internet firewall, or if your application will reside on or this code to authenticate your proxy's SOAP calls through the firewall server. However, considering that most postbacks will be invoking Expo API methods,  If you use the flask executable to start your server, you can use flask run --host=0.0.0.0 to change the default from 127.0.0.1 and open it up to non local connections. The config and app.run methods that the other answers describe are probably better practice but this can be handy as well.

Professional Windows Live Programming, Create a React Native client app using Expo to receive our live updates from This should open Expo's dev server in your browser. We set up an effect to call a loadInitialData function the first time the component mounts. The way to make HTTP requests to your local development machine differs  I also couldnt connect to local dev server in Safari. I tried every possible solution from every thread, but not one mentioned IP address conflict. Tried ipconfig /renew /release /flushdns, setting static IP, and restart router. Now i can connnect to local dev server in Safari, as well as use Expo LAN connection.

Comments
  • did you get this working?
  • Note that this will only work if you serve your app over LAN. Here is a feature request to enable this for tunnels as well: expo.canny.io/feature-requests/p/tunnels-to-additional-ports
  • this Work for me, It is important to mention that it is necessary to add http:// before the IP
  • Constants has been moved to react-native-unimodules in recent versions.
  • Thanks for your comment @borislemke. I did a quick research and according to docs.expo.io/versions/v36.0.0/sdk/constants expo-constants is still the module that exposes Constants.manifest. Are you saying it won't work this way? I don't use Expo anymore so it's difficult for me to actually test it.
  • saved me precious time of my life
  • thank you for this!
  • It's in react-native-unimodules now
  • Lifesaver.!!!!!!!!. Also, use the port number like this. 192.168.1.20:3000/routname