React Native fetch() Network Request Failed

When I create a brand new project using react-native init (RN version 0.29.1) and put a fetch in the render method to the public facebook demo movie API, it throws a Network Request Failed. There is a very useless stack trace and I can't debug network requests in the chrome console. Here is the fetch I'm sending:

react-native init

Network Request Failed

fetch('http://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) =>
return responseJson.movies;
)
.catch((error) =>
console.error(error);
);


http

https

10 Answers
10

The problem here is that iOS does not allow HTTP requests by default, only HTTPS. If you want to enable HTTP requests add this to your info.plist:

info.plist

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


Not recommended to allow all domains for http.
Make an exception for just the necessary domains.

Source: Configuring App Transport Security Exceptions in iOS 9 and OSX 10.11

Add the following to the info.plist file of your app:

<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>yourserver.com</key>
<dict>
<!--Include to allow subdomains-->
<key>NSIncludesSubdomains</key>
<true/>
<!--Include to allow HTTP requests-->
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
<!--Include to specify minimum TLS version-->
<key>NSTemporaryExceptionMinimumTLSVersion</key>
<string>TLSv1.1</string>
</dict>
</dict>
</dict>


React Native Docs gives the answer for this.

Apple has blocked implicit cleartext HTTP resource loading. So we need to add the following our project's Info.plist (or equivalent) file.

<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>


React Native Docs -> Integration With Existing Apps -> App Transport Security

I was using localhost for the address, which was obviously wrong. After replacing it with the IP address of the server (in the network that emulator is), it worked perfectly.

localhost

Edit

In Android Emulator, the address of the development machine is 10.0.2.2. More explanation here

10.0.2.2

http://<Network IP emulator connects to>:<port where API is served>/api/tasks

The problem may be in server configuration.

Android 7.0 has a bug described here. Workaround proposed by Vicky Chijwani:

Configure your server to use the elliptic curve prime256v1. For
example, in Nginx 1.10 you do this by setting ssl_ecdh_curve
prime256v1;

For Android, you may have missed to add permission in AndroidManifest.xml
Need to add the following permission.

<uses-permission android:name="android.permission.INTERNET" />


I have similar problem.
In my case requests to localhost was working and suddenly stopped.
It turn out that the problem was that I was turn off my wifi on my android phone.

I was having this problem for Android-

URL- localhost/authToken.json - didn't work :(

URL- 10.106.105.103/authToken.json - didn't work :(

URL- http://10.106.105.103/authToken.json - worked :) :D

Note- Use ifconfig on Linux or ipconfig on Windows to find machine IpAddress

ifconfig

ipconfig

Just you have Changes in Fetch....

fetch('http://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) =>
/*return responseJson.movies; */
alert("result:"+JSON.stringify(responseJson))
this.setState(
dataSource:this.state.dataSource.cloneWithRows(responseJson)
)
).catch((error) =>
console.error(error);
);


Example:

return fetch('http://<your ip>')
.then((response) => response.json())
.then((responseJson) =>
console.log(responseJson)
)
.catch((error) =>
console.error(error);
);


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.