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