If URI is not valid, activity indicator never stops. about react-native-cached-image HOT 11 CLOSED

I thinks this is what you were looking for #53

from react-native-cached-image.

Ok, I got the defaultSource to load a background image. Not sure why I couldn't see some of my images, but I eventually found one that shows up. The other issue, which is that the spinner doesn't stop when the URI is invalid, can be solved by setting isCacheable to false when the download fails:

ImageCacheProvider.getCachedImagePath(url, options)
    // try to put the image in cache if
    .catch(() => ImageCacheProvider.cacheImage(url, options))
    .then(cachedImagePath => {
        this.safeSetState({
            cachedImagePath
        });
    })
    .catch(err => {
        this.safeSetState({
            cachedImagePath: null,
            isCacheable: false        // <-- HERE
        });
    });

from react-native-cached-image.

So after further investigation, I see that on Android the defaultSource image is not shown at all, just the activity indicator, due to some conditional code. This means, that I have no way of showing a default image at all when the URI is invalid. This makes things even more complicated. :(

from react-native-cached-image.

@ryanhomer Thanks for this! I will look into it!
Setting the isCacheable to false when the download fails sounds like a good idea.
defaultSource should work on Android, I will try to reproduce and let you know.
Regarding the invalid URIs, I'm not sure what is the desired behaviour though.. I guess it should behave the same as a normal Image when an invalid URI is set as the source, right?

from react-native-cached-image.

@kfiroo I solved this issue locally by specifically doing a render of an Image with the defaultSource URI when the download fails. I wasn't sure if setting isCacheable to false would cause any side effects so I set a new state downloadFailed to true, then in render() my first check is to see if downloadFailed is true and if so return the Image with the defaultSource and stop. This helps to alleviate any cross-compatibility issues with the activity indicator.

I'm fairly new to the codebase in the project so your help with this is very much appreciated. Thanks.

from react-native-cached-image.

You could apply the defaultSource to the CachedImage directly and it would pass it to the internal Image component.
Setting isCacheable to false when the download fails will have the same result as rendering an Image with defaultSource - this is exactly what the code would do :)

from react-native-cached-image.

Setting isCacheable to false when the download fails will have the same result as rendering an Image with defaultSource - this is exactly what the code would do :)

For me, this only works on iOS, not on Android.

from react-native-cached-image.

@ryanhomer will check

from react-native-cached-image.

@ryanhomer This seems to be how Image behaves on Android vs iOS.
I have the following code

<Image
    source={{uri: 'https://example.com/wrong-image.jpg'}}
    defaultSource={localLoaderImage}
    style={styles.image}
/>

On iOS I see the default image, on Android I see nothing.

* this is just a normal react-native Image

from react-native-cached-image.

@kfiroo Sorry, I know it's been a while. At first I didn't understand what you were trying to explain regarding Image and defaultSource. However, this is not quite the issue I'm having. The issue doesn't really have anything to do with defaultSource; I was trying to use defaultSource in an unconventional way which probably led to some confusion. The issue is that when the download fails, the activity indicator spins forever with no indication to the user that an error has occurred and that we're not even trying to download the image anymore. This is because even when the download fails, the first if in the render method still passes.

render() {
    if (this.state.isCacheable && !this.state.cachedImagePath) {
        return this.renderLoader();
    }
    ...
}

What has arisen out of this discussion with defaultSource brings me to a secondary issue, what to show after a failed download. I guess what I really need is a placeholderImage property that is used when the download fails, as opposed to defaultSource which is to be used while the desired image is being downloaded. So, for example, a user profile image would display a generic user "icon" if for some reason the URL that was downloaded as part of a user's profile is broken or temporarily unavailable.

from react-native-cached-image.

That's exactly it. Thanks!

from react-native-cached-image.