Text: wat is het, tekstweergave en React Native

Wat is Text in React Native

Text is een React Native component voor het weergeven van tekstuele inhoud. In tegenstelling tot webontwikkeling, waar talloze semantische tags voor tekst bestaan, worden in React Native alle tekstelementen via Text gemaakt. De component kan zowel eenvoudige tekst als complexe structuren met geneste Text en gestileerde fragmenten weergeven.

Text verwerkt automatisch regeleinden, beheert het lettertype, de grootte, kleur en uitlijning. De component ondersteunt aanraakgebeurtenissen (onPress), waarmee klikbare links kunnen worden gemaakt zonder extra wrappers. Een belangrijke beperking: Text kan niet rechtstreeks in View worden geplaatst — alleen in andere Text-componenten of als directe inhoud.

Volgens React Native Nested Text, 2024 erven geneste Text-componenten stijlen van de ouder. Dit maakt het mogelijk om een basisstijl op het bovenste niveau in te stellen en afzonderlijke eigenschappen voor specifieke fragmenten te overschrijven — vergelijkbaar met hoe span met CSS werkt in het web.

Eigenschappen en API van de Text component

De Text component biedt een reeks props voor het beheren van weergave, gedrag en toegankelijkheid. Belangrijke categorieën: stijlprops (lettertype, grootte, kleur, uitlijning), weergaveprops (numberOfLines, lineBreakMode) en interactieve (onPress, onLongPress).

Props voor tekstweergave

numberOfLines beperkt het aantal weergegeven regels en voegt aan het einde een weglatingsteken toe. ellipsizeMode bepaalt de positie van het weglatingsteken (head, middle, tail, clip). adjustsFontSizeToFit verkleint automatisch de lettergrootte zodat de tekst binnen de opgegeven grenzen past. lineBreakMode bepaalt hoe tekst buiten numberOfLines wordt afgekapt.

Interactieve props

Text ondersteunt onPress en onLongPress voor het verwerken van aanrakingen. Dit maakt het mogelijk om tekstlinks te maken zonder TouchableOpacity te gebruiken. onTextLayout geeft informatie over de positie van de tekst na het renderen — handig voor animaties en positionering.

Platform-specifieke props

Op iOS zijn disabled (tekst uitschakelen), selectable (selectie inschakelen), dataDetectorTypes (automatische herkenning van links, telefoons, adressen) beschikbaar. Op Android zijn selectable (via textSelectable), includeFontPadding (extra marges verwijderen) beschikbaar.

Verschillen tussen Text en HTML elementen p en span

Hoewel Text visueel lijkt op HTML-tags p en span, zijn de architecturale verschillen aanzienlijk. In React Native ontbreekt een DOM-model met semantische tekstelementen — alle tekstknooppunten worden beheerd via één enkele Text-component met verschillende props.

Het belangrijkste verschil — overerving van stijlen via nesting van Text. Als de buitenste Text fontSize: 18 en color: blue heeft, erven alle geneste Text deze stijlen. Elke prop kan in de binnenste Text worden overschreven door een specifieke waarde in te stellen. Dit bespaart code en maakt de structuur schoner.

Tekstopmaak en lettertypen

Text ondersteunt de meeste CSS-eigenschappen voor typografie: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. In React Native worden lettertypen op platformniveau aangesloten, niet via @font-face.

Aansluiten van aangepaste lettertypen

Om aangepaste lettertypen te gebruiken, moeten ze aan de map assets/fonts worden toegevoegd en worden opgegeven in react-native.config.js. Na het herbouwen van de app wordt het lettertype beschikbaar via fontFamily. React Native ondersteunt web-lettertypen (Google Fonts) niet rechtstreeks — het downloaden van .ttf of .otf bestanden is vereist.

Overerving en cascade van stijlen

Het overervingsmechanisme in Text verschilt van CSS. Stijlen worden alleen doorgegeven van Text naar geneste Text, maar niet van View naar Text. Als een lettertype voor de hele app moet worden ingesteld, wordt defaultProps van de Text component of een aangepaste wrapper-component gebruikt.

<Text style={{ fontSize: 18, color: '#333' }}>
    This text is 18px and color #333
    <Text style={{ fontWeight: 'bold', color: '#007AFF' }}>
        bold and blue
    </Text>
    back to #333 color
</Text>

In dit voorbeeld stelt de buitenste Text fontSize: 18 en color: #333 in. De binnenste Text erft fontSize (18), maar overschrijft fontWeight naar bold en color naar #007AFF. De buitenste Text erft alleen zijn eigen stijlen. Dit is een exacte analogie van hoe geneste span in HTML werkt.

Praktische voorbeelden met Text

Laten we twee typische scenario's bekijken voor het gebruik van Text in React Native: het opmaken van tekst met nesting en het maken van een klikbare component met regelbeperking.

Voorbeeld 1: nieuwskaart met opmaak

In dit voorbeeld wordt Text gebruikt voor het weergeven van meerregelige tekst met gemarkeerde elementen: titel, datum en inhoud met link.

const NewsCard = ({ title, date, content }) => (
    <View style={styles.card}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.date}>{date}</Text>
        <Text style={styles.content}>
            {content}
            {' ' }
            <Text
                style={styles.link}
                onPress={() => Linking.openURL(url)}
            >
                Read more
            </Text>
        </Text>
    </View>
);

In deze structuur zijn er drie onafhankelijke Text-componenten (titel, datum, inhoud), elk met hun eigen stijl. Binnen de Text met inhoud is nog een Text met onPress voor de link genest. Dit patroon wordt gebruikt voor nieuwsfeeds, blogs en reacties.

Voorbeeld 2: tekst met regelbeperking

Voor het weergeven van tekstvoorvertoning met weglatingsteken wordt numberOfLines gebruikt. Dit is een standaard patroon voor productkaarten en artikelen in lijsten.

<Text
    numberOfLines={2}
    ellipsizeMode="tail"
    style={styles.preview}
>
    {longDescription}
</Text>

De eigenschap numberOfLines = 2 beperkt de tekst tot twee regels. Als de tekst langer is, voegt React Native automatisch een weglatingsteken toe aan het einde van de tweede regel. De parameter ellipsizeMode: 'tail' geeft aan dat het weglatingsteken aan het einde moet staan (head, middle, clip zijn ook beschikbaar).