FlatList is not rendering the complete list of items.

[gokulravi2010]

Description

It seems that there is a bug on the react-native flatlist while trying to render a list of items. Sometimes only some of the list items are displayed.
When there are interactions such as state changes, there is an update in the list and all the list items are displayed properly.

React Native Version

0.72.4

Output of npx react-native info

System:
Binaries:
Node:
version: 16.20.0
Yarn:
version: 1.22.19
npm:
version: 8.19.4

SDKs:
iOS SDK:
Platforms:
- DriverKit 22.2
- iOS 16.2
- macOS 13.1
- tvOS 16.1
- watchOS 9.1
Android SDK:
API Levels:
- "23"
- "28"
- "29"
- "30"
- "31"
- "32"
- "33"
- "34"
Build Tools:
- 29.0.2
- 30.0.2
- 30.0.3
- 31.0.0
- 33.0.0
- 34.0.0

Languages:
Java:
version: 11.0.15
Ruby:
version: 2.6.10
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.4
wanted: 0.72.4
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Steps to reproduce

We are using a FlatList to render a List of 500-1000 items based on a dynamic response. We are updating the states based on navigations and data filter.
However sometimes in the initial load of the page the Flatlist is rendering only 5 items and it is unable to render the remaining items when scrolling down.

When there are state changes after initial load of data, there is an update in the list and all the data items are displayed properly.

Snack, screenshot, or link to a repository

Attaching an example link only for depicting the flatlist configuration we use.
https://stackoverflow.com/questions/77036267/issue-flatlist-rendering-only-few-items-in-the-list

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[lunaleaps]

The StackOverflow link mentions removing removeClippedSubviews prop, have you tried that?

Can you provide more details about when it happens as it sounds not consistent.

There a couple things that sound weird to me.

1. You providing an initialNumToRender of 10 and it only rendering 5 items -- can you provide a minimal repro of that? I haven't seen this behavior before
2. It sounds like the scroll handler isn't getting triggered to batch the next update to render. Can you investigate if that is the case?

[singlamayank]

I'm also facing the same issue after upgrading to React Native to 0.72.4. FlatList is only rendering the number of items defined in 'initialNumToRender'. Rest of the items are not getting rendered, so I'm not able to scroll over those items.

[prateekraj]

I'm also facing the same problem. I upgraded my react native from 0.63..3 to 0.72.4 and suddenly my Flatlist stopped rendering views. Before upgrade It was working absolutely fine.

<FlatList
horizontal
data={reviewQuestionArray}
disableIntervalMomentum={true}
ref={ref => (this.flatListRef = ref)}
// onViewableItemsChanged={this.onViewableItemsChanged }
viewabilityConfig={{
itemVisiblePercentThreshold: 50,
}}
onMomentumScrollEnd={this.onScrollEnd}
onEndReached={this.loadMoreData}
//disableVirtualization = {true}
initialNumToRender={1}
pagingEnabled
keyExtractor={keyExtractor}
getItemLayout={getItemLayout}
maxToRenderPerBatch={10}
windowSize={3}
snapToInterval={WINDOW_WIDTH}
renderItem={({ item, index }) =>

}
/>

[prateekraj]

I'm also facing the same problem. I upgraded my react native from 0.63..3 to 0.72.4 and suddenly my Flatlist stopped rendering views. Before upgrade It was working absolutely fine.

<FlatList horizontal data={reviewQuestionArray} disableIntervalMomentum={true} ref={ref => (this.flatListRef = ref)} // onViewableItemsChanged={this.onViewableItemsChanged } viewabilityConfig={{ itemVisiblePercentThreshold: 50, }} onMomentumScrollEnd={this.onScrollEnd} onEndReached={this.loadMoreData} //disableVirtualization = {true} initialNumToRender={1} pagingEnabled keyExtractor={keyExtractor} getItemLayout={getItemLayout} maxToRenderPerBatch={10} windowSize={3} snapToInterval={WINDOW_WIDTH} renderItem={({ item, index }) => } />

My flatlist worked finally. You have to put an empty check before you render flatlist "reviewQuestionArray.length >0".

(reviewQuestionArray.length>0) &&
<FlatList
horizontal
data={reviewQuestionArray}
disableIntervalMomentum={true}
ref={ref => (this.flatListRef = ref)}
// onViewableItemsChanged={this.onViewableItemsChanged }
viewabilityConfig={{
itemVisiblePercentThreshold: 50,
}}
onMomentumScrollEnd={this.onScrollEnd}
onEndReached={this.loadMoreData}
//disableVirtualization = {true}
initialNumToRender={1}
pagingEnabled
keyExtractor={keyExtractor}
getItemLayout={getItemLayout}
maxToRenderPerBatch={10}
windowSize={3}
snapToInterval={WINDOW_WIDTH}
renderItem={({ item, index }) =>

}
/>

[nartjie101]

Based on the answers above, I created a custom component to fix the issue:

import React, { useCallback } from 'react';
import { FlatList, ScrollView, FlatListProps } from 'react-native';

interface Props extends FlatListProps<any> {}

export default React.memo<Props>((props: Props) => {
    const { ListEmptyComponent, ...rest } = props;

    const renderComponent = useCallback((component: any) => {
        return component ? (component instanceof Function ? component() : component) : null;
    }, []);

    return rest.data && rest.data.length === 0 ? (
        <ScrollView {...rest}>
            {renderComponent(rest.ListHeaderComponent)}
            {renderComponent(ListEmptyComponent)}
            {renderComponent(rest.ListFooterComponent)}
        </ScrollView>
    ) : (
        <FlatList {...rest} />
    );
});

[Sheoranmohit]

I am facing the same issue after upgrading to version 0.72.4. The FlatList component is not rendering all the items. By default, it only renders around 10 items. If I specify a number in the 'initialNumToRender' prop, then only that number of items is displayed.

[Levminer]

Same issue only the first ~10 items gets rendered on 0.72.5, reverted back to 0.71.14, FlatList works there as expected.

[tlmader]

Running into the same issue on 0.72.5 on web only. For me, removing the ListHeaderComponent prop solves the issue, but I need my header content 😄

Update: Removing React Native Element's Skeleton component from our header fixes this somehow? I recommend removing one component at a time and see if you have any luck.

[imamrobani]

in my case for the first time, all the data was successfully rendered, but when I tried to go back until I exited the application and opened it again, only 10 data were displayed, and there was an empty space below, no data was displayed, but when I killed the app and opened it again, all of them running back to normal

I don't know why this is, this happened when I updated to React Native 0.71.XX
so now I still stay at RN 0.70.13
Previously I was using version 69.3

Has anyone experienced something similar in RN 0.71.XX?

[andreialecu]

Related: #36766