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

https://snack.expo.dev/@msageryd/skia_usefont?platform=ios

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 16

Most upvoted comments

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 😃