Corrupted Images on first load

[uncledent]

When I install the app and fetch news with images, it stays a fallback image for several seconds and then the image appears corrupted:

What direction should I keep digging?

The lib is great! Thank you!

[jjayasagar]

Hi @uncledent

Thanks for writing the issue!

This issue is not related to the library :) We also face it sometimes depending network issues.

Waiting to get an update from RN fetch blob library. Refer here
Related issue: wkh237/react-native-fetch-blob#622
Old Repo: https://github.com/wkh237/react-native-fetch-blob/issues
New repo: https://github.com/joltup/react-native-fetch-blob

Take a look and try to get some more information.

I will try to update this dependency ASAP.

[uncledent]

Thank you for your answer, @jjayasagar. Maybe we could do some temporary workaround? For example render/load image twice on first load or something like this?

[jjayasagar]

Maybe we could try, however, not on the master branch!! You could try it on a forked repository and use it in your code :)

Thanks!

[uncledent]

A quick workaround for this issue is to rerender the image when it is loaded, like this:

onloadEnd() {
        // rerender image
        this.setState({ renderCount: 1 })
}

<OfflineImage
            key={src.uri + this.state.renderCount}
            source={src}
            onLoadEnd={this.onloadEnd}
            {...this.props}
  />

This is ugly, but less ugly as corrupted images.

[jjayasagar]

Thanks @uncledent I will quickly and let you know.

[jjayasagar]

Now you can use onLoadEnd param @uncledent

<OfflineImage key={'https://wallpaperbrowse.com/media/images/wallpaper-for-mobile-13.jpg'} onLoadEnd={(sourceUri) => { console.log('Loading finished for image with path: ', sourceUri) }} reloadImage = { true } resizeMode={'cover'} fallbackSource={ Images.fallbackSource } style={ { width: '99%', height: 110, margin: 5 } } source={ { uri: 'https://wallpaperbrowse.com/media/images/wallpaper-for-mobile-13.jpg' } }/>

Please try and let me know if it helps! Thanks!!

[uncledent]

Unfortunately the issue is still there, workaround helps sometimes but not always. And it adds ugly flickering of the image :( Can anyone think of some better workaround for this?

[jjayasagar]

That's true @uncledent. It has to be fixed in the rn-fetch-blob.

[uncledent]

@jjayasagar i think this may be caused by the situation that we try to show the image right after it was downloaded by rn-fetch-blob, but at that time it is not fully saved to the file system. I try to add a small timeout before updating state of the component, it seems to work. I will do some more investigation on this.

[jjayasagar]

@uncledent Thank you for taking time and putting the efforts. Would be really nice to your thoughts 👍

[airTradies]

@uncledent How did you implement this short timeout? This is really annoying us. The correct image even loads for the first second, then is drawn over by the half grey/green image.

[loismeira]

Hi, what are the latest news on this issue? We have encountered it with expo-file-system downloadAsync.

[Jayasagar]

Hi @loismeira This repo is no longer maintained! Sorry for that.