CODEWITHSUNDEEP
listviewreact-native
Daniel Masarin
Daniel Masarin

Reputation: 301

Filter ListView React-Native

I'm Trying to filter (using fuzzy package) a ListView in react-native. My code is like that:

getInitialState: function() {
  return {
    dataSource: new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2
    })
  }
},

componentDidMount: function() {
  Contacts.registerChanges((contacts) => {
    this.setContacts(contacts, this.props.filter)
  })
  Contacts.loadContacts()
},

setContacts: function(contacts, filter) {
  var filteredContacts = fuzzy.filter(
    filter,
    contacts,
    options)

  this.setState({
    dataSource: this.state.dataSource.cloneWithRows(filteredContacts)
  })
}

componentWillReceiveProps: function(props){
  this.setContacts(Contacts.getContacts(), props.filter)
},

render: function() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <ContactItem contact={rowData.original} />}
      style={styles.container}
    />
  )
}

When I run the code everything is OK until I try to change the filter value. When the filter value changes I get the following error:

Attempt to read from field 'int.android.view.ViewGroup$LayoutParams.width' on a null object reference.

I have no idea what's happening. I'm running it in Android.

Upvotes: 2

Views: 1483

Answers (1)

pomo
pomo

Reputation: 2301

I've found the same problem with 0.19, sample code here to illustrate:

https://github.com/npomfret/react-native-bug-reports/tree/master/ListViewUpdatingBug

I've put it on product pains - please up vote!

https://productpains.com/post/react-native/listview-crashes-when-listviewdatasource-is-updated-with-example-code/

Upvotes: 1

Related Questions