How to enable HTTP calls on React Native Expo

Question

I have a React Native project built using Expo. To test my API locally I need to be able to make calls to it via HTTP. There are lots of resources on how to do this, but none of them describe how to do it for Expo.

Basically the solution without Expo is to edit Info.plist and insert this into it (source):

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

Since you can't edit Info.plist directly when using Expo, you can access it in app.config.js as shown here. However, the only example I can find on how to do this comes from the above link, and does not show how to do it with dictionaries. The expo docs themselves don't provide an example either (see here), so despite knowing the solution, I do not have any idea on how to implement it syntactically.

Within app.config.js, I've tried

export default {
  ...
  ios: {
    infoPlist: {
      "NSAppTransportSecurity": [
        {
          "xml": "<dict><key>NSAllowsArbitraryLoads</key><true /></dict>"
        }
      ]
    }
  }
}

and have also tried

export default {
  ...
  ios: {
    infoPlist: {
        "NSAppTransportSecurity": {
            "NSAllowsArbitraryLoads": true
        }
    }
  }
}

Saving these and re-running expo start, I still get the same Network Request Failed error. Can anyone help me format this?

there are other reasons you could have that error - what device are you testing on? can you show the network call? — Abe, Mar 07 '23 at 18:52
Testing on an iPhone 13, the identical network call works perfectly from Postman or a regular react app on web. It's to an internal API and looks like `http://(localhost)/get_prices` — Eric Hasegawa, Mar 08 '23 at 15:45

score 2 · Accepted Answer · answered Mar 08 '23 at 16:13

An external device won't share your machine's network, so you can't use localhost addresses. You can only use localhost for the iOS simulator. For all other testing, get your computer's local IP address and use that instead. Ex: fetch('http://192.168.1.4:8080/route')

How to enable HTTP calls on React Native Expo

1 Answers1