List - React Native Starter

Search…
List
​
Performant interface for rendering simple, flat lists. 
​
Lists should render ListItem components by providing them through renderItem property to provide a useful component.
import { FlatList } from 'react-native';
import { List, ListItem } from '../components'
​
const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];
​
const renderItem = ({ item }) => (
    <List>
      <ListItem title={item.title} />
    </List>
);
​
​
<FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
/>
​
Using ListItem is helpful for basic lists, but not required. For example, Card may be used.
import { FlatList } from 'react-native';
import { List, ListItem, Card } from '../components'
​
const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
    content: 'Today we are going to provide you with excellent articles to read in December. Enjoy fresh ideas, tips, and tricks from the JavaScript world.',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
    content: 'Today we are going to provide you with excellent articles to read in December. Enjoy fresh ideas, tips, and tricks from the JavaScript world.',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
    content: 'Today we are going to provide you with excellent articles to read in December. Enjoy fresh ideas, tips, and tricks from the JavaScript world.',
  },
];
​
const renderItem = ({ item }) => (
    <List>
      <ListItem>
        <Card title={item.title}>{item.content}</Card>
      </ListItem>
    </List>
);
​
​
<FlatList
    data={DATA}
    renderItem={renderItem}
    keyExtractor={item => item.id}
/>
Properties
Name
Type
Description
data
array
An array of anything to be rendered within the list
renderItem
(ListRenderItemInfo) => ReactElement
Takes an item from data and renders it into the list.
...FlatListProps
FlatListProps
Any props applied to FlatList component.
Card
Top Navigation
Last modified 1yr ago
Copy link