ImageViewer does not seem to use images cached to disk, causing a slow loading

[paolospag]

Hi @ascoders , I used your ImageViewer component in other apps and everything works fine, but in the last app I'm developing I'm using Firebase Storage to allow users to upload photos.

ImageViewer does not seem to use images cached to disk if I use a Firebase Storage URL. This causes a slow loading and black screen long duration when the modal is open.

So, is there a way to avoid this slowdown on the component side?

If you want, I can send you a test URL by e-mail.

[ascoders]

See #26 or #3

[paolospag]

@ascoders thank you for the answer.

Can I alternatively use react-native-cached-image?

If I use cacheable-image, how to it implement using ImageViewer component? I'm confused.

Finally, why do not you use FastImage in react-native-image-zoom?

[azhararmar]

Here is how I use FastImage for image caching

renderImage={(props) => (
    <FastImage
        {...props}
        style={{width: '100%', height: '100%}}
        source={{
            uri: props.source.uri,
            priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.contain}
    />
)}

[nwaughachukwuma]

Here is how I use FastImage for image caching

renderImage={(props) => (
    <FastImage
        {...props}
        style={{width: '100%', height: '100%}}
        source={{
            uri: props.source.uri,
            priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.contain}
    />
)}

FastImage reduced the performance of my app. Things got working Ok after I uninstalled it. Please what could have caused it?

[viet97]

althought using FastImage, this library still takes time to calculate some layout before render. i saw it in code.

[zoom2009]

Guys after 2 day I research for cache multiple image include zoomable, finally I found this lib "react-native-gallery-swiper" https://www.npmjs.com/package/react-native-gallery-swiper There have a prop call imageComponent just pass imageComponent={(props) => <FastImage {...props} />} like this.

[ameer-taghavi]

set width & height to imageUrls itemes

imageUrls={[
  {
     url: media.url,
     width: Utils.dimentions.width,
     height: Utils.dimentions.height,
   },
]}

then use FastImage component:

<FastImage
        {...props}
        style={{width: '100%', height: '100%}}
        source={{
            uri: props.source.uri,
            priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.contain}
    />
)}

[ameer-taghavi]

althought using FastImage, this library still takes time to calculate some layout before render. i saw it in code.

https://github.com/ascoders/react-native-image-viewer/issues/293#issuecomment-869171408