Calling locally hosted server from Expo App

react-native axios expo
iSeeJay picture iSeeJay · Nov 21, 2017 · Viewed 15.3k times · Source

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?

Answer

Tad Lispy picture Tad Lispy · Mar 9, 2018

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

Related questions

Network error with axios and android emulator

I got a React-Native application working with a NodeJS backend which serves an API. My React-Native front is using Expo and Axios to hit on a route of my NodeJS API (using Hapi, Joi, Knex), which will (for the example) …

Read More
Axios get in url works but with second parameter as object it doesn't

I'm trying to send GET request as second parameter but it doesn't work while it does as url. This works, $_GET['naam'] returns test: export function saveScore(naam, score) { return function (dispatch) { axios.get('http://****.nl/****/gebruikerOpslaan.php?naam=test') .…

Read More
Using Axios GET with Authorization Header in React-Native App

I'm trying to use axios for a GET request with an API which requires an Authorization header. My current code: const AuthStr = 'Bearer ' + USER_TOKEN; where USER_TOKEN is the access token needed. This string concatenation may be the …

Read More