ListView leaving gaps when re-rendering

I have a ListView that dynamically changes data based on a filter. When the user presses a button on the side menu, the data will filter out some of the objects. However, when the ListView re-renders, it seems to leave large gaps. I feel that this is a bug, as I’m using a straightforward implementation.

 renderRow = (item) => {
                  const tempArray = []
              if (item.events.length) {
                tempArray.push(item)
              } else {
                return null
              }
              return (
                <View
                  style={[styles.listTitle, { backgroundColor: '#FFF', padding: 8}]} host="eventsList">
                  <Text>{tempArray[0].name}</Text>
                </View>
              )
}

<ListView
            style={{backgroundColor: 'white'}}
            name="eventsList"
            dataSource={this.state.dataSource}
            renderRow={this.renderRow}
            scrollRenderAheadDistance={200}
            renderDistance={100}
            pageSize={1}
            initialListSize={10}
            stickyHeaderIndices={[]}
            onEndReachedThreshold={100}
            removeClippedSubviews
            automaticallyAdjustContentInsets={false}
          />

React Native version: 0.39.0

[JensDebergh]

I’ve had similar problems with huge datasets the only way I was able to make it work was clear the datasource.

First: dataSource.cloneWithRows([]); Second run: dataSource.cloneWithRows(items);

This probably has a huge impact on performance but atleast my rows now render properly on multiple runs

Related image:

[hramos]

Closing as ListView is deprecated in 0.43. Use FlatList.