TextInput — qu'est-ce que c'est, saisie de texte et React Native

Qu'est-ce que TextInput dans React Native

TextInput est un composant React Native qui permet aux utilisateurs de saisir du texte à l'aide du clavier de l'appareil. C'est le bloc de construction principal pour les formulaires d'inscription, les barres de recherche, les champs de saisie de messages et tout autre scénario nécessitant une saisie utilisateur. Contrairement au développement web, où il existe des types d'input séparés (text, email, password, search), dans React Native toutes ces variantes sont implémentées via un seul composant TextInput avec différentes props.

TextInput prend en charge deux modes de fonctionnement: contrôlé (géré via l'état React) et non contrôlé (à l'aide d'une ref). En mode contrôlé, la valeur du champ est stockée dans l'état du composant et mise à jour via le callback onChangeText. Cette approche est recommandée pour la plupart des applications car elle fournit une source unique de vérité et simplifie la validation.

Selon React Native Handling Text Input, 2024, TextInput s'adapte automatiquement à la plateforme: sur iOS il utilise UITextField natif, sur Android — EditText. Cela garantit le bon fonctionnement de l'autocomplétion, de la correction automatique et des menus système (couper/copier/coller) sans configuration supplémentaire.

Propriétés et API de TextInput

TextInput fournit un ensemble étendu de props pour contrôler la saisie, l'apparence et le comportement. Toutes les props sont divisées en plusieurs catégories: gestion de la valeur, type de clavier, style, événements et fonctionnalités spécifiques à la plateforme.

Props de gestion de la valeur

value — la valeur actuelle du champ (pour le mode contrôlé). onChangeText — callback invoqué à chaque modification du texte. placeholder — texte indicatif affiché lorsque le champ est vide. defaultValue — valeur initiale pour le mode non contrôlé. maxLength limite le nombre maximum de caractères que l'utilisateur peut saisir.

Événements de TextInput

Le composant prend en charge onFocus (le champ a reçu le focus), onBlur (le champ a perdu le focus), onSubmitEditing (l'utilisateur a appuyé sur Entrée/Retour), onKeyPress (pression de touche). L'événement onEndEditing est appelé après la fin de l'édition lors de la perte du focus. Ces callbacks permettent d'implémenter une logique complexe de validation et de soumission de formulaires.

Props spécifiques à la plateforme

Sur iOS: clearButtonMode (bouton d'effacement), keyboardAppearance (clavier clair/foncé), returnKeyType (type de bouton Retour), enablesReturnKeyAutomatically. Sur Android: textContentType (remplissage automatique), underlineColorAndroid, inlineImageLeft. secureTextEntry fonctionne sur les deux plateformes pour la saisie de mots de passe.

Saisie contrôlée et non contrôlée

Dans React Native, TextInput peut fonctionner dans deux modes. En mode contrôlé, React gère la valeur du champ: vous passez la valeur depuis l'état et la mettez à jour via onChangeText. En mode non contrôlé, React initialise seulement le champ, et la valeur de type DOM est stockée dans le composant natif.

TextInput contrôlé

Le mode contrôlé est recommandé pour tous les formulaires nécessitant une validation, un filtrage ou un formatage des données saisies. L'état du champ est synchronisé avec l'état du composant React, offrant un contrôle total sur la valeur.

const LoginForm = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    return (
        <View>
            <TextInput
                placeholder="Email"
                value={email}
                onChangeText={setEmail}
                keyboardType="email-address"
                autoCapitalize="none"
            />
            <TextInput
                placeholder="Password"
                value={password}
                onChangeText={setPassword}
                secureTextEntry
                maxLength={32}
            />
        </View>
    );
};

Dans cet exemple, les deux champs utilisent le mode contrôlé. Le champ email a le type de clavier email-address et la capitalisation automatique désactivée. Le champ mot de passe utilise secureTextEntry pour masquer les caractères saisis et est limité à 32 caractères via maxLength.

TextInput non contrôlé

Le mode non contrôlé convient aux champs simples qui ne nécessitent pas de validation ou de réaction immédiate à la saisie. La valeur du champ est récupérée via une ref au moment de la soumission du formulaire.

const SimpleSearch = () => {
    const inputRef = useRef(null);

    const handleSearch = () => {
        console.log(inputRef.current.value());
    };

    return (
        <TextInput
            ref={inputRef}
            placeholder="Search..."
            onSubmitEditing={handleSearch}
        />
    );
};

En mode non contrôlé, le composant se rend plus rapidement car il ne nécessite pas de synchronisation d'état à chaque modification de texte. Cependant, vous perdez la capacité de filtrer, formater ou valider la saisie en temps réel.

Types de clavier et fonctionnalités de la plateforme

TextInput prend en charge divers types de clavier qui adaptent la disposition au format de saisie attendu. Choisir le bon type de clavier améliore l'expérience utilisateur et réduit les erreurs de saisie sur les appareils mobiles.

Sur iOS, des types supplémentaires sont disponibles: numbers-and-punctuation, twitter, web-search (avec recherche vocale). Sur Android, visible-password est également disponible (affiche le mot de passe). Choisir le bon keyboardType est un aspect important de l'UX des applications mobiles.

Les fonctionnalités de la plateforme incluent également autoCapitalize (capitalisation automatique du premier mot), autoCorrect (correction automatique), spellCheck (vérification orthographique), textContentType (remplissage automatique sur iOS). Ces props fonctionnent différemment sur chaque plateforme et nécessitent des tests.

Exemples pratiques avec TextInput

Considérons deux scénarios réels: un champ multiligne pour la saisie de messages et un champ avec masque pour le numéro de téléphone. Les deux utilisent TextInput avec différentes props pour atteindre le comportement souhaité.

Exemple 1: Champ multiligne pour message

Pour saisir du texte long (commentaires, descriptions), TextInput passe en mode multiligne via la prop multiline. Dans ce mode, le champ s'agrandit verticalement et prend en charge les sauts de ligne.

const MessageInput = ({ onSend }) => {
    const [text, setText] = useState('');

    return (
        <TextInput
            style={styles.input}
            multiline
            numberOfLines={4}
            placeholder="Write a message..."
            value={text}
            onChangeText={setText}
            textAlignVertical="top"
        />
    );
};

La prop multiline active le mode multiligne, numberOfLines définit la hauteur initiale en lignes. textAlignVertical: 'top' aligne le texte en haut (par défaut, sur Android, TextInput multiligne centre le texte verticalement).

Exemple 2: Champ avec formatage de numéro de téléphone

Pour saisir un numéro de téléphone, un formatage en temps réel est souvent nécessaire. En combinant onChangeText avec des expressions régulières, vous pouvez implémenter un masque de saisie.

const PhoneInput = () => {
    const [phone, setPhone] = useState('');

    const formatPhone = (text) => {
        const cleaned = text.replace(/\D/g, '');
        if (cleaned.length <= 11) {
            return cleaned.replace(
                /(\d{1})(\d{3})(\d{3})(\d{2})(\d{2})/,
                '+$1 ($2) $3 $4 $5'
            );
        }
        return cleaned;
    };

    return (
        <TextInput
            keyboardType="phone-pad"
            value={phone}
            onChangeText={(t) => setPhone(formatPhone(t))}
            placeholder="+7 (999) 123 45 67"
            maxLength={20}
        />
    );
};

La fonction formatPhone supprime tous les caractères non numériques et formate le numéro dans un format international standard. keyboardType: 'phone-pad' affiche le clavier téléphonique. Cette approche améliore l'UX pour la saisie des numéros de téléphone et prévient les erreurs de formatage.