Height, margin and padding animations feel laggy and flickery on production (3.7.0)

[domenicoprestia]

Description

When animating Animated components on height/paddings and margins all animations feel laggy and flickery in production builds.

Steps to reproduce

1. Create an animation on a padding value or a height value with 2 states
2. Try to animate it on a production build

Snack or a link to a repository

i cant link a repo

Reanimated version

3.7.0

React Native version

0.72.6

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

None

Architecture

Paper (Old Architecture)

Build type

Release app & production bundle

Device

Real device

Device model

All devices

Acknowledgements

Yes

[pavelbabenko]

Same issue

[lcarrettin]

I'm experiencing lags after updating from 3.6.1 to 3.7.0

[szydlovsky]

Hey @domenicoprestia @pavelbabenko @lcarrettin 👋 We can't investigate anything without reproducible code. Do you have any example with mentioned issue that I can easily run and observe problems? Also, I suggest checking on newest versions (3.12.0, 3.12.1) as well

[codegabk]

@szydlovsky animate any image with width and height in a useAnimatedStyle, you will notice flickering and lag

[danilvalov]

@lcarrettin

I'm experiencing lags after updating from 3.6.1 to 3.7.0

I see the same lags in v3.6.1.
On iOS these lags are much stronger.
I also checked v3.16.1, the same problem is there, too.

I think the problem is that all animation calculations for height changes and paddings use the CPU, not the GPU. But I could be wrong

[mhoran]

@szydlovsky I've added a reproducer to the reanimated-padding-animation-issue branch here: https://github.com/mhoran/react-native-scratch/tree/reanimated-padding-animation-issue. This is using Reanimated 3.16.3 (also see on 3.17.0) and react-native 0.76.3.

The issue gets more pronounced the more complicated the UI gets. The issue is not very pronounced in this reproducer, but you can still see it. On a real device with real content in a similar UI, the keyboard animation is extremely laggy when done using padding. transform provides acceptable performance, but comes with other downsides.

The reproducer is set up to use padding by default. Changing the KeyboardAvoidingView to use transform by uncommenting this line shows how the issue is limited to padding (and height / margin, as others reported.)

Screen recordings:
With padding
With transform

[mhoran]

On New Arch, even having a static value for padding (e.g. 0) in an animated style results in performance degradation as shown above.

[tjzel]

Hi @mhoran, @szydlovsky has moved to another project for the time being. Thanks for the repro and the recordings, they will be helpful. However, our hands are pretty full right now and I can't make any promises about the timeline this will be investigated. I'll forward the New Arch bit to @bartlomiejbloniarz since it might be some other underlying problem.

If the issue is blocking someone, please try troubleshooting it yourself and report the results/make a PR to fix it - it's the best way to make sure this is tackled fast. Don't hesitate to ask us for help if you need directions in investigating.

Just to leave a note here, animating margins and paddings can be very costly in terms of layout re-calculations. It might be the root of the lag here and the bottleneck could be something else than Reanimated in this case.

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[tjzel]

The bot really is something else...

[mhoran]

Thanks @tjzel. Understood re: padding animations. I have found a way to use transform for my purposes (KeyboardAvoidingView) however this does not work for all cases, where animated paddingBottom is preferable (transform with paddingTop may cause an undesirable jump in some cases). Fortunately for my case the view that requires animated paddingBottom is simple and the animation is fast. I can then use transform on the other view, for which animated paddingBottom is slow. However, depending on the layout, transform may not be appropriate, hence being able to animate padding in all cases would be desirable.

Re: New Arch, I was able to implement a workaround which minimizes the presence of paddingTop and seems to eliminate the performance issues for my use case. However, the solution is rather convoluted compared to what worked with Paper. See mhoran/weechatRN@cb4c1c0.