RN Lez 29: StatusBar, Dimensions, PixelRatio

Docs: StatusBar, Dimensions, useWindowDimensions

Obiettivi

• Personalizzare la StatusBar
• Ottenere dimensioni schermo con Dimensions
• Usare useWindowDimensions per layout responsive

---

1. StatusBar

import { StatusBar } from 'react-native';

// In qualsiasi componente
<StatusBar
    barStyle="dark-content"     // 'default' | 'dark-content' | 'light-content'
    backgroundColor="#3498db"   // solo Android
    hidden={false}              // nascondere?
/>

Per tutta l’app

export default function App() {
    return (
        <View style={{ flex: 1 }}>
            <StatusBar barStyle="light-content" backgroundColor="#2980b9" />
            {/* resto app */}
        </View>
    );
}

---

2. Dimensions

import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');
console.log(`Schermo: ${width}×${height}px`);

const { width: schermoW, height: schermoH } = Dimensions.get('screen');
// ↑ 'screen' include la barra di stato, 'window' no

Layout responsive con Dimensions

const SCREEN_WIDTH = Dimensions.get('window').width;
const CARD_WIDTH = (SCREEN_WIDTH - 30) / 2;  // 2 colonne con gap

<View style={{ width: CARD_WIDTH, height: 200, backgroundColor: 'red' }} />

---

3. useWindowDimensions — hook reattivo

useWindowDimensions si aggiorna automaticamente quando lo schermo cambia (rotazione, split screen).

import { useWindowDimensions } from 'react-native';

export default function App() {
    const { width, height } = useWindowDimensions();
    const isLandscape = width > height;

    return (
        <View style={{
            flexDirection: isLandscape ? 'row' : 'column',
            flex: 1,
        }}>
            {isLandscape
                ? <Text>📱 Orizzontale</Text>
                : <Text>📱 Verticale</Text>
            }
        </View>
    );
}

---

4. PixelRatio

Adatta dimensioni in base alla densità dello schermo.

import { PixelRatio } from 'react-native';

const fontScale = PixelRatio.getFontScale();    // scala font utente
const pixelRatio = PixelRatio.get();            // pixel ratio device

// Dimensioni che rispettano densità:
const size = PixelRatio.getPixelSizeForLayoutSize(10);

---

5. SafeAreaView + StatusBar

import { SafeAreaView, StatusBar, Platform } from 'react-native';

export default function App() {
    return (
        <SafeAreaView style={{
            flex: 1,
            paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
        }}>
            <StatusBar barStyle="dark-content" />
            <Text>Contenuto sicuro</Text>
        </SafeAreaView>
    );
}

---

6. Tabella riassuntiva

API	Codice	Uso
StatusBar	<StatusBar barStyle="..." />	Barra di stato
Dimensions	Dimensions.get('window')	Dimensioni fisse
useWindowDimensions	const { width } = useWindowDimensions()	Dimensioni reattive
PixelRatio	PixelRatio.get()	Densità schermo

---

7. Esercizio

🎯 “App responsive”

Crea un’app che:

1. Mostra larghezza/altezza schermo in tempo reale
2. Se in orizzontale (width > height): layout a riga
3. Se in verticale: layout a colonna
4. Card con larghezza calcolata: (width - padding) / numColonne
5. Numero di colonne: 2 in verticale, 3 in orizzontale
6. StatusBar personalizzata