View: o que é, propriedades do contêiner e React Native

O que é View no React Native

View é um componente fundamental do React Native que serve como contêiner para outros componentes. Ele suporta estilização através do StyleSheet, layout através do Flexbox, manipulação de toque, animações e transformações. View é uma abstração sobre elementos contêineres nativos: UIView no iOS e android.view.View no Android.

No React Native, não é possível usar elementos HTML — em vez disso, todos os layouts são construídos a partir de View. Até mesmo Text e Image geralmente são envolvidos em View para posicionamento. O componente pode estar vazio (apenas um contêiner) ou conter qualquer número de elementos filhos em qualquer profundidade de aninhamento.

View suporta renderização em ambas as plataformas a partir de uma única base de código JavaScript. As propriedades Flexbox, margens, fundo, sombras e bordas funcionam de forma idêntica no iOS e Android. As diferenças entre plataformas são mínimas — por exemplo, sombras no iOS usam shadowColor/shadowOffset, enquanto no Android usam elevation.

De acordo com React Native Layout Docs, 2024, o View é otimizado para dispositivos móveis: ele não cria visualizações nativas extras durante a otimização flatten e lida corretamente com atualizações em cascata quando os estilos do pai mudam.

Propriedades e API do componente View

O componente View tem um conjunto rico de props para controlar aparência, layout e interatividade. Todas as props se dividem em várias categorias: props de estilo, eventos de toque, acessibilidade e características específicas da plataforma. Vamos explorar os grupos principais.

Props de estilo do View

View suporta todas as propriedades CSS padrão para plataformas móveis. As principais incluem: flexDirection, justifyContent, alignItems para posicionamento; margin, padding para espaçamento; backgroundColor, borderRadius para aparência; width, height, maxHeight para dimensionamento.

Eventos de toque e gestos

View pode lidar com eventos de toque através das props onStartShouldSetResponder, onMoveShouldSetResponder e onResponderGrant. Esses eventos permitem implementar gestos personalizados sem bibliotecas. Para toques padrão, são usados onTouchStart, onTouchEnd e onPress (via Pressable ou TouchableOpacity).

Props específicas da plataforma

No iOS, estão disponíveis shadowColor, shadowOffset, shadowOpacity, shadowRadius para sombras. No Android, essas propriedades são ignoradas — em vez disso, é usado elevation (uma sombra tipo cartão). O callback onLayout é acionado quando as dimensões do View mudam, o que é útil para layouts adaptativos.

Layout com View e Flexbox

Flexbox é o único mecanismo de layout no React Native (ao contrário da web, onde Grid e Float estão disponíveis). Todo o posicionamento de elementos é feito através das propriedades Flexbox do componente View. Por padrão, o View tem flexDirection definido como column, não row como na web, o que corresponde à orientação vertical das telas móveis.

Propriedades principais do Flexbox no View

flexDirection determina a direção do eixo principal: column (padrão) ou row. justifyContent controla a distribuição ao longo do eixo principal (flex-start, center, space-between). alignItems — ao longo do eixo transversal (stretch — valor padrão). flex especifica a proporção de espaço disponível para um elemento filho.

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

O exemplo mostra uma estrutura típica: um View externo — cartão, uma row interna — uma linha com avatar e bloco de texto, content — uma coluna com nome e função. Esta estrutura aninhada de View é o padrão para qualquer tela React Native.

Diferenças entre View e div do HTML

Embora View seja conceitualmente semelhante ao div do HTML, existem diferenças importantes que é crucial entender ao migrar código da web para React Native. Essas diferenças dizem respeito à renderização, estilos e comportamento padrão.

A diferença mais importante é flexDirection: column por padrão. Isso significa que sem configuração explícita, os elementos filhos são dispostos verticalmente, não horizontalmente. A segunda diferença: a largura e altura do View por padrão se estendem para preencher todo o espaço disponível do pai (análogo a width: 100% no CSS).

Exemplos práticos com View

Vamos ver dois exemplos reais de uso de View em aplicações React Native: centralizar conteúdo em tela cheia e criar uma grade de cartões responsiva. Ambos os padrões aparecem em todo projeto.

Exemplo 1: Tela placeholder com centralização

Para criar um estado vazio, usa-se um View com flex: 1 e centralização em ambos os eixos. Este é um padrão padrão para telas de carregamento, estados de erro e listas vazias.

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

A combinação de justifyContent: center e alignItems: center em um View com flex: 1 centraliza o conteúdo em ambos os eixos em tela cheia. Este é o padrão mais comum de uso do View no React Native.

Exemplo 2: Grade de cartões com Flexbox

Para exibir duas colunas de produtos ou artigos, usa-se um View com flexDirection: row, flexWrap: wrap e Views filhos com largura fixa. Este padrão substitui o CSS Grid no 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 },
});

Neste exemplo, o View externo com flexWrap: wrap funciona como um análogo do CSS Grid. Cada cartão ocupa 48% da largura, deixando espaços entre as colunas. Este é um padrão típico para catálogos e feeds de conteúdo.