RN Lez 12: Layout Avanzato

Docs: Layout Props, Shadow Props, Transforms

Obiettivi

• Posizionare elementi con position absolute
• Usare zIndex per sovrapposizioni
• Applicare ombre e trasformazioni

---

1. Position absolute

Permette di posizionare un elemento rispetto al genitore.

<View style={{ width: 200, height: 200, backgroundColor: 'lightgrey' }}>
    {/* Figlio posizionato in basso a destra */}
    <View style={{
        position: 'absolute',
        bottom: 10,
        right: 10,
        width: 50,
        height: 50,
        backgroundColor: 'red',
        borderRadius: 25,
    }} />
    {/* Figlio posizionato in alto a sinistra */}
    <View style={{
        position: 'absolute',
        top: 10,
        left: 10,
        padding: 5,
        backgroundColor: 'blue',
        borderRadius: 5,
    }}>
        <Text style={{ color: 'white' }}>Badge</Text>
    </View>
</View>

Pattern: Badge su icona

<View style={{ width: 40, height: 40 }}>
    <Text style={{ fontSize: 30 }}>🔔</Text>
    <View style={{
        position: 'absolute',
        top: -2,
        right: -5,
        backgroundColor: 'red',
        width: 18,
        height: 18,
        borderRadius: 9,
        justifyContent: 'center',
        alignItems: 'center',
    }}>
        <Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>3</Text>
    </View>
</View>

---

2. zIndex — sovrapposizione

Controlla quale elemento sta sopra quando si sovrappongono.

<View>
    <View style={{ width: 100, height: 100, backgroundColor: 'red', zIndex: 1 }} />
    <View style={{
        width: 100, height: 100,
        backgroundColor: 'blue',
        marginTop: -50,    // ← sovrapposto
        zIndex: 2,          // ← sopra al rosso
    }} />
</View>

Maggiore è lo zIndex, più l’elemento è sopra.

---

3. Shadow e Elevation

iOS (shadow)

shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 8,

Android (elevation)

elevation: 4,    // ← ombra automatica

Cross-platform

style: {
    // Android
    elevation: 4,
    // iOS
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.15,
    shadowRadius: 8,
}

---

4. Transform

<View style={{
    transform: [
        { rotate: '45deg' },
        { scale: 1.2 },
        { translateX: 50 },
        { translateY: -20 },
        { skewX: '10deg' },
    ],
    width: 100,
    height: 100,
    backgroundColor: 'red',
}} />

Pattern: Card che si inclina al click

const [ruotata, setRuotata] = useState(false);

<View style={{
    transform: [{ rotate: ruotata ? '5deg' : '0deg' }],
    width: 200, height: 100,
    backgroundColor: 'white',
    borderRadius: 10,
    elevation: 5,
}}>
    <TouchableOpacity onPress={() => setRuotata(!ruotata)}>
        <Text>Premi per inclinare</Text>
    </TouchableOpacity>
</View>

---

5. overflow

overflow: 'visible'   // default — contenuto esce dai bordi
overflow: 'hidden'    // taglia contenuto fuori dai bordi

<View style={{
    width: 100, height: 100,
    borderRadius: 50,
    overflow: 'hidden',    // ← taglia l'immagine in cerchio
}}>
    <Image source={{ uri: '...' }} style={{ width: 100, height: 100 }} />
</View>

---

6. Tabella riassuntiva

Proprietà	Valori	Descrizione
position	'relative', 'absolute'	Tipo posizionamento
top/left/right/bottom	numero	Offset
zIndex	numero	Ordine sovrapposizione
overflow	'visible', 'hidden'	Contenuto eccedente
elevation	numero (Android)	Ombra
transform	array di oggetti	Rotazione, scala, …

---

7. Esercizio

🎯 “Card prodotto con badge”

Crea una card prodotto che ha:

1. Immagine grande (100% larghezza)
2. Badge “NUOVO” in alto a destra (position absolute, rosso)
3. Badge “-20%” in basso a sinistra (position absolute, verde)
4. Nome e prezzo sotto l’immagine
5. Ombra sulla card
6. overflow hidden per arrotondare l’immagine