Skip to content

Providing a new source url that results in the same cacheKey hides the image #83

@itsramiel

Description

@itsramiel

Hi,

I am using a custom cache key as mentioned here because I use aws s3 signed urls.

The problem is that when the url updates with a new url that resolves to the same cacheKey, then the image dissapears(shows blurred thumbnail if available).

For the sake of example, I am using an unsplash image and changed the q request parameter. This should produce the same behavior. Here is a repo if you would like to test yourself

Sample code:

CacheManager.config = {
  baseDir: `${Dirs.CacheDir}/images_cache/`,
  blurRadius: 15,
  cacheLimit: 0,
  maxRetries: 3 /* optional, if not provided defaults to 0 */,
  retryDelay: 3000 /* in milliseconds, optional, if not provided defaults to 0 */,
  sourceAnimationDuration: 1000,
  thumbnailAnimationDuration: 1000,
  getCustomCacheKey: (source: string) => {
    // Remove params from the URL for caching images (useful for caching images from Amazons S3 bucket and etc)
    let newCacheKey = source;
    if (source.includes('?')) {
      newCacheKey = source.substring(0, source.lastIndexOf('?'));
    }

    console.log('newCacheKey', newCacheKey);
    return newCacheKey;
  },
};

CacheManager.clearCache();

function App() {
  const [url, setUrl] = useState(
    'https://images.unsplash.com/photo-1718027808460-7069cf0ca9ae?q=20&w=3474&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
  );

  useEffect(() => {
    setTimeout(() => {
      setUrl(
        'https://images.unsplash.com/photo-1718027808460-7069cf0ca9ae?q=25&w=3474&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      );
    }, 2000);
  }, []);

  return (
    <View style={styles.screen}>
      <CachedImage
        source={url}
        thumbnailSource={url}
        style={{
          width: 400,
          aspectRatio: 0.9,
        }}
      />
    </View>
  );
}

Here is the outcome:

Simulator.Screen.Recording.-.iPhone.15.-.2024-07-17.at.09.10.25.mp4

As you can see, the Source Image disappears and you only see the blurred thumbnail image.

I am aware of the source of the issue and will create a pr to resolve

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions