react-native apploading fetchAPI?

Question

i am developing a weather App, using openweathermap API, I have successfully implemented everything, now I want to use Apploading from expo to get results from API, so when the mainScreen opens, all data got fetched and is rendered on screen instead of waiting for the response from the API,

weatherAPI.js:

    const rootUrl = 'http://api.openweathermap.org/data/2.5/weather?appid=API_KEY'
    export const fetchWeather = (lat,lon) => {
    const url = rootUrl+'&lat='+lat+"&lon="+lon+"&units=metric"
    console.log(url)

    return fetch(url)
        .then(res => res.json())
        .then(json => ({
            temp: json.main.temp,
            pressure: json.main.pressure,
            humidity: json.main.humidity,
            maxTemp: json.main.temp_max,
            minTemp: json.main.temp_min,
            weather: json.weather[0].main,
            weatherDescription: json.weather[0].description,
            name: json.name,
            country: json.sys.country,
            windSpeed: json.wind.speed,
            windDeg: json.wind.deg,
            clouds: json.clouds.all,
            sunrise: json.sys.sunrise,
            sunset: json.sys.sunset,

        }))
}

Home.js:

componentDidMount(){
 this._getData()
 }
 _getData(){
navigator.geolocation.getCurrentPosition(
            (posData) => fetchWeather(posData.coords.latitude, posData.coords.longitude)
                .then(res => this.setState({
                    temp: Math.round(res.temp),
                    weather: res.weather,
                    weatherDescription: res.weatherDescription,
                    name: res.name,
                    country: res.country,

                })),
                (error)=> alert(error),
                {timeout:10000}
        )  
}

Also and maybe this a very basic question:

I want to create a load icon, to reload data? my approach to this solution was touchableOpacity with onPress call to this_getData(), but i feel like is wrong coding wise?

Answer 1

From the documentation of Expo's Apploading https://docs.expo.io/versions/latest/sdk/app-loading , It is intended to be used for initial loading of the app. In general for an asyncrhonous request such as requesting weather information, there are usually 3 states , progress, success, failure. You should make sure to render appropriately for all these states. When the fetch is in progress you can render Activity Indicator https://facebook.github.io/react-native/docs/activityindicator.html Either you can have a manual Retry/Update button to fetch the latest data or you can have a timer that gets latest data at specific interval

Answer 2

Please either bind _getData with this or use fat arrow function. This might solve the problem.