CODEWITHSUNDEEP
javascriptcssreactjsreact-native
bleepmeh
bleepmeh

Reputation: 1037

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

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

enter image description here

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:

enter image description here

Upvotes: 5

Views: 8970

Answers (3)

Aiyush Bedi
Aiyush Bedi

Reputation: 1

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

Upvotes: 0

Paul Razvan Berg
Paul Razvan Berg

Reputation: 21368

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.

Upvotes: 1

bennygenel
bennygenel

Reputation: 24660

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

Upvotes: 20

Related Questions