React-native-fast-image: Preload does not seem to be working

[twillstudio]

Hi everyone,
I need to preload 6 images (probably more in the future) when my app opens.
I am using the following code in the componentDidMount method of my App.js:

await FastImage.preload([{ uri: 'https://app.box.com/shared/static/dz6tvgka56ub8xfii6v4516zco0bmvwq.jpg' }])
      await FastImage.preload([{ uri: 'https://app.box.com/shared/static/8e43tmaproz9psvch4s7de5tyff9i71k.jpg' }])
      await FastImage.preload([{ uri: 'https://app.box.com/shared/static/udiaehxve4tjunnhe40wtvddvp8h3hdo.jpg' }])
      await FastImage.preload([{ uri: 'https://app.box.com/shared/static/6rbqggrctvsjgebxmr2u630u081w3rrz.jpg' }])
      await FastImage.preload([{ uri: 'https://app.box.com/shared/static/n4fym1ck83nmlo0uo20clpwidipr3e56.jpg' }])
      await FastImage.preload([{ uri: 'https://app.box.com/shared/static/e1fiqrjwqhm5vh77znjr1gfiy5kclw94.jpg' }])

It does not seems to do anything because i can see blank space while the image are being loaded after my app launched.
I am using react native on my ios simulator. I know other issues have been opened in the past but I feel like none of them solved my problem.

Thanks very much in advance.

[guhungry]

You should use as

FastImage.preload([
  { uri: 'https://app.box.com/shared/static/dz6tvgka56ub8xfii6v4516zco0bmvwq.jpg' },
  { uri: 'https://app.box.com/shared/static/8e43tmaproz9psvch4s7de5tyff9i71k.jpg' },
  { uri: 'https://app.box.com/shared/static/udiaehxve4tjunnhe40wtvddvp8h3hdo.jpg' },
  { uri: 'https://app.box.com/shared/static/6rbqggrctvsjgebxmr2u630u081w3rrz.jpg' },
  { uri: 'https://app.box.com/shared/static/n4fym1ck83nmlo0uo20clpwidipr3e56.jpg' },
  { uri: 'https://app.box.com/shared/static/e1fiqrjwqhm5vh77znjr1gfiy5kclw94.jpg' },
])

You might need to run in Root component instead of component showing image.

[twillstudio]

Hi guhungry,

Thanks for your asnwer. As I said, i am using the preload function in the componentDidMount of my app.js in an async method.
The process is:

1. Launch app
2. Display loader page
3. await load data (componentDidMount method of my app.js)
4. Display home page with my images (which is another component)

Should i do something else ?
Thanks in advance.

[guhungry]

It's working for me.

FYI, FastImage.preload() is non blocking and not return promise so it will continue execute while preloading.
To test you might need to use setTimeout() with 10 seconds and then change screen to see weather images are preloaded.

[twillstudio]

@guhungry , thanks very much man, it finally works by putting a timeout in the method!

[guhungry]

Glad to hear that. Then, can you close this issue.

[amitbravo]

its sad that FastImage.preload() does not return a promise , as I need to download 100 images and I do not know if they are loaded or not .

[twillstudio]

@amitbravo, It is indeed.

As 100 images probably wont fit on a screen, what I suggest you to do is to preload 6-10 images in order to make the very first render smooth for the user. The images will then load normally as the user scroll.

Cheers man.

[amitbravo]

I am creating a quiz app in which there would be 50 questions and each question contains one graphic image , I want to download all images right before starting a quiz and questions appears one by one by clicking "next question" button . every image having max 40kb size only so total all images may contain upto 5 mb size only .

[twillstudio]

Hi @amitbravo, This a tricky situation. Does your questionaire is changing dynamically ? If no you can just hardcode your Images with require and store them locally. I'm not a massive of this solution to be honest.

Otherwise you can have a look at this module (https://github.com/kfiroo/react-native-cached-image) which is a bit faster than FastImage to load and you can make your images FadesIn in order to make it smooth.

Hope it helped, good luck man!