If I have a single column FlatList, LayoutAnimation properly animates deleting an element from the list by smoothly sliding up into place of the deleted item.
If I set FlatList prop numColumns={2} (or greater) to make a grid of items, deleting an item from the list no longer animates correctly via easing. When deleting an item now, the items in the grid after it fade out, then fade back in with the selected item now gone.
How do I make a multi-column FlatList animate deletions correctly?
renderItem({item,index}) {
return (
<ListItem
item={item}
index={index}
deleteTerm={() => this.deleteItem(index)}
search={() => this.onSearch(item)}
/>
)
}
deleteItem(index) {
LayoutAnimation.easeInEaseOut();
this.props.actions({type:'DELETE_TERM', payload: index});
}
render () {
return (
<ScrollView style={styles.container}
keyboardDismissMode={'on-drag'}
keyboardShouldPersistTaps={'always'}
>
<FlatList
keyboardShouldPersistTaps={'always'}
data={this.props.searchHistory}
renderItem={this.renderItem.bind(this)}
numColumns={2}
keyExtractor={(item) => item}
/>
</ScrollView>
)
}