list data in different types in React Native with FlatList

arslan
February 9, 2023
180 views
2 votes
3 Answers

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

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}
/>

Answers

- GabrielMenezesdaSilva
- February 10, 2023 at 1:20 am
- 0 votes
0
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 :).
Login or Signup to reply.

Use VirtualizedList for more flexibility and render items by row. Here is the simplified version.

Calculate row count based on the layout
Return array of items for a certain row based on the layout
Render items for the row
Optional: Add padding to the last item to compensate the partial row

const isOdd = (index) => index % 2 !== 0

// 1.
const getRowCount = (items) => items.length - Math.floor(items.length / 3)

// 2.
const getRow = (items, index) =>
  isOdd(index)
    ? items.slice(index + (index / 2), index + (index / 2) + 2) 
    : [items[2 * index - index / 2]]

const requiresPadding = (items, index, row) => 
  row.length == 1 && getRowCount(items) - 1 === index && isOdd(index)

...

<VirtualizedList
  data={items}
  getItemCount={getRowCount}
  getItem={getRow}
  renderItem={({ item: row, index }) => (
    <View style={{ flexDirection: 'row' }}>
      // 3.
      {row.map((i) => <Item title={i.title}/>)}
      // 4.
      {requiresPadding(items, index, row) && <PaddingItem/>}
    </View>
  )}
  keyExtractor={(row) => row[0].id}
/>

...

const Item = ({ title }) => (
  <View style={{
    flex: 1,
    backgroundColor: '#eee',
    height: 150,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 8,
  }}>
    <Text>{title}</Text>
  </View>
);

const PaddingItem = () => (
  <View style={{flex: 1, margin: 8}}/>
)

may be this will help you!

App.js

import React from 'react';
import {
  SafeAreaView,
  View,
  FlatList,
  StyleSheet,
  ImageBackground,
  Text,
  StatusBar,
} from 'react-native';

const DATA = [
  {
    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=',
  },
];

const renderItem = ({ item }) => (
  <>
    <View>
      {item.id == 1 && (
        <View
          style={{
            margin: 10,
            height: 120,
          }}>
          <ImageBackground
            source={item.imageUrl}
            style={{ width: '100%', height: '100%', borderRadius: 20 }}>
            <Text style={{ color: '#fff', fontSize: 20, fontWeight: 'bold' }}>
              {item.SellerName}
            </Text>
          </ImageBackground>
        </View>
      )}
      {item.id == 2 ? (
        <>
          <View
            style={{
              flexDirection: 'row',
              margin: 10,
              height: 120,
              width: 100,
              justifyContent: 'space-between',
            }}>
            <View>
              <ImageBackground
                source={item.imageUrl}
                style={{ width:150, height: '100%', borderRadius: 20 ,margin:5}}>
                <Text
                  style={{ color: '#fff', fontSize: 20, fontWeight: 'bold' }}>
                  {item.SellerName}
                </Text>
              </ImageBackground>
            </View>
            <View>
              <ImageBackground
                source={item.imageUrl}
                style={{ width:150, height: '100%', borderRadius: 20 ,margin:5}}>
                <Text
                  style={{ color: '#fff', fontSize: 20, fontWeight: 'bold' }}>
                  {item.SellerName}
                </Text>
              </ImageBackground>
            </View>
          </View>
        </>
      ) : null}
      {item.id == 3 && (
        <View
          style={{
            margin: 10,
            height: 120,
          }}>
          <ImageBackground
            source={item.imageUrl}
            style={{ width: '100%', height: '100%', borderRadius: 20 }}>
            <Text style={{ color: '#fff', fontSize: 20, fontWeight: 'bold' }}>
              {item.SellerName}
            </Text>
          </ImageBackground>
        </View>
      )}
       {item.id == 4 ? (
        <>
          <View
            style={{
              flexDirection: 'row',
              margin: 10,
              height: 120,
              width: 100,
              justifyContent: 'space-between',
            }}>
            <View>
              <ImageBackground
                source={item.imageUrl}
                style={{ width:150, height: '100%', borderRadius: 20 ,margin:5}}>
                <Text
                  style={{ color: '#fff', fontSize: 20, fontWeight: 'bold' }}>
                  {item.SellerName}
                </Text>
              </ImageBackground>
            </View>
            <View>
              <ImageBackground
                source={item.imageUrl}
                style={{ width:150, height: '100%', borderRadius: 20 ,margin:5}}>
                <Text
                  style={{ color: '#fff', fontSize: 20, fontWeight: 'bold' }}>
                  {item.SellerName}
                </Text>
              </ImageBackground>
            </View>
          </View>
        </>
      ) : null}
    </View>
  </>
);

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
});

export default App;

here is output:

Please signup or login to give your own answer.

Click here to cancel reply.