Skip to main content

Basic List

A simple sectioned list with items grouped by category.

Live Example​

Code Breakdown​

Section Data Structure​

Each section needs a key, title, and data array:

const sections = [
  {
    key: 'fruits',      // Unique identifier
    title: 'Fruits',    // Display text
    data: [...]         // Array of items
  },
];

Render Functions​

renderItem - Renders each item in the list:

renderItem={({ item }) => (
  <View style={styles.item}>
    <Text>{item.name}</Text>
  </View>
)}

renderSectionHeader - Renders section headers:

renderSectionHeader={({ section }) => (
  <View style={styles.header}>
    <Text>{section.title}</Text>
  </View>
)}

Performance​

Set estimatedItemSize to improve initial render:

estimatedItemSize={60} // Average height of each item

Next Steps​