Shaking and flikering while width and height are animated

[Gireslopez]

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]

Same issue

[AustineA]

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

[Apurba-Kumar-Ghosh]

Facing the same issue when animating element from 0% to 100% width. Has anyone found a solution for this?

[codegabk]

Same issue, any fix yet ?

[pavelbabenko]

Looks like the issue related to sentry Fix worked for me: https://github.com/software-mansion/react-native-reanimated/issues/5671#issuecomment-2293125830