reactjsreact-nativeasynchronousimage-loading

React Native load images while displaying Splash screen


Thank you for reaching here. I'm developing an app with React Native, and got a new question about image loading.

Thanks to Spencer, I'm now able to make Progressive Image https://medium.com/react-native-training/progressive-image-loading-in-react-native-e7a01827feb7

However, I want now is to load the Image immediately, not displaying placeholder. Is there any way to load images while the splash screen is shown, and make it possible to load Images right away?

To those who wonder why I want this, I created an animated switching navigator, and each screen has their background image, those images are the same pattern with different colors so that when navigating to another tab it looks like the image is animating.


Solution

  • Have you tried calling prefetch when the splash is active? You could give a fixed timeout of maybe 1 second which will give the app enough time to cache all images in good network conditions.

    Documentation

    Image.prefetch(url);

    Prefetches a remote image for later use by downloading it to the disk cache

    You can also checkout react-native-fast-image if you want more control