RN Lez 14: FlatList Base

Docs: Using List Views, FlatList

Obiettivi

• Usare FlatList per liste performanti
• Configurare data, renderItem, keyExtractor
• Gestire stati vuoti

---

1. FlatList — liste performanti

FlatList renderizza solo gli elementi visibili (virtualizzazione).

	ScrollView	FlatList
Render	TUTTI gli elementi	SOLO quelli visibili
Performance	↓ con tanti elementi	✅ sempre fluida
Quando usare	< 10 elementi	qualsiasi quantità

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

const DATA = [
    { id: '1', nome: 'Mario' },
    { id: '2', nome: 'Sofia' },
    { id: '3', nome: 'Luca' },
];

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

---

2. renderItem in dettaglio

const renderItem = ({ item, index, separators }) => {
    // item     = elemento corrente
    // index    = posizione (0, 1, 2...)
    // separators = per personalizzare separatori
    return (
        <View style={styles.item}>
            <Text style={styles.index}>{index + 1}.</Text>
            <Text style={styles.nome}>{item.nome}</Text>
        </View>
    );
};

---

3. keyExtractor

Fornisce una chiave unica per ogni elemento (ottimizzazione).

// Se l'id è stringa:
keyExtractor={item => item.id}

// Se l'id è number:
keyExtractor={item => item.id.toString()}

// Se non hai id, usa l'indice (NON consigliato se la lista cambia):
keyExtractor={(item, index) => index.toString()}

---

4. ListEmptyComponent

Cosa mostrare quando la lista è vuota.

<FlatList
    data={items}
    renderItem={renderItem}
    ListEmptyComponent={() => (
        <View style={styles.empty}>
            <Text style={{ fontSize: 48 }}>📭</Text>
            <Text style={styles.emptyText}>Nessun elemento</Text>
        </View>
    )}
/>

---

5. Altri componenti per lista

<FlatList
    data={items}
    renderItem={renderItem}
    ListHeaderComponent={      // in testa alla lista
        <Text style={styles.header}>I miei contatti</Text>
    }
    ListFooterComponent={      // in fondo
        <Text style={styles.footer}>Fine lista</Text>
    }
    ItemSeparatorComponent={   // tra un elemento e l'altro
        () => <View style={styles.separatore} />
    }
/>

---

6. Esempio: Lista contatti

type Contatto = {
    id: string;
    nome: string;
    telefono: string;
};

const CONTATTI: Contatto[] = [
    { id: '1', nome: 'Mario Rossi', telefono: '345 1234567' },
    { id: '2', nome: 'Sofia Bianchi', telefono: '345 7654321' },
    { id: '3', nome: 'Luca Verdi', telefono: '345 9876543' },
];

export default function App() {
    const renderItem = ({ item }: { item: Contatto }) => (
        <View style={styles.card}>
            <View style={styles.avatar}>
                <Text style={styles.iniziale}>{item.nome[0]}</Text>
            </View>
            <View>
                <Text style={styles.nome}>{item.nome}</Text>
                <Text style={styles.tel}>{item.telefono}</Text>
            </View>
        </View>
    );

    return (
        <View style={styles.container}>
            <FlatList
                data={CONTATTI}
                renderItem={renderItem}
                keyExtractor={item => item.id}
                ItemSeparatorComponent={() => <View style={{ height: 8 }} />}
            />
        </View>
    );
}

---

7. Tabella riassuntiva

Prop	Descrizione
data	Array di dati
renderItem	({item, index}) => JSX
keyExtractor	item => item.id.toString()
ListEmptyComponent	Cosa mostrare se vuoto
ListHeaderComponent	Header fisso in testa
ItemSeparatorComponent	Separatore

---

8. Esercizio

🎯 “Rubrica telefonica”

Crea una FlatList di contatti:

• Dati: nome, telefono, email
• Ogni card: avatar con iniziale, nome, telefono, email
• Separatore tra elementi
• Messaggio “Nessun contatto” se lista vuota (prova con array [])