RN Lez 20: Button e Alert Approfonditi

Docs: Button, Alert

Obiettivi

• Customizzare Button con colore e disabilitazione
• Usare Alert per conferme e messaggi
• Pattern di feedback all’utente

---

1. Button

import { Button } from 'react-native';

<Button
    title="Cliccami"
    onPress={fn}
    color="#3498db"          // solo Android: colore sfondo
    disabled={false}
/>

Bottone disabilitato

<Button
    title={salvando ? 'Salvataggio...' : 'Salva'}
    onPress={salva}
    disabled={salvando || !nome}    // ← disabilitato se...
/>

---

2. Alert — pattern avanzati

Pattern: Conferma operazione

const eliminaElemento = (id: string) => {
    Alert.alert(
        'Conferma eliminazione',
        'Questa operazione non può essere annullata.',
        [
            { text: 'Annulla', style: 'cancel' },
            {
                text: 'Elimina',
                style: 'destructive',
                onPress: () => {
                    // esegue eliminazione
                    elimina(id);
                },
            },
        ]
    );
};

Pattern: Messaggio di errore

Alert.alert('❌ Errore', 'Compila tutti i campi obbligatori.');

Pattern: Scelta multipla

Alert.alert('Scegli azione', 'Cosa vuoi fare?', [
    { text: 'Modifica', onPress: () => modifica(id) },
    { text: 'Duplica', onPress: () => duplica(id) },
    { text: 'Elimina', style: 'destructive', onPress: () => elimina(id) },
    { text: 'Annulla', style: 'cancel' },
]);

---

3. Pattern: Stato di caricamento

const [loading, setLoading] = useState(false);

const eseguiOperazione = async () => {
    setLoading(true);
    try {
        // operazione asincrona
        await salvaDati(dati);
        Alert.alert('✅ Fatto!', 'Dati salvati con successo.');
    } catch (err) {
        Alert.alert('❌ Errore', (err as Error).message);
    } finally {
        setLoading(false);
    }
};

<Button
    title={loading ? 'Attendi...' : 'Salva'}
    onPress={eseguiOperazione}
    disabled={loading}
/>

---

4. Tabella riassuntiva

Pattern	Codice
Conferma eliminazione	Alert.alert('Elimina?', '...', [{cancel}, {destructive, onPress}])
Errore	Alert.alert('Errore', messaggio)
Successo	Alert.alert('✅ Fatto!', messaggio)
Caricamento	disabled={loading} + cambio testo

---

5. Esercizio

🎯 “Gestione contatti”

Crea un’app che:

1. Mostra una lista di contatti (FlatList)
2. Ogni contatto ha un bottone “Elimina”
3. Cliccando “Elimina” → Alert di conferma
4. Se conferma → rimuove e mostra Alert di successo
5. Se non conferma → non fa nulla

// Dati iniziali
const [contatti, setContatti] = useState([
    { id: '1', nome: 'Mario' },
    { id: '2', nome: 'Sofia' },
]);