View: wat is het, containereigenschappen en React Native

Wat is View in React Native

View is de fundamentele component van React Native die dient als container voor andere componenten. Het ondersteunt styling via StyleSheet, layout via Flexbox, aanraakverwerking, animaties en transformaties. View is een abstractie over native containerelementen: UIView op iOS en android.view.View op Android.

In React Native kunnen HTML-elementen niet worden gebruikt — in plaats daarvan worden alle layouts gebouwd uit View. Zelfs Text en Image zijn meestal ingepakt in View voor positionering. De component kan leeg zijn (alleen container) of een willekeurig aantal onderliggende elementen op elke diepte bevatten.

View ondersteunt renderen op beide platforms vanuit dezelfde JavaScript-code. Flexbox-eigenschappen, marges, achtergrond, schaduwen en randen werken hetzelfde op iOS en Android. Platformverschillen zijn minimaal — bijvoorbeeld schaduwen op iOS gebruiken shadowColor/shadowOffset, en op Android elevation.

Volgens React Native Layout Docs, 2024 is View geoptimaliseerd voor mobiele apparaten: het creëert geen overbodige native weergaven bij flatten-optimalisatie en verwerkt correct cascade-updates bij wijziging van ouderstijlen.

Eigenschappen en API van de View-component

De View-component heeft een rijke set props voor het beheren van uiterlijk, plaatsing en interactiviteit. Alle props zijn onderverdeeld in verschillende categorieën: styling, aanraakgebeurtenissen, toegankelijkheid en platformfuncties. Laten we de belangrijkste groepen bekijken.

Stijlprops van View

View ondersteunt alle standaard CSS-eigenschappen voor mobiele platforms. De belangrijkste: flexDirection, justifyContent, alignItems voor positionering; margin, padding voor marges; backgroundColor, borderRadius voor uiterlijk; width, height, maxHeight voor afmetingen.

Aanraakgebeurtenissen en gebaren

View kan aanraakgebeurtenissen verwerken via de props onStartShouldSetResponder, onMoveShouldSetResponder en onResponderGrant. Deze gebeurtenissen maken het mogelijk om aangepaste gebaren te implementeren zonder bibliotheken. Voor standaard klikken worden onTouchStart, onTouchEnd en onPress gebruikt (via Pressable of TouchableOpacity).

Platformspecifieke props

Op iOS zijn shadowColor, shadowOffset, shadowOpacity, shadowRadius beschikbaar voor schaduwen. Op Android worden deze eigenschappen genegeerd — in plaats daarvan wordt elevation gebruikt. onLayout-callbacks worden aangeroepen bij het wijzigen van View-afmetingen, wat nuttig is voor adaptieve layouts.

Layout met View en Flexbox

Flexbox is het enige layoutmechanisme in React Native (in tegenstelling tot Web waar Grid en Float beschikbaar zijn). Alle positionering van elementen gebeurt via de Flexbox-eigenschappen van de View-component. Standaard is flexDirection bij View ingesteld op column, niet op row zoals in Web, wat overeenkomt met de verticale oriëntatie van mobiele schermen.

Belangrijkste Flexbox-eigenschappen in View

flexDirection bepaalt de richting van de hoofdas: column (standaard) of row. justifyContent beheert de verdeling langs de hoofdas (flex-start, center, space-between). alignItems — langs de dwarsas (stretch — standaardwaarde). flex bepaalt het aandeel van de beschikbare ruimte voor het onderliggende element.

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

const CardLayout = () => (
    <View style={styles.card}>
        <View style={styles.row}>
            <View style={styles.avatar} />
            <View style={styles.content}>
                <Text style={styles.name}>John Doe</Text>
                <Text style={styles.role}>Developer</Text>
            </View>
        </View>
    </View>
);

Het voorbeeld toont een typische structuur: externe View — kaart, interne row — rij met avatar en tekstblok, content — kolom met naam en rol. Zo'n geneste View-structuur is de standaard voor elk React Native-scherm.

Verschillen tussen View en HTML div

Hoewel View conceptueel vergelijkbaar is met HTML div, zijn er belangrijke verschillen tussen beide die van belang zijn bij het overzetten van code van Web naar React Native. Deze verschillen hebben betrekking op renderen, stijlen en standaardgedrag.

Het belangrijkste verschil — standaard flexDirection: column. Dit betekent dat zonder expliciete instelling onderliggende elementen verticaal worden geplaatst, niet horizontaal. Het tweede verschil: width en height van View strekken zich standaard uit over alle beschikbare ruimte van de ouder (analoog aan width: 100% in CSS).

Praktische voorbeelden met View

Laten we twee praktijkvoorbeelden bekijken van het gebruik van View in React Native-applicaties: het centreren van inhoud over het volledige scherm en het maken van een adaptief raster van kaarten. Beide patronen komen in elk project voor.

Voorbeeld 1: placeholder-scherm met centrering

Voor het maken van een lege toestand (empty state) wordt View met flex: 1 en centrering op beide assen gebruikt. Dit is het standaardpatroon voor laad-, fout- en lege lijstschermen.

const EmptyState = ({ message }) => (
    <View style={styles.container}>
        <Text style={styles.icon}>{icon}</Text>
        <Text style={styles.message}>{message}</Text>
    </View>
);

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
    icon: { fontSize: 48 },
    message: { fontSize: 16, color: '#666', marginTop: 16 },
});

De combinatie van justifyContent: center en alignItems: center in een View met flex: 1 centreert de inhoud op beide assen over het volledige scherm. Dit is het meest voorkomende gebruikspatroon van View in React Native.

Voorbeeld 2: kaartenraster met Flexbox

Voor het weergeven van twee kolommen met producten of artikelen wordt View met flexDirection: row, flexWrap: wrap en onderliggende Views met vaste breedte gebruikt. Dit patroon vervangt CSS Grid in React Native.

const ProductGrid = ({ products }) => (
    <View style={styles.grid}>
        {products.map((product) => (
            <View key={product.id} style={styles.card}>
                <Image source={{ uri: product.image }} />
                <Text>{product.name}</Text>
            </View>
        ))}
    </View>
);

const styles = StyleSheet.create({
    grid: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
    },
    card: { width: '48%', marginBottom: 16 },
});

In dit voorbeeld werkt de externe View met flexWrap: wrap als tegenhanger van CSS Grid. Elke kaart beslaat 48% van de breedte en laat ruimte tussen de kolommen. Dit is een typisch patroon voor catalogi en contentfeeds.