CODEWITHSUNDEEP
javascriptreactjsreact-native
arslan
arslan

Reputation: 31

list data in different types in React Native with FlatList

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

Upvotes: 3

Views: 358

Answers (3)

Gattu
Gattu

Reputation: 133

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:

enter image description here

Upvotes: 0

user18309290
user18309290

Reputation: 8300

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

  1. Calculate row count based on the layout
  2. Return array of items for a certain row based on the layout
  3. Render items for the row
  4. 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}}/>
)

Upvotes: 0

Gabriel Menezes da Silva
Gabriel Menezes da Silva

Reputation: 602

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 :).

Upvotes: 1

Related Questions