FlatList vs FlashList v2 vs Legend List: Guida Completa alle Liste Performanti in React Native

Perché le Liste Sono il Punto Critico di Ogni App React Native

Se hai sviluppato anche una sola app con React Native, lo sai già: le liste sono sempre il primo problema serio. Feed social, cataloghi prodotto, chat, elenchi contatti — le liste sono letteralmente ovunque. E quando gli elementi crescono a centinaia o migliaia, le cose possono andare male in fretta: frame drops, scorrimento a scatti, memoria che esplode e, nei casi peggiori, crash veri e propri.

La buona notizia? Nel 2026 lo scenario è cambiato parecchio.

Non c'è più una sola risposta alla domanda «quale componente lista usare?». Accanto al classico FlatList di React Native, oggi abbiamo FlashList v2 di Shopify (riscritta completamente per la Nuova Architettura) e Legend List v2, una libreria 100% JavaScript che punta tutto sulla semplicità e sulle prestazioni senza dipendenze native. Tre approcci diversi, tre filosofie diverse.

In questa guida le mettiamo a confronto con dati reali, esempi di codice pronti all'uso e una mappa decisionale per aiutarti a scegliere quella giusta per il tuo progetto. Andiamo al sodo.

Come Funziona FlatList: la Virtualizzazione di Sempre

FlatList è il componente built-in di React Native per gestire elenchi lunghi. Il concetto è semplice: usa la virtualizzazione, cioè renderizza solo gli elementi visibili nel viewport più un buffer sopra e sotto, e smonta tutto il resto.

I Limiti della Virtualizzazione Tradizionale

Il problema, però, è che ogni volta che scorri e un nuovo elemento entra nel viewport, FlatList lo ricrea da zero. Mount del componente, esecuzione della logica di rendering, layout. E quando l'elemento esce? Distrutto completamente. Anche se l'hai già visualizzato cinque volte, ogni passaggio richiede un nuovo mount. Non è esattamente efficiente.

In pratica questo si traduce in:

• Overhead di mount/unmount: ogni creazione e distruzione di componente consuma CPU
• Consumo di memoria elevato: il parametro windowSize di default (21) tiene in memoria molti più elementi del necessario
• Celle vuote durante lo scroll veloce: se il thread JavaScript non riesce a creare i componenti abbastanza in fretta, appaiono quegli antipatici spazi bianchi
• Nessun riciclo: i componenti non vengono mai riutilizzati, anche quando hanno la stessa identica struttura

// FlatList di base — API standard di React Native
import React from 'react';
import { FlatList, Text, View, StyleSheet } from 'react-native';

interface Product {
  id: string;
  name: string;
  price: number;
}

const ProductItem = ({ item }: { item: Product }) => (
  <View style={styles.item}>
    <Text style={styles.name}>{item.name}</Text>
    <Text style={styles.price}>€{item.price.toFixed(2)}</Text>
  </View>
);

const ProductList = ({ products }: { products: Product[] }) => (
  <FlatList
    data={products}
    keyExtractor={(item) => item.id}
    renderItem={({ item }) => <ProductItem item={item} />}
    // Ottimizzazioni manuali necessarie:
    windowSize={5}           // Ridurre da 21 (default) a 5-10
    maxToRenderPerBatch={10} // Limita i render per batch
    removeClippedSubviews={true}
    getItemLayout={(_, index) => ({
      length: 80,
      offset: 80 * index,
      index,
    })}
  />
);

const styles = StyleSheet.create({
  item: {
    height: 80,
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
    justifyContent: 'center',
  },
  name: { fontSize: 16, fontWeight: '600' },
  price: { fontSize: 14, color: '#666', marginTop: 4 },
});

Anche mettendoci tutte queste ottimizzazioni a mano, FlatList continua a faticare con liste grandi e layout complessi — soprattutto su dispositivi Android di fascia media e bassa, dove la differenza si sente davvero.

FlashList v2: il Riciclo delle Celle per la Nuova Architettura

FlashList è nata dal team React Native Foundations di Shopify come alternativa ad alte prestazioni a FlatList. La versione 2 (attualmente alla v2.3) è una riscrittura da zero, pensata esclusivamente per la Nuova Architettura di React Native.

Cell Recycling: il Vero Game Changer

Ecco dove le cose si fanno interessanti. Invece di distruggere e ricreare i componenti, FlashList mantiene un pool di view native che non vengono mai eliminate durante lo scroll. Quando un elemento esce dal viewport, la sua view viene riciclata per uno nuovo che entra: il componente React rimane montato, ma riceve semplicemente nuove props.

Il risultato? Zero overhead di mount/unmount, meno lavoro per il thread JavaScript e scorrimento fluido anche con migliaia di elementi. Onestamente, la prima volta che l'ho visto in azione la differenza era impressionante.

Cosa c'è di Nuovo nella v2

• Niente più stima delle dimensioni obbligatoria: a differenza della v1, FlashList v2 misura automaticamente gli elementi — addio estimatedItemSize come requisito
• Soluzione 100% JS: nessuna dipendenza nativa, più facile da manutenere e integrare
• Layout Masonry: crea layout stile Pinterest con altezze variabili direttamente con una prop
• maintainVisibleContentPosition attivo di default: gestisce automaticamente lo shift del contenuto quando aggiungi elementi in cima alla lista
• Pool di riciclo multipli: ottimizza le prestazioni per liste con tipi di elementi diversi tramite getItemType
• Ref potenziato: nuovi metodi come getVisibleIndices() e getLayout()

// FlashList v2 — migrazione da FlatList
// npm install @shopify/flash-list
import React, { useCallback } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { FlashList } from '@shopify/flash-list';

interface Product {
  id: string;
  name: string;
  price: number;
  category: 'electronics' | 'clothing' | 'food';
}

const ProductItem = React.memo(({ item }: { item: Product }) => (
  <View style={styles.item}>
    <Text style={styles.name}>{item.name}</Text>
    <Text style={styles.price}>€{item.price.toFixed(2)}</Text>
    <Text style={styles.category}>{item.category}</Text>
  </View>
));

const ProductList = ({ products }: { products: Product[] }) => {
  const renderItem = useCallback(
    ({ item }: { item: Product }) => <ProductItem item={item} />,
    []
  );

  // getItemType migliora il riciclo: elementi dello stesso tipo
  // vengono riciclati tra loro, evitando aggiornamenti pesanti
  const getItemType = useCallback(
    (item: Product) => item.category,
    []
  );

  return (
    <FlashList
      data={products}
      renderItem={renderItem}
      getItemType={getItemType}
      estimatedItemSize={80} // Opzionale in v2, ma consigliato
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  name: { fontSize: 16, fontWeight: '600' },
  price: { fontSize: 14, color: '#666', marginTop: 4 },
  category: { fontSize: 12, color: '#999', marginTop: 2 },
});

Un dettaglio importante: FlashList v2 funziona solo con la Nuova Architettura di React Native. Se il tuo progetto usa ancora il vecchio Bridge, devi restare sulla v1 oppure migrare prima l'architettura. Non ci sono scorciatoie su questo punto.

Layout Masonry con FlashList v2

Una delle novità più attese (e francamente più utili) della v2 è il supporto nativo per i layout Masonry, quelli stile Pinterest per intenderci. Niente librerie aggiuntive, funziona così:

// Layout Masonry con FlashList v2
import { FlashList } from '@shopify/flash-list';

const MasonryGallery = ({ images }: { images: ImageItem[] }) => (
  <FlashList
    data={images}
    numColumns={2}
    renderItem={({ item }) => (
      <View style={{ padding: 4 }}>
        <Image
          source={{ uri: item.url }}
          style={{
            width: '100%',
            // L'altezza varia per ogni elemento
            height: item.height,
            borderRadius: 8,
          }}
        />
        <Text>{item.title}</Text>
      </View>
    )}
    estimatedItemSize={200}
    optimizeItemArrangement // Ottimizza la disposizione nel layout masonry
  />
);

Legend List v2: Tutto JavaScript, Zero Dipendenze Native

Legend List è il nuovo arrivato nell'ecosistema, creato da Jay Meistrich (lo stesso autore di Legend-State, se lo conosci). La versione attuale è la v2.0, completamente riscritta in TypeScript puro senza alcuna dipendenza nativa.

La Filosofia: «Render Less, Less Often»

L'idea di fondo di Legend List è semplice ma efficace: la cosa più lenta in React è il re-rendering. Punto. Quindi la strategia è rendere il meno possibile, il meno frequentemente possibile. Invece di riciclare le view come fa FlashList, Legend List si concentra sulla minimizzazione assoluta dei re-render.

È un approccio diverso, e in certi scenari funziona sorprendentemente bene.

Caratteristiche Principali

• 100% TypeScript/JavaScript: nessun linking nativo, funziona ovunque (anche in Expo Go, il che è un bel vantaggio)
• Dimensioni dinamiche native: supporta elementi con altezze variabili senza impatto sulle prestazioni
• Drop-in replacement: API compatibile con FlatList e FlashList, la migrazione è praticamente immediata
• Riciclo opzionale: il riciclo delle view è disattivato di default (recycleItems={false}) ma puoi attivarlo con una prop
• Funzionalità per le chat: maintainScrollAtEnd e alignItemsAtEnd per interfacce di chat senza quel fastidioso hack di inversione della lista
• Peso leggero: il pacchetto è davvero minimale

// Legend List v2 — setup e utilizzo
// npm install @legendapp/list
import React, { useCallback } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { LegendList } from '@legendapp/list';

interface Message {
  id: string;
  text: string;
  sender: string;
  timestamp: number;
}

const MessageItem = React.memo(({ item }: { item: Message }) => (
  <View style={styles.message}>
    <Text style={styles.sender}>{item.sender}</Text>
    <Text>{item.text}</Text>
  </View>
));

// Esempio: lista chat con Legend List
const ChatList = ({ messages }: { messages: Message[] }) => {
  const renderItem = useCallback(
    ({ item }: { item: Message }) => <MessageItem item={item} />,
    []
  );

  return (
    <LegendList
      data={messages}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      estimatedItemSize={60}
      // Funzionalità specifiche per chat:
      alignItemsAtEnd        // Allinea i contenuti in basso
      maintainScrollAtEnd    // Scroll automatico a fine lista
      // Riciclo opzionale per liste molto grandi:
      recycleItems={false}   // Default: disattivato
    />
  );
};

const styles = StyleSheet.create({
  message: {
    padding: 12,
    marginVertical: 4,
    marginHorizontal: 16,
    backgroundColor: '#f0f0f0',
    borderRadius: 12,
  },
  sender: { fontWeight: '600', marginBottom: 4 },
});

Quando il Riciclo Diventa un Problema

Questa è una differenza che conta parecchio. FlashList ricicla le view, il che significa che se un componente figlio ha stato locale (pensa a un accordion aperto/chiuso), quello stato potrebbe essere «ereditato» da un elemento completamente diverso durante lo scroll. È un bug subdolo e difficile da debuggare.

Legend List, con il riciclo disattivato di default, evita il problema alla radice.

Detto questo, se hai liste con migliaia di elementi identici nella struttura (tipo un feed di post), puoi sempre abilitare recycleItems={true} per ottenere il massimo dalle prestazioni — a patto di gestire correttamente il reset dello stato locale nei componenti.

Confronto Diretto: Numeri e Caratteristiche

Basta teoria, parliamo di numeri. Ecco un confronto sintetico delle tre librerie basato su dati reali:

Caratteristica	FlatList	FlashList v2	Legend List v2
Strategia	Virtualizzazione	Cell Recycling	Render minimo + riciclo opzionale
Nuova Architettura	Sì (vecchia e nuova)	Solo Nuova Architettura	Vecchia e Nuova
Dipendenze native	Built-in	Nessuna (JS-only in v2)	Nessuna (100% JS)
Stima dimensioni	getItemLayout (manuale)	Opzionale in v2	estimatedItemSize (consigliato)
Layout Masonry	No	Sì (nativo)	No
Riciclo view	No	Sì (default)	Opzionale
Chat UI nativo	Richiede inversione	maintainVisibleContentPosition	maintainScrollAtEnd + alignItemsAtEnd
FPS medio (lista 1000 elem.)	~37 FPS	~57 FPS	~55 FPS
CPU thread JS	>90%	<10%	<15%
Compatibilità Expo Go	Sì	Sì (v2 è JS-only)	Sì
Download mensili npm	Built-in	>2 milioni	In crescita

I numeri sono piuttosto eloquenti: sia FlashList che Legend List staccano FlatList nettamente, con quasi 20 FPS di differenza e un uso della CPU del thread JS drasticamente inferiore.

Guida alla Migrazione: Da FlatList a FlashList v2

FlashList è pensata come drop-in replacement di FlatList. La migrazione è quasi immediata — e questo è uno dei suoi punti di forza maggiori:

// Prima: FlatList
import { FlatList } from 'react-native';

<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <ItemComponent item={item} />}
  windowSize={5}
  removeClippedSubviews={true}
  getItemLayout={(_, index) => ({
    length: 80,
    offset: 80 * index,
    index,
  })}
/>

// Dopo: FlashList v2
import { FlashList } from '@shopify/flash-list';

<FlashList
  data={items}
  renderItem={({ item }) => <ItemComponent item={item} />}
  estimatedItemSize={80}  // Opzionale in v2, ma migliora il primo render
/>

Nota quante cose puoi semplicemente eliminare durante la migrazione:

• keyExtractor — FlashList usa l'indice di default (puoi mantenerlo se preferisci, ma non è necessario)
• windowSize — FlashList gestisce il buffer automaticamente con un default di 250px
• removeClippedSubviews — non serve più, il riciclo gestisce tutto
• getItemLayout — in v2 le dimensioni vengono misurate in automatico

Meno codice, meno config, prestazioni migliori. Difficile dire di no.

Attenzione: le Insidie del Riciclo

Il riciclo delle view però porta con sé alcune trappole che è meglio conoscere subito, prima di trovarsi a debuggare bug fantasma in produzione:

// ❌ ERRORE COMUNE: usare la prop key sugli elementi
// Questo IMPEDISCE il riciclo e annulla i vantaggi di FlashList
const renderItem = ({ item }) => (
  <View key={item.id}>  {/* ← NON farlo! */}
    <Text>{item.name}</Text>
  </View>
);

// ✅ CORRETTO: nessuna key sul componente figlio
const renderItem = ({ item }) => (
  <View>
    <Text>{item.name}</Text>
  </View>
);

// ❌ ERRORE: stato locale non resettato con il riciclo
const BadItem = ({ item }) => {
  const [expanded, setExpanded] = useState(false);
  // Questo stato PERSISTE quando la view viene riciclata!
  return (
    <View>
      <Text>{item.name}</Text>
      {expanded && <Text>{item.details}</Text>}
    </View>
  );
};

// ✅ CORRETTO: resettare lo stato basandosi sull'item
const GoodItem = ({ item }) => {
  const [expanded, setExpanded] = useState(false);

  useEffect(() => {
    setExpanded(false); // Reset ad ogni cambio di item
  }, [item.id]);

  return (
    <View>
      <Text>{item.name}</Text>
      {expanded && <Text>{item.details}</Text>}
    </View>
  );
};

Tecniche di Ottimizzazione che Valgono per Tutte

Indipendentemente dalla libreria che scegli, ci sono alcune tecniche che migliorano le prestazioni di qualsiasi lista in React Native. Queste le dovresti conoscere a prescindere.

1. Usa React.memo e useCallback (Sempre)

Avvolgi sempre i componenti degli elementi con React.memo e le funzioni renderItem con useCallback. Senza queste ottimizzazioni, ogni aggiornamento dello stato del componente padre causa il re-render di tutti gli elementi della lista. È un errore che vedo fare spessissimo.

// Pattern ottimale per qualsiasi libreria lista
const ListItem = React.memo(({ item, onPress }: ItemProps) => {
  return (
    <Pressable onPress={() => onPress(item.id)}>
      <Text>{item.title}</Text>
    </Pressable>
  );
});

const MyList = ({ data }: { data: Item[] }) => {
  const handlePress = useCallback((id: string) => {
    // Gestisci il tap
  }, []);

  const renderItem = useCallback(
    ({ item }: { item: Item }) => (
      <ListItem item={item} onPress={handlePress} />
    ),
    [handlePress]
  );

  return (
    <FlashList
      data={data}
      renderItem={renderItem}
      estimatedItemSize={72}
    />
  );
};

2. StyleSheet.create, non Stili Inline

Gli stili inline creano nuovi oggetti a ogni render, il che causa re-render inutili nei componenti figli. StyleSheet.create li ottimizza e li mette in cache. Sembra un dettaglio, ma su una lista con centinaia di elementi fa la differenza.

3. Selettori dello Stato Globale: Sii Chirurgico

Se usi Zustand, Redux o Context, assicurati che i componenti degli elementi si iscrivano solo allo stato che effettivamente utilizzano. Un selettore troppo generico causa re-render a cascata su ogni singolo elemento della lista — ed è uno dei problemi di prestazioni più comuni che ho visto in progetti reali.

// ❌ Ogni cambio dello store causa il re-render di TUTTI gli elementi
const products = useStore((state) => state);

// ✅ Solo il campo necessario — re-render solo quando cambia il prezzo
const price = useStore((state) => state.products[id].price);

4. Immagini: Non Usare il Componente Image di Default

Le immagini sono spesso il vero collo di bottiglia nelle liste. Usa expo-image o react-native-fast-image: gestiscono caching, placeholder e transizioni in modo automatico, e la differenza nello scroll si nota subito.

Mappa Decisionale: Quale Lista Scegliere

Ok, arriviamo alla domanda che tutti si fanno. Ecco una guida rapida per scegliere il componente giusto in base al tuo scenario specifico:

• Lista semplice (meno di 100 elementi, layout statico): usa FlatList. È built-in, ben documentata e più che sufficiente per questi casi.
• Lista media o grande (100-10.000 elementi): usa FlashList v2. Il riciclo delle celle fa una differenza enorme sulle prestazioni, ed è il componente più testato in produzione (Shopify lo usa nei propri prodotti).
• Layout Masonry (griglia Pinterest): usa FlashList v2. È l'unica delle tre a supportarlo in modo nativo.
• Interfaccia di chat: usa Legend List v2. Le prop maintainScrollAtEnd e alignItemsAtEnd sono progettate specificamente per questo, senza l'hack di inversione che tutti odiano.
• Elementi con stato locale complesso: usa Legend List v2 con recycleItems={false}. Eviti i problemi di stato fantasma legati al riciclo.
• Progetto con vecchia architettura: usa Legend List v2 o FlatList. FlashList v2 richiede obbligatoriamente la Nuova Architettura, non c'è modo di aggirare questo requisito.
• Scroll infinito bidirezionale: sia FlashList v2 che Legend List v2 lo supportano nativamente.

Esempio Avanzato: Feed Social con Tipi Multipli

Vediamo un esempio più realistico. Un feed social che combina post di testo, immagini e video — il tipo di scenario che incontri nella vita reale — sfruttando le funzionalità avanzate di FlashList v2:

import React, { useCallback } from 'react';
import { View, Text, Image, StyleSheet, Dimensions } from 'react-native';
import { FlashList } from '@shopify/flash-list';

type FeedItem =
  | { id: string; type: 'text'; author: string; content: string }
  | { id: string; type: 'image'; author: string; imageUrl: string; caption: string }
  | { id: string; type: 'video'; author: string; videoUrl: string; thumbnail: string };

const TextPost = React.memo(({ item }: { item: Extract<FeedItem, { type: 'text' }> }) => (
  <View style={styles.card}>
    <Text style={styles.author}>{item.author}</Text>
    <Text style={styles.content}>{item.content}</Text>
  </View>
));

const ImagePost = React.memo(({ item }: { item: Extract<FeedItem, { type: 'image' }> }) => (
  <View style={styles.card}>
    <Text style={styles.author}>{item.author}</Text>
    <Image source={{ uri: item.imageUrl }} style={styles.feedImage} />
    <Text style={styles.caption}>{item.caption}</Text>
  </View>
));

const VideoPost = React.memo(({ item }: { item: Extract<FeedItem, { type: 'video' }> }) => (
  <View style={styles.card}>
    <Text style={styles.author}>{item.author}</Text>
    <Image source={{ uri: item.thumbnail }} style={styles.feedImage} />
    <View style={styles.playButton}>
      <Text style={styles.playIcon}>▶</Text>
    </View>
  </View>
));

const SocialFeed = ({ feedItems }: { feedItems: FeedItem[] }) => {
  const renderItem = useCallback(({ item }: { item: FeedItem }) => {
    switch (item.type) {
      case 'text':
        return <TextPost item={item} />;
      case 'image':
        return <ImagePost item={item} />;
      case 'video':
        return <VideoPost item={item} />;
    }
  }, []);

  // getItemType è FONDAMENTALE per le prestazioni:
  // FlashList ricicla gli elementi solo tra quelli dello stesso tipo
  const getItemType = useCallback(
    (item: FeedItem) => item.type,
    []
  );

  return (
    <FlashList
      data={feedItems}
      renderItem={renderItem}
      getItemType={getItemType}
      estimatedItemSize={300}
    />
  );
};

const { width } = Dimensions.get('window');

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    marginVertical: 4,
    padding: 16,
    borderRadius: 8,
  },
  author: { fontWeight: '700', fontSize: 15, marginBottom: 8 },
  content: { fontSize: 14, lineHeight: 20, color: '#333' },
  feedImage: { width: width - 32, height: 250, borderRadius: 8, marginVertical: 8 },
  caption: { fontSize: 13, color: '#666' },
  playButton: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    marginTop: -20,
    marginLeft: -20,
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: 'rgba(0,0,0,0.6)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  playIcon: { color: '#fff', fontSize: 18 },
});

L'uso di getItemType qui è fondamentale: FlashList crea pool di riciclo separati per ogni tipo di elemento. Un post di testo non verrà mai riciclato in un post con immagine, evitando aggiornamenti costosi e quei fastidiosi glitch visivi che rovinano l'esperienza utente.

Come Misurare le Prestazioni

Un consiglio che vale oro: non ottimizzare al buio. Misura sempre prima e dopo ogni modifica. Ecco gli strumenti che ti servono nel 2026:

• Performance Monitor di React Native: attivalo dal Dev Menu per vedere gli FPS in tempo reale del thread JS e UI
• React DevTools Profiler: ti mostra esattamente quali componenti si ri-renderizzano troppo spesso
• Flipper (Performance Plugin): per un'analisi dettagliata della CPU e dei frame drops
• FlashList Performance Warning: FlashList logga automaticamente un avviso in console quando rileva problemi di prestazioni, e spesso ti suggerisce pure come risolverli

Come target, punta a mantenere 60 FPS costanti durante lo scroll e l'utilizzo del thread JS sotto il 15%. Se non ci arrivi, c'è margine di ottimizzazione.

Domande Frequenti

FlashList è davvero più veloce di FlatList?

Sì, e non di poco. In benchmark reali, FlashList v2 raggiunge in media 57 FPS contro i 37 di FlatList, con una riduzione dell'utilizzo CPU del thread JS dall'oltre 90% a meno del 10%. La differenza è particolarmente visibile su dispositivi Android di fascia media e bassa, dove FlatList soffre di più.

Posso usare FlashList v2 con la vecchia architettura?

No, purtroppo. FlashList v2 è stata progettata esclusivamente per la Nuova Architettura. Se il tuo progetto usa ancora il vecchio Bridge, le opzioni sono: restare sulla FlashList v1, usare Legend List v2, oppure FlatList. Sia Legend List che FlatList funzionano con entrambe le architetture.

Legend List può sostituire FlashList?

Dipende. Per le interfacce di chat e per le liste con elementi che hanno stato locale complesso, Legend List è spesso la scelta migliore — il riciclo disattivato di default e le prop specifiche per le chat sono un vantaggio concreto. Per feed lunghi e layout masonry però, FlashList v2 resta superiore grazie al riciclo ottimizzato e al supporto masonry nativo.

Come gestisco SectionList con FlashList?

FlashList non ha un equivalente diretto di SectionList. La soluzione è usare getItemType per differenziare gli header di sezione dagli elementi normali, oppure appiattire i dati in un singolo array dove gli header sono elementi speciali. Se ti servono funzionalità specifiche come stickySectionHeadersEnabled, in quel caso potresti dover restare su SectionList.

Quale libreria lista è migliore per Expo?

Tutte e tre funzionano bene con Expo. FlatList è built-in, mentre FlashList v2 e Legend List v2 sono entrambe soluzioni 100% JavaScript senza dipendenze native — e questo significa che funzionano anche in Expo Go senza bisogno di un development build personalizzato. Per progetti Expo con SDK 53+ e Nuova Architettura attiva, FlashList v2 è la scelta che consiglio nella maggior parte degli scenari.