View : qu'est-ce que c'est, propriétés du conteneur et React Native

Qu'est-ce que View dans React Native

View est un composant fondamental de React Native qui sert de conteneur pour d'autres composants. Il prend en charge le style via StyleSheet, la mise en page via Flexbox, la gestion tactile, les animations et les transformations. View est une abstraction sur les éléments conteneurs natifs : UIView sur iOS et android.view.View sur Android.

Dans React Native, il n'est pas possible d'utiliser des éléments HTML — à la place, toutes les mises en page sont construites à partir de View. Même Text et Image sont généralement enveloppés dans View pour le positionnement. Le composant peut être vide (juste un conteneur) ou contenir n'importe quel nombre d'éléments enfants à n'importe quelle profondeur d'imbrication.

View prend en charge le rendu sur les deux plateformes à partir d'une seule base de code JavaScript. Les propriétés Flexbox, les marges, l'arrière-plan, les ombres et les bordures fonctionnent à l'identique sur iOS et Android. Les différences entre plateformes sont minimes — par exemple, les ombres sur iOS utilisent shadowColor/shadowOffset, tandis que sur Android elles utilisent elevation.

Selon React Native Layout Docs, 2024, View est optimisé pour les appareils mobiles : il ne crée pas de vues natives supplémentaires lors de l'optimisation flatten et gère correctement les mises à jour en cascade lorsque les styles du parent changent.

Propriétés et API du composant View

Le composant View dispose d'un ensemble riche de props pour contrôler l'apparence, la mise en page et l'interactivité. Toutes les props se répartissent en plusieurs catégories : props de style, événements tactiles, accessibilité et fonctionnalités spécifiques à la plateforme. Explorons les groupes clés.

Props de style de View

View prend en charge toutes les propriétés CSS standard pour les plateformes mobiles. Les principales incluent : flexDirection, justifyContent, alignItems pour le positionnement ; margin, padding pour l'espacement ; backgroundColor, borderRadius pour l'apparence ; width, height, maxHeight pour le dimensionnement.

Événements tactiles et gestes

View peut gérer les événements tactiles via les props onStartShouldSetResponder, onMoveShouldSetResponder et onResponderGrant. Ces événements permettent d'implémenter des gestes personnalisés sans bibliothèques. Pour les tap standard, onTouchStart, onTouchEnd et onPress (via Pressable ou TouchableOpacity) sont utilisés.

Props spécifiques à la plateforme

Sur iOS, shadowColor, shadowOffset, shadowOpacity, shadowRadius sont disponibles pour les ombres. Sur Android, ces propriétés sont ignorées — à la place, elevation est utilisée (une ombre de type carte). Le callback onLayout est déclenché lorsque les dimensions de View changent, ce qui est utile pour les mises en page adaptatives.

Mise en page avec View et Flexbox

Flexbox est le seul mécanisme de mise en page dans React Native (contrairement au web, où Grid et Float sont disponibles). Tout le positionnement des éléments se fait via les propriétés Flexbox du composant View. Par défaut, View a flexDirection défini sur column, pas sur row comme sur le web, ce qui correspond à l'orientation verticale des écrans mobiles.

Propriétés Flexbox clés dans View

flexDirection détermine la direction de l'axe principal : column (par défaut) ou row. justifyContent contrôle la distribution le long de l'axe principal (flex-start, center, space-between). alignItems — le long de l'axe transversal (stretch — valeur par défaut). flex spécifie la proportion d'espace disponible pour un élément enfant.

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

L'exemple montre une structure typique : un View externe — carte, une row interne — une ligne avec un avatar et un bloc de texte, content — une colonne avec nom et rôle. Cette structure View imbriquée est la norme pour tout écran React Native.

Différences entre View et div HTML

Bien que View soit conceptuellement similaire au div HTML, il existe des différences clés qu'il est important de comprendre lors du portage de code du web vers React Native. Ces différences concernent le rendu, les styles et le comportement par défaut.

La différence la plus importante est flexDirection: column par défaut. Cela signifie que sans configuration explicite, les éléments enfants sont disposés verticalement, pas horizontalement. La deuxième différence : la largeur et la hauteur de View par défaut s'étendent pour remplir tout l'espace disponible du parent (analogue à width: 100% en CSS).

Exemples pratiques avec View

Examinons deux exemples concrets d'utilisation de View dans des applications React Native : centrer le contenu sur tout l'écran et créer une grille de cartes responsive. Les deux motifs apparaissent dans chaque projet.

Exemple 1 : Écran placeholder avec centrage

Pour créer un état vide, on utilise un View avec flex: 1 et un centrage sur les deux axes. C'est un motif standard pour les écrans de chargement, les états d'erreur et les listes vides.

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

La combinaison de justifyContent: center et alignItems: center dans un View avec flex: 1 centre le contenu sur les deux axes sur tout l'écran. C'est le motif le plus courant d'utilisation de View dans React Native.

Exemple 2 : Grille de cartes avec Flexbox

Pour afficher deux colonnes de produits ou d'articles, on utilise un View avec flexDirection: row, flexWrap: wrap et des Views enfants avec une largeur fixe. Ce motif remplace CSS Grid dans 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 },
});

Dans cet exemple, le View externe avec flexWrap: wrap fonctionne comme un analogue de CSS Grid. Chaque carte occupe 48% de la largeur, laissant des espaces entre les colonnes. C'est un motif typique pour les catalogues et les flux de contenu.