Layout Transitions does not work with custom list (FlashList)

[Bayramito]

Description

Layout transitions does not work at all with custom list component that you created via Animated.createAnimatedComponent like FlashList.

It works with Animated.FlatList but has some limitations like if you use numOfColumns, does not work again.

AnimatedFlashList example (NOT WORKING)
https://github.com/user-attachments/assets/6637373e-caf0-4f46-b465-02d269be951a

Animated.FlatList with numOfColumns (NOT WORKING)
https://github.com/user-attachments/assets/3fde8556-6a60-4143-8b9a-9e2f4525553c

Animated.FlatList regular (WORKING)
https://github.com/user-attachments/assets/48d41cde-78a8-4d29-9998-47ead828ff26

Steps to reproduce

1. Boxes are clickable, once you click one of them, its being removed from the list
2. Try with AnimatedFlashList component in reproducable
3. Try with Animated.FlatList by passing numOfColumns

Snack or a link to a repository

https://github.com/Bayramito/reproducables

Reanimated version

4.14.0

React Native version

0.74.3

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[MatiPl01]

Hey! Thank you for the detailed issue description. I was able to reproduce the issue and I was looking for the solution to the problem, but it might be impossible to implement.

FlashList uses custom CellRenderer native component, which is used as a wrapper for item components rendered in the list. It doesn't support layout animations, thus, list items cannot be animated using layout animations.

When it comes to the Animated.FlatList, there is a difference in how react native renders list items when numColumns is greater than 1. For a single-column list, every list item is rendered within a CellRendererComponent, which can be customized by passing the CellRendererComponent component implementation as a property of the FlatList. This is what Animated.Flatlist does under the hood, it just passes creates a custom CellRendererComponent with the specified layout animation.
For a mutli-column FlatList, react-native adds another wrapper for the whole row of items and wraps this row within CellRendererComponent instead of wrapping all list items. In such a case, layout animations don't work because list items are rendered within different parent (row) components when list items are added/removed. Because the parent changes, layout animation does not work.

tl;dr

FlatList layout animations work only with single-column lists.

We would have to add this remark to the docstring of the itemLayoutAnimation property.

[Bayramito]

Hey! Thank you for the detailed issue description. I was able to reproduce the issue and I was looking for the solution to the problem, but it might be impossible to implement.

FlashList uses custom CellRenderer native component, which is used as a wrapper for item components rendered in the list. It doesn't support layout animations, thus, list items cannot be animated using layout animations.

When it comes to the Animated.FlatList, there is a difference in how react native renders list items when numColumns is greater than 1. For a single-column list, every list item is rendered within a CellRendererComponent, which can be customized by passing the CellRendererComponent component implementation as a property of the FlatList. This is what Animated.Flatlist does under the hood, it just passes creates a custom CellRendererComponent with the specified layout animation. For a mutli-column FlatList, react-native adds another wrapper for the whole row of items and wraps this row within CellRendererComponent instead of wrapping all list items. In such a case, layout animations don't work because list items are rendered within different parent (row) components when list items are added/removed. Because the parent changes, layout animation does not work.

tl;dr

FlatList layout animations work only with single-column lists.

We would have to add this remark to the docstring of the itemLayoutAnimation property.

Thank you for the detailed information. It is npw clear why cannot be possible.
numOfColumns issue is not that important for my case tho, since i can replicate the columns by using flexWrap

[JustJoostNL]

Is there a workaround for using FlashList with react-native-reanimated , and then specifically layout transitions?

[MatiPl01]

Is there a workaround for using FlashList with react-native-reanimated , and then specifically layout transitions?

Rather not. I looked for quite a while on the source code of the @shopify/flash-list and recyclerlistview, which is internally used by the @shopify/flash-list library. I tried replacing all wrapper View components that they add for list items with Animated.View components with the layout transition but it didn't help.

I might be wrong but I think that the main problem is that flash list re-renders components within different parent container when the order of items changes, so the layout of list items is not re-calculated.

You can try yourself to look at the source code of the @shopify/flash-list library and see if you can come up with a solution.