ListItem

A simple, sizable list item.

Installation

ListItem is already installed in tamagui, or you can install it independently:

npm install @tamagui/list-item

Usage

import { ListItem } from 'tamagui'

export default () => <ListItem>Lorem ipsum</ListItem>

Sizing

Sizing listItems provides a unique challenge especially for a compiler, because you need to adjust many different properties - not just on the outer frame, but on the text wrapped inside. Tamagui supports adjusting the padding, border radius, font size and icons sizes all in one with the size prop.

import { ListItem } from 'tamagui'

export default () => <ListItem size="$6">Lorem ipsum</ListItem>

Given your theme defines a size 6, the listItem will adjust all of the properties appropriately. You can also pass a plain number to get an arbitrary size.

Icon Theming

You can pass icons as either elements or components. If passing components, Tamagui will automatically pass the size and color prop to them based on your theme.

Customization

ListItem only supports a limited subset of text props directly, and doesn't accept hoverStyle text props. If you need more control, you can do a simple customization:

import { forwardRef } from 'react'
import {
  ListItemFrame,
  ListItemProps,
  ListItemText,
  styled,
  themeable,
  useListItem,
} from 'tamagui'

const CustomListItemFrame = styled(ListItemFrame, {
  backgroundColor: 'orange', // or "$color", etc.
})

const CustomListItemTitle = styled(ListItemTitle, {
  color: 'blue',
})

const CustomListItemSubtitle = styled(ListItemSubtitle, {
  color: 'pink',
})

const CustomListItemText = styled(ListItemText, {
  color: 'red',
})

export const ListItem = CustomListItemFrame.styleable((propsIn, ref) => {
  const { props } = useListItem(propsIn, {
    Title: CustomListItemTitle,
    Text: CustomListItemText,
    Subtitle: CustomListItemSubtitle,
  })

  return <CustomListItemFrame {...props} ref={ref} />
})

There are 3 different components you can customize: ListItemText, ListItemSubtitle and ListItemTitle.

You can include whichever one you want to customize specifically.

If you only want to customize the the text pieces, you don't have to include CustomListItemFrame:

// all the text changes from above, with a default ListItemFrame
export const ListItem = themeable(
  forwardRef<TamaguiElement, ListItemProps>((propsIn, ref) => {
    const { props } = useListItem(propsIn, {
      Title: CustomListItemTitle,
      Text: CustomListItemText,
      Subtitle: CustomListItemSubtitle,
    })

    return <ListItemFrame {...props} ref={ref} />
  })
)

API Reference

ListItems extend Stack views inheriting all the Tamagui standard props, plus:

ListItem.Title extend SizableText inheriting all the props.

ListItem.Subtitle extend SizableText inheriting all the props.

ListItem.Text extend SizableText inheriting all the props. */}