wcandillon / react-native-expo-image-cache

React Native Image Cache and Progressive Loading based on Expo
MIT License
672 stars 125 forks source link

How to use preview with a local file? #160

Open oporter1 opened 3 years ago

oporter1 commented 3 years ago

Hello,

I am looking to use the preview or remove the preview loading feature with local files. Is this possible? looking to do something like this:

    return images.map((src, index) => {
      let previewSrc = src;
      if (src.startsWith("file")) {
        // previewSrc = require(src);
        previewSrc = src;
      } else {
        previewSrc = { src: "data:image/png;base64," + src + '"' };
      }
      return (
        <Image
          key={`image_${index}`}
          style={styles.slideImage}
          resizeMethod="resize"
          {...{
            preview: previewSrc,
            uri: src,
          }}
        />
adamzolyak commented 3 years ago

@oporter1 did you ever figure this out? I'm running into the same issue.

oporter1 commented 3 years ago

@adamzolyak I wasn't, I did a work around that checks if it's a file and, if so, then we just display a regular image.

return images.map((src, index) => {
      if (!src.startsWith("file")) {
        return (
          <ImageCached
            key={`image_${index}`}
            style={styles.slideImage}
            resizeMethod="resize"
            {...{
              preview: { src: "data:image/png;base64," + src + '"' },
              uri: src,
            }}
          />
        );
      } else {
        return (
          <Image
            source={{ uri: src }}
            style={styles.slideImage}
            key={`image_${index}`}
          />
        );
      }
    });
  }, [images]);