RN Lez 08: Height, Width e Box Model

Docs: Height and Width, Layout Props

Obiettivi

• Impostare dimensioni fisse e flessibili
• Usare padding, margin, border
• Capire la differenza tra dimensioni in RN e nel web

---

1. Dimensioni fisse

<View style={{ width: 100, height: 100, backgroundColor: 'red' }} />
// ↑ quadrato 100×100

Tutte le dimensioni in RN sono in pixel (senza unità).

---

2. Dimensioni flessibili con flex

<View style={{ flex: 1 }}>             {/* 50% */}
<View style={{ flex: 2 }}>             {/* 100% (2× rispetto a 1) */}

┌─────────────────────────────┐
│         flex: 1             │  ← 1/3 dello spazio
├─────────────────────────────┤
│         flex: 2             │  ← 2/3 dello spazio
└─────────────────────────────┘

Layout: header + content + footer

<View style={{ flex: 1 }}>
    <View style={{ height: 60, backgroundColor: 'blue' }} />         {/* header fisso */}
    <View style={{ flex: 1, backgroundColor: 'white' }} />           {/* content variabile */}
    <View style={{ height: 50, backgroundColor: 'grey' }} />         {/* footer fisso */}
</View>

---

3. Percentuali

<View style={{ width: '50%', height: '100%', backgroundColor: 'red' }} />

Nota: le percentuali in RN funzionano solo per width/height, non per padding/margin.

---

4. Box Model completo

      ┌─────────────────────────────┐
      │          margin              │  ← spazio esterno
      │  ┌───────────────────────┐  │
      │  │        border         │  │  ← bordo
      │  │  ┌─────────────────┐  │  │
      │  │  │     padding      │  │  │  ← spazio interno
      │  │  │ ┌─────────────┐ │  │  │
      │  │  │ │  content    │ │  │  │
      │  │  │ └─────────────┘ │  │  │
      │  │  └─────────────────┘  │  │
      │  └───────────────────────┘  │
      └─────────────────────────────┘

<View style={{
    width: 200,
    height: 100,
    padding: 20,              // spazio INTERNO
    margin: 10,               // spazio ESTERNO
    borderWidth: 2,           // spessore bordo
    borderColor: '#333',
    borderRadius: 12,         // angoli arrotondati
    backgroundColor: 'white',
}}>
    <Text>Contenuto</Text>
</View>

---

5. Padding e Margin shorthand

padding: 20,                  // tutti i lati
paddingHorizontal: 20,        // left + right
paddingVertical: 10,          // top + bottom
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 10,
paddingRight: 10,

margin: 20,                   // tutti i lati
marginHorizontal: 20,
marginVertical: 10,
marginTop: 10,

---

6. Box Sizing

In React Native il box-sizing è sempre border-box (come in CSS moderno).

// width = 200 include padding e border
<View style={{
    width: 200,
    padding: 20,           // 40 orizzontale
    borderWidth: 2,        // 4 orizzontale
    // spazio contenuto = 200 - 40 - 4 = 156
}} />

---

7. Tabella riassuntiva

Proprietà	Descrizione	Esempio
width	Larghezza fissa	width: 200
height	Altezza fissa	height: 100
flex	Quota spazio	flex: 1
%	Percentuale	width: '50%'
padding	Spazio interno	padding: 20
margin	Spazio esterno	marginVertical: 10
borderWidth	Spessore bordo	borderWidth: 2
borderRadius	Angoli arrotondati	borderRadius: 12

---

8. Esercizio

🎯 “Scheda prodotto con dettagli”

Crea una card che contiene:

1. Titolo “Scarpe Sportive” (24px bold)
2. Prezzo ”€ 89.99” (20px verde)
3. Descrizione “Scarpe da corsa leggere” (14px grigio)
4. Padding: 20
5. Margin bottom: 15
6. BorderRadius: 15
7. Ombra (elevation: 3)

Usa solo StyleSheet.create() e box model.