Image vs. CacheManager usage

[Svarto]

Hi, I am exploring this amazing package and have been playing around with it in my app. I am a little confused how to use Image vs. CacheManager component - should I use both or does the Image component already cache the images?

e.g. do I need to first cache the image and then pass it to the Image component:

import React from "react";
import { Image, CacheManager } from "react-native-expo-image-cache";
import { imageflowLinks } from "../services/transformImageDownloadlink.js";

export async function ImageRecipe({ image }) {
    const preview = {
      uri: imageflowLinks(
        image.folder,
        image.user_id,
        image.filename,
        "preview"
      ),
    };
    const uri = await CacheManager.get(
      imageflowLinks(image.folder, image.user_id, image.filename, "highres")
    ).getPath();
    return (
      <React.Fragment>
        <Image
          tint={"light"}
          {...{ preview, uri }}
        />
      </React.Fragment>
    );
}

When I do this I get an error, so I am clearly doing something wrong. I am not sure if I am writing the code wrong or if I am trying to do something redundant (use both Image and CacheManager components at the same time)?

[oshimayoan]

The Image component will automatically cache the image on the first time the component load it from the url.

Can you post what the error is? I'm assuming it's related to the async functional component that you tried to make, which AFAIK React doesn't support.

[Svarto]

@oshimayoan thank you! Yes it was due to the async as even when removing CacheManager I still got the same error. Appreciate your quick help!