[ListView] performance with more complicated renderRow

[go1t]

I was trying to implement a real time filtering using textInput. However, the re-rendering of the ListView is incredibly slow (about 1 seconds after finish typing).

This is what the renderRow function returns: (I simplified it a lot from my real renderRow, still slow)

<View>
  <TouchableOpacity onPress={this.props.onSelect}>
    <View style={cellstyle}>
        <Image
          source={require('image!logo')}
          style={[
            styles.cellImage,
            {resizeMode: Image.resizeMode.contain}
          ]}
        />

      <View style={styles.textContainer}>
        <Text numberOfLines={2} lineHeight={1}>
          {this.props.item.name.trim()}
        </Text>
        <Text>
          {digits(this.props.item.price)}
        </Text>
      </View>
    </View>
  </TouchableOpacity>
  <View style={styles.cellBorder} />
</View>

I have tried to replace TouchableOpacity with View, but that still doesn't help improve the performance much.

[wangii]

Is it related to rowHasChanged?

[go1t]

my rowHasChanged was the same as the documentation:

rowHasChanged: (r1, r2) => r1 !== r2

[wangii]

assume each of your item has unique id:
rowHasChanged:(r1, r2)=> r1.item.id !== r2.item.id

[go1t]

I doubt it would make anything faster, since r1 !== r2 does the reference checking, which should be more optimal than r1.item.id !== r2.item.id where you have to reference the object for the id, and compare them.

[karanbhangui]

Any updates on this? Having similar performance issues.

[chirag04]

+1

[josebalius]

+1 for me as well, ListViews are becoming a bit of an issue in our app. Our renderRows contain the same if not more nodes than the example above.

[cyprusglobe]

+1 seeing this issue as well.

[thisbejim]

+1

Thank you for reporting this issue and appreciate your patience. We've notified the core team for an update on this issue. We're looking for a response within the next 30 days or the issue may be closed.

[robertjpayne]

This is a big issue for myself as well -- seems to be especially bad on older devices, newer devices don't seem to exhibit much issue with very complex rows.

[pukhalski]

+1 here. Tried SGListView instead of a standard one. A bit better, but it still feels like a hybrid app...

[Pajn]

I tried with a very simple row on android, just (item) => (<Viev><Text>{item.name}</Text></View>) and even then it's slow to unusable.