Load images faster in Expo


#1

Even though the images are built-in the app it still takes time to load. I think this is because its using Expo Client & not a standalone APK. But how do we load images faster in Expo such that it doesn’t affect React Navigation as well. Because Navigation becomes slow as well on a real device. I have simple 3 navigators & 4 images loading in the app but its too damn slow. How to handle this ??


#2

With Expo, images are currently not embedded into the app. Think of it more like a website, where the images are loaded over the network.

Images shouldn’t affect React Navigation in most cases. Running the project in development mode has a noticeable tax – publishing it (which enables prod mode) is often much faster. If your screens are complex, that will also be slow.


#3

Naah it is not at all complex. For images, it just has 2 StackNavigators nested inside 1 StackNavigator like

  • Avatar
    • Squared Avatar (in small, medium, large, extra-large size)
    • Rounded Avatar (in small, medium, large, extra-large size)

& it hangs when Image is still loading & I press back button. So that’s the issue.


#4

You can load your images in advance before your app starts if you use this technique:
https://docs.expo.io/versions/latest/guides/preloading-and-caching-assets.html

That will make Expo as fast as any other RN setup.


#5

Hey one more doubt. Does Expo Client stores images in its cache or does it download every time we open the app bcz I am on a slow connection & it feels like its downloading each time.


#6

hey, it will cache the images on your device if you use the downloading strategy mentioned above.

you can check by using the FileSystem api and looking in your apps cacheDirectory to see what the app has cached

not sure all the features of dev mode, but i’m guessing if you’re developing it may be re-downloading the assets on every load instead of caching like in production