react native - How to add/Delete item into ListView?

Question

We can create a datasource for ListView like this

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});  
var dataSource =  ds.cloneWithRows(['row 1', 'row 2']), };

But if I want to add items or delete items from datasource, how can I do that? Do I need to always call cloneWithRows with updated array?

Answer 1

Yes, call cloneWithRows(...)

The React Native documentation doesn't cover the ListViewDataSource object, so it can be helpful to read the comments in the source code to see how this works.

Some notes which may be helpful:

• cloneWithRows(data) is a bit misleadingly named because doesn't just create a clone of the data as the name suggests.

• Instead, it tries to compare the new data rows with the existing rows (if any) in the dataSource, and figures out whether there are new rows to insert, or existing rows that need to be replaced or removed.

• The source code comments note that the data in the data source is immutable by design, so the correct way to change it is to specify an updated data source, i.e. call cloneWithRows(...).

It may seem unintuitive to pass the entire list just to change a few rows, but there are a couple reasons for why it makes sense:

• First, it comports with React's overall flux-based architecture where the focus is on setting states and allowing components to figure out how to mutate themselves to reflect the new state (think of how this.props or this.state works). You are free to change the data array however you like outside the ListView component, but once you are ready to update the component, it's a decent flux approach to pass the entire state into the component so it can update itself.

• Second, it's decently efficient. The ListView does the heavy row differentiation in the Javascript before it starts the rendering process, and then renders one row at a time (you can adjust this) during the rendering cycle, to reduce frame drops.

• Third, nothing here precludes the possibility of supporting methods like .addRow(..) in the future. The point is that the current implementation isn't a bad start, because it provides a state-based interface that allows developers not to worry about how the list component mutates between states.