No layout animation on last item of list components

[jcalem]

Description

When removing the last item in a list component (ScrollView/FlatList) with layout animations, I expect the list to animate and scroll to the new end of the list. Instead, the list simply jumps to the newly computed last end, resulting in a "glitchy" affect for the UX.

So far, I've been able to achieve the desired behavior with regular LayoutAnimations (see below). However, I'd like to switch to reanimated for this affect since LayoutAnimations is unreliable and often unintentionally affects other components.

This is a common usage pattern for paginated lists, especially when displaying loading indicators in the footer.

React Native's Layout Animation: Snack: https://snack.expo.dev/@jcalem/layout-animation

https://github.com/software-mansion/react-native-reanimated/assets/13872364/a8a077d0-7e51-4509-9850-557d0567ecfc

Reanimated Layout Animation: Snack: https://snack.expo.dev/@jcalem/layout-animation---reanimated

https://github.com/software-mansion/react-native-reanimated/assets/13872364/01d10092-4828-438f-aa0e-9172c0ab6ac7

Steps to reproduce

1. Open the snack
2. Create a bunch of items that extend past the screen height
3. Scroll to the last item and click to remove it

Snack or a link to a repository

https://snack.expo.dev/@jcalem/layout-animation---reanimated

Reanimated version

3.3.0

React Native version

0.71.3

Platforms

Android, iOS

JavaScript runtime

None

Workflow

Expo managed workflow

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[jcalem]

@Latropos any update on this issue? Or any potential workarounds?

[Latropos]

@jcalem Unfortunately the problem is still open

[crystalarcus]

@Latropos I am having a similar problem, I think problem is not with last item, but item being last in visible screen, see how the last item in visible area of flatlist don't animate if its only half visible, but it animates if it more than half visible :

https://github.com/software-mansion/react-native-reanimated/assets/150055488/67f53c9e-22ba-45ba-85ab-df1cda4f5c0a

Last item does the layout animation only if its more than half visible.

-------------------------------------------------------EDIT---------------------------------------------------------- Well.....so sorry but turned out I had removeClippedSubviews={true} in my Animated.FlatList, due to which, it did not rendered items below the last, hence there was no animation. After I set it to removeClippedSubviews={flase} and problem was gone. I will keep this comment just in case if anyone else gets this problem, check the removeClippedSubviews property is set to false.

[nimeshmaharjan1]

Still not working for me the last item is clipped half way cannot scroll more

[crystalarcus]

@nimeshmaharjan1 I found a work around, add paddingBottom to contentContainerStyle, just enough so your item will appear Fully.

<Animated.FlatList ..............other props..........
             contentContainerStyle={{ paddingBottom: 400 }} />

It worked for me, tell if this works for you, so other's can try it too !

[kishanhirani]

Works well. but only when you have

<Animated.FlatList 
      ...props
      itemLayoutAnimation={LinearTransition}
      contentContainerStyle={{ paddingBottom: 400 }}
      removeClippedSubviews={false}
/>

here the padding will change according to your item size so experiment with it