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[bot]]

:warning:	Missing Reproducible Example
:information_source:	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 }) => <QuestionCard item={item} index={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

[tamirla]

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?

Yes, we also had this issue in 0.71.12 Based on the answers above we upgraded to 0.71.14 and it fixed the problem

[Aryk]

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 }) =>

} />

I wouldn't recommend the empty check because you might have a ListEmptyComponent...see my solution here.

[laurent22]

We have the same problem in React Native 0.71.10 in the two FlatLists we have.

[viper4595]

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?

I face the same issue when using react native 0.72.4.

[emanusantos]

Same issue on 0.72.5

[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?

Finally I found a solution to this issue in my case.

This issue occurs when returning from a screen that has a loading skeleton, when I go back until the application exits, this issue occurs. The library used is react-native-easy-content-loader and this is an outdated library, and this is what causes this issue to occur. then I replaced/deleted it and Flatlist ran again on 71.xx or above

After I checked, because there was animation, I had to make sure whether there was any animation running so it was interfering with the rendering process

maybe it could also be a reference for others. and now my project using RN 0.72..8

[LouisWT]

Same issue on react native 0.72.5

[100sarthak100]

Same issue in 0.73.4.

[Arman6117]

`import { useState } from "react"; import { View, Text, TouchableOpacity, FlatList, ActivityIndicator, } from "react-native"; import { useRouter } from "expo-router"; import styles from "./popularjobs.style";

import { COLORS, SIZES } from "../../../constants"; import PopularJobCard from "../../common/cards/popular/PopularJobCard";

import useFetch from "../../../hook/useFetch";

const Popularjobs = () => { const router = useRouter();

const { data, error, isLoading } = useFetch("search", { query: "React developer", num_pages: "1", });

console.log("Console log from popular job"); return ( <View style={styles.cardsContainer}> <View style={styles.header}> <Text style={styles.headerTitle}>Popular Jobs</Text> <TouchableOpacity> <Text style={styles.headerBtn}>Show All</Text> </TouchableOpacity> </View> <View style={styles.cardsContainer}> {isLoading ? ( <ActivityIndicator size={"large"} color={COLORS.primary} /> ) : error ? ( <Text>Something went wrong</Text> ) : ( <FlatList data={data} renderItem={({ item }) => <PopularJobCard item={item} />} keyExtractor={(item) => item?.job_id} contentContainerStyle={{ columnGap: SIZES.medium }} horizontal /> )} </View> </View> ); };

export default Popularjobs;`

Same issue FlatList is not rendering at all when i pass the data fetched from api but it does get render when i use dummy data.

[fcole90]

Is this bug the same as https://github.com/facebook/react-native/issues/36766#issuecomment-2022324798 ? :thinking:

[Malintan2112]

Same issue on 0.72.13 ☹️☹️☹️☹️☹️

[striwensko]

For people having the same issue another thing to try is to make sure you don't use margins, try padding instead. I had the same issue and was fixed when I stop using vertical margin and replaced by vertical padding