CODEWITHSUNDEEP
reactjsreact-native
swastik
swastik

Reputation: 176

Re-rendering ListView

I'm trying to re-render a ListView when the data changes (i.e. through a search or some other event).

Initially, the state looks something like this:

let source = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})

return {
  source: source,
  loading: false
}

When I get updated data, I try to update the state like this:

let data = this.state.source.cloneWithRows([])
this.setState({ source: data })

It's an empty array in this example. The re-render is triggered but the ListView doesn't change at all. The items are exactly the same.

I've gone through the documentation, looked at some code, and tried a few approaches. Nothing has worked so far. Is there something I'm missing?

Upvotes: 1

Views: 192

Answers (1)

Nishanth Shankar
Nishanth Shankar

Reputation: 1976

Th problem I see is that you are overwriting dataSource object with data, in your. I'm not sure what your data source in ListView is. new ListView.DataSource need not be a state. You can try the following code

initial 

this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
var source = this.dataSource.cloneWithRows(<initial source>)
this.setState({source}) // equivalent of this.setState({source : source})

next update

var source = this.dataSource.cloneWithRows([])
this.setState({source}) // equivalent of this.setState({source : source})

ListView component

<ListView
 dataSource = {this.state.source}
 ... // other properties
 />

Upvotes: 1

Related Questions