Layout Animation with flatlist numColumns > 1

Description

Hey i was trying to make layout animation with flatlist it works just fine with numColumns 1 but if i try 2 or more than 1 it doesn’t work anymore when i delete item or add new one the whole item re render which not happening when numColumns set to 1

Expected behavior

when add new item or delete it should animate the other item to re order them not re render the whole list again!.

Actual behavior & steps to reproduce

https://user-images.githubusercontent.com/70872870/148182776-944a7e96-8179-4893-8c99-9189288c6e84.mov

https://user-images.githubusercontent.com/70872870/148182794-d7820ebb-8029-487e-9b51-2b71aeabca29.mov

Snack or minimal code example

Flatlist -:

<Animated.FlatList
          key={columns ? "oneRow" : "twoRow"}
          data={Tasks.data}
          numColumns={columns ? 1 : 2}
          showsVerticalScrollIndicator={false}
          itemLayoutAnimation={Layout}
          style={styles.Wrapper}
          renderItem={({ item, index }) => (
            <List
              key={index}
              index={index}
              item={item}
              DeleteHanlder={DeleteHanlder}
            />
          )}
        />

item itself -:

<Animated.View
        entering={FadeInDown.springify().delay(index * 150)}
        exiting={FadeOutUp.springify()}
        .....

Package versions

• React Native: 0.64.3
• React Native Reanimated: ~2.3.1

Affected platforms

• [✅] iOS

[Majiedo]

i found work around if anyone interesting i’ll show you guys when i’m back home…

[Majiedo]

anyway the solution was to replace flatlist with scrolllist and make the width of the content half of the screen so it will be two columns and add the layout prop to animated view for the item.