react-native-image-cache-wrapper icon indicating copy to clipboard operation
react-native-image-cache-wrapper copied to clipboard

Images seem only cached after first access with every app launch on Android emulator

Open emclab opened this issue 4 years ago • 2 comments

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.

emclab avatar May 12 '21 22:05 emclab

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.

emclab avatar May 15 '21 20:05 emclab

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);
        });

};

emclab avatar May 16 '21 06:05 emclab