[Fabric] Poor animation performance when animating height property

[kirillzyusko]

Description

Whenever I try to animate height property I get a very poor animation performance:

Paper	Fabric
animation-smooth.mp4	animation-fps-drop.mp4

It's really easy to notice on Android (I assume on iOS it may be laggy as well, but visually on iOS animation looks much better than on Android).

The same code on paper works well. Any help is highly appreciated! ❤️ 🙏

Steps to reproduce

1. Open Chat FlatList screen
2. Tap on input in the bottom of the screen
3. Observe animation performance

Snack or a link to a repository

https://github.com/kirillzyusko/react-native-keyboard-controller/tree/main/FabricExample/src/screens/Examples/ReanimatedChatFlatList

Reanimated version

3.16.1

React Native version

0.76.2

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

Real device

Device model

Pixel 7 Pro

Acknowledgements

Yes

[bartlomiejbloniarz]

Hi @kirillzyusko! I checked your example. The main issue here is that when an inverted FlatList is used it invokes a setState in onLayout. This means that whenever you change the height via Reanimated it triggers a rerender. Because of that both the UI and JS thread try to update the Shadow Tree simultaneously and this results in worse performance. I'm not yet sure how we want to tackle this whole issue, but for your case you can as a workaround use invertStickyHeaders={false}. This will prevent those state updates, while still allowing you to have an inverted list.

I also checked why the issue is not present on iOS. It appears that onLayout is not triggered there when we run the animation. Don't really know why.

[mhoran]

I have seen poor performance animating padding with an inverted FlatList on iOS when using Fabric as well -- as originally reported in #5685. This was with my own KeyboardAvoidingView using Reanimated useAnimatedKeyboard, but I also tried react-native-keyboard-controller and saw the same.

#5685 was initially opened for Paper, and the padding performance is also poor there when using an inverted FlatList and animating padding. So there may be something else going on there. However, Fabric performance with animated height, margin or padding is significantly degraded as compared to Paper, in my experience.