Preloading/Caching images? #1941
Replies: 3 comments 5 replies
-
absolutely, useImage is just a shortcut for:
from there you can use any loading/caching strategy you wish. |
Beta Was this translation helpful? Give feedback.
-
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! |
Beta Was this translation helpful? Give feedback.
-
Using import { Skia, SkImage } from "@shopify/react-native-skia";
import { useEffect, useState } from "react";
import { Image } from "expo-image";
export default function useSkiaImage(url: string): SkImage | null {
const [image, setImage] = useState<SkImage | null>(null);
useEffect(() => {
let isMounted = true;
const getImage = async () => {
if (url) {
try {
let uri = await Image.getCachePathAsync(url);
if (!uri) {
await Image.prefetch(url);
uri = await Image.getCachePathAsync(url);
}
if (uri) {
const data = await Skia.Data.fromURI("file://" + uri);
const skImage = Skia.Image.MakeImageFromEncoded(data);
if (isMounted) {
setImage(skImage);
}
}
} catch (error) {
console.error("Error loading or processing image:", error);
}
}
};
getImage();
return () => {
isMounted = false;
};
}, [url, setImage]);
return image;
} |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
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:
I'm using Expo 49.
Beta Was this translation helpful? Give feedback.
All reactions