React Native Image fetches from origin even when cached-CodePudding

Using React Native's Image component, I notice that after reloading the app the images are fetched from origin again although they're being cached.

I can see before loading the image that it's cached by doing

ImageReact.queryCache([props.source as string]).then((res) => {
  console.log(props.source, res); // prints "memory/disk"
});

and I see the requests firing using a HTTP proxy such as Proxyman or Flipper.

My server returns the image with proper Cache-Control headers, and I tried setting up the Image like so:

<Image
  style={{ height: 300, width: 300 }}
  source={{
    cache: 'force-cache', // tried them all
    uri: 'https://i.picsum.photos/id/338/200/200.jpghmac=5S5SeR5xW8mbN3Ml7wTTJPePX392JafhcFMGm7IFNy0'
  }}
></Image>

CodePudding user response：

I think you need to make a caching system with 'react-native-fs', it's a really nice feature to chack if the image is cached or not

CodePudding user response：

Most likely there is a cache miss due to the hmac token.

200.jpg?hmac=5S5SeR5xW8mbN3Ml7wTTJPePX392JafhcFMGm7IFNy0

Loading the same image with a different hmac/token will result in a cache miss. Native <image> does not support adding headers to image requests. You can try using Fast Image that supports authorization tokens.

<FastImage
  source={{
    uri: 'https://i.picsum.photos/id/338/200/200.jpg',
    headers:{ Authorization: 'someToken' },
    priority: FastImage.PriorityNormal
  }}
/>