Simple animations with useAnimatedStyle flicker on Fabric

[thiagobrez]

Description

Simple animations such as animating the height of a component with useAnimatedStyles and withSpring flicker on New Architecture with Fabric.

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-01-03.at.15.50.14.mp4

Steps to reproduce

1. Create a shared value: const height = useSharedValue<number>(0);
2. Create an animated style: const animatedStyles = useAnimatedStyle(() => ({ height: height.value }));
3. Create a function to animate: const onToggleHeight = () => { height.value = withSpring(height.value > 0 ? 0 : 200) };
4. Apply the animated style to a view: <Animated.View style={animatedStyles} />
5. The animation seems to always flicker when animating to height: 0 in this case. I've also seen it happen when animating to opacity: 0 in other cases

Snack or a link to a repository

https://github.com/thiagobrez/reanimated-repro

Reanimated version

3.16.6

React Native version

0.76.5

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[danieljvdm]

I recently reported this issue in react-navigation but I suspect it's closely related to this issue. useAnimatedStyle seems to be causing a lot of random flickers across unrelated components for me.

react-navigation/react-navigation#12410