Core
Tamagui
Extras
Guides
Community
A simple, sizable list item.
Accepts size prop that works on all styles.
Place an icon before or after.
Works with themes, animations, Group.
import { ListItem } from 'tamagui'export default () => <ListItem>Lorem ipsum</ListItem>
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.
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.
ListItems extend Stack views inheriting all the Tamagui standard props, plus:
React.ReactNode
Can use either children or title + subTitle to set the contents.
React.ReactNode
Sets a subTitle, recommended to use with title.
string | tokens.size
Set a size, number or one of the size token values.
string
Apply a theme just to the listItem and it's children
boolean
Helpful for "flipping" any theme between dark and light (including flipping a sub themes defined as [subtheme]-[dark/light]
boolean
If true, ListItem won't wrap content with a Text element.
JSX.Element
Pass any React element, appears before the text.
JSX.Element
Pass any React element, appears after the text.
number
Scale the icon more than usual by this number.
number
Scale the spacing more than usual by this number.
boolean
Makes all space elements have a flex.
SizableTextProps['color']
Passes "color" down to the inner text component
SizableTextProps['fontWeight']
Passes "fontWeight" down to the inner text component
SizableTextProps['letterSpacing']
Passes "letterSpacing" down to the inner text component
SizableTextProps['textAlign']
Passes "textAlign" down to the inner text component