react-native-skia: Super slow rendering when using useFont
Description
I’m rendering 1000 shapes on a Skia canvas. The shapes looks like this:
const font = useFont(caveatBold, fontSize);
return (
<Group>
<Line
p1={vec(p1.x * flagScale, p1.y * flagScale)}
p2={vec(p2.x * flagScale, p2.y * flagScale)}
color="darkgreen"
style="stroke"
strokeWidth={1 * flagScale}
/>
<RoundedRect
x={p2.x * flagScale}
y={p2.y * flagScale}
width={12 * flagScale}
height={8 * flagScale}
r={3 * flagScale}
color="lightblue"
/>
<RoundedRect
x={(p2.x + 1) * flagScale}
y={(p2.y + 1) * flagScale}
width={10 * flagScale}
height={6 * flagScale}
r={3 * flagScale}
color="green"
/>
<Text
x={p2.x * flagScale + 2}
y={(p2.y + 6) * flagScale}
text={identifier.toString()}
font={font}
color={'black'}
/>
</Group>
The first render, i.e. before all shapes are rendered takes a very long time (many seconds).
If I remove the <Text>
component the render is still slow.
If I also remove useFont
the render is really fast.
All shapes should have the same font. Is there any way to load the font outside of the component so I don’t have to do it for every shepe?
Version
0.1.188
Steps to reproduce
Please see description.
Snack, code example, screenshot, or link to a repository
About this issue
- Original URL
- State: closed
- Created a year ago
- Comments: 16
Thanks for the nice feedback - really appreciate it. Regarding values, our internal values are optimised for Skia rendering on the native level - so in the future you’ll probl. be driving the Skia Animation from a Shared REA value, and build the animation with Skia values. We’ll get back with some more information 😃