react-native: FlatList is not rendering the complete list of items.

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.

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

} />

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

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.

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