React Native FlatList only renders 10 items

Question

I'm trying to display a FlatList with a dataset of 86 items and it's only displaying 10 and will not load more.

I tried messing with the container size through styles but no avail.

return (
  <View>
    <Text>{this.state.cards.length}</Text>
    <FlatList
      data={this.state.cards}
      renderItem={(theInfo) => <CardImage key={theInfo.key} info={theInfo}/>}
      keyExtractor={(item, index) => item.toString()}
    />
  </View>
);

I expect this to display 86 items (this.state.cards.length displays 86), the application only displays 10 and will not load more.

Edit: rn version 0.57.8

Answer 1

You should set following property

initialNumToRender={50}

As the default is 10

Source: https://facebook.github.io/react-native/docs/flatlist#initialnumtorender

Answer 2

Change View to ScrollView

Updated Code:

return (
  <ScrollView>
    <Text>{this.state.cards.length}</Text>
    <FlatList
      data={this.state.cards}
      renderItem={(theInfo) => <CardImage key={theInfo.key} info={theInfo}/>}
      keyExtractor={(item, index) => item.toString()}
    />
  </ScrollView>
);

Answer 3

Using initialNumToRender is not a proper solution for this. It affects the processing as the whole list is rendered by flatList . If you're using animation anywhere in your project then you can add isInteraction: false parameter in Animated.timing() eg-

Animated.timing(
    this.spinValue,
    {
      toValue: -1,
      duration: 4000,
      easing: Easing.linear,
      isInteraction: false
    }
  ).start( ()=> this.spin() )

for more information, you can see this comment in react-native project's issues.

Hope this will help you!

Answer 4

I was struggling with the same problem, the only thing that worked from amongst these answers was Arjun Jain's but the moment you do that the FlatList can no longer determine the correct number of items to render and ceases to be efficient (and in my case, the list of items is 2000+ entries so this matters).

After loads of fiddling, what turned out to be missing in my code was that the rendered element (in this case, CardImage , in mine it was a ListItem ) just needs an item attribute:

return (
  <SafeAreaView>
    <Text>{this.state.cards.length}</Text>
    <FlatList
      data={this.state.cards}
      renderItem={(theInfo) => <CardImage item={theInfo} key={theInfo.key} info={theInfo}/>}
      keyExtractor={(item, index) => item.toString()}
    />
  </SafeAreaView>
);

Answer 5

The issue appeared after updating React Native from version 62 to 64. My solution was to hide the FlatList when there are not elements to show.

return (
  <View>
   <Text>{this.state.cards.length}</Text>
   {this.state.cards.length > 0 &&
   <FlatList
     data={this.state.cards}
     renderItem={(theInfo) => <CardImage key={theInfo.key} info={theInfo}/>}
     keyExtractor={(item, index) => item.toString()}
   />
   }
  </View>
);

Also Arjun Jain's solution fixes the issue.

Answer 6

I have solved my problem in a different way, maybe it helps someone...

For me, setting initialNumToRender={50} didn't solv all the problems, it caused another problem.

To fix it, in my case I had:

    renderItem({ item }) {
    return <MyButton 
      key={String(item._id)}
      ... other props
    />

At the style of MyButton, I had as the container style:

flex: 1
height: 68px;
padding-right: 10px;
margin-top: 15px;
flex-direction: row;

So I changed it to:

height: 68px;
padding-right: 10px;
margin-top: 15px;
flex-direction: row;

and its fixed!! flex: 1 , was causing the FlatList to render empty spaces for fields that was not rendered... Weird!