georstat/react-native-image-cache

No cache prop does not work dynamically

Opened this issue · 0 comments

Firstly I would like to say that I don't speak much English so I am using a translator.

I recently found this library because I needed to implement a photo caching system in an offline app that I'm developing.

The application has in its database all the photo links that will be viewed.

The app needed to save photos locally on the device as they were viewed by the user and at the same time provide functions to previously download all these photos or just the missing ones.

One of the necessary points was to have a parameter that would say whether the photos viewed by the user would be downloaded to the cache, and when I saw the "noCache" prop I was sure I should use this lib.

I had no problems implementing the cache system, but I did when using the "noCache" prop.

The two problems found were:

  • When using the prop with the value: true on an Android device, the photos do not appear on the screen because the return for the component is "file://${uri}" and when the noCache prop is true, the return is the url itself of the image resulting in a blank photo. I added the "IsRemoteImage" function that solves the problem.

  • The second problem was found with the following steps:

    • View a photo with the noCache prop: false saving it in the cache
    • Use CacheManager to delete the photo from the cache
    • View the same photo with the noCache prop: true

The second time the photo is blank because the source is still within the entries array of the CacheManager, so I added the validation of the current prop with the source prop within the entries array, solving the problem.

I didn't have time to fork the project and make a pull request, but below is the patch-package code that solves these two problems.

diff --git a/node_modules/@georstat/react-native-image-cache/src/CacheManager.ts b/node_modules/@georstat/react-native-image-cache/src/CacheManager.ts
index 46bdcf2..0fb3cc4 100644
--- a/node_modules/@georstat/react-native-image-cache/src/CacheManager.ts
+++ b/node_modules/@georstat/react-native-image-cache/src/CacheManager.ts
@@ -165,7 +165,8 @@ export default class CacheManager {
     if (
       !CacheManager.entries[source] ||
       CacheManager.entries[source].options?.headers?.Authorization !==
-        options?.headers?.Authorization
+        options?.headers?.Authorization ||
+      CacheManager.entries[source].noCache != noCache
     ) {
       CacheManager.entries[source] = new CacheEntry(
         source,
diff --git a/node_modules/@georstat/react-native-image-cache/src/CachedImage.tsx b/node_modules/@georstat/react-native-image-cache/src/CachedImage.tsx
index 9549160..75f3d6c 100644
--- a/node_modules/@georstat/react-native-image-cache/src/CachedImage.tsx
+++ b/node_modules/@georstat/react-native-image-cache/src/CachedImage.tsx
@@ -198,7 +198,7 @@ const CachedImage = (props: IProps & typeof defaultProps) => {
 
     if (isRemoteImage(propsSource) || !isImageWithRequire(propsSource)) {
       return {
-        uri: isAndroid() ? `file://${uri}` : uri,
+        uri: isAndroid() && !isRemoteImage(uri) ? `file://${uri}` : uri,
       };
     }