Cached Image for React Native expo
This article and the examples are built on top of expo, when you work with images you notices that anytime the user reload or open your app he send request to load images and read it, that makes user use a lot of data and makes your app slower for displaying images in the right time, for that Cache Images came to help to prevents loading images anytime we open the app, and will load image from external link in first time.
What is image chaching ?
Image caching improves the performance of image in client applications. When you cache an image, your app server image faster than processing the input from the mosaic dataset or the raster dataset each time a requested. An important aspect of an image cache is that it is not serving imagery that is processed on the fly — it is preprocessing the imagery to create the cached tiles and serving the cached tiles.
When you cache an image you end up with a dual-purpose image service which is accessed depending on its purpose. One purpose is to supply the fastest access to the image as a tiled service. The other purpose is to provide access to the data, for queries, downloading, access to individual items, and to use in processing and analysis.
Why Should I use Chached Image ?
- Improved performance for basic images
- Skip overview generation
- Improved performance for slow formats
What we need ?
- shorthash- module to generate short, alpha-number, undecryptable and unique hash id from a long string (utf8 format).
- FileSystem- provides access to a file system stored locally on the device. Within the Expo client, each app has a separate file system and has no access to the file system of other Expo apps.
lets install this two dependencies by run two command:
npm install shorthash && expo install expo-file-system after we install them we create a file called CachedImage.js you can name it anything you want,
You add this chunk of code for make it reusable for any image
Now is time to invoke our component in anywhere we want to use it …
