RN Lez 10: Flexbox — Direzione e Allineamento

Docs: Flexbox

Obiettivi

• Capire flexDirection (asse principale)
• Usare justifyContent e alignItems
• Allineare singoli elementi con alignSelf

---

1. flexDirection — asse principale

In RN tutti i View hanno display: flex di default.

flexDirection: 'column'    // Verticale (DEFAULT)
flexDirection: 'row'       // Orizzontale

column (default)          row
┌────────┐               ┌──┬──┬──┐
│  uno   │               │un│du│tr│
│  due   │               └──┴──┴──┘
│  tre   │
└────────┘

// Riga orizzontale
<View style={{ flexDirection: 'row' }}>
    <Text>Uno</Text>
    <Text>Due</Text>
    <Text>Tre</Text>
</View>

---

2. justifyContent — asse principale

Asse principale = direzione di flexDirection.

flexDirection: 'column' (verticale):
  justifyContent: 'center'       justifyContent: 'space-between'
  ┌────────┐                   ┌────────┐
  │        │                   │  uno   │
  │  uno   │                   ├────────┤
  │  due   │                   │  due   │
  │  tre   │                   ├────────┤
  │        │                   │  tre   │
  └────────┘                   └────────┘

justifyContent: 'flex-start'    // all'inizio (default)
justifyContent: 'center'        // al centro
justifyContent: 'flex-end'      // alla fine
justifyContent: 'space-between' // spazio tra elementi
justifyContent: 'space-around'  // spazio intorno
justifyContent: 'space-evenly'  // spazio uguale

---

3. alignItems — asse secondario

Asse secondario = perpendicolare a flexDirection.

// Con flexDirection: 'row'
alignItems: 'center'      // centra VERTICALMENTE
alignItems: 'stretch'     // stira per riempire (default)
alignItems: 'flex-start'  // all'inizio
alignItems: 'flex-end'    // alla fine

flexDirection: 'row', alignItems: 'stretch'
┌────────────────────────┐
│ uno     due      tre   │  ← tutti stessa altezza
└────────────────────────┘

flexDirection: 'row', alignItems: 'center'
┌────────────────────────┐
│         │              │
│ uno │ due │   tre      │  ← centrati verticalmente
│         │              │
└────────────────────────┘

---

4. alignSelf — singolo elemento

alignSelf sovrascrive alignItems per un singolo elemento.

<View style={{ flexDirection: 'row', alignItems: 'center' }}>
    <View style={{ height: 50, width: 50, backgroundColor: 'red' }} />
    <View style={{
        height: 50, width: 50,
        backgroundColor: 'green',
        alignSelf: 'flex-end',     // ← questo va in basso
    }} />
    <View style={{ height: 50, width: 50, backgroundColor: 'blue' }} />
</View>

---

5. Esempio: Header con logo + titolo + icona

<View style={{
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 15,
    backgroundColor: '#3498db',
}}>
    <Text style={{ color: 'white', fontSize: 20 }}>☰</Text>
    <Text style={{ color: 'white', fontSize: 18, fontWeight: 'bold' }}>
        La mia App
    </Text>
    <Text style={{ color: 'white', fontSize: 20 }}>⚙️</Text>
</View>

Output:

┌─────────────────────────────────┐
│  ☰        La mia App        ⚙️  │
└─────────────────────────────────┘

---

6. Tabella riassuntiva Flexbox

Proprietà	Valori comuni
flexDirection	'column' (default), 'row'
justifyContent	'flex-start', 'center', 'flex-end', 'space-between'
alignItems	'stretch' (default), 'center', 'flex-start', 'flex-end'
alignSelf	stessi di alignItems (per singolo elemento)

---

7. Esercizio

🎯 “Barra degli strumenti”

Crea una barra in basso (come una toolbar) con:

1. 3 icone (usa emoji): 🏠, 🔍, 👤
2. flexDirection: ‘row’ con justifyContent: 'space-around'
3. alignItems: ‘center’
4. Altezza 60px, sfondo bianco
5. bordo superiore grigio chiaro

Mettila in fondo allo schermo usando position: 'absolute', bottom: 0.