title: React-native IOS: Network request failed
body: <p>I'm testing a react native app (on OS X Yosemite in the xcode simulator v9.2 / xcode 7.2.1). I'm getting a <code>Network request failed</code> error with the below code. The actual url with the correct appid works just fine in a browser and gives me the correct information in json format, and the promise / api call looks fine. </p>
  
  <p>I'm not behind a firewall. I've tried troubleshooting the connection, and activating the <code>Allow HTTP Services</code> in the Developer settings, but I'm still getting the error.  </p>
  
  <p>Any idea what the problem is here? The actual errors are as follows: </p>
  
  <pre><code>-- There has been a problem with your fetch operation: Network request failed
  -- Api call error =  Network request failed
  </code></pre>
  
  <p>Here's the api.js code:</p>
  
  <pre><code>var _ = require('lodash');
  var rootUrl = 'http://api.openweathermap.org/data/2.5/weather?APPID=xxxxxxxxxxxxxxxxxxxxxx';
  
  var kelvinToF = function(kelvin) {
    return Math.round((kelvin - 273.15) * 1.8 + 32) + ' ˚F'
  };
  
  var kelvinToC = function(kelvin) {
    return Math.round(kelvin - 273.15) + ' ˚C'
  };  
  
  module.exports = function(latitude, longitude) {
    var url = `${rootUrl}&amp;lat=${latitude}&amp;lon=${longitude}`;
    console.log(url);
    return fetch(url)
      .then(function(response){
        return response.json();
      })
      .then(function(json){
        return {
          city: json.name,
          temperature1: kelvinToF(json.main.temp),
          temperature2: kelvinToC(json.main.temp),
          description: _.capitalize(json.weather[0].description)
        }
      })
      .catch(function(error) {
      console.log('There has been a problem with your fetch operation: ' + error.message);
      throw error;
  });
  }
  </code></pre>
  
  <p>Here's the index.ios.js code.</p>
  
  <pre><code>/*  --depreciated
  
  var React = require('react-native'); 
  
  var {
    AppRegistry,
    MapView,
    View,
    Text,
    StyleSheet
  } = React;
  */ 
  
  
  // updated
  import React from 'react';
  
  // updated
  import {
    AppRegistry,
    MapView,
    View,
    Text,
    StyleSheet,
  } from 'react-native';
  
  var Api = require('./src/api');
  
  var Weather = React.createClass({
    getInitialState: function() {
      return {
        pin: {
          latitude: 0,
          longitude: 0
        },
        city: '',
        temperature1: '',
        temperature2: '',
        description: ''
      };
    },
    render: function() {
      return &lt;View style={styles.container}&gt;
        &lt;MapView
          annotations={[this.state.pin]}
          onRegionChangeComplete={this.onRegionChangeComplete}
          style={styles.map}&gt;
        &lt;/MapView&gt;
        &lt;View style={styles.textWrapper}&gt;
          &lt;Text style={styles.text}&gt;{this.state.city}&lt;/Text&gt;
          &lt;Text style={styles.text}&gt;{this.state.temperature1}&lt;/Text&gt;
          &lt;Text style={styles.text}&gt;{this.state.temperature2}&lt;/Text&gt;
          &lt;Text style={styles.text}&gt;{this.state.description}&lt;/Text&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    },
    onRegionChangeComplete: function(region) {
      this.setState({
        pin: {
          longitude: region.longitude,
          latitude: region.latitude
        }
      });
  
      Api(region.latitude, region.longitude)
        .then((data) =&gt; {
          console.log(region.latitude);
          console.log(region.longitude);
          console.log('data = ' + data);
          this.setState(data);
        })
        .catch((error)=&gt;{
       console.log("Api call error = ", error.message);
      // alert(error.message);     
    });
    }
  });
  
  
  var styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'stretch',
      backgroundColor: '#F5FCFF'
    },
    map: {
      flex: 2,
      marginTop: 30
    },
    textWrapper: {
      flex: 1,
      alignItems: 'center'
    },
    text: {
      fontSize: 30
    }
  });
  
  AppRegistry.registerComponent('weather', () =&gt; Weather);
  </code></pre>