1

How is it possible to make first array of database looks different in size in a Flatlist? enter image description here

Arsiki
  • 348
  • 2
  • 12
  • Try slicing your data. Like slice into two parts. Let Say i have 5 boxes and i want to amke first box bigger and red and other remaining 4 boxes smaller and yellow, then i will slice it into two parts i.e (0,1) and (1,4).Now I can simply my required css to first slice(0,1) and so on.... If you don't understand then post your code. You will get exact answer in code. Otherwise be chilling with similar kinda theoratical answer – CS Alam Jul 10 '21 at 21:29
  • I propose to use ListHeaderComponent to render different style for the first item of list – Majid Lotfinia Jul 11 '21 at 04:39

1 Answers1

2

When using FlatList, you have a prop called renderItem.

The way you can tell FlatList how some (first, last, even, odd, etc.) items should render is by usingindex parameter that you get passed to callback function of renderItem.

Code Example

<FlatList
  ...
  renderItem={({item, index}) => {
    if (index === 0) {
      return <FirstListItem ...props />;
    } else {
      return <OtherListItem ...props />
    }
  }}
/>
Luka
  • 828
  • 9
  • 15