Why is my FlatList not showing?

react-native react-native-flatlist
dbarks picture dbarks · Jul 16, 2018 · Viewed 8.8k times · Source

I am trying to load this FlatList but it is not showing anything in the screen and I am not getting errors. The breed console.log is logging an array of objects with keys of $t.

The console log of this.props.breeds.breed is below. 

(37) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
:
{$t: "Affenpinscher"}
1
:
{$t: "Afghan Hound"}
2
:
{$t: "Airedale Terrier"}
...

Answer

JDune picture JDune · Jul 16, 2020

This also happens if you forget to return something from your renderItem function. For example:

renderItem = (row, sectID, rowID) => {
   <View style={{flexDirection: 'row'}}>
     <Text>{row.item}</Text>
   </View>;
};

As you can see the return statement is missing, but this doesn't trigger an error, warning or anything - you just get a blank Flatlist.

Related questions

How to re-render flatlist?

Unlike ListView we can update this.state.datasource. Is there any method or example to update FlatList or re-render it? My goal is to update the text value when user press button ... renderEntries({ item, index }) { return( <TouchableHighlight onPress={()=> …

Read More
React Native - Use a keyExtractor with FlatList

I have been getting the: "VirtualizedList: missing keys for items, make sure to specify a key property on an item or provide a custom keyExtractor" pretty confusing..., the array i am passing it has a key property defined in each …

Read More
Hide scrollbar in FlatList (React Native) in Android

I am trying to use FlatList (React-native) in my app. I am using it horizontally and can see the scrollbar. There is an option in ScrollView to hide the scrollbar but not in FlatList. Has anyone been able to hide …

Read More