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 🤷🏻‍♂️