Big regression after upgrading to v2 on react native 0.79

[thetaungg]

Description

I have a library for rendering the table with Canvas on the web and with skia on mobile.
It was working reasonably well with react native 0.76.9 + new arch

After upgrading to react native 0.79 + react 19 and react-native-skia v2. I'm facing significant issues.
Flicker, memory leaks and skia elements being transparent on first render.

Here is the video of that.

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2025-04-15.at.08.47.40.mp4

And this was before (on react 18.3 and react native 0.76.9)

Simulator_Screen_Recording_-_iPhone_16_Pro_-_2025-04-15_at_09.01.26.mov

React Native Skia Version

2.0.0-next.2

React Native Version

0.79.0

Using New Architecture

• Enabled

Steps to Reproduce

This is a public repo where you can reproduce it. (the branch should be adopt/new-arch
It includes the source code of the table rendering logic as well

If you go to examples/expo folder and run pnpm ios. You'll be able to see it

https://github.com/webbeetechnologies/datagrid/tree/adopt/new-arch

And on the main branch, we have the old version where it's using react 18 and react native 0.76.9

https://github.com/webbeetechnologies/datagrid

Snack, Code Example, Screenshot, or Link to Repository

https://github.com/webbeetechnologies/datagrid/tree/adopt/new-arch

[wcandillon]

Thank you for reporting this. The example is pretty big any chance you could reproduce the issue in a smaller example? Is this on iOS or android, both?
When you execute a gesture, is a new React render happening?
It would be great if you could help me make the smallest reproducible example.

[wcandillon]

It looks like this issue might be a duplicated of #2999, I am currently investigating it.

[wcandillon]

The big issue here seems to be the canvas re-rendering on every animation frame which is a big no-no. However it does looks like the situation could be improved on our side, I am investigating it.

[thetaungg]

@wcandillon
Thanks for the fast response.

I'm facing an issue with running example project on Android, so, I haven't checked there. I will let you know as soon as I can run the example on there.

I guess I could create a simple table renderer for it if you needed

One thing to note is I'm not using any animations here. I'm simply rerendering the Picture and Canvas component when scroll is changed.

This was initially created to work with web canvas and then I wanted it to work on the mobile, so, I integrated skia.

I'm skia newbie, so, please feel free to make a suggestion. I'm very much open to improving the performance on the mobile side.

[thetaungg]

In fact, I need some tips because the performance of the table is not very good on Android even before this problem happens. )

The goal of this library is to create a canvas based table renderer that works anywhere.
Maybe I don't understand Skia concepts enough because I couldn't find any way other than to rerender it when the scroll is changed. Otherwise, the table will become laggy.
Maybe there is some other way . . .

[thetaungg]

@wcandillon
Any news? Anything that I can help you with?

[wcandillon]

hehe funny I was already looking into it this morning. I also plan to address your comments above but first I want to fix something that might be indeed a regression.

[thetaungg]

Nice. )
Sounds great.
I'm looking forward to it.