React Native FlatList: Render Long Lists the Right Way

Lists are in nearly every app, and FlatList keeps them smooth.

Direct answer

FlatList renders long lists efficiently by only drawing items near the screen. Give it a data array, a renderItem function and a keyExtractor. Use it instead of mapping over a ScrollView for anything beyond a few items.

Example

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

const DATA = [
  { id: "1", title: "Learn React Native" },
  { id: "2", title: "Build a screen" },
  { id: "3", title: "Ship the app" },
];

export default function List() {
  return (
    <FlatList
      data={DATA}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={{ padding: 16 }}>
          <Text>{item.title}</Text>
        </View>
      )}
      ItemSeparatorComponent={() => <View style={{ height: 1, backgroundColor: "#eee" }} />}
    />
  );
}

Useful props

Prop	Purpose
onRefresh, refreshing	pull to refresh
onEndReached	load more
ListEmptyComponent	empty state
ListHeaderComponent	header

Performance tips

• Keep renderItem light and consider React.memo.
• Use stable keys.
• Avoid inline heavy functions where possible.

Where Teyro fits

Teyro's React Native for Beginners course turns this into short lessons you can play in a few minutes a day. It has 80 lessons, and you can start free.

The bottom line

Use FlatList for long lists and provide good keys.

More guides

• React Native Navigation
• React Native Styling
• useState in React Native
• React native core components
• React Native for Beginners course