I am trying to render a list with a two sub data arrays within each object. I am trying to display this array of game objects, that has a gameTitle, an array for publishers, an array for Developers and an id. The array for publishers and developers is not the same for every game. At first I wanted to make a sectionList, but there are two data sets, which is what I believe is the problem in not working. So now I am thinking of making a flatlist and making either a flatlist or sectionlist within that for both the publisher and developer arrays. I still can't figure out how to do this though. What should I be trying to do instead?
creatorData: Array [
Object {
"DevData": Array [
Object {
"Developer": "DICE",
},
],
"GameTitle": "Battlefield 1",
"PubData": Array [
Object {
"Publisher": "Electronic Arts",
},
],
"id": 0,
},
Object {
"DevData": Array [
Object {
"Developer": "DICE",
},
Object {
"Developer": "DICE Los Angeles",
},
],
"GameTitle": "Battlefield 4",
"PubData": Array [
Object {
"Publisher": "Electronic Arts",
},
],
"id": 1,
}]
Hey so basically a Flatlist inside a flatlist will work, but we need to make sure that the childs flatlist doesnt always override the parent flatlists scroll.
So for that basically suppose
const data = [{a:{ childData:[] }} , {b:{childData:[]}} ]
const renderEachRow = ({item}) => {
return(
<View style={{height:HEIGHT_DEVICE/3,marginHorizontal:30}} >
<Text>Title</Text>
<Flatlist data={item.childData} renderItem={renderChildRow} />
</View>
)
return(
<View style={{flex:1}}>
<FLatlist data={data} renderItem={renderEachRow}
style={{flex:1}}
/>
)
</View>
}
Hope this helps, feel free for doubts