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
JavaScript
x
15
15
1
const baseResponse = axios.get("https://reqres.in/api/users", {
2
onDownloadProgress: (progressEvent) => {
3
console.log(progressEvent) // progress is set every 10 milliseconds
4
},
5
headers: {
6
"Content-Type": "application/json",
7
"Authorization": `Bearer ${Config.UserSession.USER_DATA.token}`
8
}
9
10
}).then(res => { return res.data;})
11
.catch(error => {
12
console.log(error)
13
return null
14
})
15
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
JavaScript
1
2
1
{"isTrusted": false, "lengthComputable": false, "loaded": -1, "total": -1}
2
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
JavaScript
1
5
1
onDownloadProgress: (event) => {
2
console.log(event.target._response.length) // loaded
3
console.log(event.target.responseHeaders['Content-Length']) // total
4
},
5