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

software-mansion / react-native-reanimated

React Native's Animated library reimplemented

https://docs.swmansion.com/react-native-reanimated/

MIT License

8.82k stars 1.29k forks source link

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

Open domenicoprestia opened 6 months ago

domenicoprestia commented 6 months ago

Description

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

Steps to reproduce

Create an animation on a padding value or a height value with 2 states
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

github-actions[bot] commented 6 months ago

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?

pavelbabenko commented 6 months ago

Same issue

lcarrettin commented 6 months ago

I'm experiencing lags after updating from 3.6.1 to 3.7.0

szydlovsky commented 2 months ago

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 commented 3 weeks ago

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