List

List, a React Native component for iOS, Android and web: A virtualized list with empty and loading states, plus ListItem.

Usage

import { Badge } from './components/ui/badge';
import { List, ListItem } from './components/ui/list';

const ORDERS = [
  { id: '1', title: 'Copper Handi', detail: 'North Indian', state: 'On the way' },
  { id: '2', title: 'Slice Theory', detail: 'Wood-fired pizza', state: 'Delivered' },
  { id: '3', title: 'Noodle Foundry', detail: 'Hand-pulled noodles', state: 'Delivered' },
];

export default function Example() {
  return (
    <List
      data={ORDERS}
      dividers
      keyExtractor={(order) => order.id}
      renderItem={({ item }) => <ListItem title={item.title} description={item.detail} end={<Badge>{item.state}</Badge>} onPress={() => {}} />}
      style={{ maxWidth: 420 }}
    />
  );
}

Props

Prop	Type	Default	Description
`loading`	`boolean`	false	Shown instead of rows while the first page loads.
`emptyText`	`string`	'Nothing here yet'	Shown when `data` is empty and not loading.
`empty`	`ReactNode`		Replaces the default empty text.
`dividers`	`boolean`	true	Draw a divider between rows.
`title`	`string`
`description`	`string`
`start`	`ReactNode`		Icon or avatar, on the leading side.
`end`	`ReactNode`		Value or control, on the trailing side.
`onPress`	`() => void`		Makes the row a button.
`disabled`	`boolean`
`selected`	`boolean`
`style`	`StyleProp<ViewStyle>`
`testID`	`string`