react-native-fetch-blob
react-native-fetch-blob copied to clipboard
RNFetchBlob.fs.readFile method making the ui unresponsive for 2-3 seconds
I am trying to upload a image to an Amazon S3 Bucket. So I first use the react native fetch blob to read file from the react native camera cache using RNFetchBlob.fs.readFile method and then upload it to the S3 bucket. But the readFile method is taking too much time making the ui unresponsive for quite a few seconds. I also tried readStream method which didn't solve the problem either.
Below is the function trying to upload image
export async function readFile(filePath) {
const data = await RNFetchBlob.fs.readFile(filePath, 'base64');
return new Buffer(data, 'base64');
}
export const deleteFile = async (filePath) => {
try {
const exist = await RNFetchBlob.fs.exists(filePath)
if (exist) {
await RNFetchBlob.fs.unlink(filePath)
}
} catch(err) {
console.log("Error", err)
}
}
async function uploadImage() {
try {
const buffer = await readFile(fileUri);
const response = await Storage.put(key, buffer, { "contentType": "image/jpeg", "metaData": metaData
});
if (response) {
store.dispatch(removeFromOfflineQueue(key));
store.dispatch(uploadImageStatus(key, true));
await resizeImage(key, cleanUri, true);
}
} catch(err) {
console.log("::UPLOAD ERR", err);
store.dispatch(addToOfflineQueue(key, body, metaData)
}
}
}
So is there any way by which we can either reduce the lag time or run it in background so that it doesn't affects the UI?
@developercode1 Android?
@JofBigHealth Yes. I experienced this on android. but I was able to solve this issue. Thanks !!
@developercode1 What was the solution? We are having serious perf issues on various operations. I suspect it's because we are running operations on multiple files in "parallel" with Promise.all
(.fetch
, unlink
, .exists
, readFile
and so on) and this blocks the main thread. This isn't a problem on iOS for us but a massive problem on Android so I'm curious to hear about your experience.