React Native ListView row not re-rendering after state change

Question

React Native ListView: Rows are not re-rendering after datasource state has changed.

Here is a simplified version of my code:

render(): {
  return <ListView
    dataSource={this.state.DS}
    renderRow={this.renderRow}/>
}

renderRow(item): {
  return <TouchableOpacity onPress={() => this.handlePress(item)}>
    {this.renderButton(item.prop1)} 
    </TouchableOpacity>
}

renderButton(prop1): {
  if (prop1 == true) {
    return <Text> Active </Text>
  } else {
    return <Text> Inactive </Text>
  }
}

handlePress(item): {
  **Change the prop1 of *item* in an array (clone of dataSource), then**
  this.setState({
    DS: this.state.DS.cloneWithRows(arrayFromAbove)
  })
}

According to Facebook's example, ListView is supposed to rerender every time data source is changed. Is it because I'm only changing a property of an item in data source? It seems like renderRow function is not re-rendering, but render() function is from datasource change.

Thank you.

Answer 1

react is smart enough to detect changes in dataSource and if the list should be re-rendered. If you want to update listView, create new objects instead of updating the properties of existing objects. The code would look something like this:

let newArray = this._rows.slice();
newArray[rowID] = {
  ...this._rows[rowID],
  newPropState: true,
};
this._rows = newArray;

let newDataSource = this.ds.cloneWithRows(newArray);
this.setState({
  dataSource: newDataSource
});

You can read more about similar issue on Github