0

I have created a list view with selectable rows but when the rows go beyond 10 the selection stops working.

Here it is with only 9 items added to the list: enter image description here

// Individual row function
row(data, secId, rowId) {
  // place in queue
  let place = Number(rowId) + 1;

  // set the selected queuer to show its page
  let setSelectedQueuer = () => {
    this.setState({
      selectedKey: data._key,
      editName: data.name,
      editParty: data.partySize,
      editPhone: data.phoneNumber,
      editNotes: data.notes
    });
  }

  return (
    <Queuer
      key={data._key}
      queuerKey={data._key}
      place={place}
      name={data.name}
      selectedKey={this.state.selectedKey}
      createdAt={data.createdAt}
      partySize={data.partySize}
      onPress={setSelectedQueuer}
    />
  );
}

This sets each rows key when created and when clicked changes the state to then be compared on each row individual row item.

let isSelected = () => {
  if (this.props.queuerKey === this.props.selectedKey) {
    return Colors.info;
  } else {
    return 'white';
  }
}

Working great until a tenth item is added and it just stops. enter image description here

Clicking on other row items but the style is not changing. Something weird is happening when the 10th item is added.

cwahlfeldt
  • 580
  • 5
  • 14
  • interesting more code please, and please move the following code out of row function it can decrease performance of your app. "let setSelectedQueuer = () => { this.setState({ selectedKey: data._key, editName: data.name, editParty: data.partySize, editPhone: data.phoneNumber, editNotes: data.notes }); } " – Manjeet Singh Mar 24 '17 at 19:51

1 Answers1

0

Solved it! I didn't set the initialListSize on my listview. initialListSize defaults to 10 and stops rerenders after that size has been reached.

This helped: React Native ListView doesn't rerender for large data

Community
  • 1
  • 1
cwahlfeldt
  • 580
  • 5
  • 14