How to handle network error and re-fetch from remote uri

Hi, I would like to know how to deal with network error when I am loading images from remote uri. In my case, I have an infinite list to show all images in a listview. Somehow there may be some network errors:

1. timeout
2. no network connection
3. ssl failed

I know I need to handle them inside the onError() callback, but I want to implement a retry function. Something like retry 10 times, if the failed image is loaded successfully, then stop retrying. However, what annoys me is that I am not sure how to refetch the image from remote uri. What I can think is to set the CachedImage to be null and remount it to make it re-render.

Do you have any clue to implement this or add a new feature for us to set props like: timeout, retryNums?

[gameboyVito]

Hi, dear author. Sorry for the late reply. I have tried it in the onError() callback, but nothing being caught. As I mentioned before, I would like to catch the timeout error. However, it seems like the react-native does not support that feature #7952. Could you add a timeout feature, like opening a public prop for us to set the timeout value?

<CachedImage resizeMode="cover"
         mutable
         source={{uri: this.props.thumb}}
         onError={() => console.log(this.props.name)}
         style={styles.thumbnail}>
</CachedImage>

[samw2k00]

@gameboyVito @aminroosta we found out the issue, this is related to how RNFetchBlob does not respect the 401 status code https://github.com/wkh237/react-native-fetch-blob/issues/267 so i have to explicitly not link the cache, and remove unlink the RNFetchBlib .

cache.task = RNFetchBlob.config({ path }).fetch(method, uri, source.headers);
            cache.task.then((res) => {
                console.log("response info from download", res.respInfo.status, uri)
                cache.downloading = false;
                if (res.respInfo.status === 200) {
                    cache.path = path;
                    this.notify(uri);
                } else {
                    // this is mean its not a 200 response from server, do not link the file to the cache
                    RNFetchBlob.fs.unlink(path);
                }

            }).catch((e) => {
                cache.downloading = false;
                // Parts of the image may have been downloaded already, (see https://github.com/wkh237/react-native-fetch-blob/issues/331)
                RNFetchBlob.fs.unlink(path);
                throw new Error(e)
            });

The second problem is HOW do i tell the custom image component that this download cause error, so i want the onError to be populated. so at the upper level of this component i can handle the Auth issue