Skip to content

Memory leak in the SpeedTest example (Skia.Color) #2992

Open
@gwesseling

Description

@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:

Image

Image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions