Error: 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.
So I am trying to make A FlatList which will have Multiple Nested FlatLists Like this..
1------FlaList Level 0
1.1-----FlatList Level 1
1.2-----FlatList Level 1
1.2.1------ FlatList Level 2
1.2.2------ FlatList Level 2
2------FlatList Level 0
2.1-----FlatList Level 1
2.2-----FlatList Level 1
2.2.1------ FlatList Level 2
2.2.2------ FlatList Level 2
The Code Snippet For this:
{/* Flat List Level 0 ---------------------------------------------------- */}
<FlatList
style={{ flex: 1, marginVertical: 8 }}
data={this.state.meeting_topic_list}
renderItem={({ item, index }) => (
<View style={{ flex: 1, marginLeft: 8 }}>
<Text style={{ fontSize: 12, color: "black", fontWeight: "600", marginBottom: 8 }}>{index + 1} {item.title}</Text>
{/* Nested Item Level 1---------------------------- */}
<FlatList
data={item.docs}
Horizontal={true}
style={{ marginLeft: 12 }}
renderItem={({ item, index }) => (
<View style={{ flex: 1, marginLeft: 8, }}>
<Image source={require("./images/docs.png")} style={{ height: 30, width: 30 }} />
<Text style={{ fontSize: 12, color: "black", marginBottom: 8, marginLeft: 8 }} onPress={() => {
return <WebView
source={{ uri: item.url }}
style={{ marginTop: 20 }}
/>
}}>{index + 1} {item.text}</Text>
</View>
)}
keyExtractor={(item, index) => index}
/>
{/* Nested Item Level 1---------------------------- */}
<FlatList
style={{ flex: 1, marginVertical: 8 }}
data={item.subItems}
renderItem={({ item, index }) => (
<View style={{ flex: 1, marginLeft: 8 }}>
<Text style={{ fontSize: 12, color: "black", fontWeight: "600", marginBottom: 8 }}>{index + 1} {item.title}</Text>
{/* Nested Item Level 2---------------------------- */}
<FlatList
data={item.docs}
style={{ marginLeft: 12 }}
renderItem={({ item, index }) => (
<View style={{ flex: 1, marginLeft: 8, }}>
<Image source={require("./images/docs.png")} style={{ height: 30, width: 30 }} />
<Text style={{ fontSize: 12, color: "black", marginBottom: 8, marginLeft: 8 }} onPress={() => {
return <WebView
source={{ uri: item.url }}
style={{ marginTop: 20 }}
/>
}}>{index + 1} {item.text}</Text>
</View>
)}
keyExtractor={(item, index) => index}
/>
{/* Nested Item Level 2---------------------------- */}
<FlatList
style={{ flex: 1, marginVertical: 8 }}
data={item.subItems}
renderItem={({ item, index }) => (
<View style={{ flex: 1, marginLeft: 8 }}>
<Text style={{ fontSize: 12, color: "black", fontWeight: "600", marginBottom: 8 }}>{index + 1} {item.title}</Text>
<FlatList
data={item.docs}
style={{ marginLeft: 12 }}
renderItem={({ item, index }) => (
<View style={{ flex: 1, marginLeft: 8, flexDirection: "row", justifyContent: "center", alignItems: "center" }}>
<Image source={require("./images/docs.png")} style={{ height: 30, width: 30 }} />
<Text style={{ fontSize: 12, color: "black", marginBottom: 8, marginLeft: 8 }} onPress={() => {
return <WebView
source={{ uri: item.url }}
style={{ marginTop: 20 }}
/>
}}>{index + 1} {item.text}</Text>
</View>
)}
keyExtractor={(item, index) => index}
/>
<View style={{ borderBottomWidth: .5, borderBottomColor: "#e2e2e2", marginVertical: 8, marginRight: 8 }} />
</View>
)}
keyExtractor={(item, index) => index}
/>
{/* Nested FlatList end Level 2---------------------*/}
<View style={{ borderBottomWidth: .5, borderBottomColor: "#e2e2e2", marginVertical: 8, marginRight: 8 }} />
</View>
)}
keyExtractor={(item, index) => index}
/>
{/* Nested FlatList END Level 1---------------------*/}
<View style={{ borderBottomWidth: .5, borderBottomColor: "#e2e2e2", marginVertical: 8, marginRight: 8 }} />
</View>
)}
keyExtractor={(item, index) => index}
/>
{/* Flat List END Level 0 ---------------------------------------------------- */}
Example of the Data The Parent FlatList is given.
var meetingTopicData = [
{
title: "test title frt6",
docs: [
{
text: "Document Name",
url: "https://dummy.com"
},
{
text: "Document Name",
url: "https://dummy.com"
},
],
subItems: [
{
title: "test title frt6",
docs: [
{
text: "Document Name",
url: "https://dummy.com"
},
{
text: "Document Name",
url: "https://dummy.com"
},
],
subItems: [
{
title: "test title frt6",
docs: [
{
text: "Document Name",
url: "https://dummy.com"
},
{
text: "Document Name",
url: "https://dummy.com"
},
]
},
{
title: "test title frt6",
docs: [
{
text: "Document Name",
url: "https://dummy.com"
},
{
text: "Document Name",
url: "https://dummy.com"
},
]
},
{
title: "test title frt6",
docs: [
{
text: "Document Name",
url: "https://dummy.com"
},
{
text: "Document Name",
url: "https://dummy.com"
},
]
}
]
}
]
},
];
You see, there are two FlatLists At Each Level. If I comment out one of them (The upper one with no Child FlatLists.) the Code runs without any error. I think it is something related to keyExtractors of sibling FlatLists.
Omar Faruque Sohag
Please follow this. instead of keyExtractor i used lisKey.That works for me.
<FlatList
columnWrapperStyle={{margin: 5}}
data={this.state.productDetails.configurations}
numColumns={4}
listKey={(item, index) => 'D' + index.toString()}
renderItem={({item}) => (
<View style={styles.inputsContainer}>
<TouchableHighlight style={styles.fullWidthButton} onPress={() =>
this.selectProduct(item)}>
<Text style={styles.fullWidthButtonText}>{item.name}</Text>
</TouchableHighlight>
<FlatList
data={item.details}
listKey={(item2, index) => 'D' + index.toString()}
renderItem = {({item2}) => (
<View><Text>Hello</Text></View>
)}
/>
</View>
)}
/>
// unique listKey
<FlaList>
<FlaList listKey="1.1" />
<FlaList listKey="1.2" />
</FlaList>
<FlaList>
<FlaList listKey="2.1" />
<FlaList listKey="2.2" />
</FlaList>
来源：https://stackoverflow.com/questions/49276526/nested-flat-list-invariant-violation-a-virtualizedlist-contains-a-cell-which-it