How to have different style for items at certain locations in a list in React Native?

Question

I'm trying to have different styles for the first and last items in a list, like the picture below:

Where the first card has rounded corner on the upper right and the last card has rounded corner on the lower right. I'm still figuring out how to approach this.

Is there any way to pass the location of an item in the list to the item itself so it can be applied to a different style? Or there are other better approaches?

Also, I would like to have the card to have both rounded upper and lower right corners if there's only one card present, like below:

Answer 1

When rendereing items with ListView/FlatList/SectionList rendering method has index parameter. You can use that index to figure out if the item is first or last and give conditional styling for that item.

Example

renderItem = ({item, index}) => {
  if (index === 0) return <ListItem style={styles.firstItem} data={item} />
  else if (index === (this.state.data.length -1)) return <ListItem style={styles.lastItem} data={item} />
  else return <ListItem style={styles.item} data={item} />
}

render() {
  return <FlatList data={this.state.data} renderItem={this.renderItem} />
}

Answer 2

With styled-components , you can do this:

import styled, { css } from "styled-components";

const Item = styled.div`
  background-color: red;

  ${props => props.isFirst && css`
    background-color: blue;
  `}

  ${props => props.isLast && css`
    background-color: yellow;
  `}
`;

function() {

  const items = [];

  return (
    <>
      ...
      {items.map((item, index) => {
        <Item
          key={item.id}
          isFirst={index === 0}
          isLast={index === items.length - 1 }
        />
      })}
      ...
    </>
  );
}

Much more readable imho.

Answer 3

Adding to @bennygenel 's answer we can use terniary operator as well

renderItem = ({item, index}) => {
   return <ListItem style={index === 0 ? styles.firstItem : index === (this.state.data.length -1) ? styles.lastItem : styles.item } data={item} />
 }

render() {
  return <FlatList data={this.state.data} renderItem={this.renderItem} />
}