React Native Flatlist - VirtualizedList：您有一个很难更新的大型列表

Question

I have a flat list with large content and when I am scrolling down after 10 - 15 pages on debugger console i have getting this:

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {dt: 582, prevDt: 1651, contentLength: 15187.5}

FYI: I have tried to use PureComponent and more ways but no one is helpful I am getting the same output in console.

Why I am getting this and how can solve this?

This is my code :

<FlatList
    data={outfits}
    keyExtractor={(item, index) => index}
    numColumns={2}
    initialNumToRender={5}
    getItemLayout={(outfits, index) => (
       { length: 50, offset: 50 * index, index }
    )}
    extraData={this.state.extraData}
    renderItem={({item,index}) => <Items item={item} index={index}/>}
    onRefresh={this.handleRefresh}
    refreshing={this.state.refreshing}
    onEndReached={this.handleLoadMore}
    onEndReachedThreshold={20}
    ListFooterComponent={this.renderFooter}
/>

Answer 1

I had the same issue with Content in https://docs.nativebase.io and I changed Content to View and used PureComponent . And now it's work!

Answer 2

please use RefreshControl and props refresh control in Content native base

 import { StyleSheet, RefreshControl } from 'react-native';

...
render(
  <Content refreshControl={<RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh.bind(this)} />}>
       <List .../>
      </Content>
...
)