How to override renderItem item based in SectionList React Native to use section based?

I only have a workaround, I haven't found a way to make renderItem prop render per section instead of per item.

For all sections, you want to render horizontally, use a FlatList and set the data for that section to be an array of arrays. Keep in mind that for listItems you want to render vertically, the data property should NOT be an array of arrays.

Here's a sample data structure

const DATA = [
    {
      header: '30 - 40% Off',
      type: 'horizontal',
//horizontal list here.... As stated above, data is an array that contains an array of the actual data
      data: [
        [
          {
            imgUri:
              'https://images.unsplash.com/photo-1607930231879-36bbb29ffe0a',
            store: 'Asanka Store',
            storeRating: '4.4',
            originalPrice: '10.00',
            discountedPrice: '5.00',
          },
          {
            imgUri:
              'https://images.unsplash.com/photo-1583506522440-b2639ef4c1d8',
            store: 'Maame Dorkono Shop',
            storeRating: '3.8',
            originalPrice: '27.00',
            discountedPrice: '18.99',
          },
          {
            imgUri:
              'https://images.unsplash.com/photo-1610397962076-02407a169a5b',
            store: 'Thywill Store',
            storeRating: '3.8',
            originalPrice: '27.00',
            discountedPrice: '18.99',
          },
        ],
      ],
    },
    {
      header: 'All Stores',
    //Vertical List here
      data: [
        {
          imgUri:
            'https://images.unsplash.com/photo-1598965675045-45c5e72c7d05',
          store: 'Thywill Store',
          storeRating: '3.8',
          originalPrice: '27.00',
          discountedPrice: '18.99',
        },
        {
          imgUri:
            'https://images.unsplash.com/photo-1574137907555-8e9ad5bc17fa',
          store: 'Asanka Store',
          storeRating: '4.4',
          originalPrice: '10.00',
          discountedPrice: '5.00',
        }
      ],
    },
  ];

Now use that in your SectionList. We're going to use a FlatList to render the horizontal list.

<SectionList
      sections={DATA}
      keyExtractor={(item, index) => index}
      renderSectionHeader={({section}) => (
        <Text>{section.header}</Text>
      )}
      renderItem={({section, item}) => {
        return section.type === 'horizontal' ? (
          <FlatList
            horizontal
            data={section.data[0]}
            showsHorizontalScrollIndicator={false}
            keyExtractor={(item, index) => item.store + index}
            renderItem={({item}) => <Item item={item} />}
          />
        ) : (
          <Item item={item} />
        );
      }}
    />