View: qué es, propiedades del contenedor y React Native

Qué es View en React Native

View es un componente fundamental de React Native que sirve como contenedor para otros componentes. Admite estilización mediante StyleSheet, maquetación mediante Flexbox, manejo táctil, animaciones y transformaciones. View es una abstracción sobre elementos contenedores nativos: UIView en iOS y android.view.View en Android.

En React Native no es posible usar elementos HTML — en su lugar, todos los maquetaciones se construyen con View. Incluso Text e Image suelen estar envueltos en View para su posicionamiento. El componente puede estar vacío (solo un contenedor) o contener cualquier cantidad de elementos secundarios a cualquier profundidad de anidación.

View admite renderizado en ambas plataformas desde un único código JavaScript. Las propiedades de Flexbox, márgenes, fondo, sombras y bordes funcionan igual en iOS y Android. Las diferencias entre plataformas son mínimas — por ejemplo, las sombras en iOS usan shadowColor/shadowOffset, mientras que en Android usan elevation.

Según React Native Layout Docs, 2024, View está optimizado para dispositivos móviles: no crea vistas nativas adicionales durante la optimización flatten y maneja correctamente las actualizaciones en cascada cuando cambian los estilos del padre.

Propiedades y API del componente View

El componente View tiene un rico conjunto de props para controlar la apariencia, la maquetación y la interactividad. Todas las props se dividen en varias categorías: props de estilo, eventos táctiles, accesibilidad y características específicas de la plataforma. Exploremos los grupos clave.

Props de estilo de View

View admite todas las propiedades CSS estándar para plataformas móviles. Las principales incluyen: flexDirection, justifyContent, alignItems para posicionamiento; margin, padding para espaciado; backgroundColor, borderRadius para apariencia; width, height, maxHeight para dimensiones.

Eventos táctiles y gestos

View puede manejar eventos táctiles mediante las props onStartShouldSetResponder, onMoveShouldSetResponder y onResponderGrant. Estos eventos permiten implementar gestos personalizados sin librerías. Para toques estándar se usan onTouchStart, onTouchEnd y onPress (a través de Pressable o TouchableOpacity).

Props específicas de plataforma

En iOS están disponibles shadowColor, shadowOffset, shadowOpacity, shadowRadius para sombras. En Android, estas propiedades se ignoran — en su lugar se usa elevation (una sombra tipo tarjeta). El callback onLayout se activa cuando cambian las dimensiones de View, lo que es útil para maquetaciones adaptativas.

Maquetación con View y Flexbox

Flexbox es el único mecanismo de maquetación en React Native (a diferencia de la web, donde están disponibles Grid y Float). Todo el posicionamiento de elementos se realiza mediante las propiedades Flexbox del componente View. Por defecto, View tiene flexDirection establecido en column, no row como en la web, lo que coincide con la orientación vertical de las pantallas móviles.

Propiedades clave de Flexbox en View

flexDirection determina la dirección del eje principal: column (por defecto) o row. justifyContent controla la distribución a lo largo del eje principal (flex-start, center, space-between). alignItems — a lo largo del eje transversal (stretch — valor por defecto). flex especifica la proporción de espacio disponible para un elemento secundario.

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>
);

El ejemplo muestra una estructura típica: un View exterior — tarjeta, una row interior — una fila con un avatar y un bloque de texto, content — una columna con nombre y rol. Esta estructura anidada de View es el estándar para cualquier pantalla de React Native.

Diferencias entre View y div de HTML

Aunque View es conceptualmente similar al div de HTML, existen diferencias clave que es importante comprender al migrar código de la web a React Native. Estas diferencias afectan al renderizado, los estilos y el comportamiento por defecto.

La diferencia más importante es flexDirection: column por defecto. Esto significa que sin configuración explícita, los elementos secundarios se disponen verticalmente, no horizontalmente. La segunda diferencia: el ancho y alto de View por defecto se estiran para ocupar todo el espacio disponible del padre (análogo a width: 100% en CSS).

Ejemplos prácticos con View

Veamos dos ejemplos reales del uso de View en aplicaciones React Native: centrar contenido en toda la pantalla y crear una cuadrícula de tarjetas adaptable. Ambos patrones aparecen en cada proyecto.

Ejemplo 1: Pantalla de placeholder con centrado

Para crear un estado vacío se usa un View con flex: 1 y centrado en ambos ejes. Este es un patrón estándar para pantallas de carga, estados de error y listas vacías.

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 combinación de justifyContent: center y alignItems: center en un View con flex: 1 centra el contenido en ambos ejes en toda la pantalla. Este es el patrón más común de uso de View en React Native.

Ejemplo 2: Cuadrícula de tarjetas con Flexbox

Para mostrar dos columnas de productos o artículos se usa un View con flexDirection: row, flexWrap: wrap y Views secundarios con ancho fijo. Este patrón reemplaza a CSS Grid en 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 },
});

En este ejemplo, el View exterior con flexWrap: wrap funciona como un análogo de CSS Grid. Cada tarjeta ocupa el 48% del ancho, dejando espacios entre columnas. Este es un patrón típico para catálogos y feeds de contenido.