React Native - Use a keyExtractor with FlatList

Question

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\"
         


        

Answer 1

"VirtualizedList: missing keys for items, make sure to specify a key property on an item or provide a custom keyExtractor"

This is a warning that the elements of the list are missing keys. These unique keys are what allow the VirtualizedList (which is what FlatList is built on) to track items and are really important in terms of efficiency.

You will have to choose a unique key prop, like an id or an email.

The keyExtractor falls back to using the index by default. But the warning will remain visible.

Example : an object defined as {key: doc.id, value: doc.data()} can be used in the extractor as:

keyExtractor={(item, index) => item.key}

Flatlist component should look like that:

 item.key}
  renderItem={(rowData) =>this.RenderFeedCard(rowData)}
/>