Memory leak in the SpeedTest example (Skia.Color)

[gwesseling]

Description

We are encountering a memory leak caused by using Skia.Color. We are using a similar implementation to what is used in SpeedTest example. I have also run the speedTest example directly in our app, which gives the same result. I could unfortunately not run the speedTest example in the Skia repo to confirm it is something in our setup.

It seems to be related to this line, we found this in our implementation and the SpeedTest example:
https://github.com/Shopify/react-native-skia/blob/main/apps/paper/src/Examples/SpeedTest/SpeedTest.tsx#L299

When running the instruments tool for leaks on a release build we see the following:

If we don't animate the color and make it a Skia.Color defined outside our component everything seems to be fine.

React Native Skia Version

1.11.7

React Native Version

0.76.3

Using New Architecture

• Enabled

Steps to Reproduce

In our case we are animating the color of the paragraph.

  const paragraph = useDerivedValue(() => {
    // Are the font loaded already?
    if (!customFontMgr) {
      return null;
    }

    const paragraphStyle = {
      textAlign: props.textAlign || TextAlign.Left,
    };

    const textStyle = {
      color: Skia.Color(preColor.value),
      fontFamilies: [fontWeight],
      fontSize: props.fontSize,
    };

    return Skia.ParagraphBuilder.Make(paragraphStyle, customFontMgr)
      .pushStyle(textStyle)
      .addText(preText.value;)
      .pop()
      .build();
  });

Snack, Code Example, Screenshot, or Link to Repository

https://github.com/Shopify/react-native-skia/blob/main/apps/paper/src/Examples/SpeedTest/SpeedTest.tsx

[gwesseling]

We are also seeing something similar using a path effect (DashPathEffect). But I need to look more into that, since we are not animating it, we are only animating the group around it.

[wcandillon]

is this related to facebook/hermes#982? The object is not leaking but it is seen so lightweight by the gc that it doesn't garbage collect it? Does using .dispose() on the color using the same color instance fixes the issue?

[gwesseling]

Thanks for your quick reaction @wcandillon 🙌.

The things you are pointing out make a lot of sense, especially after reading PRs like #1600. I will check the .dispose() function soon on the color instance to see if this fixes the issue and report back.

[gwesseling]

I have tried running the dispose() function on the SkParagraphBuilder, but that does not make a difference for the color instance. It still appears in the instruments. The Skia.Color does not have a function like this? it only returns a Float32Array, unless I am missing something here.

However, I might have found a way to limit the amount of time the color instance gets created on our side. This would already be a big improvement, but still, we are animating the color using reanimated's withTiming. That would still mean a lot of instances get created when animating the color :/

We are currently getting to the point where the os watchdog is terminating our app to free up memory. Our app is intended to run on a tablet 24/7.