Bugs in web version #3402
Description
Description
I’ve noticed a couple of issues in the web version of react-native-skia:
- useSVG hook does not work with remote URLs
When passing an SVG URL, it throws the following error:
Invalid svg data source. Make sure that the source resolves to a string. Got: "https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg"
Example code:
const SVG_URL =
"https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg";
const HookSvgComponent = () => {
try {
const svg = useSVG(SVG_URL);
return (
<Canvas style={{ flex: 1 }}>
<ImageSVG svg={svg} width={256} height={256} />
</Canvas>
);
} catch (e: unknown) {
return <Text>{(e as Error).message}</Text>;
}
};
Android version of this hook or getting svg via API on both platforms works just fine
- Scaling SVG with fitbox results in pixelation
const ScalingComponent = () => {
const svg = Skia.SVG.MakeFromString(
`
<svg viewBox='0 0 20 20' width="20" height="20" xmlns='http://www.w3.org/2000/svg'>
<circle cx='10' cy='10' r='10' fill='red'/>
</svg>
`
)!;
const src = rect(0, 0, svg.width(), svg.height());
const dst = rect(0, 0, 400, 400);
return (
<Canvas style={{ flex: 1 }}>
<Group transform={fitbox("contain", src, dst)}>
<ImageSVG svg={svg} x={0} y={0} width={20} height={20} />
</Group>
</Canvas>
);
};
And again, Android version works as expected
React Native Skia Version
2.2.18
React Native Version
0.81.4
Using New Architecture
- Enabled
Steps to Reproduce
Just clone repo and try it for yourself. Again, I am facing issues only with web version
Snack, Code Example, Screenshot, or Link to Repository
These are some screeenshots to illustrate behavior
If you want check out live example here's the repo