Skip to content

feat: allow custom cacheKey / cacheKeyExtractor for CDN domains that change frequently #45

@jaspergg

Description

@jaspergg

Use case
In our project, images are served via a CDN, and the CDN domain changes from time to time, for example:
https://cdn-a.example.com/images/banner.png
https://cdn-b.example.com/images/banner.png

Even though the actual resource path (/images/banner.png) stays the same, the full URL changes.
If the cache key is based on the full URL, the cache will be missed whenever the CDN domain changes, causing redundant downloads of the same image.

Request
It would be helpful if react-native-blasted-image allowed us to customize the cache key, so that we can use only the relative path (or any other stable rule) as the key.

Proposed API:
1. Add an optional cacheKey?: string prop so callers can explicitly provide the cache key.
2. Alternatively/additionally, expose a cacheKeyExtractor?: (uri: string) => string prop.
If not provided, the current behavior remains unchanged.

<BlastedImage
  source={{ uri }}
  cacheKeyExtractor={(url) => {
    try {
      return new URL(url).pathname; // use only the relative path as cache key
    } catch {
      return url.replace(/^https?:\/\/[^/]+/, '');
    }
  }}
/>

This would:
• Keep the current behavior for all existing users (no breaking change)
• Allow apps with frequently-changing CDN domains to reuse the same cache
• Reduce unnecessary re-downloads and improve performance

If this proposal sounds reasonable, I’d be happy to submit a PR implementing it 🙌

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions