View: cos'è, proprietà del contenitore e React Native

Cos'è View in React Native

View è un componente fondamentale di React Native che funge da contenitore per altri componenti. Supporta lo styling tramite StyleSheet, il layout tramite Flexbox, la gestione tattile, le animazioni e le trasformazioni. View è un'astrazione sugli elementi contenitore nativi: UIView su iOS e android.view.View su Android.

In React Native non è possibile utilizzare elementi HTML — invece, tutti i layout sono costruiti da View. Persino Text e Image sono solitamente avvolti in View per il posizionamento. Il componente può essere vuoto (solo un contenitore) o contenere qualsiasi numero di elementi figli a qualsiasi profondità di annidamento.

View supporta il rendering su entrambe le piattaforme da un'unica base di codice JavaScript. Le proprietà Flexbox, i margini, lo sfondo, le ombre e i bordi funzionano in modo identico su iOS e Android. Le differenze tra piattaforme sono minime — ad esempio, le ombre su iOS usano shadowColor/shadowOffset, mentre su Android usano elevation.

Secondo React Native Layout Docs, 2024, View è ottimizzato per dispositivi mobili: non crea viste native extra durante l'ottimizzazione flatten e gestisce correttamente gli aggiornamenti a cascata quando gli stili del genitore cambiano.

Proprietà e API del componente View

Il componente View ha un ricco insieme di props per controllare aspetto, layout e interattività. Tutte le props si dividono in diverse categorie: props di stile, eventi tattili, accessibilità e caratteristiche specifiche della piattaforma. Esploriamo i gruppi principali.

Props di stile di View

View supporta tutte le proprietà CSS standard per piattaforme mobili. Le principali includono: flexDirection, justifyContent, alignItems per il posizionamento; margin, padding per la spaziatura; backgroundColor, borderRadius per l'aspetto; width, height, maxHeight per il dimensionamento.

Eventi tattili e gesti

View può gestire eventi tattili tramite le props onStartShouldSetResponder, onMoveShouldSetResponder e onResponderGrant. Questi eventi consentono di implementare gesti personalizzati senza librerie. Per i tap standard, vengono utilizzati onTouchStart, onTouchEnd e onPress (tramite Pressable o TouchableOpacity).

Props specifiche della piattaforma

Su iOS, shadowColor, shadowOffset, shadowOpacity, shadowRadius sono disponibili per le ombre. Su Android, queste proprietà vengono ignorate — invece viene utilizzato elevation (un'ombra simile a una carta). Il callback onLayout viene attivato quando le dimensioni di View cambiano, utile per layout adattivi.

Layout con View e Flexbox

Flexbox è l'unico meccanismo di layout in React Native (a differenza del web, dove Grid e Float sono disponibili). Tutto il posizionamento degli elementi avviene tramite le proprietà Flexbox del componente View. Per impostazione predefinita, View ha flexDirection impostato su column, non row come sul web, che corrisponde all'orientamento verticale degli schermi mobili.

Principali proprietà Flexbox in View

flexDirection determina la direzione dell'asse principale: column (predefinito) o row. justifyContent controlla la distribuzione lungo l'asse principale (flex-start, center, space-between). alignItems — lungo l'asse trasversale (stretch — valore predefinito). flex specifica la proporzione di spazio disponibile per un elemento figlio.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const CardLayout = () => (
    <View style={styles.card}>
        <View style={styles.row}>
            <View style={styles.avatar} />
            <View style={styles.content}>
                <Text style={styles.name}>John Doe</Text>
                <Text style={styles.role}>Developer</Text>
            </View>
        </View>
    </View>
);

L'esempio mostra una struttura tipica: un View esterno — carta, una row interna — una riga con avatar e blocco di testo, content — una colonna con nome e ruolo. Questa struttura View annidata è lo standard per qualsiasi schermata React Native.

Differenze tra View e div HTML

Sebbene View sia concettualmente simile al div HTML, ci sono differenze chiave importanti da comprendere quando si porta codice dal web a React Native. Queste differenze riguardano il rendering, gli stili e il comportamento predefinito.

La differenza più importante è flexDirection: column per impostazione predefinita. Ciò significa che senza configurazione esplicita, gli elementi figli vengono disposti verticalmente, non orizzontalmente. La seconda differenza: la larghezza e l'altezza di View per impostazione predefinita si estendono per riempire tutto lo spazio disponibile del genitore (analogo a width: 100% in CSS).

Esempi pratici con View

Diamo un'occhiata a due esempi reali di utilizzo di View nelle applicazioni React Native: centrare il contenuto a tutto schermo e creare una griglia di carte reattiva. Entrambi i pattern appaiono in ogni progetto.

Esempio 1: Schermata segnaposto con centratura

Per creare uno stato vuoto, viene utilizzato un View con flex: 1 e centratura su entrambi gli assi. Questo è un pattern standard per schermate di caricamento, stati di errore e liste vuote.

const EmptyState = ({ message }) => (
    <View style={styles.container}>
        <Text style={styles.icon}>{icon}</Text>
        <Text style={styles.message}>{message}</Text>
    </View>
);

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
    icon: { fontSize: 48 },
    message: { fontSize: 16, color: '#666', marginTop: 16 },
});

La combinazione di justifyContent: center e alignItems: center in un View con flex: 1 centra il contenuto su entrambi gli assi a tutto schermo. Questo è il pattern più comune di utilizzo di View in React Native.

Esempio 2: Griglia di carte con Flexbox

Per visualizzare due colonne di prodotti o articoli, viene utilizzato un View con flexDirection: row, flexWrap: wrap e Views figli con larghezza fissa. Questo pattern sostituisce CSS Grid in React Native.

const ProductGrid = ({ products }) => (
    <View style={styles.grid}>
        {products.map((product) => (
            <View key={product.id} style={styles.card}>
                <Image source={{ uri: product.image }} />
                <Text>{product.name}</Text>
            </View>
        ))}
    </View>
);

const styles = StyleSheet.create({
    grid: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
    },
    card: { width: '48%', marginBottom: 16 },
});

In questo esempio, il View esterno con flexWrap: wrap funge da analogo di CSS Grid. Ogni carta occupa il 48% della larghezza, lasciando spazi tra le colonne. Questo è un pattern tipico per cataloghi e feed di contenuti.