list data in different types in React Native with FlatList

Question

I need to make a screen like you see below in React Native

like that

I need to list this screen with this datalist I have

let denemeData = [
  {
    id: 1,
    BestSellers: [
      {
        id: 1,
        SellerName: 'Steril Temizlik',
        imageUrl:
          'https://media.gettyimages.com/id/1254788325/photo/forget-sweet-try-home-sanitised-home.jpg?s=612x612&w=0&k=20&c=q6t80qrWvnWRln4PoxF8giI0hr9cNqdvFQiooFqIK3M=',
      },
      {
        id: 2,
        SellerName: 'Işıltı Temizlik',
        imageUrl:
          'https://media.gettyimages.com/id/1218727916/photo/woman-wearing-gloves-cleaning-desktop.jpg?s=612x612&w=0&k=20&c=i0DvmRBBjo-Q4DaJHywi4mQzRYOCRjPKh3m7wIYHHNw=',
      },
      {
        id: 3,
        SellerName: 'Aybars Temizlik',
        imageUrl:
          'https://media.gettyimages.com/id/1358089804/photo/beautiful-smiling-young-woman-cleaning-and-wiping-window-with-spray-bottle-and-rag-stock-photo.jpg?s=612x612&w=0&k=20&c=1OCBbZeIxBHAsrm6K7FTXgST91xb9TCaHYc74y1bq8s=',
      },
      {
        id: 4,
        SellerName: 'Hizmet Kolay',
        imageUrl:
          'https://media.gettyimages.com/id/1055221704/photo/young-woman-washing-window.jpg?s=612x612&w=0&k=20&c=Nd2TDn8pTRPe_bEkGec7ICNQ3pcoksMQWTCcGRVpfQI=',
      },
      {
        id: 5,
        SellerName: 'Aybars Temizlik',
        imageUrl:
          'https://media.gettyimages.com/id/1358089804/photo/beautiful-smiling-young-woman-cleaning-and-wiping-window-with-spray-bottle-and-rag-stock-photo.jpg?s=612x612&w=0&k=20&c=1OCBbZeIxBHAsrm6K7FTXgST91xb9TCaHYc74y1bq8s=',
      },
      {
        id: 6,
        SellerName: 'Hizmet Kolay',
        imageUrl:
          'https://media.gettyimages.com/id/1055221704/photo/young-woman-washing-window.jpg?s=612x612&w=0&k=20&c=Nd2TDn8pTRPe_bEkGec7ICNQ3pcoksMQWTCcGRVpfQI=',
      },
    ],
  },
  
];`

I couldn't figure out how to list with FlatList as in the image because as it can be seen in the image, I need to make the first data large, the second and third data small and side by side, I tried to play with numColumns, I tried to play with numColumns, I tried to adjust the View manually, I couldn't do it in any way and my brain stopped, please guide me, I'm very tired and I can't do it, my brain stopped.

Thanks for ur helps

I tried giving numColumns value with FlatList, but I did not get the result I expected.;

<FlatList
  bounces={false}
  numColumns={2}
  scrollEnabled={true}
  data={sellers}
  renderItem={({item}) => (
    <Pressable
      onPress={() => {
        denemeFunc(item);
      }}
      style={{
        height: 170,
        width: '47%',
        borderRadius: 10,
        backgroundColor: 'red',
        margin: 5,
      }}>
      <Image
        style={{
          height: '100%',
          resizeMode: 'cover',
          width: '100%',
          borderRadius: 10,

          position: 'absolute',
        }}
        source={{
          uri: item.imageUrl,
        }}
      />
      <View
        style={{
          padding: 8,
          justifyContent: 'flex-end',
          alignItems: 'center',
          height: '100%',
          position: 'absolute',
        }}>
        <Text
          style={{
            color: 'white',
            fontSize: 16,
            fontFamily: 'Poppins-Bold',
            textAlign: 'center',
          }}>
          {item.SellerName}
        </Text>
      </View>
    </Pressable>
  )}
  showsVerticalScrollIndicator={false}
/>

Answer 1

as I can see in your layout, for the even lines you want a component with just one line and for odd lines you want a component with two images. So you can render different components according to the index of the list.

I think you can do something like this:

<FlatList
  bounces={false}
  numColumns={2}
  scrollEnabled={true}
  data={sellers}
  renderItem={({item, index}) => (
    if(index% 2 === 0){
       // You render a component with just one line.
    } else {
      // You create the component with columns - A component with a 
      //flexDirection: 'row'...
   }
  )}
  showsVerticalScrollIndicator={false}
/>

Hope this answer helps you :).