Text: o que é, exibição de texto e React Native

O que é Text no React Native

Text é um componente React Native para exibir conteúdo textual. Ao contrário do desenvolvimento web, onde existem muitas tags semânticas para texto, no React Native todos os elementos de texto são criados através do Text. O componente pode exibir tanto texto simples quanto estruturas complexas com Text aninhados e fragmentos estilizados.

O Text lida automaticamente com a quebra de linha, gerencia a família de fontes, tamanho, cor e alinhamento. O componente suporta eventos de toque (onPress), permitindo criar links clicáveis sem wrappers adicionais. Uma limitação importante: o Text não pode ser aninhado diretamente dentro de View — apenas dentro de outros componentes Text ou como filhos diretos.

De acordo com React Native Nested Text, 2024, componentes Text aninhados herdam estilos do pai. Isso permite definir um estilo base no nível superior e sobrescrever propriedades individuais para fragmentos específicos — semelhante a como span funciona com CSS na web.

Propriedades e API do componente Text

O componente Text fornece um conjunto de props para controlar exibição, comportamento e acessibilidade. Categorias principais: props de estilo (fonte, tamanho, cor, alinhamento), props de exibição (numberOfLines, lineBreakMode) e props interativas (onPress, onLongPress).

Props de exibição de texto

numberOfLines limita o número de linhas exibidas, adicionando reticências no final. ellipsizeMode controla a posição das reticências (head, middle, tail, clip). adjustsFontSizeToFit reduz automaticamente o tamanho da fonte para caber o texto dentro dos limites definidos. lineBreakMode determina como o texto é truncado além de numberOfLines.

Props interativas

O Text suporta onPress e onLongPress para manipular toques. Isso permite criar links de texto sem usar TouchableOpacity. onTextLayout retorna informações sobre o layout do texto após a renderização — útil para animações e posicionamento.

Props específicas de plataforma

No iOS, estão disponíveis disabled (desabilita o texto), selectable (habilita seleção) e dataDetectorTypes (detecção automática de links, telefones, endereços). No Android, estão disponíveis selectable (através de textSelectable) e includeFontPadding (remove o preenchimento extra).

Diferenças entre Text e os elementos p e span do HTML

Embora Text visualmente se assemelhe às tags HTML p e span, as diferenças arquitetônicas são significativas. O React Native não possui um modelo DOM com elementos de texto semânticos — todos os nós de texto são manipulados através de um único componente Text com várias props.

A diferença chave é a herança de estilos através do aninhamento de Text. Se um Text externo tem fontSize: 18 e color: blue, todos os Text aninhados herdam esses estilos. Qualquer prop pode ser sobrescrita no Text interno definindo um valor específico. Isso economiza código e mantém a estrutura mais limpa.

Estilização de texto e fontes

O Text suporta a maioria das propriedades CSS para tipografia: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. No React Native, as fontes são conectadas no nível da plataforma, não através de @font-face.

Uso de fontes personalizadas

Para usar fontes personalizadas, elas devem ser adicionadas à pasta assets/fonts e especificadas no react-native.config.js. Após reconstruir a aplicação, a fonte fica disponível através de fontFamily. O React Native não suporta fontes web (Google Fonts) diretamente — é necessário baixar arquivos .ttf ou .otf.

Herança e cascata de estilos

O mecanismo de herança no Text difere do CSS. Os estilos são transmitidos apenas de Text para Text aninhado, mas não de View para Text. Para definir uma fonte para toda a aplicação, use defaultProps do componente Text ou um componente wrapper personalizado.

<Text style={{ fontSize: 18, color: '#333' }}>
    This text is 18px and color #333
    <Text style={{ fontWeight: 'bold', color: '#007AFF' }}>
        bold and blue
    </Text>
    back to #333 color
</Text>

Neste exemplo, o Text externo define fontSize: 18 e color: #333. O Text interno herda fontSize (18), mas sobrescreve fontWeight para bold e color para #007AFF. O Text externo herda apenas seus próprios estilos. Esta é uma analogia exata de como span aninhado funciona em HTML.

Exemplos práticos com Text

Vejamos dois casos de uso típicos do Text no React Native: formatação de texto com aninhamento e criação de um componente clicável com limite de linhas.

Exemplo 1: cartão de notícia com formatação

Neste exemplo, o Text é usado para exibir texto multilinha com elementos destacados: título, data e conteúdo com um link.

const NewsCard = ({ title, date, content }) => (
    <View style={styles.card}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.date}>{date}</Text>
        <Text style={styles.content}>
            {content}
            {' ' }
            <Text
                style={styles.link}
                onPress={() => Linking.openURL(url)}
            >
                Read more
            </Text>
        </Text>
    </View>
);

Esta estrutura tem três componentes Text independentes (título, data, conteúdo), cada um com seu próprio estilo. Dentro do Text de conteúdo, outro Text com onPress está aninhado para o link. Este padrão é usado para feeds de notícias, blogs e comentários.

Exemplo 2: texto com limite de linhas

Para exibir prévias de texto com reticências, numberOfLines é usado. Este é um padrão padrão para cartões de produtos e listas de artigos.

<Text
    numberOfLines={2}
    ellipsizeMode="tail"
    style={styles.preview}
>
    {longDescription}
</Text>

A propriedade numberOfLines = 2 limita o texto a duas linhas. Se o texto for mais longo, o React Native adiciona automaticamente reticências no final da segunda linha. O parâmetro ellipsizeMode: 'tail' especifica que as reticências devem estar no final (head, middle e clip também estão disponíveis).