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 },