Animate addition and removal of items into the FlatList

[jamesxabregas]

trafficstars

I'm wondering if it would be possible to animate the addition and removal of items from the FlatList as described in this Reanimated tutorial.

There is already an Animated FlatList component in Renaimated that implements layout animations so potentially it might just be a matter of leveraging this in the DraggableFlatList code.

I'd tried using the methodology used to create the ReanimatedFlatList component in the link above but with DraggableFlatList as the internal component instead of the plain React Native FlatList but this didn't seem to work I presume because the CellRender had already been defined. I realise this would likely require some tinkering with the CellRenderer inside DraggableFlatList.

I'm going to tinker with this in a fork but was just wondering if you had any thoughts on approaching this and if you would be happy to accept a pull request if I can get it working?

[Profex1999]

I can confirm. I was trying to achieve the same result as you but with no success. It is related to how the component is internally structured. By Creating an AnimatedFlatList (the same way it is done in this library) it works

[computerjazz]

Good idea, it was a simple addition. Please try v4.0.0-beta.10 (published under beta tag): https://www.npmjs.com/package/react-native-draggable-flatlist/v/4.0.0-beta.10?activeTab=versions

added props: itemEnteringAnimation itemExitingAnimation itemLayoutAnimation

[computerjazz]

hm actually i have some more work to make sure that layout animations don't apply on drag reorder

[jamesxabregas]

hm actually i have some more work to make sure that layout animations don't apply on drag reorder

Yeah I actually came to the same conclusion. I was able to get the addition and removal animations to work fairly easily but then when dragging the animations would display twice; once on the drag, and then after the drag it would display the animation again as part of the layout reconfiguration.

I figured the only way to get it working would be to turn off the layout animations when a drag started and then to re-enable them after a drag had completed but it seems the animations are defined when the component mounts and can't be dynamically changed, as least as far as I can tell.

[computerjazz]

dang yeah, I was trying the same approach of not setting the layout prop when the drag is active (I was re-enabling it in onLayout, so, after all rendering takes place), but was seeing the same thing as you.

I think this is proof that the animation configs are only configured on mount: https://github.com/software-mansion/react-native-reanimated/blob/acf7429068c4f801eef41267c2a94b5515ec4ff8/src/createAnimatedComponent.tsx#L400

[computerjazz]

@jamesxabregas I finally figured out a super hacky way to achieve disabling/re-enabling layout animations by keying into the global object that reanimated uses to register layout animations: https://github.com/computerjazz/react-native-draggable-flatlist/blob/37ed93d2bc440144a6a62ce27544d5fa78a2814c/src/components/CellRendererComponent.tsx#L140-L143

I published it in the latest beta, but the enableLayoutAnimationsExperimental prop must be true for it to take effect, since i'm not sure how much we can trust the layout animation api to remain consistent across reanimated versions.

To make matters worse, I had to rely on a trial-and-error setTimeout value to re-enable layout animations. I was still seeing the buggy animations when I tried re-enabling layout animations in a useEffect after the drag became inactive again (and even resetting in a following onLayout still resulted in unwanted animations).

[SherifMega]

is there any specific date for v4 to be released and be ready ?

[computerjazz]

@SherifMega there is no specific date, I'm planning on releasing once it feels solid and I no longer have critical issues -- if you want to speed things along I'd be grateful for some help in testing/finding/fixing any bugs.

[SherifMega]

@computerjazz FYI: for new features in release 4 regarding entering & existing & layout animations

there's a critical issue in react-native-reanimated issueLink

[jamesxabregas]

This seems to be working fairly well with the latest beta release. Thank you @computerjazz .