How to give different style to the first array of Flatlist

Question

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

Answer 1

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