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>
)
}