joltup / rn-fetch-blob

A project committed to making file access and data transfer easier, efficient for React Native developers.
MIT License
2.81k stars 770 forks source link

Multiple file downloading app get slows. #703

Closed sankar9659 closed 1 year ago

sankar9659 commented 3 years ago

Hi, I'm creating a gallery app. Its fully offline app. It has more number of images. (1000 and more images and files). I'have downloaded these images initially and store into locally and then show these images from local. when i downloaded the more number of images, the app hangs (slow in performance), can anyone reply to fix this issue? my code is,

const downloadImage = (url, id) => { if (url && id) { let date = new Date(); let image_URL = url; let ext = getExtention(image_URL); ext = '.' + ext[0]; const { config, fs } = RNFetchBlob; let PictureDir = fs.dirs.PictureDir; let options = { fileCache: true, addAndroidDownloads: { useDownloadManager: true, notification: true, path: PictureDir + '/' + id + '/image_' + Math.floor(date.getTime() + date.getSeconds() / 2) + ext, description: 'Image' }, } config(options) .fetch('GET', image_URL) .then(res => { storeData(res.path(), id) }); }; };

And i dont want to show these images in phone's gallery. how to fix these issues, and how to download images one by one. Thanks in advance.

nathan-guedes commented 3 years ago

i think to not show you can create a directory using fs, put your files there and using fs too you can create .nomedia file

ShankarPhilips commented 1 year ago

@sankar9659 Hi Bro any solution for your issue? here I am downloading 1500 images using rn fetch blob, iOS working fine android taking too much time to download, and also in between app is getting crashed. Please suggest to me if you have any solution Thanks in advance.

sankar9659 commented 1 year ago

Hi @ShankarPhilips Yeah, I've fixed by it using realm (listener) package.

ShankarPhilips commented 1 year ago

@sankar9659 can you please share us the library link .

sankar9659 commented 1 year ago

https://www.npmjs.com/package/realm

Listener example, https://www.mongodb.com/docs/realm/sdk/react-native/examples/use-change-listeners-in-components/?_ga=2.48969318.1157171918.1659504977-146146700.1659504976&_gac=1.141346438.1659504977.EAIaIQobChMIzJ65xfmp-QIVvIJLBR15hQodEAAYASABEgJaQfD_BwE

ShankarPhilips commented 1 year ago

Thank you...

sankar9659 commented 1 year ago
  1. We need a separate component for showing images.
  2. Integrate the listener in that component.
  3. Once the image is downloaded the listener will be triggered and we can show the image.,
  4. It will occurs one by one, so we dont need to download all 1500 images at a time, we can download it one by one and render in UI.
ShankarPhilips commented 1 year ago

@sankar9659 My requirement is different I have to download all images(1800), as we have a slider (Like Volume slider), when users change that slider we need to display the image.

FYI iOS working fine but in android download takes a long time around 10 min and more the sometimes the app getting crash.

sankar9659 commented 1 year ago

I think, we can use the above concept for your requirement also, We can implement the slider design using some package or flatlist, Once we change the slider we can trigger the image download functionality and we can download and show the image, I am also used the slider in my project using realm listener.

sankar9659 commented 1 year ago

And why are you downloading the images, you can show the image directly right?

ShankarPhilips commented 1 year ago

@sankar9659 Yes I tried to display the images without downloading also while changing the slider image loads with black color then will get the proper image. Flickering. To avoid Flickering I use react-native-fast-image but the same behavior. If you have time please ping me

sankar9659 commented 1 year ago

Sure..