Lists with FlatList

Let's think about this for a moment

FlatList mainly works with three props: data (the array), renderItem (how to display each item), and keyExtractor (a unique key for each item). ScrollView + .map() renders every item upfront, including ones not yet visible on screen, which can cause memory/performance problems with hundreds of items — FlatList instead uses virtualization (rendering only items near the screen and recycling the rest), keeping performance solid for lists with hundreds of items.

Let's connect this to a real scenario

Chat app message lists, e-commerce product lists, social media feeds — FlatList is the standard choice for any list with lots of items like these. Inside renderItem you return a card component for each item, and for keyExtractor you pass item._id or item.id converted to a string — an incorrect key can hurt React's reconciliation performance.

FlatList = data + renderItem + keyExtractor
Virtualization = renders only what's on screen (memory efficient)
keyExtractor = giving each item a unique key

Code Example

javascript

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

const products = [
  { id: '1', name: 'T-Shirt', price: '15000 MMK' },
  { id: '2', name: 'Sneakers', price: '85000 MMK' },
  { id: '3', name: 'Backpack', price: '45000 MMK' },
];

export default function ProductList() {
  return (
    <FlatList
      data={products}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={styles.card}>
          <Text style={styles.name}>{item.name}</Text>
          <Text>{item.price}</Text>
        </View>
      )}
    />
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, borderBottomWidth: 1, borderColor: '#eee' },
  name: { fontWeight: '600', fontSize: 16 },
});

You should see

You'll be able to render a scrollable product list with FlatList.

5-Minute Try-It

Create your own data array (e.g. a list of favorite movies) and try rendering it with FlatList.

A Quick Heads-Up

Don't nest FlatList inside a ScrollView (you'll get a 'VirtualizedList nested inside ScrollView' warning) — use a View for the outer container, ScrollView isn't needed.