Invariant Violation: A VirtualizedList contains a cell which itself contains more than one VirtualizedList

Question

The complete error is:

Invariant Violation: A VirtualizedList contains a cell which itself contains more than one VirtualizedList of the same orientation as the parent list. You must pass a unique listKey prop to each sibling list.

Every single one of my FlatList components has a keyExtractor prop. Every item within the List from react-native-elements component has a key prop.

Could anyone shed any light on the meaning of this problem?

Answer 1

As the error says "You must pass a unique listKey prop to each sibling list." A prop like listKey="someUniqueString" to FlatList fixed this error for me

Answer 2

I got this error when using nested flat lists.I use listKey instead of keyExtractor.

**listKey={(item, index) => 'D' + index.toString()}**

Answer 3

Use ListKey and keyExtractor props in the FlatList to prevent this error OR warning

Example :

  listKey={(item, index) => `_key${index.toString()}`}
  keyExtractor={(item, index) => `_key${index.toString()}`}

Answer 4

if you are using FaltList as a nested list of any other FlatList or SectionList then you have to pass a unique value to this props listKey

listKey={this._keyExtractor}

_keyExtractor = (item, index) => {
return this.props.index+"_"+index+'_'+item.id+"_"+moment().valueOf().toString(); 
}

Answer 5

I got this error. But fixed using unique string

listKey={moment().valueOf().toString()}