The new canvas will render an svg once and only once

[AdamGerthel]

Description

I just upgraded to version 1.10.2 from a (patched) 1.9.0 and noticed that my svg icons are only rendering once.

React Native Skia Version

1.10.2

React Native Version

0.76.6

Using New Architecture

• Enabled

Steps to Reproduce

See video, I will create a reproducible repository if needed.

Snack, Code Example, Screenshot, or Link to Repository

Here's a video where I show the issue with Canvas vs OldCanvas: https://komododecks.com/recordings/Jp6oQVqCDRjzIDj5RY7j

[wcandillon]

Thank you for the recording, Indeed a small reproduction would still be very helpful. For instance we have this example that you could extends maybe to show the behaviour: https://github.com/wcandillon/react-native-skia/blob/main/apps/paper/src/Examples/API/Icons/index.tsx

…

On Mon, Jan 27, 2025 at 2:03 PM Adam Gerthel ***@***.***> wrote: Description I just upgraded to version 1.10.2 and noticed that my svg icons are only rendering once. React Native Skia Version 1.10.2 React Native Version 0.76.6 Using New Architecture Enabled Steps to Reproduce See video, I will create a reproducible repository is needed. Snack, Code Example, Screenshot, or Link to Repository Here's a video where I show the issue with Canvas vs OldCanvas: https://komododecks.com/recordings/Jp6oQVqCDRjzIDj5RY7j — Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you are subscribed to this thread. Triage notifications on the go with GitHub Mobile for iOS or Android.

[AdamGerthel]

I've created a simple reproducible example in this branch: https://github.com/AdamGerthel/react-native-skia-debugging-app/tree/fix/react-native-skia-2918

Screen.Recording.2025-01-28.at.09.35.43.mov

Update: Removed some more irrelevant clutter to clean it up a bit. The issue seems to be related to using a group with fitbox. It works if I remove that (but then I can't scale the icon). The implementation of fitbox is taken straight from the docs, except I'm calculating the src and dest variables in the render function and memoizing them.

Update 2: Ok, so if I move the src variable outside of the component, it works. I can't do that though, because in my use-case the icon component is dynamic. It has a big set of predetermined icons and I pass the name of the icon as a string. This works in previous versions (or when using OldCanvas).

[wcandillon]

I'm a bit baffled by the issue. I can reproduce it on your app but not on our example app (fabric or old arch). Here is the code I am using for testing: https://gist.github.com/wcandillon/3fbc1ca923cf1310282d3d96eaf5e60d
I need some sort of reproduction in our yarn workspace for advanced debugging.
I would be interested to see if we are missing something in the new reconciler but it is not clear to me based on the code we are seeing.

[AdamGerthel]

I'm a bit baffled by the issue. I can reproduce it on your app but not on our example app (fabric or old arch). Here is the code I am using for testing: https://gist.github.com/wcandillon/3fbc1ca923cf1310282d3d96eaf5e60d I need some sort of reproduction in our yarn workspace for advanced debugging. I would be interested to see if we are missing something in the new reconciler but it is not clear to me based on the code we are seeing.

Hmm, odd indeed. I can reproduce it in my repository using the example in your gist, so it can't be the implementation itself... hmm 🤔

I tried logging the value of src, and it changes from the first render to the second:

{"__typename__": "\"Rect\"", "dispose": [Function dispose], "height": 128, "setLTRB": [Function setLTRB], "setXYWH": [Function setXYWH], "width": 128, "x": 0, "y": 0}
{"__typename__": "\"Rect\"", "dispose": [Function dispose], "height": 2000000, "setLTRB": [Function setLTRB], "setXYWH": [Function setXYWH], "width": 2000000, "x": 0, "y": 0}

That can't be right, can it?

Update: It really does seems like the new Canvas is actually modifying the original skSVG object (which is why it doesn't happen if the SVG is created inside the component). It enlarges the size by 15 625 (i.e. from 128 to 2.000.000) 👀

[wcandillon]

Thank you for reporting this. This was very interesting. It looked like a side effect was applied to the svg object (with the picture size which is indeed 2000000). I can confirm that it is fixed in the latest release 1.11.1