Lists with FlatList

Why not just map inside a ScrollView?

You can render a list by mapping over data inside a ScrollView, but that builds every row at once — slow and memory-heavy for long lists. FlatList only renders the rows currently visible and recycles them as you scroll, staying fast with thousands of items.

Basic FlatList

import { FlatList, Text, View } from 'react-native';

const data = [
  { id: '1', name: 'Anand' },
  { id: '2', name: 'Priya' },
  { id: '3', name: 'Ravi' },
];

function UserList() {
  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={{ padding: 16 }}>
          <Text>{item.name}</Text>
        </View>
      )}
    />
  );
}

Three key props: data (your array), renderItem (how to draw one row), and keyExtractor (a unique id per row so React can track them).

Useful FlatList props

• ItemSeparatorComponent — a divider between rows.
• ListHeaderComponent / ListFooterComponent — content above/below the list.
• ListEmptyComponent — what to show when the data is empty.
• onRefresh + refreshing — pull-to-refresh.
• onEndReached — load more when the user scrolls near the bottom (infinite scroll).

<FlatList
  data={users}
  keyExtractor={(u) => u.id}
  renderItem={({ item }) => <UserRow user={item} />}
  ItemSeparatorComponent={() => <View style={{ height: 1, backgroundColor: '#eee' }} />}
  ListEmptyComponent={() => <Text>No users yet</Text>}
  onEndReached={loadMore}
  onEndReachedThreshold={0.5}
/>

SectionList for grouped data

When your data has headers (like contacts grouped by letter), use SectionList, which works the same way but adds section headers.

Performance tips

• Always provide a stable keyExtractor.
• Keep renderItem light; extract a memoised row component for big lists.
• Don’t nest a FlatList inside a ScrollView of the same direction.

Common mistakes

• Using ScrollView + .map() for long lists (janky, memory-heavy).
• Missing keyExtractor or using the array index as the key.
• Heavy work inside renderItem slowing down scrolling.

Summary: Use FlatList for scrolling lists — it recycles rows for performance. Provide data, renderItem and a stable keyExtractor, and use its props for separators, empty states, pull-to-refresh and infinite scroll.