CraftReactNative Documentation

A list item component to display content in a vertical manner. It supports optional left and right accessories to place a component or an icon.

Component dependencies

@/craftrn-ui/components/Text

Usage

Screen.tsx

import { ListItem } from "@/craftrn-ui/components/ListItem";
import { ChevronRight } from "@/craftrn-ui/icons";
 
export const Screen = () => (
  <ListItem
    text="First name"
    textBelow="Charlotte"
    itemRight={<ChevronRight size={24} color={theme.colors.contentPrimary} />}
    onPress={() => {}}
  />
);

Props

Prop	Type	Default
`style`	`ViewProps`	-
`itemLeft?`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-
`text`	`string`	-
`textBelow?`	`string`	-
`itemRight?`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-
`onPress?`	`() => void`	-
`divider?`	`boolean`	-

ListItem

Component dependencies

Usage

Props

On this page