Load external json in react-native with fetch

Question

I am trying to load external data with fetch into a react-native mobile app. I have tried with different sources and mostly I get an error message saying the network can't be found. For instance I have tried with the following two sources.

http://facebook.github.io/react-native/movies.json (does not work) https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json (works)

componentDidMount(){
    var REQUEST_URL = 'http://facebook.github.io/react-native/movies.json';
    fetch(REQUEST_URL).then((response) => {
        console.log(response);
        if(response.ok) {
            console.log('Response OK');
        } else {
            console.log('Network response was not ok.');
        }
    })
    .catch((error) => {
        console.log('There has been a problem with your fetch operation: ' + error);
    })
    .done();
}

I am testing in IOS simulator on my MacBook.

I also tried to get json data from my WordPress site, with the latest version of the WP REST API plugin installed. Also this returned a can't find network error.

I am really stuck on this one.

David Guan · Accepted Answer · 2016-07-13 09:32:28Z

2

That’s caused by apple’s security rule, http protocol is restricted(you are sending a http request).

If you need communication in http protocol, there are two solutions(all related to info.plist):

1: Just like what the quick start project does, add the domain name of server:

2: Add a new rule: “Allow Arbitrary Loads”. don’t forget set the value to “YES”.

answered Jul 13, 2016 at 9:32

David Guan

4,3001 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Load external json in react-native with fetch

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related