React native flatlist feel so slow when List contain Images

user_13676437 0
Viewed 729

I use 64x64 image for avater.it was very tiny size. by My app frame drop to 25-35 fps when scrool. How can I optimize flatList image.?

  <FlatList
        data={this.props.data}
        extraData={{}}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
        maxToRenderPerBatch={5}
        ListHeaderComponent={
          <CommentsTextInput $comments={this.props.$comments} />
        }
        stickyHeaderIndices={[0]}
        initialNumToRender={5}
        removeClippedSubviews={true}
        updateCellsBatchingPeriod={25}
        windowSize={11}
      />
react-native reactjs javascript
1 Answers

You can use getItemLayout prop to reduce the workload the list does when scrolling https://reactnative.dev/docs/flatlist#getitemlayout

Ensuring images are cached will help. does this to an extent, but you may find using a like like react-native-fast-image increases performance here (warning - be careful with this lib though and it can have memory issues - make sure you profile to make sure it is working as expected) https://github.com/DylanVann/react-native-fast-image

Avoid additional renders for your list items. Use PureComponent for class based components, or memo for functional ones. https://reactjs.org/docs/react-api.html#reactpurecomponent https://reactjs.org/docs/react-api.html#reactmemo

Use keyExtractor or add your keys carefully, without repeats to ensure that react can optimise changes to your list.

user_49247670
Related