Preloading/Caching images?

[SvetlozarValchev]

Is there a way to preload or cache the images using useImage?

I've made this simple hook, but the app is crashing when trying to access the image once it's cached:

import {
  useImage,
  SkImage,
} from "@shopify/react-native-skia";

const cache = {}

export default function useImageCache(url: string): SkImage {
  if (!cache[url]) {
    cache[url] = useImage(url);
  }

  return cache[url];
}

I'm using Expo 49.

[wcandillon]

absolutely, useImage is just a shortcut for:

const data = await Skia.Data.fromURI(uri);
const image = Skia.Image.MakeFromEncoded(data);

from there you can use any loading/caching strategy you wish.

[AdamGerthel]

How does this work in relation to sizing? Does Skia generate other sizes when it's scaled up/down, similarly to how lots of other image libraries do?

And secondly, is there any benefit in doing this (I.e as your code example + some way to store it) for local assets?

[C0rren]

Sorry for necroing this old thread, but caching is (in my opinion) a non-trivial task. Several good image-caching libraries exist for react-native, but none of them integrate with Skia (as far as I know). I am now writing our own caching strategy, but it would be a highly appreciated feature for us to have it built-in into Skia somehow!

[AdamGerthel]

How did it go? I've just started to look into this and I agree it's not trivial.