FlatList does not re-render untill the list is scrolled

Question

I have a FlatList which is sourced by an array defined in the view's state. The list is filtered by filtering the original array and setting the array in the state with the new filtered array. But the re-render is only called when the list is scrolled. Is there a way to force re-render flatlists ?

import setsArr from '../../json/sets';
.
.
.
constructor (props) {
  super(props);
  this.state({
    arrToDisplay: setsArr,
  });
}
.
.
.
_filter = (filter,value) => {
  var newArr = setsArr.filter(function(){
                 return (el.filter === value)
               });
  this.setState({
    arrToDisplay: newArr, 
  });
}

renderOption = (data) => {
  return (
    <Text>{data.item.name}</Text>
  );
}
render () {
   return (
      .
      .
      .
      <FlatList
        data={this.state.arrToDisplay}
        renderItem={(item) => this.renderOption(item)}}/>
      .
      .
   );
}

score 0 · Answer 1 · answered Jun 08 '17 at 01:21

I found with ListView, FlatList, and SectionList, that changes to the datasource only rendered when the FlatList had a unique key.

I'll be happy if someone posts a proper answer but this is what I'm doing now:

<FlatList
  key={"mylist" + hashOfDataSourceObj}
  ...

see https://stackoverflow.com/a/31481960/7223

FlatList does not re-render untill the list is scrolled

1 Answers1