ScrollView — cos'è, contenitore scorrevole e React Native

Cos'è ScrollView in React Native

ScrollView è un componente React Native che avvolge il suo contenuto in un contenitore scorrevole. Se il contenuto supera i limiti dello schermo, l'utente può scorrere verticalmente o orizzontalmente. ScrollView renderizza tutti gli elementi figli al montaggio, indipendentemente dal fatto che siano visibili sullo schermo o meno.

A differenza di FlatList, che renderizza solo gli elementi visibili (rendering lazy), ScrollView crea immediatamente tutte le viste native. Questo rende ScrollView comodo per moduli, pagine delle impostazioni, schede prodotto su un singolo schermo — ovunque il numero di elementi figli sia piccolo (fino a 20-30) o la loro quantità esatta sia sconosciuta in anticipo.

Secondo la React Native Using ScrollView, 2024, ScrollView supporta lo scorrimento annidato (ad esempio, ScrollView dentro ScrollView), l'effetto rimbalzo al bordo, gli indicatori di scorrimento, il posizionamento snap e la gestione dei gesti. Su iOS, ScrollView aggiunge automaticamente il padding SafeArea tramite contentInsetAdjustmentBehavior.

Proprietà e API del componente ScrollView

ScrollView fornisce un ricco insieme di proprietà per controllare il comportamento di scorrimento, l'aspetto e l'interattività. Vediamo i gruppi principali: controllo dello scorrimento, impostazioni visive, eventi e funzionalità specifiche della piattaforma.

Controllo della direzione e dello scorrimento

horizontal — cambia la direzione di scorrimento da verticale (predefinita) a orizzontale. scrollEnabled — disabilita lo scorrimento quando necessario. showsVerticalScrollIndicator e showsHorizontalScrollIndicator controllano la visualizzazione degli indicatori di scorrimento. bounces (iOS) attiva/disattiva l'effetto rimbalzo al raggiungimento del bordo del contenuto.

Eventi ScrollView

L'evento principale è onScroll, che viene attivato a ogni scorrimento e passa un oggetto con nativeEvent contenente contentOffset (posizione corrente), contentSize (dimensione del contenuto), layoutMeasurement (dimensione dell'area visibile). onMomentumScrollEnd viene attivato dopo il completamento dello scorrimento inerziale. onScrollEndDrag — quando l'utente solleva il dito dallo schermo. Questi eventi vengono utilizzati per implementare lo scorrimento infinito, gli effetti parallasse e il caricamento lazy.

Controllo programmatico tramite ref

ScrollView fornisce metodi per il controllo programmatico tramite ref: scrollTo({x, y, animated}) scorre alle coordinate specificate, scrollToEnd({animated}) — scorre fino alla fine del contenuto, flashScrollIndicators() — mostra temporaneamente gli indicatori di scorrimento.

const scrollRef = useRef(null);

// Scorri verso l'alto
scrollRef.current.scrollTo({ x: 0, y: 0, animated: true });

// Scorri fino alla fine
scrollRef.current.scrollToEnd({ animated: true });

Il controllo programmatico dello scorrimento è spesso utilizzato nelle chat (scorrimento automatico all'ultimo messaggio), nei moduli (scorrimento a un campo con errore) e nei caroselli (swipe programmatico).

Differenze tra ScrollView e FlatList

Scegliere tra ScrollView e FlatList è una delle decisioni architetturali chiave in React Native. Entrambi i componenti forniscono lo scorrimento, ma utilizzano strategie di rendering fondamentalmente diverse. ScrollView renderizza tutto in una volta, FlatList — solo gli elementi visibili.

Regola di selezione: ScrollView — per schermi in cui il numero di elementi figli è noto e non supera 20-30 (profilo utente, modulo impostazioni, pagina prodotto). FlatList — per elenchi con potenzialmente molti elementi (feed di notizie, catalogo prodotti, messaggi chat). Se il contenuto è eterogeneo (intestazione, modulo, scheda, piè di pagina) — ScrollView è preferibile poiché FlatList si aspetta elementi uniformi.

Scorrimento orizzontale e paginazione

ScrollView supporta lo scorrimento orizzontale tramite la prop horizontal, rendendolo ideale per caroselli, gallerie di immagini, schede ed elenchi orizzontali. Se combinato con la prop pagingEnabled (iOS) o snapToInterval, ScrollView diventa un componente per la navigazione a pagine.

Carosello orizzontale

La proprietà horizontal cambia la direzione di scorrimento. pagingEnabled (iOS) abilita lo scorrimento a pagine, dove lo scorrimento si ferma solo ai bordi degli elementi. snapToInterval imposta il passo di snap in pixel per entrambe le piattaforme.

const ImageCarousel = ({ images }) => (
    <ScrollView
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        onMomentumScrollEnd={handlePageChange}
    >
        {images.map((img, index) => (
            <Image
                key={index}
                source={{ uri: img }}
                style={{ width: SCREEN_WIDTH, height: 250 }}
            />
        ))}
    </ScrollView>
);

In questo carosello, pagingEnabled aggancia automaticamente lo scorrimento ai bordi di ogni immagine. onMomentumScrollEnd consente di aggiornare l'indicatore della pagina corrente. Un tale carosello funziona nativamente e supporta lo scorrimento inerziale.

Posizionamento Snap

Per passi di snap non standard, utilizzare snapToInterval (dimensione del passo in pixel) e snapToAlignment (start, center, end). Con snapToOffsets è possibile specificare un array di posizioni specifiche per lo snap. Questo è utile per elenchi orizzontali con schede di diverse dimensioni.

Esempi pratici con ScrollView

Esaminiamo due scenari tipici: uno schermo con modulo (scorrimento verticale) e un elenco orizzontale di categorie. Entrambi utilizzano ScrollView con diverse proprietà per un comportamento ottimale.

Esempio 1: Schermo del profilo con modulo

Una pagina di modifica del profilo contiene elementi eterogenei: avatar, diversi campi di input, interruttori e un pulsante di salvataggio. ScrollView consente di scorrere l'intera pagina nel suo insieme, anziché ogni blocco separatamente.

const ProfileScreen = () => (
    <ScrollView
        contentContainerStyle={styles.container}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}
    >
        <AvatarPicker />
        <TextInput placeholder="Name" />
        <TextInput placeholder="Email" />
        <TextInput placeholder="About me" multiline />
        <SwitchRow label="Notifications" />
        <Button title="Save" />
    </ScrollView>
);

La prop keyboardShouldPersistTaps: 'handled' consente di scorrere e interagire con il modulo quando la tastiera è aperta. contentContainerStyle applica il padding a tutto il contenuto. Questo pattern viene utilizzato in tutti gli schermi con moduli in React Native.

Esempio 2: Elenco orizzontale di categorie

Per navigare attraverso le categorie (chat, filtri, schede), viene utilizzato uno ScrollView orizzontale con chip. Questo componente si trova comunemente nelle applicazioni di marketplace e social media.

const CategoryChips = ({ categories, selected, onSelect }) => (
    <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.chipContainer}
    >
        {categories.map((cat) => (
            <Chip
                key={cat.id}
                label={cat.name}
                isSelected={selected === cat.id}
                onPress={() => onSelect(cat.id)}
            />
        ))}
    </ScrollView>
);

Uno ScrollView orizzontale con indicatore disattivato è lo standard per le strisce di categorie. Ogni chip è un componente separato con uno stato di selezione. La prop showsHorizontalScrollIndicator: false rimuove la barra di scorrimento, che corrisponde alle aspettative degli utenti di app mobili.