RN Lez 15: FlatList Avanzato

Docs: SectionList, Optimizing FlatList Config

Obiettivi

• Usare SectionList per sezioni
• Griglia con numColumns
• Pull-to-refresh
• Ottimizzare FlatList

---

1. SectionList — sezioni

Per dati raggruppati con intestazioni di sezione.

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

const DATA = [
    {
        title: 'Amici',
        data: ['Mario', 'Sofia', 'Luca'],
    },
    {
        title: 'Famiglia',
        data: ['Anna', 'Luigi', 'Maria'],
    },
];

export default function App() {
    return (
        <SectionList
            sections={DATA}
            renderItem={({ item }) => (
                <Text style={styles.item}>{item}</Text>
            )}
            renderSectionHeader={({ section }) => (
                <Text style={styles.header}>{section.title}</Text>
            )}
            keyExtractor={(item, index) => index.toString()}
        />
    );
}

---

2. numColumns — griglia

<FlatList
    data={PRODOTTI}
    renderItem={({ item }) => (
        <View style={{ width: '48%', backgroundColor: 'white', padding: 10 }}>
            <Text>{item.nome}</Text>
            <Text>€{item.prezzo}</Text>
        </View>
    )}
    keyExtractor={item => item.id.toString()}
    numColumns={2}           // ← 2 colonne
    columnWrapperStyle={{ justifyContent: 'space-between' }}
/>

---

3. Pull-to-refresh

Tirare verso il basso per ricaricare.

const [refreshing, setRefreshing] = useState(false);
const [data, setData] = useState(DATA);

const onRefresh = async () => {
    setRefreshing(true);
    // Simula ricarica
    await new Promise(resolve => setTimeout(resolve, 1500));
    setRefreshing(false);
};

<FlatList
    data={data}
    renderItem={renderItem}
    refreshing={refreshing}
    onRefresh={onRefresh}
/>

---

4. Ottimizzazione — per liste grandi

<FlatList
    data={MOLTI_DATI}        // 1000+ elementi
    renderItem={renderItem}
    keyExtractor={item => item.id}
    // Ottimizzazioni:
    windowSize={5}            // default: 21 (pagine visibili)
    maxToRenderPerBatch={10}  // default: 10
    initialNumToRender={10}   // default: 10
    removeClippedSubviews={true}
    getItemLayout={(data, index) => ({
        length: 60,           // altezza fissa di ogni item
        offset: 60 * index,
        index,
    })}
/>

Prop	Default	Ottimizzato
windowSize	21	5-10
maxToRenderPerBatch	10	5-10
initialNumToRender	10	8-10
removeClippedSubviews	false	true

---

5. Tabella riassuntiva

Componente/Prop	Codice	Uso
SectionList	<SectionList sections={...} />	Liste con sezioni
numColumns	numColumns={2}	Griglia
refreshing	refreshing={s}	Stato refresh
onRefresh	onRefresh={fn}	Funzione refresh
windowSize	windowSize={5}	Ottimizzazione

---

6. Esercizio

🎯 “Rubrica con sezioni”

Crea una rubrica con SectionList:

1. Sezioni: A, B, C, … (raggruppa per iniziale)
2. Ogni contatto: nome, telefono
3. Intestazione sezione: lettera in grassetto, sfondo grigio
4. Pull-to-refresh che simula caricamento di 2 secondi
5. Separatore tra elementi

Dati

const CONTATTI = [
    { title: 'A', data: ['Anna', 'Andrea'] },
    { title: 'B', data: ['Beatrice', 'Bruno'] },
    { title: 'C', data: ['Chiara', 'Carlo'] },
    { title: 'M', data: ['Mario', 'Maria'] },
    { title: 'S', data: ['Sofia', 'Sara'] },
];