ScrollView — wat is het, scrollcontainer en React Native

Wat is ScrollView in React Native

ScrollView — is een React Native-component die zijn inhoud in een scrollbare container plaatst. Als de inhoud buiten de schermgrenzen valt, kan de gebruiker deze verticaal of horizontaal scrollen. ScrollView rendert alle onderliggende elementen bij het monteren, ongeacht of ze zichtbaar zijn op het scherm of niet.

In tegenstelling tot FlatList, dat alleen zichtbare elementen rendert (lazy rendering), maakt ScrollView alle native weergaven in één keer aan. Dit maakt ScrollView handig voor formulieren, instellingenpagina's, productkaarten op één scherm — overal waar het aantal onderliggende elementen klein is (tot 20-30) of het exacte aantal niet van tevoren bekend is.

Volgens React Native Using ScrollView, 2024 ondersteunt ScrollView genest scrollen (bijv. ScrollView binnen ScrollView), het bounce-effect bij het bereiken van de rand, scrollindicatoren, positievergrendeling (snap) en gebarenbediening. Op iOS voegt ScrollView automatisch ruimte onder SafeArea toe via contentInsetAdjustmentBehavior.

Eigenschappen en API van de ScrollView-component

ScrollView biedt een uitgebreide set eigenschappen voor het beheren van scrollgedrag, uiterlijk en interactiviteit. Laten we de belangrijkste groepen bekijken: scrollbeheer, visuele instellingen, gebeurtenissen en platformkenmerken.

Richting en scrollbeheer

horizontal — schakelt de scrollrichting van verticaal (standaard) naar horizontaal. scrollEnabled — schakelt scrollen uit indien nodig. showsVerticalScrollIndicator en showsHorizontalScrollIndicator beheren de weergave van scrollindicatoren. bounces (iOS) schakelt het bounce-effect in/uit bij het bereiken van de rand van de inhoud.

ScrollView-gebeurtenissen

De belangrijkste gebeurtenis — onScroll, die bij elke scroll wordt aangeroepen en een object met nativeEvent doorgeeft, met contentOffset (huidige positie), contentSize (grootte van de inhoud), layoutMeasurement (grootte van het zichtbare gebied). onMomentumScrollEnd wordt aangeroepen na het beëindigen van inertieel scrollen. onScrollEndDrag — wanneer de gebruiker het scherm loslaat. Deze gebeurtenissen worden gebruikt voor het implementeren van oneindig scrollen, parallax en lazy loading.

Programmatisch beheer via ref

ScrollView biedt methoden voor programmatisch beheer via een referentie: scrollTo({x, y, animated}) scrollt naar opgegeven coördinaten, scrollToEnd({animated}) — naar het einde van de inhoud, flashScrollIndicators() — toont tijdelijk de scrollindicatoren.

const scrollRef = useRef(null);

// Scroll naar boven
scrollRef.current.scrollTo({ x: 0, y: 0, animated: true });

// Scroll naar einde
scrollRef.current.scrollToEnd({ animated: true });

Programmatisch scrollbeheer wordt vaak gebruikt in chats (autoscrollen naar het laatste bericht), formulieren (scrollen naar het veld met een fout) en carrousels (programmatisch scrollen).

Verschillen tussen ScrollView en FlatList

De keuze tussen ScrollView en FlatList — een van de belangrijkste architecturale beslissingen in React Native. Beide componenten bieden scrollen, maar gebruiken fundamenteel verschillende renderingstrategieën. ScrollView rendert alles in één keer, FlatList — alleen zichtbare elementen.

Kiesregel: ScrollView — voor schermen waar het aantal onderliggende elementen bekend is en niet meer dan 20-30 bedraagt (gebruikersprofiel, instellingenformulier, productpagina). FlatList — voor lijsten met potentieel veel elementen (nieuwsfeed, productencatalogus, chatberichten). Als de inhoud heterogeen is (titel, formulier, kaart, footer) — heeft ScrollView de voorkeur, omdat FlatList homogene elementen verwacht.

Horizontaal scrollen en paginering

ScrollView ondersteunt horizontaal scrollen via de eigenschap horizontal, wat het ideaal maakt voor carrousels, afbeeldingsgalerijen, tabbladen en horizontale lijsten. In combinatie met de eigenschap pagingEnabled (iOS) of snapToInterval wordt ScrollView een component voor paginanavigatie.

Horizontale carrousel

De eigenschap horizontal schakelt de scrollrichting om. pagingEnabled (iOS) schakelt paginerend scrollen in, waarbij scrollen alleen stopt op de grenzen van elementen. snapToInterval stelt de snapstap in pixels in voor beide platforms.

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 deze carrousel koppelt pagingEnabled automatisch het scrollen aan de grenzen van elke afbeelding. onMomentumScrollEnd maakt het mogelijk de indicator van de huidige pagina bij te werken. Zo'n carrousel werkt native en ondersteunt inertieel scrollen.

Positievergrendeling (Snap)

Voor aangepaste snapstappen wordt snapToInterval (stapgrootte in pixels) en snapToAlignment (start, center, end) gebruikt. Met snapToOffsets kan een array van specifieke posities voor snapping worden ingesteld. Dit is handig voor horizontale lijsten met kaarten van verschillende grootte.

Praktische voorbeelden met ScrollView

Laten we twee typische scenario's bekijken: een scherm met een formulier (verticaal scrollen) en een horizontale categorielijst. Beide gebruiken ScrollView met verschillende eigenschappen voor optimaal gedrag.

Voorbeeld 1: profielscherm met formulier

De profielbewerkingspagina bevat heterogene elementen: avatar, meerdere invoervelden, schakelaars en een opslagknop. ScrollView maakt het mogelijk de hele pagina in zijn geheel te scrollen, niet elk blok afzonderlijk.

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

De eigenschap keyboardShouldPersistTaps: 'handled' maakt scrollen en interactie met het formulier mogelijk wanneer het toetsenbord open is. contentContainerStyle past marges toe op de hele inhoud. Dit patroon wordt gebruikt in alle schermen met formulieren in React Native.

Voorbeeld 2: horizontale categorielijst

Voor navigatie door categorieën (chats, filters, tabbladen) wordt een horizontale ScrollView met chips gebruikt. Zo'n component komt vaak voor in marktplaats- en sociale netwerkapps.

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

Horizontale ScrollView met uitgeschakelde indicator — de standaard voor de categoriebalk. Elke chip is een aparte component met een selectiestatus. De eigenschap showsHorizontalScrollIndicator: false verbergt de scrollbalk, wat overeenkomt met de verwachtingen van mobiele app-gebruikers.