RN Lez 18: Switch, Modal, ActivityIndicator

Docs: Switch, Modal, ActivityIndicator

Obiettivi

• Usare Switch per toggle on/off
• Usare Modal per finestre modali
• Usare ActivityIndicator per caricamento

---

1. Switch — toggle

import { Switch } from 'react-native';

const [attivo, setAttivo] = useState(false);

<Switch
    value={attivo}
    onValueChange={setAttivo}
    trackColor={{ false: '#767577', true: '#81b0ff' }}
    thumbColor={attivo ? '#f5dd4b' : '#f4f3f4'}
    disabled={false}
/>

---

2. Modal — finestre sovrapposte

import { Modal, View, Text, Button } from 'react-native';

const [visibile, setVisibile] = useState(false);

<View>
    <Button title="Apri modale" onPress={() => setVisibile(true)} />

    <Modal
        visible={visibile}
        animationType="slide"       // 'slide' | 'fade' | 'none'
        transparent={true}
        onRequestClose={() => setVisibile(false)}  // ← Android back
    >
        <View style={styles.modalOverlay}>
            <View style={styles.modalContent}>
                <Text style={{ fontSize: 20, marginBottom: 20 }}>
                    Questo è un modale!
                </Text>
                <Button title="Chiudi" onPress={() => setVisibile(false)} />
            </View>
        </View>
    </Modal>
</View>

const styles = StyleSheet.create({
    modalOverlay: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0,0,0,0.5)',
    },
    modalContent: {
        backgroundColor: 'white',
        padding: 30,
        borderRadius: 15,
        alignItems: 'center',
    },
});

---

3. ActivityIndicator — spinner

import { ActivityIndicator } from 'react-native';

// Base
<ActivityIndicator size="large" color="#3498db" />

// Piccolo
<ActivityIndicator size="small" color="grey" />

// Overlay a schermo intero
<View style={{
    position: 'absolute',
    top: 0, left: 0, right: 0, bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(255,255,255,0.8)',
}}>
    <ActivityIndicator size="large" color="#3498db" />
    <Text style={{ marginTop: 10, color: 'grey' }}>Caricamento...</Text>
</View>

---

4. RefreshControl — indicatore di refresh

import { ScrollView, RefreshControl } from 'react-native';

const [refreshing, setRefreshing] = useState(false);

const onRefresh = () => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 2000);
};

<ScrollView
    refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
    }
>
    <Text>Tira giù per refresh</Text>
</ScrollView>

---

5. Esempio: Impostazioni con toggle

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

export default function App() {
    const [wifi, setWifi] = useState(true);
    const [bluetooth, setBluetooth] = useState(false);
    const [modalitàAereo, setModalitàAereo] = useState(false);

    return (
        <View style={styles.container}>
            <Text style={styles.titolo}>⚙️ Impostazioni</Text>
            <View style={styles.row}>
                <Text>Wi-Fi</Text>
                <Switch value={wifi} onValueChange={setWifi} />
            </View>
            <View style={styles.row}>
                <Text>Bluetooth</Text>
                <Switch value={bluetooth} onValueChange={setBluetooth} />
            </View>
            <View style={styles.row}>
                <Text>Modalità Aereo</Text>
                <Switch value={modalitàAereo} onValueChange={setModalitàAereo} />
            </View>
        </View>
    );
}

---

6. Tabella riassuntiva

Componente	Codice	Uso
Switch	<Switch value={x} onValueChange={fn} />	Toggle
Modal	<Modal visible={x}>...</Modal>	Finestre
ActivityIndicator	<ActivityIndicator size="large" />	Caricamento
RefreshControl	<RefreshControl refreshing={x} />	Pull refresh

---

7. Esercizio

🎯 “Schermata impostazioni”

Crea una schermata con:

1. 3 toggle: Notifiche, Suono, Vibrazione
2. Bottone “Reset” che mostra un Modal di conferma
3. Se confermato → resetta tutti i toggle a false
4. ActivityIndicator che appare per 2 secondi durante il reset