FlatList

React Native · Reference cheat sheet

📋 Overview

FlatList efficiently renders long scrolling lists by virtualizing off-screen rows. Provide data, renderItem, and a stable keyExtractor. For sectioned data use SectionList; for very large lists consider FlashList.

🔧 Core concepts

Avoid anonymous inline components that remount every parent render—extract Row.

💡 Examples

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

type Item = { id: string; title: string };

export function Feed({ items }: { items: Item[] }) {
  return (
    <FlatList
      data={items}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={styles.row}>
          <Text>{item.title}</Text>
        </View>
      )}
      ItemSeparatorComponent={() => <View style={styles.sep} />}
      onEndReachedThreshold={0.4}
      onEndReached={() => {
        /* load more */
      }}
    />
  );
}

const styles = StyleSheet.create({
  row: { padding: 16 },
  sep: { height: 1, backgroundColor: "#eee" },
});

⚠️ Pitfalls

• Using ScrollView + .map for huge lists.
• Inline renderItem=\{() => ...\} creating new types + unstable handlers without care.
• Missing keys / using index when reordering.
• Nesting VirtualizedLists (FlatList inside ScrollView) without care.
• Heavy rows—memoize row components.

🔗 Related

• sectionlist.md — sections
• scrollview.md — non-virtualized
• refresh_control.md — pull to refresh
• performance — list perf
• keys_lists — identity