React Native Tutorial

Getting Started with React Native JavaScript & JSX Essentials Core Components & Styling Props & State Hooks (useState & useEffect) Lists with FlatList Navigation (React Navigation) Networking with fetch / axios State Management (Context & Redux) Local Storage with AsyncStorage Native Modules & Permissions Building & Publishing (EAS / Stores)

Lists with FlatList

June 02, 2026 • 1 min read

FlatList renders long lists efficiently by only drawing what's on screen (unlike mapping inside a ScrollView, which renders everything).

<FlatList
  data={products}
  keyExtractor={(item) => item.id.toString()}
  renderItem={({ item }) => (
    <View style={styles.row}>
      <Text>{item.title}</Text>
    </View>
  )}
  ItemSeparatorComponent={() => <View style={styles.sep} />}
/>
  • keyExtractor gives each row a stable key.
  • Add onEndReached for infinite scroll / pagination.
  • Add refreshing + onRefresh for pull-to-refresh.
Tip: Avoid mapping huge arrays inside ScrollView — it renders every item and gets slow. Use FlatList.

Summary

FlatList efficiently renders large lists with keyExtractor, renderItem, and built-in pagination/refresh support.