react-nativeflatlist

React Native FlatListProps.getItemLayout do not load more items

I am working with a large list in React native, I using FlatList to show it.

But when I use getItemLayout to improve performance, the list doesn't load more elements behind.

If I remove the getItemLayout then FlatList still works as usual.

I am using React Native 0.66.5.

This is Snack Expo Example

Solution

  • Change this line

    offset: (data?.length ?? 0) * ITEM_HEIGHT,

    to this

    offset: idx * ITEM_HEIGHT,

    offset indicates the distance from the top of the list to the element to be rendered. Its value should be dependent on the index of the element. It does not make sense to set this value to (data?.length ?? 0) * ITEM_HEIGHT for all the list elements.

    Refer to the usage on the documentation. And check this SO answer for more details.