How to add progress event to react-native-fetch-polyfill - react-native

Question

I am trying to use react-native-fetch-polyfill becouse of timeout feature for fetch requests but can't implement onProgress event:
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(function(data) {
console.log(data);
})
.catch(function(error) {
console.log('Fetch Error :-S', error);
});
I don't know where to add:
onUploadProgress: function (progressEvent)

Answer 1

That library does not support progress handler. If you need this feature and want to use that library, the simplest thing for you to do would be to fork the library and add the feature yourself:
1) Fork the repository on GitHub.
2) Edit js file in your repository. For example, add callback you need as a third argument to the function:
export default function fetchPolyfill (input, init) {
// becomes
export default function fetchPolyfill (input, init, onUploadProgress) {
// add this somewhere inside
if (onUploadProgress)
xhr.upload.onprogress = onUploadProgress
3) Edit your package json to include
"react-native-fetch-polyfill": "git://github.com/youraccount/react-native-fetch-polyfill"
and run npm install.
1a) Of course you may actually just copy the script and edit it locally on your computer without dealing with GitHub, if you are fine with it not being in node modules. Or download the whole folder and use it as a package.

Answer 2

You can use axios
that already have thus function (onUploadProgress)

Answer 3

Under the hood, fetch uses the React-Native XMLHttpRequest object; this is also true for react-native-fetch-polyfill. This is not the regular xhr object which is used in browsers since the actual requests are sent from the native side.
As far as I know, both RN fetch and react-native-fetch-polyfill do not support upload progress, but you can use XMLHttpRequest directly to do that:
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (progressEvent) => {
//handle progress here, you can use progressEvent.loaded, progressEvent.total to calculate the progress
};
const body = JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
});
xhr.setRequestHeader("Content-type", "application/json; charset=UTF-8");
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts');
xhr.send(body);
you can also add the timeout handling yourself:
xhr.timeout = 30 * 1000;
xhr.ontimeout = () => {
//handle timeout here
}