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?

Answer 1

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')