How can I create a progress bar for a fetch API request in React Native?
<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>