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?

Mathew

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.

Mispickel

Thanks for the explanation! I'm very confused by the name. Could you be more specific on how to update some information in a row? – Lamm

What about lists with 10,000's of rows? Won't the performance block the UI thread? – Sitdown

Who scrolls 10,000 rows in one go? – Blenny

Answer 2

If you look at the expanded Movies example from the React Native tutorial, it implements searching which fetches new movies from a remote API. That means that every search will refresh the datastore, effectively adding or removing items. The exact place this happens is here:

getDataSource: function(movies: Array<any>): ListView.DataSource {
    return this.state.dataSource.cloneWithRows(movies);
}

https://github.com/facebook/react-native/blob/master/Examples/Movies/SearchScreen.js#L209

So it looks like your way is the recommended method.

Corticate

oh yea..looks like thats the only way!!..But then there should be some way..coz like this I might need to manage the state like scroll position etc... – Mathew

Good point, but you might be able to do that manually by getting the ListView's ScrollView scroll position and then setting it after the datastore updates. I agree that would be a bit clunky and it'd be better if you could do this automatically. Unless someone on the RN team can give a better answer I'd suggest opening an issue on the Github tracker – Corticate

Actually to be fair, it seems like this is a manual process even on fully-native iOS: https://mcmap.net/q/434526/-remembering-scroll-position-on-uitableview – Corticate

now it makes more sense..Anyways I would prefer building a wrapper over this so that RN is much more powerful with this kind of feature..I will have a enhancement suggestion there... Lets see how they respond to it... – Mathew