RN Lez 13: ScrollView e SafeAreaView

Docs: Using ScrollView, ScrollView, SafeAreaView

Obiettivi

• Usare ScrollView per contenuti scrollabili
• Usare SafeAreaView per evitare notch
• Usare KeyboardAvoidingView per tastiera

---

1. ScrollView

ScrollView permette lo scroll quando il contenuto è più grande dello schermo.

<ScrollView style={styles.container}>
    <Text>Contenuto lungo...</Text>
    <Text>Ancora...</Text>
    <Text>Ancora...</Text>
    <Text>Fine contenuto</Text>
</ScrollView>

Scroll orizzontale

<ScrollView horizontal showsHorizontalScrollIndicator={false}>
    <View style={{ width: 200, height: 100, backgroundColor: 'red' }} />
    <View style={{ width: 200, height: 100, backgroundColor: 'green' }} />
    <View style={{ width: 200, height: 100, backgroundColor: 'blue' }} />
</ScrollView>

Proprietà ScrollView

Proprietà	Descrizione
horizontal	Scroll orizzontale
contentContainerStyle	Stili per contenitore interno
showsVerticalScrollIndicator	Mostra barra scroll
pagingEnabled	Scroll a pagina intera
scrollEnabled	Disabilita scroll
onScroll	Evento scroll

---

2. SafeAreaView

Evita elementi UI nascosti da notch, barra di stato, ecc.

import { SafeAreaView } from 'react-native';

export default function App() {
    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
            {/* Contenuto protetto da notch */}
            <Text>Contenuto sicuro</Text>
        </SafeAreaView>
    );
}

---

3. KeyboardAvoidingView

Sposta il contenuto verso l’alto quando la tastiera è aperta.

import { KeyboardAvoidingView, Platform } from 'react-native';

<KeyboardAvoidingView
    style={{ flex: 1 }}
    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
>
    <ScrollView>
        <Text>Form sopra...</Text>
        <TextInput placeholder="Questo campo non sarà nascosto" />
    </ScrollView>
</KeyboardAvoidingView>

---

4. Esempio: Profilo scrollabile completo

import { ScrollView, View, Text, Image, StyleSheet } from 'react-native';

export default function App() {
    return (
        <ScrollView style={styles.container}>
            {/* Copertina */}
            <Image
                source={{ uri: 'https://picsum.photos/seed/cop/400/150' }}
                style={styles.copertina}
            />
            {/* Avatar */}
            <View style={styles.avatarRow}>
                <Image
                    source={{ uri: 'https://i.pravatar.cc/100?u=mario' }}
                    style={styles.avatar}
                />
                <View>
                    <Text style={styles.nome}>Mario Rossi</Text>
                    <Text style={styles.ruolo}>Sviluppatore</Text>
                </View>
            </View>
            {/* Sezioni */}
            <View style={styles.section}>
                <Text style={styles.sectionTitle}>Biografia</Text>
                <Text>Studente di Informatica...</Text>
            </View>
            <View style={styles.section}>
                <Text style={styles.sectionTitle}>Competenze</Text>
                {['React Native', 'Python', 'JavaScript'].map((s, i) => (
                    <Text key={i}>⚡ {s}</Text>
                ))}
            </View>
        </ScrollView>
    );
}

---

5. Tabella riassuntiva

Componente	Codice	Uso
ScrollView	<ScrollView>...</ScrollView>	Contenuto scrollabile
SafeAreaView	<SafeAreaView>...</SafeAreaView>	Evitare notch
KeyboardAvoidingView	<KeyboardAvoidingView behavior="...">	Form non nascosti

---

6. Esercizio

🎯 “Pagina personale”

Crea una pagina scrollabile con:

1. Copertina (Image, altezza 150)
2. Avatar (rotondo, 80px, centrato, parzialmente sopra copertina)
3. Nome (grande, grassetto)
4. Bio (testo lungo, almeno 5 righe)
5. Lista hobby (almeno 4)
6. Statistiche in riga: 3 numeri (post, follower, following)

Usa ScrollView + StyleSheet.