RN Verifica 2 — Navigazione, API e Progetto

Istruzioni

• Durata: 90 minuti
• Puoi usare il cheatsheet
• Consegna: progetto Expo funzionante

---

Parte 1 — Vero/Falso (4 punti)

1. FlatList renderizza tutti gli elementi subito, anche quelli non visibili
2. router.push('/path') aggiunge una schermata allo stack
3. useEffect(() => {}, []) si esegue ogni volta che il componente si aggiorna
4. AsyncStorage salva i dati in modo persistente sul telefono

---

Parte 2 — Completa il codice (6 punti)

import { View, Text, FlatList, ActivityIndicator, StyleSheet } from 'react-native';
import { useState, useEffect } from 'react';

export default function App() {
    const [utenti, setUtenti] = useState([]);
    const [loading, setLoading] = useState(true);
    const [errore, setErrore] = useState(null);

    useEffect(() => {
        // --- COMPLETA ---
        // 1. fetch da 'https://jsonplaceholder.typicode.com/users'
        // 2. salva in setUtenti
        // 3. gestisci errore con setErrore
        // 4. setLoading(false) alla fine
    }, []);

    // --- COMPLETA ---
    // if loading → mostra ActivityIndicator centrato
    // if errore → mostra testo errore in rosso

    return (
        <View style={styles.container}>
            <Text style={styles.titolo}>Utenti</Text>
            <FlatList
                data={utenti}
                renderItem={({ item }) => (
                    <View style={styles.card}>
                        <Text style={styles.nome}>{item.name}</Text>
                        <Text style={styles.email}>{item.email}</Text>
                    </View>
                )}
                keyExtractor={item => item.id.toString()}
            />
        </View>
    );
}

---

Parte 3 — Progetto (10 punti)

Crea un’app con 2 schermate usando Expo Router:

Schermata Home (/)

• Titolo “App Note”
• FlatList di note (titolo + data)
• Ogni nota ha un colore
• Clicca → naviga a dettaglio con parametri
• Bottone ”+” in header → naviga ad aggiungi

Schermata Dettaglio (/dettaglio)

• Riceve parametri (titolo, testo, data, colore)
• Mostra: titolo (grande), data, testo completo
• Sfondo colorato in base al colore passato

Requisiti

• Navigazione Stack con Expo Router
• Passaggio parametri con useLocalSearchParams
• StyleSheet per stili
• Card con ombra
• FlatList per la lista

Criteri

Criterio	Punti
Navigazione funzionante	3
Parametri passati correttamente	2
FlatList con renderItem	2
UI pulita (card, colori, padding)	2
StyleSheet separati	1