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.
CodePudding user response:
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
},