React Native fetch Network request failed iOS

Question

I'm trying to send a GET request to the Facebook Graph API using fetch:

var url = "https://graph.facebook.com/v2.7/"
+FACEBOOK_APP_ID
+"?fields=context"
+"{friends_using_app{id,name,picture.type(normal)}}"
+"&access_token="+_this.props.user.facebook_access_token;

fetch(url)
.then((response) => response.json())
.then((responseJson) => {
  console.log(responseJson);
})
.catch(function(error) {
  console.log(error);
});

But I'm getting TypeError: Network request failed(…) in the JavaScript console. This only happens on iOS, it works fine on Android.

As far as I know, iOS on react native allows HTTPS requests by default, so this shouldn't require any config.

I am able to make a request to https://google.com using fetch, and I am able to view the result of the above request in safari when I print the url var and paste it directly.

Don't seem to be able to find anything similar, but sorry if this is a duplicate.

Answer 1

As far as I know, iOS on react native allows HTTPS requests by default, so this shouldn't require any config.

This isn't quite right. Any old https connection isn't good enough for App Transport Security, so you might still need to do some configuration. Here's the docs on what exactly is required to satisfy ATS without config:

With ATS fully enabled, your app’s HTTP connections must use HTTPS and must satisfy the following security requirements:

The server certificate must meet at least one of the following trust requirements: Issued by a certificate authority (CA) whose root certificate is incorporated into the operating system Issued by a trusted root CA and installed by the user or a system administrator The negotiated Transport Layer Security version must be TLS 1.2 The negotiated TLS connection cipher suite must support forward secrecy (FS) and be one of the following: TLS_ECDHE_ECDSA_WITH_AES_256_GCM_SHA384 TLS_ECDHE_ECDSA_WITH_AES_128_GCM_SHA256 TLS_ECDHE_ECDSA_WITH_AES_256_CBC_SHA384 TLS_ECDHE_ECDSA_WITH_AES_256_CBC_SHA TLS_ECDHE_ECDSA_WITH_AES_128_CBC_SHA256 TLS_ECDHE_ECDSA_WITH_AES_128_CBC_SHA TLS_ECDHE_RSA_WITH_AES_256_GCM_SHA384 TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256 TLS_ECDHE_RSA_WITH_AES_256_CBC_SHA384 TLS_ECDHE_RSA_WITH_AES_128_CBC_SHA256 TLS_ECDHE_RSA_WITH_AES_128_CBC_SHA The leaf server certificate must be signed with one of the following types of keys: Rivest-Shamir-Adleman (RSA) key with a length of at least 2048 bits Elliptic-Curve Cryptography (ECC) key with a size of at least 256 bits In addition, the leaf server certificate hashing algorithm must be Secure Hash Algorithm 2 (SHA-2) with a digest length of at least 256 (that is, SHA-256 or greater). If ATS is not enabled, the system still performs HTTPS server trust evaluation but you can override it on a case-by-case basis, as described in HTTPS Server Trust Evaluation. With ATS fully enabled, you cannot override the default HTTPS server trust evaluation.

The requirements listed in this section are current as of this document’s publication date, with stricter requirements possible in the future. Changes to these requirements will not break app binary compatibility.

I've also created a video tutorial on how to make network requests for your react native app: http://codecookbook.co/post/how-to-make-network-requests-in-react-native/