useAnimatedImageValue flickering

[RiccardoRomagnoli]

Description

Hello,

I noticed that in a scenario where I have multiple GIF Images rendered in a canvas and there is a rerendering happing outside of the canvas, the GIFs start flickering. When they blink, the UI thread FPS drops to ~20.

For now I just made sure to put any UI logic in lower level components in the React tree, and initially I though it would solve. But now, that the react logic has become also more articulated inside the Canvas components, I have this flickering happening sometimes in the android emulator.

What can cause this issue? Any clue on what is going on? Any suggestions on how to properly use useAnimatedImageValue?

Version

1.3.8

Steps to reproduce

add animated images to the canvas
add conditions in the rendered component
run the conditions and the gifs starts flickering

Snack, code example, screenshot, or link to a repository

I didn't manage this make this environment work, but the structure to reproduce the issue is pretty much the one in the snack

https://snack.expo.dev/@ricrom/useanimatedimagevalue-bug

[wcandillon]

This sounds interesting. I couldn't run the snack unfortunately, not sure why.
This is the hook we use: https://github.com/Shopify/react-native-skia/blob/main/packages/skia/src/external/reanimated/useAnimatedImageValue.ts#L11

Maybe you could copy/paste the implementation and play with it to try to get a sense of what may cause the issue? Alternatively you can build our own hook to fit your needs.
And this is the useAnimatedImage hook:

react-native-skia/packages/skia/src/skia/core/AnimatedImage.ts

Line 13 in 32fbd1c

export const useAnimatedImage = (

(to create an animated image object)

[RiccardoRomagnoli]

Hey @wcandillon, thanks for the comment. We still can not wrap our head around this issue. It is very difficult to debug and correlate it to something. Initially I thought it could have been a performance problem, but when I saw that it stopped by just removing a rn-paper <Portal> from a component (that didn't even have an image) I was 🤷🏻‍♂️

[Kwonkunkun]

Hello @wcandillon,

I encountered a flickering issue when using the useAnimatedImageValue hook. The problem specifically occurs under the following conditions:

Steps to Reproduce:

1. Use the useAnimatedImageValue hook with a PNG image (not a GIF).
2. Flickering happens when opening or closing a navigation drawer.

The issue seems to be related to how the hook handles non-animated images like PNGs. This problem does not occur when using GIFs.

Expected Behavior:

The PNG image should remain stable and not flicker when the drawer is opened or closed.

Video

Screen.Recording.2024-12-30.at.3.33.03.PM.mov

---

I believe the issue might be related to the ImageShader component,
because the pixel output from useAnimatedImageValue itself appears normal when do console log

---

react native skia is awesome library! thank you~

[wcandillon]

Should an error be thrown when using a non-animated image?

[Kwonkunkun]

Should an error be thrown when using a non-animated image?

@wcandillon

I think that might be better because, in my case, both GIFs and non-animated images were handled in the same logic, and it took me some time to identify the problem.

[RiccardoRomagnoli]

Seems like my bug got fixed with #2866