While working on a Weather app written in react native, I am getting the 'Network request failed' error on Android while the app is working fine on iOS.

Here is the fetch function -

ponentDidMount: function() {
    navigator.geolocation.getCurrentPosition(
    location => {
      // this variable will contain the full url with the new lat and lon
      var formattedURL = REQUEST_URL + "lat=" + location.coords.latitude + "&lon=" + location.coords.longitude+"&APPID=e5335c30e733fc682907a126dab045fa";

      // this will output the final URL to the Xcode output window
      console.log(location.coords.latitude);
      console.log(location.coords.longitude);
      console.log(formattedURL);

      // get the data from the API
      this.fetchData(formattedURL);

      },
    error => {
      console.log(error);
    });
  },

  // fetchdata takes the formattedURL, gets the json data and
  // sets the apps backgroundColor based on the temperature of
  // the location
  fetchData: function(url) {
    fetch(url)
      .then((response) => response.json())
      .then((responseData) => {

        // set the background colour of the app based on temperature
        var bg;
        var temp = parseInt(responseData.main.temp);
        if(temp < 14) {
          bg = BG_COLD;
        } else if(temp >= 14 && temp < 25) {
          bg = BG_WARM;
        } else if(temp >= 25) {
          bg = BG_HOT;
        }

        // update the state with weatherData and a set backgroundColor
        this.setState({
          weatherData: responseData,
          backgroundColor: bg
        });
      })
      .done();
  },

I have also referred to other questions here on stackoverflow but they all revolve around changing localhost to your local ip address like 127.0.0.1. In my case I have no where used localhost.

While working on a Weather app written in react native, I am getting the 'Network request failed' error on Android while the app is working fine on iOS.

Here is the fetch function -

ponentDidMount: function() {
    navigator.geolocation.getCurrentPosition(
    location => {
      // this variable will contain the full url with the new lat and lon
      var formattedURL = REQUEST_URL + "lat=" + location.coords.latitude + "&lon=" + location.coords.longitude+"&APPID=e5335c30e733fc682907a126dab045fa";

      // this will output the final URL to the Xcode output window
      console.log(location.coords.latitude);
      console.log(location.coords.longitude);
      console.log(formattedURL);

      // get the data from the API
      this.fetchData(formattedURL);

      },
    error => {
      console.log(error);
    });
  },

  // fetchdata takes the formattedURL, gets the json data and
  // sets the apps backgroundColor based on the temperature of
  // the location
  fetchData: function(url) {
    fetch(url)
      .then((response) => response.json())
      .then((responseData) => {

        // set the background colour of the app based on temperature
        var bg;
        var temp = parseInt(responseData.main.temp);
        if(temp < 14) {
          bg = BG_COLD;
        } else if(temp >= 14 && temp < 25) {
          bg = BG_WARM;
        } else if(temp >= 25) {
          bg = BG_HOT;
        }

        // update the state with weatherData and a set backgroundColor
        this.setState({
          weatherData: responseData,
          backgroundColor: bg
        });
      })
      .done();
  },

I have also referred to other questions here on stackoverflow but they all revolve around changing localhost to your local ip address like 127.0.0.1. In my case I have no where used localhost.

• javascript
• android
• react-native

• Your are testing it in emulators or physical device – Ravi Raj Commented Jun 16, 2017 at 6:32
• @RaviRaj I am testing it in an emulator on Nexus 6P running Nougat. – Rohit Girdhar Commented Jun 16, 2017 at 10:26
• 1 check your android emulator options panel adjacent to your emulator, in that you will have more options then go to cellular and check Data status and Network type. Try changing Network type to 'Full' and Data status to 'Home'. Check if its working. – Ravi Raj Commented Jun 16, 2017 at 10:55
• Thanks for the answer. The settings were by default as you said. The problem was cellular was turned off on the emulator, that's what caused the error! – Rohit Girdhar Commented Jun 17, 2017 at 4:07
• I have posted the ment as answer can you just accept it , so that others can find it useful, increases my reputation and the question can be closed as answered. – Ravi Raj Commented Jun 19, 2017 at 4:30

3 Answers 3

Check your Android emulator options panel adjacent to your emulator, in that you will have more options then go to cellular and check Data status and Network type. Try changing Network type to 'Full' and Data status to 'Home'. Try various options for Network type and Data status and Check if its working...

1. Add android:usesCleartextTraffic="true" line in AndroidManifest.xml.
2. Delete all debug folder from your android folder.

found this solution just on mobile network it is working fine when we have internet connection on emulator.