Shaking and flikering while width and height are animated

Gireslopez commented 2 months ago

Description

When the width and height of a view are animated, and it has many children in absolute position, the children shake and/or flicker during the animation. This behavior becomes more noticeable with a greater number of children.

https://github.com/software-mansion/react-native-reanimated/assets/123782837/3370e86d-e7e2-4675-ba06-557ccc78943d

Steps to reproduce

Press any of the buttons in the example to start the animation

Snack or a link to a repository

https://snack.expo.dev/@gires/reanimated-example

Reanimated version

3.8

React Native version

0.73.6

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

Release app & production bundle

Device

Real device

Device model

Realme 7 5G (Android 12), Moto G6 (Android 9), Poco X3 Pro (Android 12)

Acknowledgements

Yes

pavelbabenko commented 2 months ago

Same issue

AustineA commented 1 month ago

Same issue here. Animating the parent height causes the child element to jitter.

software-mansion / react-native-reanimated