TextInput - Les bases de la saisie de données

Bienvenue à l'Atelier des Perles ! Ici tu vas apprendre à collecter des données auprès des habitants de l'Atlantide grâce aux formulaires.

TextInput de base

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

function BasicInput() {
  const [name, setName] = useState('');

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Nom :</Text>
      <TextInput
        style={styles.input}
        value={name}
        onChangeText={setName}
        placeholder="Saisis ton nom"
        placeholderTextColor="#888"
      />
      <Text>Saisi : {name}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  label: {
    fontSize: 16,
    marginBottom: 8,
    color: '#1a5276',
  },
  input: {
    borderWidth: 1,
    borderColor: '#1a5276',
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
    backgroundColor: '#fff',
  },
});

Propriétés importantes de TextInput

<TextInput
  // Base
  value={value}
  onChangeText={(text) => setValue(text)}
  placeholder="Indice"
  placeholderTextColor="#999"

  // Type de clavier
  keyboardType="default"        // par défaut
  keyboardType="email-address"  // email avec @
  keyboardType="numeric"        // chiffres uniquement
  keyboardType="phone-pad"      // téléphone
  keyboardType="decimal-pad"    // nombres avec décimale

  // Comportement
  autoCapitalize="none"         // pas de majuscule
  autoCapitalize="sentences"    // majuscule en début de phrase
  autoCapitalize="words"        // majuscule à chaque mot
  autoCorrect={false}           // désactiver la correction automatique
  autoComplete="email"          // suggestions (email, password, name)

  // Apparence
  multiline={true}              // champ multiligne
  numberOfLines={4}             // nombre de lignes (Android)
  maxLength={100}               // longueur maximale

  // Mot de passe
  secureTextEntry={true}        // masquer le texte

  // Focus
  autoFocus={true}              // focus automatique
  selectTextOnFocus={true}      // sélectionner le texte au focus

  // Boutons du clavier
  returnKeyType="done"          // done, go, next, search, send
  onSubmitEditing={() => {}}    // action sur Entrée

  // Modifiable
  editable={true}               // modifiable ou non
/>

Différents types de champs

function InputTypes() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [phone, setPhone] = useState('');
  const [bio, setBio] = useState('');

  return (
    <View style={styles.container}>
      {/* Email */}
      <TextInput
        style={styles.input}
        value={email}
        onChangeText={setEmail}
        placeholder="Email"
        keyboardType="email-address"
        autoCapitalize="none"
        autoComplete="email"
      />

      {/* Mot de passe */}
      <TextInput
        style={styles.input}
        value={password}
        onChangeText={setPassword}
        placeholder="Mot de passe"
        secureTextEntry
        autoComplete="password"
      />

      {/* Téléphone */}
      <TextInput
        style={styles.input}
        value={phone}
        onChangeText={setPhone}
        placeholder="Numéro de téléphone"
        keyboardType="phone-pad"
        maxLength={12}
      />

      {/* Multiligne */}
      <TextInput
        style={[styles.input, styles.multiline]}
        value={bio}
        onChangeText={setBio}
        placeholder="Parle-nous de toi..."
        multiline
        numberOfLines={4}
        textAlignVertical="top"
      />
    </View>
  );
}

Styliser les états

function StyledInput() {
  const [value, setValue] = useState('');
  const [isFocused, setIsFocused] = useState(false);
  const [error, setError] = useState('');

  const validateEmail = (text: string) => {
    setValue(text);
    if (text && !text.includes('@')) {
      setError('Email invalide');
    } else {
      setError('');
    }
  };

  return (
    <View>
      <TextInput
        style={[
          styles.input,
          isFocused && styles.inputFocused,
          error && styles.inputError,
        ]}
        value={value}
        onChangeText={validateEmail}
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
        placeholder="Email"
      />
      {error ? <Text style={styles.errorText}>{error}</Text> : null}
    </View>
  );
}

const styles = StyleSheet.create({
  input: {
    borderWidth: 2,
    borderColor: '#ddd',
    borderRadius: 8,
    padding: 12,
  },
  inputFocused: {
    borderColor: '#1a5276',
    backgroundColor: '#f0f8ff',
  },
  inputError: {
    borderColor: '#e74c3c',
    backgroundColor: '#fdf2f2',
  },
  errorText: {
    color: '#e74c3c',
    fontSize: 12,
    marginTop: 4,
  },
});

TextInput est l'élément de formulaire fondamental en React Native !

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

export default function App() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Connexion à l'Atlantide</Text>

      {/* TODO : ajoute un <TextInput> pour l'email qui :
          - a value={email} et onChangeText={setEmail}
          - a placeholder="Email"
          - a keyboardType="email-address"
          - a autoCapitalize="none"
          - utilise le style styles.input */}

      {/* TODO : ajoute un <TextInput> pour le mot de passe qui :
          - a value={password} et onChangeText={setPassword}
          - a placeholder="Mot de passe"
          - masque le texte grâce à secureTextEntry
          - utilise le style styles.input */}

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
    backgroundColor: '#1a5276',
  },
  title: {
    fontSize: 22,
    color: '#fff',
    marginBottom: 24,
    textAlign: 'center',
  },
  input: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 14,
    fontSize: 16,
    color: '#1a5276',
    marginBottom: 16,
  },
});