Text: qué es, visualización de texto y React Native

Qué es Text en React Native

Text es un componente de React Native para mostrar contenido textual. A diferencia del desarrollo web, donde existen muchas etiquetas semánticas para el texto, en React Native todos los elementos de texto se crean mediante Text. El componente puede mostrar tanto texto simple como estructuras complejas con Text anidados y fragmentos estilizados.

Text maneja automáticamente el ajuste de líneas, gestiona la familia tipográfica, el tamaño, el color y la alineación. El componente admite eventos táctiles (onPress), lo que permite crear enlaces cliqueables sin envoltorios adicionales. Una limitación importante: Text no se puede anidar directamente dentro de View — solo dentro de otros componentes Text o como hijos directos.

Según React Native Nested Text, 2024, los componentes Text anidados heredan estilos del padre. Esto permite establecer un estilo base en el nivel superior y sobrescribir propiedades individuales para fragmentos específicos — similar a cómo span funciona con CSS en la web.

Propiedades y API del componente Text

El componente Text proporciona un conjunto de props para controlar la visualización, el comportamiento y la accesibilidad. Categorías clave: props de estilo (fuente, tamaño, color, alineación), props de visualización (numberOfLines, lineBreakMode) y props interactivas (onPress, onLongPress).

Props de visualización de texto

numberOfLines limita el número de líneas mostradas, añadiendo puntos suspensivos al final. ellipsizeMode controla la posición de los puntos suspensivos (head, middle, tail, clip). adjustsFontSizeToFit reduce automáticamente el tamaño de la fuente para que el texto quepa dentro de los límites establecidos. lineBreakMode determina cómo se trunca el texto más allá de numberOfLines.

Props interactivas

Text admite onPress y onLongPress para manejar toques. Esto permite crear enlaces de texto sin usar TouchableOpacity. onTextLayout devuelve información sobre la disposición del texto después del renderizado — útil para animaciones y posicionamiento.

Props específicas de plataforma

En iOS están disponibles disabled (deshabilita el texto), selectable (habilita la selección) y dataDetectorTypes (detección automática de enlaces, teléfonos, direcciones). En Android están disponibles selectable (a través de textSelectable) e includeFontPadding (elimina el relleno adicional).

Diferencias entre Text y los elementos p y span de HTML

Aunque Text visualmente se asemeja a las etiquetas HTML p y span, las diferencias arquitectónicas son significativas. React Native carece de un modelo DOM con elementos de texto semánticos — todos los nodos de texto se manejan a través de un único componente Text con varios props.

La diferencia clave es la herencia de estilos mediante el anidamiento de Text. Si un Text externo tiene fontSize: 18 y color: blue, todos los Text anidados heredan estos estilos. Cualquier prop se puede sobrescribir en el Text interno estableciendo un valor específico. Esto ahorra código y mantiene la estructura más limpia.

Estilización de texto y fuentes

Text admite la mayoría de las propiedades CSS para tipografía: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. En React Native, las fuentes se conectan a nivel de plataforma, no mediante @font-face.

Uso de fuentes personalizadas

Para usar fuentes personalizadas, deben agregarse a la carpeta assets/fonts y especificarse en react-native.config.js. Después de reconstruir la aplicación, la fuente estará disponible a través de fontFamily. React Native no admite fuentes web (Google Fonts) directamente — se requiere descargar archivos .ttf o .otf.

Herencia y cascada de estilos

El mecanismo de herencia en Text difiere de CSS. Los estilos se transmiten solo de Text a Text anidado, pero no de View a Text. Para establecer una fuente para toda la aplicación, se usan defaultProps del componente Text o un componente envoltorio 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>

En este ejemplo, el Text externo establece fontSize: 18 y color: #333. El Text interno hereda fontSize (18), pero sobrescribe fontWeight a bold y color a #007AFF. El Text externo solo hereda sus propios estilos. Esta es una analogía exacta de cómo funciona span anidado en HTML.

Ejemplos prácticos con Text

Veamos dos casos de uso típicos de Text en React Native: formato de texto con anidamiento y creación de un componente cliqueable con límite de líneas.

Ejemplo 1: tarjeta de noticia con formato

En este ejemplo, Text se utiliza para mostrar texto multilínea con elementos destacados: título, fecha y contenido con un enlace.

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 estructura tiene tres componentes Text independientes (título, fecha, contenido), cada uno con su propio estilo. Dentro del Text de contenido, hay otro Text anidado con onPress para el enlace. Este patrón se utiliza para feeds de noticias, blogs y comentarios.

Ejemplo 2: texto con límite de líneas

Para mostrar vistas previas de texto con puntos suspensivos, se usa numberOfLines. Este es un patrón estándar para tarjetas de productos y listas de artículos.

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

La propiedad numberOfLines = 2 limita el texto a dos líneas. Si el texto es más largo, React Native añade automáticamente puntos suspensivos al final de la segunda línea. El parámetro ellipsizeMode: 'tail' especifica que los puntos suspensivos deben estar al final (también están disponibles head, middle, clip).