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 😃