How to Use FlatList in React Native: Simple Guide

Use FlatList in React Native to render long lists efficiently by providing data and a renderItem function. It automatically handles scrolling and only renders visible items for better performance.

Syntax

The FlatList component requires at least two props: data (an array of items) and renderItem (a function that returns a component for each item). You should also provide a keyExtractor to uniquely identify each item.

• data: Array of items to display.
• renderItem: Function that receives an item and returns a React element.
• keyExtractor: Function that returns a unique key for each item.

javascript

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

<FlatList
  data={dataArray}
  renderItem={({ item }) => <Text>{item.title}</Text>}
  keyExtractor={item => item.id.toString()}
/>

Output

A scrollable list showing each item's title as text.

Example

This example shows a simple list of fruits using FlatList. Each fruit name is displayed as a text item in a scrollable list.

javascript

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

const fruits = [
  { id: '1', title: 'Apple' },
  { id: '2', title: 'Banana' },
  { id: '3', title: 'Cherry' },
  { id: '4', title: 'Date' },
  { id: '5', title: 'Elderberry' }
];

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1, marginTop: 50 }}>
      <FlatList
        data={fruits}
        renderItem={({ item }) => <Text style={{ fontSize: 24, padding: 10 }}>{item.title}</Text>}
        keyExtractor={item => item.id.toString()}
      />
    </SafeAreaView>
  );
}

Output

A vertical scrollable list showing: Apple, Banana, Cherry, Date, Elderberry each on its own line.

Common Pitfalls

Common mistakes when using FlatList include:

• Not providing a unique keyExtractor, which can cause rendering issues.
• Mutating the data array directly instead of creating a new array, which can prevent updates.
• Using heavy components inside renderItem without optimization, causing slow scrolling.

Always ensure keys are unique strings and avoid inline functions if performance is critical.

javascript

/* Wrong: No keyExtractor, causes warning and rendering issues */
<FlatList
  data={items}
  renderItem={({ item }) => <Text>{item.name}</Text>}
/>

/* Right: Provide keyExtractor for stable keys */
<FlatList
  data={items}
  renderItem={({ item }) => <Text>{item.name}</Text>}
  keyExtractor={item => item.id.toString()}
/>

Quick Reference

• data: Array of items to render.
• renderItem: Function to render each item.
• keyExtractor: Returns unique key for each item.
• horizontal: Set to true for horizontal scrolling.
• ListHeaderComponent: Component to render at the top.
• ListFooterComponent: Component to render at the bottom.
• onEndReached: Callback when list scroll reaches end.

Key Takeaways

Always provide a unique keyExtractor to avoid rendering issues.

FlatList efficiently renders only visible items for better performance.

Use renderItem to define how each list item looks.

Avoid mutating data arrays directly; create new arrays to trigger updates.

Use FlatList props like horizontal and onEndReached for advanced behaviors.