CODEWITHSUNDEEP
reactjsreact-nativereact-native-flatlist
Jun
Jun

Reputation: 3432

performance issue with React-Native flatlist

I am working with React-Native flatlist and the problem I encountered is rendering issue. Let's assume that we have to add 2000 items in flatlist.

ScrollToIndex(1000) does not get result because it's out of viewport.

Is there any solution to get result?

Upvotes: 0

Views: 2608

Answers (2)

Lew Keyang
Lew Keyang

Reputation: 11

I have used scrollToIndex for a FlatList of days in a month, needed to auto scroll to current day on page render. Lets not mention your 1000 items, even 28 items(days) in February could not be rendered on load for me.

You could make sure the onScrollToIndexFailed on the FlatList is set so it can run the scrollToIndex function with a scrollToEnd repeatedly until it succeeds (as the list is rendering).

The other way would be to filter your list with the item you are scrolling to, or reducing the items in your list to reduce the rendering, unless you really need to have that scroll animation past 1000 items.

Upvotes: 0

Sinapcs
Sinapcs

Reputation: 2745

it's good to use getItemLayout prop for better performance.

getItemLayout is a function that is given two parameters:

data, which is the data shown on your list (it’s the same as the data prop you pass into your list) and index, the index of the row for the row in question.

It’s supposed to return an object with three props: offset, the distance from the top of the first row to the top of the row at index index; length, which is the height of your row and index, which is simply the index parameter passed into the function.

For FlatList, this function is relatively simple to write. If all of your rows are of the same height, you can simply return {offset: ROW_HEIGHT * index, length: ROW_HEIGHT, index}. If they aren’t or if you have separators between your rows, it gets slightly more complicated but it’s still obvious what you should return.

you can find out more here :

https://medium.com/@jsoendermann/sectionlist-and-getitemlayout-2293b0b916fb

https://facebook.github.io/react-native/docs/performance.html#listview-initial-rendering-is-too-slow-or-scroll-performance-is-bad-for-large-lists

 getItemLayout = (data, index) => {
            return { length: 200, offset: 200 * index, index };
          }

here is a function you can use as getItemLayout prop of FlatList. in this function you are saying to FlatList that your rows heigh must be 200. it's good for performance because it has no need to calculate the height of rows.

Upvotes: 3

Related Questions