? FlatList in React Native

? Quick Overview

FlatList is a high-performance component in React Native used to render large lists of data efficiently. It renders only visible items on the screen, improving memory usage and performance.

? Key Concepts

Virtualized list rendering
Efficient scrolling performance
Reusable list items
Supports vertical and horizontal lists

? Syntax / Theory

FlatList requires two main props: data and renderItem. Each item must have a unique key.

? Code Example(s)

? View Code Example

// Basic FlatList example in React Native
import React from 'react';
import { FlatList, Text, View } from 'react-native';

const data = [
  { id: '1', name: 'Apple' },
  { id: '2', name: 'Banana' },
  { id: '3', name: 'Mango' }
];

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

? Live Output / Explanation

The list displays fruit names vertically. Only visible items are rendered, improving performance for large datasets.

? Interactive / Visual Explanation

This simulator demonstrates how a FlatList receives data and renders it into a scrollable view on a mobile screen. Add items below to update the simulated data array.

My FlatList App

Scroll the phone screen to see the list behavior.

? Use Cases

Contact lists
Chat message threads
Product listings
Feed-based applications

✅ Tips & Best Practices

Always use keyExtractor for unique keys
Use initialNumToRender for performance tuning
Avoid anonymous functions inside renderItem for large lists

? Try It Yourself

Create a FlatList showing numbers from 1 to 100
Convert the list to horizontal scrolling
Add custom styling to each item