ReactNative FlatList and SwipeOut performance

[ugendrang]

When the data count is 100, flatlist renders the record by batch as follows 0 to 10, 0 to 20, 0 to 30, 0 to 40 .... 0 to 100. So it tooks around 20 sec to render all the rows.

Issue1: During this time I could not perform swipe right action (ie I could not perform swipe action till all(100) rows are rendered). Issue2: Also i could see swipe performance lagging(ie swipe animation response is very slow) when i add the code line 'extraData= {this.state.activeRow}' to the Flat list. On re-rendering the flatlist due to state change in activeRow, I could not perform another swipe action till all 100 rows are rendered. `

< FlatList data={this.state.data} renderItem={this._renderRow} extraData= {this.state.activeRow} />

_renderRow({item, index}){
let swipeBtns = [
  {
text: 'Edit',
    backgroundColor: '#5DAE5D',
    underlayColor: 'rgba(0, 0, 0, 1, 0.6)',
 },
];

return (
    <View>
        <Swipeout right={swipeBtns}
          close={(this.state.activeRow !== index)}
          rowID={index}
          sectionId= {1}
          autoClose = {true}
          backgroundColor= 'transparent'
          sensitivity = {20}
          onOpen = {(secId, rowId, direction) => this.onSwipeOpen(rowId, direction)}
          onClose= {(secId, rowId, direction) => this.onSwipeClose(rowId, direction)}
          >
          <TouchableOpacity>
            <Text>Sample Test</Text>
          </TouchableOpacity>
        </Swipeout>
    </View>
    );
} 
`

`

onSwipeOpen(rowId, direction) {
    if(typeof direction !== 'undefined'){
        this.setState({activeRow:rowId});
    }
}

  onSwipeClose(rowId, direction) {
      if (rowId === this.state.activeRow && typeof direction !== 'undefined') {
          this.setState({ activeRow: null });
      }
  }`

Kindly suggest to solve Issue1 and Issue2 to improve the swipeout performance with flatlist.

[matt-leonardo]

I found this post also looking to performance related to Swipeout. In my case, I have 1000 records using Flatlist. I don't have any problem using the swipe action. The lists also render pretty quickly with Flatlist.

I my issue is: I have another another onPress event attached to the item which increases the badge count every time item is pressed. I noticed the refreshing of the badge count is not as fast as desire when I pressed the item. But when I take it away Swipeout. The onPress event fires up instantaneously and badge count updated.

I thought it might help.

[nandopacheco]

@matt-leonardo Thanks for share!

[bolan9999]

This may help you.

https://github.com/bolan9999/react-native-largelist

Features The performance of react-native-largelist is much better than FlatList and SectionList. Large data source supported, infinite data supported, super fast sliding support. Full cross-platform. Sticky Section support. Callback when Cell/Item enter/leave the safeArea support. List header/footer/empty support. Swipe out to edit Cell. Pull to Refresh and Scroll loading more. Scroll loading more custom view support, all data source load completed custom view support. Dynamic variable support, for example: size, contentOffset, currentSection, contentSize, height of Header/Footer, visibleIndexPaths and so on. Scroll to offset or index path. Reload data. Custom optimize parameters. More callbacks or dynamic variable can be added through a new issue.