Introduction

Getting Started

Theming

Fields

ListItem

Properties

title

string | undefined

subtitle

string | undefined

divider

boolean | undefined

position

number | undefined

chevron

boolean | undefined

icon

string | undefined

color

string | undefined

highlight

boolean | undefined

user

UserType | undefined

actionButton

standingValues

number[] | undefined

[]

onPress

(() => void) | undefined

onPressUser

(() => void) | undefined

onPressRightContent

(() => void) | undefined

ImageComponent

Basic usage

<ListItem />

<ListItem />

With Divider

John Lee



John Ion Vijelie



<ListItem
  divider
  chevron
  title="John Lee"
  user={{
    profilePicture: 'https://picsum.photos/id/1/200',
  }}
/>
<ListItem
  chevron
  title="John Ion Vijelie"
  user={{
    profilePicture: 'https://picsum.photos/id/1/200',
  }}
/>

<ListItem
  divider
  chevron
  title="John Lee"
  user={{
    profilePicture: 'https://picsum.photos/id/1/200',
  }}
/>
<ListItem
  chevron
  title="John Ion Vijelie"
  user={{
    profilePicture: 'https://picsum.photos/id/1/200',
  }}
/>

with Subtitle

John Lee

23 matches



John Ion Vijelie

12 matches



<ListItem
  divider
  chevron
  title="John Lee"
  subtitle="23 matches"
  user={{
    profilePicture: 'https://picsum.photos/id/1/200',
  }}
/>
<ListItem
  chevron
  title="John Ion Vijelie"
  subtitle="12 matches"
  user={{
    profilePicture: 'https://picsum.photos/id/1/200',
  }}
/>

<ListItem
  divider
  chevron
  title="John Lee"
  subtitle="23 matches"
  user={{
    profilePicture: 'https://picsum.photos/id/1/200',
  }}
/>
<ListItem
  chevron
  title="John Ion Vijelie"
  subtitle="12 matches"
  user={{
    profilePicture: 'https://picsum.photos/id/1/200',
  }}
/>

With Ranking

NAME

MATCHES

COUNTRIES



John Lee





Patrick Nevil





Jan Claude



Constantin Predescu



1443

Popescu Ion



<ListHeader columns={['NAME', 'MATCHES', 'COUNTRIES']} />
<ListItem
  divider
  chevron
  position={1}
  title="John Lee"
  standingValues={[35, 12]}
  user={{
    profilePicture: 'https://picsum.photos/id/1/200',
  }}
/>
<ListItem
  divider
  chevron
  position={2}
  standingValues={[30, 8]}
  title="Patrick Nevil"
  user={{
    profilePicture: 'https://picsum.photos/id/2/200',
  }}
/>
<ListItem
  divider
  chevron
  position={3}
  standingValues={[18, 3]}
  title="Jan Claude"
  user={{
    profilePicture: 'https://picsum.photos/id/3/200',
  }}
/>
<ListItem
  position={4}
  standingValues={[10, 2]}
  chevron
  divider
  highlight
  title="Constantin Predescu"
  user={{
    profilePicture: 'https://picsum.photos/id/4/200',
  }}
/>
<ListItem
  position={1443}
  standingValues={[1, 1]}
  chevron
  title="Popescu Ion"
  user={{
    profilePicture: 'https://picsum.photos/id/4/200',
  }}
/>

<ListHeader columns={['NAME', 'MATCHES', 'COUNTRIES']} />
<ListItem
  divider
  chevron
  position={1}
  title="John Lee"
  standingValues={[35, 12]}
  user={{
    profilePicture: 'https://picsum.photos/id/1/200',
  }}
/>
<ListItem
  divider
  chevron
  position={2}
  standingValues={[30, 8]}
  title="Patrick Nevil"
  user={{
    profilePicture: 'https://picsum.photos/id/2/200',
  }}
/>
<ListItem
  divider
  chevron
  position={3}
  standingValues={[18, 3]}
  title="Jan Claude"
  user={{
    profilePicture: 'https://picsum.photos/id/3/200',
  }}
/>
<ListItem
  position={4}
  standingValues={[10, 2]}
  chevron
  divider
  highlight
  title="Constantin Predescu"
  user={{
    profilePicture: 'https://picsum.photos/id/4/200',
  }}
/>
<ListItem
  position={1443}
  standingValues={[1, 1]}
  chevron
  title="Popescu Ion"
  user={{
    profilePicture: 'https://picsum.photos/id/4/200',
  }}
/>

with Action

John Lee

43 matches

John Lee

43 matches

Following

<ListItem
  title="John Lee"
  subtitle="43 matches"
  user={{
    profilePicture: 'https://picsum.photos/id/1/200',
  }}
  onPress={() => {
    console.log('press row')
  }}
  actionButton={
    <Button
      title="Follow"
      size="medium"
      rounded
      onPress={() => {
        console.log('press button')
      }}
    />
  }
/>
<ListItem
  title="John Lee"
  subtitle="43 matches"
  user={{
    profilePicture: 'https://picsum.photos/id/1/200',
  }}
  onPress={() => {
    console.log('press row')
  }}
  actionButton={
    <Button
      title="Following"
      size="medium"
      type="outline"
      rounded
      onPress={() => {
        console.log('press button')
      }}
    />
  }
/>

<ListItem
  title="John Lee"
  subtitle="43 matches"
  user={{
    profilePicture: 'https://picsum.photos/id/1/200',
  }}
  onPress={() => {
    console.log('press row')
  }}
  actionButton={
    <Button
      title="Follow"
      size="medium"
      rounded
      onPress={() => {
        console.log('press button')
      }}
    />
  }
/>
<ListItem
  title="John Lee"
  subtitle="43 matches"
  user={{
    profilePicture: 'https://picsum.photos/id/1/200',
  }}
  onPress={() => {
    console.log('press row')
  }}
  actionButton={
    <Button
      title="Following"
      size="medium"
      type="outline"
      rounded
      onPress={() => {
        console.log('press button')
      }}
    />
  }
/>

ListItem

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Properties

Basic usage

With Divider

with Subtitle

With Ranking

with Action

Properties