List

List is a performant themed wrapper around React Native's FlatList. ListItem provides a standardized row layout with title, description, and accessory slots.

Import

import { List, ListItem } from '@ui-kitten/components';

Basic Usage

import React from 'react';
import { Layout, List, ListItem, Icon } from '@ui-kitten/components';

const data = [
  { title: 'Item 1', description: 'Description for item 1' },
  { title: 'Item 2', description: 'Description for item 2' },
  { title: 'Item 3', description: 'Description for item 3' },
];

const renderItem = ({ item }) => (
  <ListItem
    title={item.title}
    description={item.description}
    accessoryLeft={(props) => <Icon {...props} name="person" />}
    accessoryRight={(props) => <Icon {...props} name="arrow-ios-forward" />}
  />
);

const ListExample = () => (
  <Layout style={{ flex: 1 }}>
    <List data={data} renderItem={renderItem} />
  </Layout>
);

Props

List

Property	Type	Default	Description
appearance	'default'	'default'	Appearance defined in the Eva mapping.

List accepts all React Native FlatList props, and exposes scrollToEnd(), scrollToIndex() and scrollToOffset() through a ref typed as ListRef.

ListItem

Property	Type	Default	Description
title	string | number | (props) => ReactElement	undefined	Primary text content of the list item.
description	string | number | (props) => ReactElement	undefined	Secondary text content displayed below the title.
accessoryLeft	(props) => ReactElement	undefined	Render function for the left accessory (e.g., icon or avatar).
accessoryRight	(props: ViewProps) => ReactElement	undefined	Render function for the right accessory. Unlike accessoryLeft, it receives ViewProps, so it can hold any view — a button, a toggle.
children	ReactNode	undefined	Custom content replacing the default layout. When provided, title and the accessories are ignored.
appearance	'default'	'default'	Appearance defined in the Eva mapping.

ListItem also accepts all standard React Native TouchableOpacity props, including onPress and disabled.

Storybook

Live examples coming soon via Storybook.