Shopify / react-native-skia

High-performance React Native Graphics using Skia
https://shopify.github.io/react-native-skia
MIT License
6.98k stars 452 forks source link

useAnimatedImageValue flickering #2616

Open RiccardoRomagnoli opened 2 months ago

RiccardoRomagnoli commented 2 months ago

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