RN Lez 19: TextInput Approfondito

Docs: TextInput, Handling Text Input

Obiettivi

• Conoscere tutte le proprietà di TextInput
• Gestire diversi tipi di tastiera
• Creare campi password e textarea

---

1. TextInput — tutte le proprietà

<TextInput
    // Controllo valore
    value={testo}
    onChangeText={setTesto}

    // Suggerimento
    placeholder="Scrivi qui..."
    placeholderTextColor="#999"

    // Tastiera
    keyboardType="default"           // testo normale
    keyboardType="numeric"           // numeri
    keyboardType="email-address"     // @
    keyboardType="phone-pad"         // telefono
    keyboardType="decimal-pad"       // numeri con virgola
    keyboardType="url"               // web

    // Comportamento
    secureTextEntry={true}           // password
    multiline={true}                 // textarea
    editable={true}                  // disabilita?
    maxLength={50}                   // max caratteri
    autoFocus={true}                 // focus automatico

    // Eventi
    onSubmitEditing={fn}             // quando preme Invio
    onFocus={fn}                     // quando riceve focus
    onBlur={fn}                      // quando perde focus

    // Stile
    style={styles.input}
/>

---

2. Campi speciali

Password

<TextInput
    placeholder="Password"
    value={password}
    onChangeText={setPassword}
    secureTextEntry={!mostraPassword}
/>

Textarea (multi riga)

<TextInput
    placeholder="Scrivi qui..."
    value={testo}
    onChangeText={setTesto}
    multiline
    numberOfLines={5}
    textAlignVertical="top"       // testo parte dall'alto
    style={styles.textarea}
/>

---

3. onSubmitEditing

Cattura quando l’utente preme Invio o Done.

const [città, setCittà] = useState('');

<TextInput
    placeholder="Città"
    value={città}
    onChangeText={setCittà}
    onSubmitEditing={() => cercaMeteo(città)}   // invio = cerca!
    returnKeyType="search"                       // bottone "search"
/>

returnKeyType

returnKeyType="done"      // ✓
returnKeyType="search"    // 🔍
returnKeyType="go"        // →
returnKeyType="next"      // ▶ (passa al prossimo campo)
returnKeyType="send"      // ✉

---

4. Auto-focus tra campi

const inputRef2 = useRef<TextInput>(null);

<TextInput
    placeholder="Email"
    returnKeyType="next"
    onSubmitEditing={() => inputRef2.current?.focus()}
/>
<TextInput
    ref={inputRef2}
    placeholder="Password"
    secureTextEntry
/>

---

5. Tabella riassuntiva

Prop	Valori	Descrizione
keyboardType	'default', 'numeric', 'email-address', 'phone-pad'	Tastiera
secureTextEntry	true	Password
multiline	true	Textarea
maxLength	numero	Max caratteri
returnKeyType	'done', 'search', 'next'	Bottone tastiera
onSubmitEditing	callback	Invio premuto

---

6. Esercizio

🎯 “Form di registrazione”

Crea un form con:

1. Nome (default)
2. Email (keyboardType=“email-address”, valida @)
3. Telefono (keyboardType=“phone-pad”)
4. Password (secureTextEntry)
5. Conferma password (deve matchare)
6. Bottone “Registrati” che mostra Alert con riepilogo
7. onSubmitEditing passa al campo successivo