How React Native Image.prefetch works?

Question

Can somebody explain me, how RN Image.prefetch works? I've read docs and example, but I can't get, what happens there.

1. When we prefetch image once, will it be loaded from the cache automatically, when I want to use it some where else or I need to do some checks manually?

2. When I need to call Image.prefetch method: before image rendering in componentWillMount for example or after image loading in loadEnd callback, like it's shown in docs example?

Thanks in advance for your answers.

Answer 1

Example given in docs seem confusing but is quite straightforward actually. You prefetch images ahead, and when you want to display them just use Image component like usual. For example during some initial scene you can display ActivityIndicator while you prefetch all images, once is all done just show images like you would without prefetch in place.

To answer your questions:

1. Image will be loaded from cache automatic, no manual check needed. Make sure not to unmount/mount again scene that does prefetch as it will start loading images again.
2. Before image rendering, best in some scene before as image is rendered when scene that shows it is rendered. You can use onLoadEnd to know when to show next scene. You may use componentWillMount to do prefetch, just render something else like ActivityIndicator while prefech is completed, once done render image.

Hope it helps.