Image caching?

[xgenem]

Is your feature request related to a problem? Please describe. We're using the plugin in a Modal which loads the images from a URI based on the image clicked on a slider. However, every time I click on the same image, it loads the image again from the source.

Describe the solution you'd like Cache the image so the next time the resource image is accessed, it will be from cache. OR at least set something like 'only-if-cached' from React Native Image.

[vivaxy]

Approach:

1. Support Cache Control. https://reactnative.dev/docs/images#cache-control-ios-only
2. Support cache for image resources. https://github.com/wcandillon/react-native-img-cache, https://github.com/DylanVann/react-native-fast-image

[mrexodia]

I didn't do anything proper because I want to stop working on this, but this might be useful: https://github.com/vivaxy/react-native-auto-height-image/compare/master...mrexodia:proper-cache

I tested and it currently hits the server twice (which can be improved), but it's already much better than whatever crappy caching Image implements.

[alantoa]

Hi, you can try react-native-auto-height-fast-image2, I repalce default replace to react-native-fast-image, support cache control.

[pierroo]

@alantoa Thank you for this, I truly needed the caching to autoHeight. However I am confused, the link you provided for react-native-auto-height-fast-image2, although its url is directed at your library, it seems that the whole description, even the installing steps are calling the original react-native-auto-height-image?

So how can I install your library rather than the original one, and how do I call yours instead of the original? (I'm sorry if the question seems silly, Github and npm clearly aren't my strength)

[alantoa]

@pierroo You don't need this lib anymore, there are better solutions now.

import FastImage from "react-native-fast-image"

const AutoHeightImage = React.memo(function AutoHeightImage ({ width, ...props }: ImageProps) {
  const [state, setstate] = React.useState(0)
  return (
    <FastImage 
      {...props}
      style={{ width: width, height: state }}
      onLoad={(evt) => {
        setstate((evt.nativeEvent.height / evt.nativeEvent.width) * width)
      }}
    />
  )
})

Simple to use:

<AutoHeightImage width={300}  />

[pierroo]

@alantoa Quite amazing, it actually works perfectly, thank you so much! :)

[alantoa]

@alantoa Quite amazing, it actually works perfectly, thank you so much! :)

You're welcome!