title: How can I create a progress bar for a fetch API request in React Native?
body: <p>I'm trying to make a simple progress counter that goes from 0% to 100% while my program fetches weather data. The API request is made by <code>getLocation()</code> inside of <code>index.ios.js</code> which calls <code>fetchWeather()</code> inside of <code>weatherApi.js</code>. Is there a way to measure the progress of my API request made by the fetch function? If not, what would be a good way to implement a loading bar? </p>
  
  <p><strong>weatherAPI.js</strong></p>
  
  <pre><code>const rootUrl ='http://api.openweathermap.org/data/2.5/weather?appid=fcea54d0ceade8f08ab838e55bc3f3c0'
  
  export const fetchWeather = (lat,lon) =&gt; {
  
      const url = rootUrl+'&amp;lat='+lat+'&amp;lon='+lon+"&amp;units=metric"
      console.log(url)
  
    return fetch(url)
      .then(res =&gt; res.json())
      .then(json =&gt; ({
          temp: json.main.temp,
          weather: json.weather[0].main
      }))
  
  }
  </code></pre>
  
  <p><strong>index.ios.js</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      StatusBar
      } from 'react-native'
  
  import Icon from 'react-native-vector-icons/Ionicons'
  import {fetchWeather} from './weatherAPI'
  import Highlight from 'react-native-highlight-words'
  
  const iconNames = {
      Default: 'md-time',
      Clear: 'md-sunny',
      Rain: 'md-rainy',
      Thunderstorm: 'md-thunderstorm',
      Clouds: 'md-cloudy',
      Snow: 'md-snow', 
      Drizzle: 'md-umbrella',
  }
  
  const phrases = {
  
      Default:{
          title: "Fetchin the Weather",
          subtitle: "Be patient, you're witnessing a miracle",
          highlight: ["Fetchin"],
          color: "#636363",
          background: "#9C9C9C"
      },
  
      Clear: {
          title: "CLEAR.",
          subtitle: "You Better Go Outside",
          highlight: ["CLEAR"],
          color:"#E32500",
          background: "#FFD017"
      },
      Rain: {
          title: "It's Raining",
          subtitle: "You guessed it",
          highlight: ["Raining"],
          color:"#004A96",
          background:"#2F343A"
      },
      Thunderstorm: {
          title: "Not Just Raining, It's Storming",
          subtitle: "Free shower",
          highlight: ["Storming"],
          color:"#FBFF46",
          background:"#020202"
      },
      Clouds: {
          title: "Clouds for Days",
          subtitle: "Cotton candy skies",
          highlight: ["Days"],
          color:"#0044FF",
          background: "#939393"
  
      },
      Snow: {
          title: "Oh Yeah Bud. It's Snowin'",
          subtitle: "Make a snow angel bud",
          highlight: ["Snowin'"],
          color:"#021D4C",
          background:"#15A678"
  
      },
      Drizzle: {
          title: "Just a Wee Ol' Drizzle Lads",
          subtitle: "Free shower",
          highlight: ["Wee", "Ol'"],
          color:"#dbdbdb",
          background:"#1FBB68"
  
      },
  }
  
  class App extends Component {
  
  
    componentWillMount() {
  
      this.state = {
  
          temp: 0,
          weather: 'Default'
      }   
  
    }
  
    componentDidMount() {
      this.getLocation()
  }
  
    getLocation() {
      navigator.geolocation.getCurrentPosition(
        posData =&gt; fetchWeather(posData.coords.latitude,posData.coords.longitude)
        .then(res =&gt; this.setState({
          temp:Math.round(res.temp),
          weather: res.weather
        })),
        error =&gt; alert(error),
        {timeout: 10000}
        )
    }
  
  
      render(){
          console.log(this.state.weather)
          return(
          &lt;View style={[styles.container, {backgroundColor: phrases[this.state.weather].background}]}&gt;
            &lt;StatusBar hidden={true}/&gt;
              &lt;View style={styles.header}&gt;
              &lt;Icon name={iconNames[this.state.weather]} size={80} color={'white'}/&gt;
              &lt;Text style={styles.temp}&gt;{this.state.temp}°&lt;/Text&gt;
              &lt;/View&gt;
              &lt;View style={styles.body}&gt;
              &lt;Highlight 
                style={styles.title}
                highlightStyle={{color: phrases[this.state.weather].color}}
                searchWords={phrases[this.state.weather].highlight}
                textToHighlight={phrases[this.state.weather].title}
                /&gt;
              &lt;Text style={styles.subtitle}&gt;{phrases[this.state.weather].subtitle}&lt;/Text&gt;
              &lt;/View&gt;
          &lt;/View&gt;
          )
      }
  }
  
  const styles = StyleSheet.create({
  
      container: {
          flex:1,
          backgroundColor:'#FFD017'
      },
  
  
      header: {
          flexDirection:'row',
          alignItems:'center',
          justifyContent:'space-around',
          flex:1,
  
      },
      temp: {
          fontFamily: 'HelveticaNeue-Bold',
          fontSize: 45,
          color:'white'
  
      },
  
      body: {
          alignItems:'flex-start',
          justifyContent:'flex-end',
          flex:5,
          margin:10
  
      },
  
      title: {
          fontFamily: 'HelveticaNeue-Bold',
          fontSize: 90,
          color:'white',
          marginBottom:5
  
      },
      subtitle: {
          fontFamily: 'HelveticaNeue-Medium',
          fontSize: 16,
          color:'white'
  
      }
  
  
  
  });
  
  AppRegistry.registerComponent('IsItRaining', () =&gt; App)
  </code></pre>