ScrollView — qu'est-ce que c'est, conteneur de défilement et React Native

Qu'est-ce que ScrollView dans React Native

ScrollView est un composant React Native qui enveloppe son contenu dans un conteneur défilable. Si le contenu dépasse les limites de l'écran, l'utilisateur peut le faire défiler verticalement ou horizontalement. ScrollView rend tous les éléments enfants au montage, qu'ils soient visibles à l'écran ou non.

Contrairement à FlatList, qui rend uniquement les éléments visibles (rendu paresseux), ScrollView crée immédiatement toutes les vues natives. Cela rend ScrollView pratique pour les formulaires, les pages de paramètres, les fiches produits sur un seul écran — partout où le nombre d'éléments enfants est faible (jusqu'à 20-30) ou que leur quantité exacte est inconnue à l'avance.

Selon le React Native Using ScrollView, 2024, ScrollView prend en charge le défilement imbriqué (par exemple, ScrollView dans ScrollView), l'effet de rebond au bord, les indicateurs de défilement, le positionnement par snap et la gestion des gestes. Sur iOS, ScrollView ajoute automatiquement le padding SafeArea via contentInsetAdjustmentBehavior.

Propriétés et API du composant ScrollView

ScrollView fournit un ensemble riche de propriétés pour contrôler le comportement du défilement, l'apparence et l'interactivité. Examinons les groupes principaux : contrôle du défilement, paramètres visuels, événements et fonctionnalités spécifiques à la plateforme.

Contrôle de la direction et du défilement

horizontal — change la direction du défilement de vertical (par défaut) à horizontal. scrollEnabled — désactive le défilement si nécessaire. showsVerticalScrollIndicator et showsHorizontalScrollIndicator contrôlent l'affichage des indicateurs de défilement. bounces (iOS) active/désactive l'effet de rebond au bord du contenu.

Événements ScrollView

L'événement principal est onScroll, qui se déclenche à chaque défilement et transmet un objet avec nativeEvent contenant contentOffset (position actuelle), contentSize (taille du contenu), layoutMeasurement (taille de la zone visible). onMomentumScrollEnd se déclenche après la fin du défilement inertiel. onScrollEndDrag — lorsque l'utilisateur retire son doigt de l'écran. Ces événements sont utilisés pour implémenter le défilement infini, les effets de parallaxe et le chargement paresseux.

Contrôle programmatique via ref

ScrollView fournit des méthodes pour le contrôle programmatique via ref : scrollTo({x, y, animated}) fait défiler vers les coordonnées spécifiées, scrollToEnd({animated}) — fait défiler jusqu'à la fin du contenu, flashScrollIndicators() — affiche temporairement les indicateurs de défilement.

const scrollRef = useRef(null);

// Défiler vers le haut
scrollRef.current.scrollTo({ x: 0, y: 0, animated: true });

// Défiler vers la fin
scrollRef.current.scrollToEnd({ animated: true });

Le contrôle programmatique du défilement est souvent utilisé dans les chats (défilement automatique vers le dernier message), les formulaires (défilement vers un champ avec erreur) et les carrousels (balayage programmatique).

Différences entre ScrollView et FlatList

Choisir entre ScrollView et FlatList est l'une des décisions architecturales clés dans React Native. Les deux composants offrent le défilement, mais utilisent des stratégies de rendu fondamentalement différentes. ScrollView rend tout d'un coup, FlatList — uniquement les éléments visibles.

Règle de sélection : ScrollView — pour les écrans où le nombre d'éléments enfants est connu et ne dépasse pas 20-30 (profil utilisateur, formulaire de paramètres, page produit). FlatList — pour les listes avec potentiellement beaucoup d'éléments (fil d'actualités, catalogue de produits, messages de chat). Si le contenu est hétérogène (en-tête, formulaire, carte, pied de page) — ScrollView est préférable car FlatList attend des éléments uniformes.

Défilement horizontal et pagination

ScrollView prend en charge le défilement horizontal via la prop horizontal, ce qui le rend idéal pour les carrousels, les galeries d'images, les onglets et les listes horizontales. Combiné avec la prop pagingEnabled (iOS) ou snapToInterval, ScrollView devient un composant pour la navigation par pages.

Carrousel horizontal

La propriété horizontal change la direction du défilement. pagingEnabled (iOS) active le défilement par pages, où le défilement s'arrête uniquement aux limites des éléments. snapToInterval définit le pas de snap en pixels pour les deux plateformes.

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>
);

Dans ce carrousel, pagingEnabled ajuste automatiquement le défilement aux limites de chaque image. onMomentumScrollEnd permet de mettre à jour l'indicateur de page actuelle. Ce carrousel fonctionne nativement et prend en charge le défilement inertiel.

Positionnement Snap

Pour les pas de snap non standard, utilisez snapToInterval (taille du pas en pixels) et snapToAlignment (start, center, end). Avec snapToOffsets, vous pouvez spécifier un tableau de positions spécifiques pour le snap. Ceci est utile pour les listes horizontales avec des cartes de tailles différentes.

Exemples pratiques avec ScrollView

Examinons deux scénarios typiques : un écran avec formulaire (défilement vertical) et une liste horizontale de catégories. Les deux utilisent ScrollView avec différentes props pour un comportement optimal.

Exemple 1 : Écran de profil avec formulaire

Une page d'édition de profil contient des éléments hétérogènes : avatar, plusieurs champs de saisie, interrupteurs et un bouton d'enregistrement. ScrollView permet de faire défiler toute la page dans son ensemble, plutôt que chaque bloc séparément.

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' permet de faire défiler et d'interagir avec le formulaire lorsque le clavier est ouvert. contentContainerStyle applique un padding à tout le contenu. Ce modèle est utilisé dans tous les écrans de formulaires dans React Native.

Exemple 2 : Liste horizontale de catégories

Pour naviguer par catégories (chats, filtres, onglets), un ScrollView horizontal avec des chips est utilisé. Ce composant est couramment trouvé dans les applications de marketplace et de réseaux sociaux.

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>
);

Un ScrollView horizontal avec l'indicateur désactivé est la norme pour les bandeaux de catégories. Chaque chip est un composant séparé avec un état de sélection. La prop showsHorizontalScrollIndicator: false supprime la barre de défilement, ce qui correspond aux attentes des utilisateurs d'applications mobiles.