I created an app with react native (expo) that shows a lot of product images. My customer wants the app to work 100% offline. This means that the images should all be prefetched when the app is started. You can easily solve that with Image.prefetch(uri) or the package react-native-fast-image.
But the images should be loaded from the cache memory the first time you are offline.
Or can’t I at least find out the cached image URI and then specify it with Image source?
How can I achieve this?
My customer doesn’t like the current solution, that you first have to see the pictures so that they come out of the cache next time.
UPDATE:
At the moment I’m using the react-native-fast-image package, so I can preload the images before displaying them later.
The problem with that, again, is that it has a limit.
It only loads the products of the first 3 markets (there are 10 markets)
So if I can increase the FastImage preload limit, the problem would be solved.
UPDATE:
Since the FastImage preload is not a promise, the preloading is still running in the background, if I wait a bit longer, more images will be prefetched, but still not every image. So there must be a limit for preloading. I just need a method to find out when the last picture is saved and how many are saved to cache.
Seems there is no callback function for preloading with FastImage.
Does anyone have an idea how to check if all images are saved?
Best regards
Showing cached Images before they even loaded once.
2
Answers
In the end I solved it like this.
Image.prefetch(uri)to cache the images then useAsset.fromModule(uri).localUrito get the url from the prefetched Image.This url can then be used as a source for Image tag.
You can download the photos to the phone by syncing an application like Google Photos every time it connects to the internet. New photos can be downloaded to the phone by synchronizing different images as they are uploaded. In this way, it can work offline. But in the first place you have to be online and download the photos from the server.