React Native: Update ListView Row when props changes

Question

I do have a ListView component with a renderRow() function. My custom ListBountiesView component which renders a ListView Row also takes a prop called cr and displays some content in each row depending on the value of cr.

The problem is that when this.props.customerRelationship changes its value, the ListView rows do not get updated.

I am doing it with: this.props.customerRelationship.points += responseJson.points;

I guess that ListView only updates when the data attribute changes, but how can I move props to my renderRow component so that they also update the ListView?

SuperScreen.js

renderRow(bounty) {
  const { customerRelationship } = this.props;
  return (
    <ListBountiesView
      key={bounty.id}
      bounty={bounty}
      cr={customerRelationship}
      onPress={this.openDetailsScreen}
    />
  );
}

render() {
    const { bounties } = this.props;

    return (
      <ListView
          data={bounties}
          renderRow={this.renderRow}
          loading={loading}
      />
    )

You're not updating your `dataSource` anywhere that's why it doesn't change. As other's have suggested, you need to use other lifecycle events to capture the change. Alternatively you could look into using `FlatList` which doesn't require you to setup a `dataSource` object and just takes an array - that way it is automatically updated when your props change. — sooper, Apr 30 '17 at 19:07

score 6 · Accepted Answer · answered Apr 30 '17 at 17:20

The ListView refreshes the data source when the data prop gets a new reference:

 componentWillReceiveProps(nextProps) {
    if (nextProps.data !== this.props.data) {
      this.setState({ dataSource: this.listDataSource.clone(nextProps.data) });
    }

    if (nextProps.loading !== this.props.loading) {
      this.setLoading(nextProps.loading);
    }
  }

Similarly, React Native's ListView refreshes when its data source changes. This was discussed on their GitHub and in many other threads. The generally accepted workaround is to create a new data array. In your case, do it in componentWillReceiveProps whenever customerRelationship changes.

score 0 · Answer 2 · answered Apr 30 '17 at 13:32

Move your customerRelationship to bounty object. Each bounty should have this property, then check it's value changed in the rowHasChanged. Other way is to check customerRelationship in componentWillReceiveProps function, if it's value changed clone bounties so all of it's child have new object reference.

React Native: Update ListView Row when props changes

2 Answers2