Text: ce que c'est, l'affichage de texte et React Native

Qu'est-ce que Text dans React Native

Text est un composant React Native pour afficher du contenu textuel. Contrairement au développement web, où il existe de nombreuses balises sémantiques pour le texte, dans React Native tous les éléments de texte sont créés via Text. Le composant peut afficher à la fois du texte simple et des structures complexes avec du Text imbriqué et des fragments stylisés.

Text gère automatiquement le retour à la ligne, gère la famille de polices, la taille, la couleur et l'alignement. Le composant prend en charge les événements tactiles (onPress), permettant de créer des liens cliquables sans wrappers supplémentaires. Une limitation importante : Text ne peut pas être imbriqué directement dans View — seulement dans d'autres composants Text ou en tant qu'enfants directs.

Selon React Native Nested Text, 2024, les composants Text imbriqués héritent des styles du parent. Cela permet de définir un style de base au niveau supérieur et de remplacer des propriétés individuelles pour des fragments spécifiques — similaire au fonctionnement de span avec CSS sur le web.

Propriétés et API du composant Text

Le composant Text fournit un ensemble de props pour contrôler l'affichage, le comportement et l'accessibilité. Catégories principales : props de style (police, taille, couleur, alignement), props d'affichage (numberOfLines, lineBreakMode) et props interactives (onPress, onLongPress).

Props d'affichage du texte

numberOfLines limite le nombre de lignes affichées, en ajoutant des points de suspension à la fin. ellipsizeMode contrôle la position des points de suspension (head, middle, tail, clip). adjustsFontSizeToFit réduit automatiquement la taille de la police pour adapter le texte dans les limites définies. lineBreakMode détermine comment le texte est tronqué au-delà de numberOfLines.

Props interactives

Text prend en charge onPress et onLongPress pour gérer les touches. Cela permet de créer des liens textuels sans utiliser TouchableOpacity. onTextLayout retourne des informations sur la disposition du texte après le rendu — utile pour les animations et le positionnement.

Props spécifiques à la plateforme

Sur iOS, disabled (désactive le texte), selectable (active la sélection) et dataDetectorTypes (détection automatique des liens, téléphones, adresses) sont disponibles. Sur Android, selectable (via textSelectable) et includeFontPadding (supprime les espacements supplémentaires) sont disponibles.

Différences entre Text et les éléments p et span de HTML

Bien que Text ressemble visuellement aux balises HTML p et span, les différences architecturales sont significatives. React Native ne possède pas de modèle DOM avec des éléments de texte sémantiques — tous les nœuds de texte sont traités via un seul composant Text avec diverses props.

La différence clé est l'héritage de styles via l'imbrication de Text. Si un Text externe a fontSize: 18 et color: blue, tous les composants Text imbriqués héritent de ces styles. Toute propriété peut être remplacée dans le Text interne en définissant une valeur spécifique. Cela économise du code et rend la structure plus propre.

Stylisation du texte et polices

Text prend en charge la plupart des propriétés CSS pour la typographie : fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. Dans React Native, les polices sont connectées au niveau de la plateforme, et non via @font-face.

Utilisation de polices personnalisées

Pour utiliser des polices personnalisées, elles doivent être ajoutées au dossier assets/fonts et spécifiées dans react-native.config.js. Après la reconstruction de l'application, la police devient disponible via fontFamily. React Native ne prend pas en charge les polices web (Google Fonts) directement — il faut télécharger des fichiers .ttf ou .otf.

Héritage et cascade de styles

Le mécanisme d'héritage dans Text diffère de CSS. Les styles sont transmis uniquement de Text à Text imbriqué, mais pas de View à Text. Pour définir une police pour toute l'application, utilisez les defaultProps du composant Text ou un composant wrapper personnalisé.

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

Dans cet exemple, le Text externe définit fontSize: 18 et color: #333. Le Text interne hérite de fontSize (18), mais remplace fontWeight par bold et color par #007AFF. Le Text externe hérite uniquement de ses propres styles. C'est une analogie exacte du fonctionnement de span imbriqué en HTML.

Exemples pratiques avec Text

Examinons deux cas d'utilisation typiques de Text dans React Native : le formatage de texte avec imbrication et la création d'un composant cliquable avec limite de lignes.

Exemple 1 : carte d'actualité avec formatage

Dans cet exemple, Text est utilisé pour afficher du texte multiligne avec des éléments mis en évidence : titre, date et contenu avec un lien.

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

Cette structure comporte trois composants Text indépendants (titre, date, contenu), chacun avec son propre style. À l'intérieur du Text de contenu, un autre Text avec onPress est imbriqué pour le lien. Ce modèle est utilisé pour les flux d'actualités, les blogs et les commentaires.

Exemple 2 : texte avec limite de lignes

Pour afficher des aperçus de texte avec des points de suspension, numberOfLines est utilisé. C'est un modèle standard pour les fiches produits et les listes d'articles.

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

La propriété numberOfLines = 2 limite le texte à deux lignes. Si le texte est plus long, React Native ajoute automatiquement des points de suspension à la fin de la deuxième ligne. Le paramètre ellipsizeMode: 'tail' spécifie que les points de suspension doivent être à la fin (head, middle et clip sont également disponibles).