You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When adding items in a flatlist with dynamic heights and having animations with MaintainVisibleContentPosition, there's jittering on the flatlist.
After slowing down the video, i found the flatlist renders the new item in one frame, then removes it and then animates it in properly.
I believe the root cause to be the new fabric engine as this was working on a previous version without new architecture.
I did find 2 potential fixes:
Setting a static height on the items, pointing the issue to only variable height items
Setting enableFabricCommitBranching to true, but this caused an issue with react navigation/screens going back, where the screen would unrender before the new one finished animating in.
Steps to reproduce
Install the reproductiion app on android
npm install
npm run android
Press "Add" multiple times at least 5, notice the jank in the animation
Description
When adding items in a flatlist with dynamic heights and having animations with MaintainVisibleContentPosition, there's jittering on the flatlist.
After slowing down the video, i found the flatlist renders the new item in one frame, then removes it and then animates it in properly.
I believe the root cause to be the new fabric engine as this was working on a previous version without new architecture.
I did find 2 potential fixes:
Steps to reproduce
React Native Version
0.85.3
Affected Platforms
Runtime - Android
Areas
Fabric - The New Renderer
Output of
npx @react-native-community/cli infoStacktrace or Logs
MANDATORY Reproducer
https://github.com/humaidk2/MVCPrepro
Screenshots and Videos
Normal video
normal.mp4
Slowed down to 10%
slow10.mp4
Slowed down to 5%
slow5.mp4