Skip to content
Advertisement

How to change Axios onDownloadProgress event.isTrusted = false to true in react-native

I’m using Axios “^0.27.2” for fetching data in react-native “0.62.2” and I’m trying to create a percentage loader using content-length which I’m getting from server in response header.

API GET request code

const baseResponse = axios.get("https://reqres.in/api/users", {
            onDownloadProgress: (progressEvent) => {
                console.log(progressEvent) // progress is set every 10 milliseconds
            },
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${Config.UserSession.USER_DATA.token}`
            }

        }).then(res => { return res.data;})
        .catch(error => {
            console.log(error)
            return null
        })

Above code is working fine I’m able to fetch data properly. but when I’m trying using onDownloadProgress progressEvent.loaded is coming -1 and also progressEvent.isTrusted=false

console log of progressEvent

 {"isTrusted": false, "lengthComputable": false, "loaded": -1, "total": -1}

lengthComputable=false because content-length is not yet configure. I don’t know where I’m doing wrong because I used the same code in simple Javascript it was working fine.

Advertisement

Answer

For Some Reason onDownloadProgress doesn’t work normally in react-native If anyone facing same problem solution is here – solution

use

 onDownloadProgress: (event) => {
                console.log(event.target._response.length) // loaded
                console.log(event.target.responseHeaders['Content-Length']) // total
            },
User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement