[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.

[kirillzyusko]

@bartlomiejbloniarz interesting! I will try to specify invertStickyHeaders={false} and see whether it helps or not!

@mhoran yes, I also noticed that animating padding/height properties is not perfectly synchronized on Paper (you can even watch the attached videos in this issue frame by frame). But I'm just curios - is it possible to make padding/height animation fully synchronous on Android? From what I saw iOS doesn't have any delays on paper arch when I animate padding or height. So curious if it's an Android specific problem or maybe it's react-native + Android issue? 🤔

@bartlomiejbloniarz tagging you too, since maybe you know the answer on this question 😊

[mhoran]

From what I saw iOS doesn't have any delays on paper arch when I animate padding or height. So curious if it's an Android specific problem or maybe it's react-native + Android issue? 🤔

I do see delays on iOS with padding when using an inverted FlatList, on both Paper and Fabric (though it's much worse on Fabric.) This is partly what led me to experiment with using the Keyboard Layout Guide to avoid the keyboard on iOS, after trying both Reanimated useAnimatedKeyboard and react-native-keyboard-controller.

My guess is that the system is already overloaded with rendering the inverted FlatList and subsequently trying to re-draw the FlatList due to the changing padding is too much for it to handle. If I use FlatList without inverted then it all works just fine (but that won't work for my purposes.) When I tried useAnimatedKeyboard I applied a transform to the Y-axis to offset from the keyboard, which had no delay. Unfortunately that approach introduces other issues.

I don't have much experience with React Native on Android -- I'm primarily using React Native on iOS. (Didn't mean to hijack your report, but just wanted to make sure it's known that this seems to be an issue on all platforms, and is particularly worse on Fabric.)

[kirillzyusko]

When I tried useAnimatedKeyboard I applied a transform to the Y-axis to offset from the keyboard, which had no delay. Unfortunately that approach introduces other issues.

Yes, this approach is quite limited (while it works very smooth it still has too many limitations).

My guess is that the system is already overloaded with rendering the inverted FlatList and subsequently trying to re-draw the FlatList due to the changing padding is too much for it to handle. If I use FlatList without inverted then it all works just fine (but that won't work for my purposes.)

Here is an example how it works in react-native-keyboard-controller with inverted FlatList modifying height:

ScreenRecording_01-16-2025.10-56-25.AM_1.MP4

@mhoran Can you share your video with delays you are talking about?

[mhoran]

Here is an example of jittery animated padding on Paper:

keyboard-controller-paper.mp4

And Fabric:

keyboard-controller-fabric.mp4

In practice, the Fabric animation is even worse, but is dependent on the content in the FlatList. The above recording is a contrived example; a channel with actual content is incredibly jittery (similar to Paper.)