State & Lists›Core· 40 min read

Efficient Lists with FlatList

FlatList shows long lists smoothly by only drawing the rows currently on screen.

What you will learn

Render an array with FlatList
Use the data and renderItem props
Understand why FlatList beats a plain loop

Why not just map()?

On the web you often .map() over an array to make a list. On a phone with hundreds of rows that is slow and can lag, because it draws everything at once. FlatList is the smart way: it only renders the rows visible on screen and recycles them as you scroll.

A list of contacts

FlatList needs two main props: data (your array) and renderItem (how to draw one row).

FlatList draws each item with renderItem and scrolls efficiently

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

const contacts = [
  { id: '1', name: 'Aanya' },
  { id: '2', name: 'Rohan' },
  { id: '3', name: 'Meera' },
];

export default function App() {
  return (
    <FlatList
      data={contacts}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={styles.row}>
          <Text style={styles.name}>{item.name}</Text>
        </View>
      )}
    />
  );
}

const styles = StyleSheet.create({
  row: { padding: 16, borderBottomWidth: 1, borderColor: '#eee' },
  name: { fontSize: 18 },
});

Note: Output: A scrollable list with three rows: Aanya Rohan Meera Each row is one item from data. renderItem receives { item } and returns the row to show.

Prop	What it is for
`data`	The array of items to show
`renderItem`	A function that returns one row, given `{ item }`
`keyExtractor`	Returns a unique id per item (helps performance)

Tip: Add ItemSeparatorComponent for lines between rows, or ListEmptyComponent to show a "Nothing here yet" message when data is empty.

Watch out: Give each item a stable, unique key via keyExtractor. Without it React Native warns you and lists can behave oddly when items change.

Q. Why use FlatList instead of mapping over an array of Views?

Answer: FlatList renders just the visible rows and recycles them while scrolling, keeping long lists smooth — a plain map draws everything at once.

✍️ Practice

Show a FlatList of five of your favourite foods.
Add a line between rows using ItemSeparatorComponent.

🏠 Homework

Build a list of 8 tasks from an array of objects, each row showing the task text in its own row style.