However we are not using NativeBase at all and getting the same issues with https://github.com/FormidableLabs/victory. Which leads me to suspect the issue is with layout animations in reanimated.
We have opacity on a graph from victory-native and every time we re-render the graph loses its styling and then it reapplies which causes a flicker. This only occurs using layout animations anywhere in the same component.
Note: We are not animating the graph. We have another component below that graph that animates.
Steps to reproduce
First icon is native-base icon with usage of ‘as’ property, this icon has not semitransparent color, this will never flicker
Second icon, is vector icon from ‘react-native-vector-icons’ with semitransparent color, this icon is passed into ‘as’ property on native-base icon, this icon will never flicker
First icon is native-base icon with usage of ‘as’ property, this icon has semitransparent color, this icon will start to flicker on render (refresh button) whenever layout animation occurs in app
Taping Refresh button causes rerender
On first screen if you tap on refresh, no flicker occurs, when you switch to second tab, layout animation is triggered, causing renders to flicker third icon, when you navigate back to the first tab, third icon will be flickering as well.
Description
Referencing a really well described issue here with the same issue using reanimated. https://github.com/GeekyAnts/NativeBase/issues/5040
However we are not using NativeBase at all and getting the same issues with https://github.com/FormidableLabs/victory. Which leads me to suspect the issue is with layout animations in reanimated.
We have opacity on a graph from victory-native and every time we re-render the graph loses its styling and then it reapplies which causes a flicker. This only occurs using layout animations anywhere in the same component.
Note: We are not animating the graph. We have another component below that graph that animates.
Steps to reproduce
Snack or a link to a repository
https://snack.expo.dev/@krygelv/flickeringicon
Reanimated version
2.13.0
React Native version
0.68.2
Platforms
Android
JavaScript runtime
Hermes
Workflow
React Native (without Expo)
Architecture
Paper (Old Architecture)
Build type
Release mode
Device
Real device
Device model
One Plus 9 pro OxygenOS 13.0
Acknowledgements
Yes