react-native-fetch-blob icon indicating copy to clipboard operation
react-native-fetch-blob copied to clipboard

RNFetchBlob.fs.readFile method making the ui unresponsive for 2-3 seconds

Open developercode1 opened this issue 6 years ago • 3 comments

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 avatar Jun 16 '18 14:06 developercode1

@developercode1 Android?

JofBigHealth avatar Jan 29 '19 10:01 JofBigHealth

@JofBigHealth Yes. I experienced this on android. but I was able to solve this issue. Thanks !!

developercode1 avatar Jan 30 '19 12:01 developercode1

@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.

JofBigHealth avatar Jan 30 '19 12:01 JofBigHealth