Horizontal FlatList inside sectionList

Horizontal FlatList inside SectionList in ReactNative

According to SectionList, one can create a SectionList with a section title and the items in the section in vertical fashion. Here I will show you what was the problem I faced while creating horizontal list items inside SectionList and the modifications I did to resolve it.

My Output view should be like:

Initially My data is in the format mentioned by SectionList. Where each of the data item is an object.
sectionData = [
   {title: 'abc', data:[{},{},{}]},
   {title: 'abc', data:[{},{},{}]},
   .....
]
And the render component will be like:

<SectionList
          sections={sectionData}
          renderSectionHeader={({ section }) => (
            <Text> {section.category}</Text> // layout changed in my screenshot
          )}
          renderItem={({ item, index, section }) => (
            <FlatList
              data={item}
              horizontal={true}
              renderItem={({ item }) => <Text>{item.name}</Text>} // placed images in my case
            />
          )}
        />

So when i render sectionlist with this data the output will be like:

It is rendering multiple horizontal flatlists where number of flatlists = number of objects inside data.

Reason: sectionList will add each data item to the vertical list.
Work around: My tweak is if we change the data object a bit we can get the desired output.
sectionData = [
   {title: 'abc', data:[[{},{},{}]]},
   {title: 'abc', data:[[{},{},{}]]},
   .....
]
Now if you pass this data to the sectionList, you can get the desired output.