react-native-image-cache-wrapper
react-native-image-cache-wrapper copied to clipboard
Images seem only cached after first access with every app launch on Android emulator
I am not sure if the following caching behavior is normal on Android emulator or a bug. What I find is that it takes a few seconds to initially view images and following viewing is apparently loading from cache with only a fraction of second. If the app is launched again, the same caching process above is repeated again. Here is the code I am using:
<TouchableWithoutFeedback onPress={() => navigation.goBack()} style={styles.button}>
<View style={styles.button}>
<CachedImage
source={{uri:img_source.path}}
resizeMode={"contain"}
style={styles.image}
/>
</View>
</TouchableWithoutFeedback>
The image path has access token and signature embedded in URL and here is an example of the image_source.path :
https://myImage.aliyuncs.com/fOqMlr3Hc_7.jpg?Expires=1613253127&OSSAccessKeyId=TMP.3KhSceqrVN...VnjHh9DMq1dBZC&Signature=oponRvpd...EzylDU%D
Also the same image is used in 3 places and it seems that only the full screen viewing of the image is cached (as described above). It takes a few seconds to show the image in thumb nail and in square block (both with resizeMode="cover") before a full screen image viewing which is described above.
Also this caching module is faster and more reliable than react-native-fast-image on android emulator, even thought I don't have experience on device. This is encouraging for the module which is much smaller on code size.
I end up modifying the module and add a image source of stripped URL (remove signature/token) for cache hit/search and fallback to full URL (with signature/token) if there is no hit and require download.
What is the use of getSize()? It is not being called in the module:
/**
* Same as ReactNaive.Image.getSize only it will not download the image if it has a cached version
* @param url
* @param success callback (width,height)=>{}
* @param failure callback (error:string)=>{}
*/
static getSize = (url: string, success: Function, failure: Function) => {
CachedImage.prefetch(url, 0,
(cacheFile) => {
if (Platform.OS === 'android') {
url = "file://" + cacheFile;
} else {
url = cacheFile;
}
Image.getSize(url, success, failure);
},
(error) => {
Image.getSize(url, success, failure);
});
};