React Native ListView not updating on data change

Question

I\'m not sure why the ListView isn\'t updating when my data changes. I\'ve striped my code down to make it easy to read and created a rnplay:

https://rnplay.org/app

Answer 1

Looked like this would be the solution you need React-Native Updating List View DataSource

But I played around with it a little and also couldn't get it working. https://rnplay.org/apps/sk_ukQ

Not sure if it will help, but I tried this setting the array as blank and am able to clear the entire list... this.setState({dataSource: this.state.dataSource.cloneWithRows([])});

I think for some reason it's using a cached version of the original array rather than the updated array. Just not sure why.

Answer 2

Here's a link to a working version:

https://rnplay.org/apps/GWoFWg

These are the changes I need to make to fix it:

constructor(props){
    super(props);
    var ds = new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
    });
    this.state = {
        dataSource: ds.cloneWithRows(foods),
        db: foods,
    };
}

and this:

onCollapse(rowID: number) {
    var newArray = this.state.db.slice();
    newArray[rowID] = {
        key: newArray[rowID].key,
        details: newArray[rowID].details,
        isCollapsed: newArray[rowID].isCollapsed == false ? true : false,
    };
    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(newArray),
        db: newArray,
    });
}