Multiple file downloading app get slows.

[sankar9659]

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]

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]

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

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

[ShankarPhilips]

@sankar9659 can you please share us the library link .

[sankar9659]

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]

Thank you...

[sankar9659]

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]

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

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]

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

[ShankarPhilips]

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

Sure..