Handling images in RN has been a pain to me since I got into the RN world and thanks to the awesome team of Expo they provided us with documentation about how to handle project’s assets but still remains some user experience issues that strangely I have not managed to find a decent guide about how to handle properly so far. So hopefully this topic maybe a decent reference to others that are having a struggle with all the flickering and the other bad user experience issues.
The first thing that has been confusing to me is caching the images. I followed the docs here by making an appcontainer component that loads up along with the app screens, and put the caching piece of code in there:
cacheImages = (images) => {
return images.map(image => {
if (typeof image === "string") {
return Image.prefetch(image);
} else {
return Asset.fromModule(image).downloadAsync();
}
});
};
where images are the array of the images that needs to be cached.
This works just fine at all times except for the first time the app is used. the images flickers for a couple of seconds then when the app is used afterwards the images show just fine. so how to handle this first time user experience issue.
The second thing is that the docs didn’t point out. What happens to the cached images ? I mean in my example above, the app caches images every time it loads up. does this mean that the app consumes more storage of the phone every time those images are cached ? or does the above code checks whether the images have already been cached before or not before caching them ?
Last but not least, If I am having lets say an app where I view user profiles that are located in the surrounding area and inside those profiles there are images uploaded by the users themselves … So to provide a good user experience, those images need to be cached. That is not efficient at all storage-wise as the more the user views profiles the more images being cached. So is there a way to like uncache those images after the user leaves the profile view screen ?