RN Lez 16: TouchableOpacity e Pressable

Docs: Handling Touches, Pressable

Obiettivi

• Usare TouchableOpacity per elementi cliccabili
• Gestire onPress e onLongPress
• Usare Pressable per feedback avanzati

---

1. TouchableOpacity

Il bottone più versatile. Rende qualsiasi elemento cliccabile con feedback di opacità.

import { TouchableOpacity, Text } from 'react-native';

<TouchableOpacity
    style={styles.bottone}
    onPress={() => console.log('click!')}
    onLongPress={() => console.log('long press!')}
    activeOpacity={0.7}    // opacità quando premuto (default: 0.2)
    disabled={false}
>
    <Text style={styles.testo}>Cliccami</Text>
</TouchableOpacity>

---

2. Pattern: lista cliccabile

const renderItem = ({ item }) => (
    <TouchableOpacity
        style={styles.card}
        onPress={() => navigation.navigate('Dettaglio', { id: item.id })}
        onLongPress={() => {
            Alert.alert('Elimina', `Eliminare ${item.nome}?`, [
                { text: 'Annulla', style: 'cancel' },
                { text: 'Elimina', style: 'destructive', onPress: () => elimina(item.id) },
            ]);
        }}
    >
        <Text style={styles.nome}>{item.nome}</Text>
        <Text style={styles.chevron}>›</Text>
    </TouchableOpacity>
);

---

3. TouchableHighlight

Come TouchableOpacity ma con cambio di sfondo.

import { TouchableHighlight } from 'react-native';

<TouchableHighlight
    onPress={fn}
    underlayColor="#e0e0e0"     // colore quando premuto
    style={styles.bottone}
>
    <Text>Premi</Text>
</TouchableHighlight>

---

4. Pressable — controllo avanzato

Pressable dà controllo sui vari stati della pressione.

import { Pressable, Text } from 'react-native';

<Pressable
    onPress={fn}
    onPressIn={() => setPremuto(true)}
    onPressOut={() => setPremuto(false)}
    onLongPress={fn}
    hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}  // area tocco estesa
    pressRetentionOffset={{ top: 20, left: 20 }}
>
    {({ pressed }) => (
        <View style={[styles.bottone, pressed && styles.premuto]}>
            <Text style={[styles.testo, pressed && { color: 'white' }]}>
                {pressed ? 'Premuto!' : 'Premimi'}
            </Text>
        </View>
    )}
</Pressable>

hitSlop — area tocco estesa

// Rende il bottone più facile da premere
hitSlop={10}                    // 10px extra su tutti i lati
hitSlop={{ top: 10, bottom: 10, left: 30, right: 30 }}

---

5. Tabella riassuntiva

Componente	Uso	Feedback
TouchableOpacity	Uso generico	Opacità
TouchableHighlight	Bottoni con sfondo	Cambia sfondo
Pressable	Controllo totale	Stato pressed

---

6. Esercizio

🎯 “Pulsante personalizzato”

Crea un componente Pulsante che:

1. Props: { titolo: string; onPress: () => void; colore?: string; variante?: 'pieno' | 'vuoto' }
2. Variante ‘pieno’: sfondo colorato, testo bianco
3. Variante ‘vuoto’: bordo colorato, testo colorato
4. Effetto di pressione (opacità 0.7)
5. hitSlop per tocco facile
6. Usalo 3 volte in App con colori diversi