How to use outputImage in makeImageSnapshot?

[Corelli-18512]

I have been struggling with similar issues as #2581. Basically the memory release is not immediate after an image instance is disposed, which sometimes makes my app reach 2GB ceiling of IOS memory allocation. However, I accidentally noticed the signature change in makeImageSnapshot introduced here. Seems like we can pass in the image object and make snapshot directly onto its ref. I believe this can perfectly solve the GC related problem because there is no need to create new Images again and again and wait for disposing. However this cannot trigger image refresh on a canvas. More specifically I change my code from:

image.value.dispose();
image.value = surface.makeImageSnapshot(bound);

to:

surface.makeImageSnapshot(bound, image.value);

with some template like:

<Canvas>
  <Image image={image} />
</Canvas>

I found no documentation to use this parameter (the signature of makeImageSnapshot is not updated neither) -- what is the correct way to utilize this?

[wcandillon]

you can create an empty (nullptr) image using Skia.Image.MakeNull() and use that as the value for image. let me know if this helps.

[Corelli-18512]

This crashes the app immediately because of a null error. Seems like <Image /> cannot handle the nullptr value well?

[wcandillon]

you can see an example on how we use it at https://github.com/Shopify/react-native-skia/pull/3176/files

…

On Wed, Jun 18, 2025 at 3:02 PM Corelli-18512 ***@***.***> wrote: This crashes the app immediately because of a null error. Seems like cannot handle the nullptr value well? — Reply to this email directly, view it on GitHub <#3190 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVUZ6KYMO2IQURC2LPD3EFPNDAVCNFSM6AAAAAB7S7K4KSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTGNJQHEYTMMQ> . You are receiving this because you commented.Message ID: ***@***.*** com>

[Corelli-18512]

Seems like it only works for nullptr right? If I pass in an image with value the canvas won't catch the update -- is it by design? It would be great if it can make screenshot directly onto the existing image because we don't need to dispose the previous instance manually anymore.

Also I am trying to avoid crashing because of memory exceeding, and I noticed that the GC is not working very actively. I am using Hermes and developing on iOS rn. Every time the Skia canvas receives a redraw request it tends to alloc and hold many metal memories, which are not released until total memory usage reach over 1GB. If I happen to do a lot of updates when they are not freed in time, the app will be killed because of memory limit. If I want to dig in more and try to understand, debug, or even modify the GC system of how RNSkia handles memory control, do you have a suggestion on where to start?

[wcandillon]

My apologies, I'm losing a bit track of the issue, would be mind sharing a code snippet maybe?

[Corelli-18512]

@wcandillon Sorry for the late reply. Please see this short code snippet.
Expo snack seems not supporting worklet so the code doesn't really work here, but basically I am trying to draw something under the hood manually. In my recent project I find the image disposing is not immediate and thus causes memory troubles especially when I need to update the image very frequently. So I am wondering if I can use the newly introduced parameter in makeImageSnapshot to avoid making a new SkImage instance each time (like #2 in the code sample). Now I am using #1 or #3 which doesn't really make any difference in aspect of disposing.

[Corelli-18512]

@wcandillon Can you pls take a look at this? I am kind of blocked by memory issues here when I tried to update a large image onto canvas frequently.

[wcandillon]

we cannot run in on the snap but the snippet you sent look correct. The MakeNull method with output parameter is tested in our test suite. Maybe if you can send a reproduction. The example in the snack I could try but this is already tested on our side.

[Corelli-18512]

@wcandillon I made an example here, which simply generate a random color block on the canvas per click.
For the two approaches I tried in skiademo.tsx --
This will cause a direct crash:

if (!image.value) {
    image.value = Skia.Image.MakeNull();
}
surface.makeImageSnapshot(undefined, image.value);

This will not update the image on the canvas from the second click:

if (!image.value) {
    image.value = surface.makeImageSnapshot();
} else {
    surface.makeImageSnapshot(undefined, image.value);
}

Basically I want a way to avoid disposing the image and update the canvas directly. Some advice will be appreciated!

[Corelli-18512]

@wcandillon Could you pls take a look at this? I may need to change my approach if I cannot update the image in this way.

[Corelli-18512]

Ok after some attempts I find a way to reduce the refresh of the whole canvas, which can resolve the memory issue.