CODEWITHSUNDEEP
react-nativereact-native-listviewshoutem
Sebastian Auberger
Sebastian Auberger

Reputation: 480

React Native: Update ListView Row when props changes

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}
      />
    )

Upvotes: 0

Views: 2520

Answers (2)

airmiha
airmiha

Reputation: 161

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.

Upvotes: 6

Meysam Izadmehr
Meysam Izadmehr

Reputation: 3262

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.

Upvotes: 0

Related Questions