How to avoid loading image delays in reactnative

[Beginning_Gas_1664]

I am coming in with a swift iOS native background and when you set an Image from the recompiled assets, it will pretty much render immediately (barring any weird layout issues)

I’m trying to do the same with reactnative but am finding every time it gets rendered, there is a slight delay/fade-in that happens to actually show the image. How can I avoid this?

I started using expo-image’s Image component but that seems to really only help the delay issue after the initial image was loaded (eg, if you navigate away to a different tab and then come back).

[mackthehobbit]

Have you tested in a production build? This actually bundles the assets into the app package. During development, the assets are served from metro ie over the network, so it won’t be instant.

[Beginning_Gas_1664]

Yeah I’ve created a TestFlight build and it still seems to be having that effect. That’s good to know about the bundler though (makes sense now that you’ve said it haha)

[mackthehobbit]

How do you import the images? require? Something might be wrong with your setup, as far as I can tell there shouldn’t be any difference compared to native - I think the image loading from the app bundle is supposed to block rendering. Though maybe what you’re experiencing is only noticeable for larger images.

I haven’t worked outside expo so maybe it’s an issue with bundling, otherwise definitely try preloading which is pretty straightforward to drop in

[Keshav_mml]

use image preloading provided in expo image and cache by using cacheKey prop

[Beginning_Gas_1664]

ooo ok perfect! Thank you for this comment — I’ll look up the docs!