RN Lez 09: Image e ImageBackground

Docs: Images, Image

Obiettivi

• Caricare immagini da web e locali
• Usare resizeMode per adattare le immagini
• Usare ImageBackground per sfondi

---

1. Image — immagini

Da web

import { Image } from 'react-native';

<Image
    source={{ uri: 'https://picsum.photos/200' }}
    style={{ width: 200, height: 200, borderRadius: 100 }}
/>

Importante: per immagini web DEVI specificare width e height.

Locali

<Image
    source={require('./assets/logo.png')}
    style={{ width: 100, height: 100 }}
/>

Le immagini locali possono essere sizing automatico (RN sa le dimensioni).

resizeMode

<Image
    source={{ uri: 'https://picsum.photos/300/400' }}
    style={{ width: '100%', height: 200 }}
    resizeMode="cover"
    //   ↑ 'cover' (default) | 'contain' | 'stretch' | 'repeat' | 'center'
/>

resizeMode	Comportamento
'cover'	Ritaglia per riempire (default)
'contain'	Adatta tutto dentro
'stretch'	Distorce per riempire
'center'	Centra senza ridimensionare
'repeat'	Ripete (iOS)

---

2. ImageBackground

ImageBackground è un componente che ha un’immagine come sfondo e può contenere figli.

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

<ImageBackground
    source={{ uri: 'https://picsum.photos/seed/sfondo/400/200' }}
    style={{ width: '100%', height: 200, justifyContent: 'center', alignItems: 'center' }}
>
    <Text style={{ color: 'white', fontSize: 24, fontWeight: 'bold' }}>
        Titolo sulla foto
    </Text>
</ImageBackground>

---

3. Image Style Props

<Image
    source={{ uri: '...' }}
    style={{
        width: 200,
        height: 200,
        borderRadius: 20,
        borderWidth: 3,
        borderColor: 'white',
        opacity: 0.8,
        tintColor: 'blue',  // ← applica filtro colore
    }}
/>

---

4. Esempio: Galleria foto

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

const FOTO = [
    { id: 1, uri: 'https://picsum.photos/seed/1/400/300' },
    { id: 2, uri: 'https://picsum.photos/seed/2/400/300' },
    { id: 3, uri: 'https://picsum.photos/seed/3/400/300' },
    { id: 4, uri: 'https://picsum.photos/seed/4/400/300' },
];

export default function App() {
    return (
        <ScrollView style={styles.container}>
            <View style={styles.griglia}>
                {FOTO.map(f => (
                    <Image key={f.id} source={{ uri: f.uri }} style={styles.foto} />
                ))}
            </View>
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    container: { flex: 1, padding: 10, backgroundColor: '#f5f5f5' },
    griglia: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' },
    foto: {
        width: '48%',
        height: 150,
        marginBottom: 10,
        borderRadius: 10,
    },
});

---

5. Tabella riassuntiva

Componente	Codice	Note
Image (web)	<Image source={{uri: '...'}} style={...} />	Serve width/height
Image (locale)	<Image source={require('./img.png')} style={...} />	Dimensioni automatiche
ImageBackground	<ImageBackground source={...}>...	Sfondo con contenuto
resizeMode	resizeMode="cover"	Adattamento immagine
tintColor	tintColor: 'blue'	Filtro colore

---

6. Esercizio

🎯 “Galleria artisti”

Crea una schermata che mostra 4 artisti musicali in card:

Ogni card contiene:

• Image dell’artista (usa https://i.pravatar.cc/150?u=NOME)
• Nome sotto l’immagine
• Genere musicale (grigio)

Layout: 2 colonne con flexWrap: 'wrap', card con angoli arrotondati.