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
– sooper, Commented Apr 30, 2017 at 19:07

airmiha · Accepted Answer · 2017-04-30 17:20:33Z

6

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.

answered Apr 30, 2017 at 17:20

airmiha

1611 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sooper Over a year ago

cloneWithRows

Meysam Izadmehr · Accepted Answer · 2017-04-30 13:32:14Z

0

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.

answered Apr 30, 2017 at 13:32

Meysam Izadmehr

3,2601 gold badge19 silver badges25 bronze badges

Collectives™ on Stack Overflow

React Native: Update ListView Row when props changes

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related