CODEWITHSUNDEEP
javascriptreactjsreact-native
Stone
Stone

Reputation: 291

React native flatlist feel so slow when List contain Images

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}
      />

Upvotes: 3

Views: 2384

Answers (2)

canpoint
canpoint

Reputation: 859

For android devices, I have used resizeMethod="resize" to overcome this problem. Hope it helps!

Upvotes: 0

James Trickey
James Trickey

Reputation: 1447

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.

Upvotes: 2

Related Questions