React Native remove item from ListView.DataSource

React Native remove item from listview

I must say, I spent a lot of time trying to understand how to properly remove an element from React Native ListView. But finally I figured out how.

The main problem was that after removing an item from datablob array I updated a dataSource¬†object¬†in component’s state and it behaved strange. It deleted the last item from the list, but after the reload it showed up correctly.

Updating the React Native DataSource correctly

To update the ListView’s DataSource properly I replaced it with a new DataSource object:

// removing the first element in the array
items.splice(0, 1); 

// create a new DataSource object
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => { r1 !== r2 }});

// update the DataSource in the component state
this.setState({
    dataSource : ds.cloneWithRows(items),
});

This approach fixed my issue with removing items from a list view.

Leave a Reply

Be the First to Comment!