Image can't be displayed completely --- version 1.4.0

[StanLee12]

Like below,on ios device.

[StanLee12]

When image is loading, i click it and show a modal and the image will like that.

[antondomratchev]

Got the same issue yesterday. This issue is most likely caused by RNFB library that is doing the image downloading and caching. @wcandillon I think this might be related to wkh237/react-native-fetch-blob#368. @StanLee12 are you able to reproduce this issue consistently? If so it might be worth trying out the timeout config in the fetch https://github.com/wcandillon/react-native-img-cache/blob/master/src/index.tsx#L104

[StanLee12]

@antondomratchev Yes, i can reproduce this issue every time.
Thanks for your answer :-)， i will try that

[jonathanroze]

I've the same issue :/ ! Do you have any idea?

[irukimo]

same issue here...

[n1ru4l]

This also happens when using react-native-fetch-blob without this library. When I restart the app the images are already cached. So I can not figure out what exactly is wrong since it is only displayed wrong the first time...

My situation description with iOS: FlatList 10 items are in there by default. Only 2 are visible. For some reason all 10 images are loaded. Those are most likely not corrupted. Then after hitting the end the next 10 images are loaded (although from what i read it should only render 2 items and therefore fetch only two images). Those images are most likely corrupted. Now the images are also cached. When I reload the app all images are display properly (until you load images that are not cached).

Edit:
After running all calls on react-native-fetch-blob in sequence with a queue I do no longer experience corrupted images:

import RNFetchBlob from 'react-native-fetch-blob'
import SHA1 from 'crypto-js/sha1'

const tasks = new Map()
let queue = Promise.resolve()

export const get = uri => {
  const path =
    RNFetchBlob.fs.dirs.CacheDir + `_immutable_images/` + SHA1(uri) + `.jpg`
  queue = queue.then(() => {
    return RNFetchBlob.fs.exists(path).then(exists => {
      if (exists) return path
      return RNFetchBlob.config({ path })
        .fetch('GET', uri, {})
        .then(res => res.path())
    })
  })
  return queue
}

However loading gets painfully slow with this approach. I switched to https://github.com/DylanVann/react-native-fast-image which is more performant (and also has image load priority).

[n1ru4l]

This is an duplicate of #61

[wcandillon]

I switched to a caching component that depends on ExpoKit: https://github.com/wcandillon/react-native-expo-image-cache. This library fixes this issue.

You can read about it in more details at https://medium.com/@wcandillon/5-things-to-know-about-images-react-native-69be41d2a9ee

[sriraman]

@wcandillon I don't want to add expo to my project. Is there a non-expo version of this library with the fix for this problem?

[n1ru4l]

@sriraman Have you tried https://github.com/DylanVann/react-native-fast-image ?

[KarenQiao]

any updated?