Animate FlatList Grid for delete functions

1.2k views Asked by At

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

There are 0 answers