Image

React Native's Image component handles image caching like browsers for the most part. If the image is returned with a Cache-Control header than that will determine the caching behaviour. e.g. If the server returns an image with Cache-Control: max-age=365000000 (one year) than React Native shouldn't try to re-download the image for a year (although the cache does have a finite size). Even so, many people have noticed:

Flickering.

Cache misses.

Low performance loading from cache.

Low performance in general.

This has lead people to look for other solutions for image loading in React Native.

Existing Modules

There are some existing npm modules that attempt to solve the problems with Image. These modules implement caching logic in JS and store the images on the file system.

A problem I had with these modules is that they don't support adding headers to image requests, or stripping authorization tokens from query parameters. The result of this is that loading:

Grab FastImage off npm and let me know how it works for you, or leave a comment if you have any thoughts on alternative caching strategies.

Learn More

If you're looking for more in-depth tutorials and learning opportunities, check out our various JavaScript training options. Better yet, contact us to inquire about how you can ramp up your knowledge of the fundamentals with custom course material designed and delivered to address your immediate needs.