Why react native fastimage is fetching images even if I enable cacheOnly?

Question

According to the documentation of the package if you do this:

cache={FastImage.cacheControl.cacheOnly}

it should only show images from cache, not make any network requests.

However, I tried to clear cache and re run the app, it still fetches images:

  const cacheImg = profile_pic_url && (<TouchableOpacity ><FastImage
     source={{
        uri: profile_pic_url.url,
        priority: FastImage.priority.high,
     }}
     style={styles.userProfilePic}
     cache={FastImage.cacheControl.cacheOnly}
     resizeMode={FastImage.resizeMode.cover}
  /></TouchableOpacity>);

To be sure I even clear in the componentDidMount:

  FastImage.clearMemoryCache();
  FastImage.clearDiskCache();

Is this a bug or am I missing something?!

Answer 1

If the cache is cleared, there's nothing to fetch locally, so it's forced to fetch the images remotely. I don't think it's possible to tell it not to fetch when there isn't anything in the cache - you would never get your image.

Answer 2

If Memory is big concern for you then try to use Image from react-native directly and remove react-native-fast-image. I was also facing the same issue. Tried with
FastImage.clearMemoryCache(); FastImage.clearDiskCache();

in componentWillUnMount()

It clear lots of memory but my target is not achieving so i simply use Image and its miracle for me.

Answer 3

According to documentation, the cache prop should be inside the source as this

const cacheImg = profile_pic_url && (
 <TouchableOpacity>
   <FastImage
     source={{
        uri: profile_pic_url.url,
        priority: FastImage.priority.high,
        cache:'cacheOnly'
     }}
     style={styles.userProfilePic}
     resizeMode={FastImage.resizeMode.cover}
   />
 </TouchableOpacity>
);

Link - react-native-fast-image#sourcecache-enum